mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.39k stars 32.15k forks source link

[material-ui][Tabs] Implement without cloneElement #28064

Open dkadrios opened 3 years ago

dkadrios commented 3 years ago

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 ```
DiegoAndai commented 10 months ago

For anyone who finds this issue: The Hidden component was removed in v5. You can achieve the desired result without the reported error using the sx prop: https://codesandbox.io/s/28064-alternative-49zlg2?file=/src/Demo.tsx:1406-1457

We will remove cloneElement from the tabs component in Material UI v6 using Base UI's tabs hooks.