Skip to content

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

Merged
siriwatknp merged 4 commits into
mui: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 into
mui:nextfrom
siriwatknp:fix/tabs-min-width

Conversation

@siriwatknp

@siriwatknp siriwatknp commented May 26, 2021

Copy link
Copy Markdown
Member

@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

mui-pr-bot commented May 26, 2021

Copy link
Copy Markdown

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 4272b72

justifyContent: 'center',
width: '100%',
flexDirection: 'column',
lineHeight: 1.25,

Copy link
Copy Markdown
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.

Comment thread packages/material-ui/src/Tab/Tab.js
@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

@oliviertassinari oliviertassinari left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Looks good

Comment thread packages/material-ui/src/Tab/Tab.js
@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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Member

Choose a reason for hiding this comment

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

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