Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
dkadrios opened this issue Aug 30, 2021 · 1 comment
Open
2 tasks done

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

dkadrios opened this issue Aug 30, 2021 · 1 comment
Assignees
Labels
component: tabs This is the name of the generic UI component, not the React module! new feature New feature or request

Comments

@dkadrios
Copy link

  • 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
@dkadrios dkadrios added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 30, 2021
@eps1lon eps1lon added component: tabs This is the name of the generic UI component, not the React module! new feature New feature or request and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 31, 2021
@eps1lon eps1lon changed the title Can TabContext support dynamic tabs? [Tabs] Implement without cloneElement Aug 31, 2021
@DiegoAndai DiegoAndai changed the title [Tabs] Implement without cloneElement [material-ui][Tabs] Implement without cloneElement Nov 2, 2023
@DiegoAndai DiegoAndai self-assigned this Nov 2, 2023
@DiegoAndai DiegoAndai added this to the Material UI: v6 milestone Nov 2, 2023
@DiegoAndai DiegoAndai added the v6.x label Nov 2, 2023
@DiegoAndai
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
Status: Backlog
Development

No branches or pull requests

3 participants