[material-ui][Tabs] Implement without cloneElement
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Summary 💡
I have a tab set where I'd like one extra tab to only be present on xs screens. I thought I could just wrap the Tab and TabPanel in a Hidden tag; something like:
<TabContext ... >
<TabList ... >
<Tab ... />
<Hidden smUp>
<Tab ... />
</Hidden>
</TabList>
<TabPanel ... >
<Hidden smUp>
<TabPanel ... >
</Hidden>
</TabContext>
...but that generates errors such as:
Warning: Failed prop type: The following props are not supported: `aria-controls`,
`id`, `fullWidth`, `indicator`, `selected`, `selectionFollowsFocus`, `onChange`,
`textColor`, `value`. Please remove them.
at HiddenJs
Examples 🌈
I forked the tabs example (from lab) and added the hidden use case
https://codesandbox.io/s/material-demo-forked-wmtjy?file=/demo.js
Is this something that the lab tab components can support? (assuming I'm not doing something silly)
Your Environment 🌎
`npx @material-ui/envinfo`
System:
OS: macOS 11.5.2
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 384.38 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v12.14.1/bin/npm
Managers:
Homebrew: 2.5.0 - /usr/local/bin/brew
pip2: 20.1.1 - /usr/local/bin/pip2
pip3: 20.1.1 - ~/.pyenv/shims/pip3
RubyGems: 3.0.3 - /usr/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 4.2.1 - /usr/bin/gcc
Git: 2.15.0 - /usr/local/bin/git
Clang: 12.0.5 - /usr/bin/clang
FFmpeg: 4.3.1 - /usr/local/bin/ffmpeg
Servers:
Apache: 2.4.46 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.7 - /usr/local/bin/docker
VirtualBox: 6.1.16 - /usr/local/bin/vboxmanage
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
IDEs:
Atom: 1.58.0
Nano: 2.0.6 - /usr/bin/nano
VSCode: 1.59.1 - /usr/local/bin/code
Vim: 8.2 - /usr/bin/vim
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
Languages:
Bash: 5.0.17 - /usr/local/bin/bash
Perl: 5.30.2 - /usr/bin/perl
PHP: 7.3.24 - /usr/bin/php
Python: 3.8.3 - /Users/darin/.pyenv/shims/python
Python3: 3.8.3 - /Users/darin/.pyenv/shims/python3
Ruby: 2.6.3 - /usr/bin/ruby
Databases:
PostgreSQL: 9.6.18 - /usr/local/bin/postgres
SQLite: 3.32.3 - /usr/bin/sqlite3
Browsers:
Chrome: 92.0.4515.159
Firefox: 90.0.2
Safari: 14.1.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the hidden-tab case from the linked CodeSandbox and compare it with the lab tabs example. Trace how TabContext, TabList, Tab, and TabPanel compose children and where the reported prop warnings originate. Done means the Hidden-wrapped tab and panel work without the current unsupported-prop warnings, with behavior covered by the relevant tabs tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100