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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][Tabs] Deprecate *Props and complete slots, slotProps #45012

Merged
merged 25 commits into from
Feb 4, 2025
Merged

[material-ui][Tabs] Deprecate *Props and complete slots, slotProps #45012

merged 25 commits into from
Feb 4, 2025

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jan 13, 2025 •
edited
Loading

part of #41281

  • Added slots: root, scroller, list, scrollbar, indicator, scrollButtons, startScrollButtonIcon, endScrollButtonIcon.
    These are existing slots and classes (rename flexContainer to list).
  • Deprecate flexContainer and flexContainerVertical classes in favor of list + vertical
  • Add props and classes codemods.

@siriwatknp siriwatknp added the component: tabs This is the name of the generic UI component, not the React module! label Jan 13, 2025
@siriwatknp siriwatknp mentioned this pull request Jan 13, 2025
Open
39 tasks
@mui-bot
Copy link

mui-bot commented Jan 13, 2025 •
edited
Loading

Netlify deploy preview

TabList: parsed: +1.20% , gzip: +1.16%
@material-ui/core: parsed: +0.12% , gzip: +0.14%
@material-ui/lab: parsed: +0.23% , gzip: +0.24%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against c25cb53

@siriwatknp siriwatknp marked this pull request as ready for review January 13, 2025 07:07
@siriwatknp siriwatknp requested a review from DiegoAndai January 13, 2025 07:07
sai6855
sai6855 approved these changes Jan 17, 2025
View reviewed changes
Copy link
Contributor

@sai6855 sai6855 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just left a comment

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 24, 2025
@siriwatknp
Copy link
Member Author

siriwatknp commented Jan 27, 2025 •
edited
Loading

@DiegoAndai @aarongarciah I found this experimental section about the TabList. Changing flexContainer to list slot could make it more confusing with TabList because someone might think that they can use TabList for the list slot (which is not true)?

The TabList in the lab is a wrapper of Tabs which is different from Base UI. Maybe renaming the slots in v8 entirely is a better option just to reduce the migration work, what do you think?

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 27, 2025
@DiegoAndai
Copy link
Member

DiegoAndai commented Jan 27, 2025 •
edited
Loading

@siriwatknp from https://mui.com/material-ui/react-tabs/, it seems to me that TabList is a bad name for that component.

What about this plan?

In v6 & v7:

  • Add slots.tablist and slotProps.tablist
  • Add styleOverrides.tablist, and deprecate styleOverrides.flexContainer
  • Add classes.tablist, and deprecate classes.flexContainer

I don't think there will be many people confusing TabList and slots.tablist. If there is, we can change the TabList name to TabsContainer

Only in v7:

  • Remove styleOverrides.flexContainer and classes.flexContainer
  • Rename TabList to TabsContainer

@siriwatknp
Copy link
Member Author

  • Add slots.tablist and slotProps.tablist

For the name, I prefer list to be consistent with https://base-ui.com/react/components/tabs#list

@siriwatknp
Copy link
Member Author

@DiegoAndai flexContainer is deprecated in favor of list. Added tabs-classes codemod.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 31, 2025
@siriwatknp siriwatknp requested a review from DiegoAndai January 31, 2025 08:19
DiegoAndai
DiegoAndai reviewed Jan 31, 2025
View reviewed changes
docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/tabsClasses.ts Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/tabsClasses.ts Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/tabsClasses.ts Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/Tabs.test.js Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/Tabs.js Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/Tabs.js Show resolved Hide resolved
packages/mui-material/src/Tabs/Tabs.d.ts Outdated Show resolved Hide resolved
packages/mui-material/src/Tabs/Tabs.d.ts Outdated Show resolved Hide resolved
DiegoAndai
DiegoAndai approved these changes Feb 3, 2025
View reviewed changes
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@siriwatknp siriwatknp enabled auto-merge (squash) February 4, 2025 07:33
@siriwatknp siriwatknp merged commit 40a4e6b into mui:master Feb 4, 2025
22 checks passed
@DiegoAndai
Copy link
Member

@siriwatknp remember we have to cherry-pick these to v6.x.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aarongarciah aarongarciah aarongarciah left review comments

@DiegoAndai DiegoAndai DiegoAndai approved these changes

@sai6855 sai6855 sai6855 approved these changes

Assignees
No one assigned
Labels
component: tabs This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@siriwatknp @mui-bot @DiegoAndai @aarongarciah @sai6855