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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tab] Fix alignment when using multiple children #14844

Merged
merged 1 commit into from Mar 11, 2019

Conversation

HaNdTriX
Copy link
Contributor

When using a <Tab /> with multiple children (Icons, Badges, Labels) the marginBottom got applied to all of these elements. This commit changes the rule to only effect the first child instead of all children. More info.

Before

localhost_3000_demos_tabs_

After

localhost_3000_demos_tabs_ (1)

Premium Theme

I didn't change the code in the premium theme because there it actually makes sense to give the badge a little space to the right.

localhost_3000_premium-themes_instapaper (1)
localhost_3000_premium-themes_instapaper

This is how the changed example would have looked like:

localhost_3000_premium-themes_instapaper (3)

The disadvantage of the current implementation (inside the premium theme) is that badges might trigger a layout jump as soon as the badge changes visibility. Nevertheless I currently don't have a workaround for that edge case.

Related PR: #14638

When using a <Tab> with multiple children (Icons, Badges, Labels) the marginBottom got applied to all of these elements. This commit changes the rule to only effect the first child instead of all children.
@oliviertassinari oliviertassinari added PR: good for merge component: tabs This is the name of the generic UI component, not the React module! labels Mar 11, 2019
@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: 5ae95b8...93fb94a

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core 0.00% 0.00% 362,721 362,724 92,218 92,220
@material-ui/core/Paper 0.00% 0.00% 68,878 68,878 20,170 20,170
@material-ui/core/Paper.esm 0.00% 0.00% 63,340 63,340 19,261 19,261
@material-ui/core/Popper 0.00% 0.00% 30,458 30,458 10,570 10,570
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 17,284 17,284 5,700 5,700
@material-ui/core/useMediaQuery 0.00% 0.00% 2,471 2,471 1,035 1,035
@material-ui/lab 0.00% 0.00% 170,809 170,809 50,092 50,092
@material-ui/styles 0.00% 0.00% 57,220 57,220 16,221 16,221
@material-ui/system 0.00% 0.00% 17,041 17,041 4,493 4,493
Button 0.00% 0.00% 91,216 91,216 26,954 26,954
Modal 0.00% 0.00% 90,261 90,261 26,720 26,720
colorManipulator 0.00% 0.00% 3,232 3,232 1,298 1,298
docs.landing 0.00% 0.00% 51,908 51,908 11,302 11,302
docs.main 0.00% 0.00% 647,777 647,777 201,529 201,529
packages/material-ui/build/umd/material-ui.production.min.js 0.00% 0.00% 311,159 311,162 85,237 85,239

Generated by 🚫 dangerJS against 93fb94a

@oliviertassinari oliviertassinari merged commit 5084344 into mui:next Mar 11, 2019
@oliviertassinari
Copy link
Member

@HaNdTriX Thanks.

@HaNdTriX HaNdTriX deleted the tab-tighten-selector branch March 11, 2019 20:32
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!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants