Skip to content

[Tabs] Update min & max width and remove minWidth media query#26458

Merged
siriwatknp merged 4 commits intomui:nextfrom
siriwatknp:fix/tabs-min-width
May 28, 2021
Merged

[Tabs] Update min & max width and remove minWidth media query#26458
siriwatknp merged 4 commits intomui:nextfrom
siriwatknp:fix/tabs-min-width

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented May 26, 2021

closes #15824

The change follow material design spec

Preview: https://deploy-preview-26458--material-ui.netlify.app/components/tabs/

@siriwatknp siriwatknp added breaking change Introduces changes that are not backward compatible. scope: tabs Changes related to the tabs. labels May 26, 2021
@mui-pr-bot
Copy link

mui-pr-bot commented May 26, 2021

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 4272b72

justifyContent: 'center',
width: '100%',
flexDirection: 'column',
lineHeight: 1.25,
Copy link
Member Author

Choose a reason for hiding this comment

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

current wrapper inherit line-height: 1.75 which ~24px make 2 lines looks wierd. using 1.25 make it looks closer to the spec.

@oliviertassinari oliviertassinari added the design: material This is about Material Design, please involve a visual or UX designer in the process label May 26, 2021
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

Looks good

@oliviertassinari oliviertassinari changed the title [Tabs] update min & max width and remove minWidth media query [Tabs] Update min & max width and remove minWidth media query May 27, 2021
@siriwatknp siriwatknp merged commit d81caa3 into mui:next May 28, 2021
@siriwatknp siriwatknp deleted the fix/tabs-min-width branch May 28, 2021 02:40
@siriwatknp siriwatknp mentioned this pull request May 28, 2021
1 task
whiteSpace: 'normal',
textAlign: 'center',
[theme.breakpoints.up('sm')]: {
minWidth: 160,
Copy link
Contributor

Choose a reason for hiding this comment

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

This change actually makes the minWidth smaller on up-sm. From 160px to 90px. Please add more detail on the migration page thanks.

Copy link
Contributor

Choose a reason for hiding this comment

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

Rollback to old behavior:

        MuiTab: {
            styleOverrides: {
                root: {
                    // up-sm
                    '@media screen and (min-width: 600px)': {
                        minWidth: 160,
                    },
                },
            },
        },

Copy link
Member

Choose a reason for hiding this comment

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

The described outcome is expected. I guess we can clarify https://next.material-ui.com/guides/migration-v4/#tab

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

Labels

breaking change Introduces changes that are not backward compatible. design: material This is about Material Design, please involve a visual or UX designer in the process scope: tabs Changes related to the tabs.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tabs] Remove min-width media query

4 participants