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

[Fab] added z-index to fab component #30615

Closed
wants to merge 1 commit into from
Closed

[Fab] added z-index to fab component #30615

wants to merge 1 commit into from

Conversation

mmacu
Copy link
Contributor

@mmacu mmacu commented Jan 14, 2022

As discussed in this issue added z-index to Fab component in order to keep it above other elements with z-index like Badge which has z-index: 1.

@mui-bot
Copy link

mui-bot commented Jan 14, 2022 •
edited
Loading

Details of bundle changes

Generated by 🚫 dangerJS against 879f0df

@mmacu mmacu changed the title added z-index to fab component [Fab] added z-index to fab component Jan 14, 2022
@danilo-leal danilo-leal added the component: Fab The React component. label Jan 14, 2022
@michaldudak
Copy link
Member

We generally don't hardcode z-index values greater than 1 anywhere. For such cases, the zIndex theme property is used (see https://mui.com/customization/z-index/). I think the FAB is a good candidate to be added to this list (since it's "floating" by definition). A value of 1050 (same as SpeedDial, which basically is a FAB).
I'm just wondering if this wouldn't be a breaking change and if we should wait for v6. @mnajdova, @siriwatknp - do you have any opinions?

@mmacu
Copy link
Contributor Author

mmacu commented Jan 17, 2022 •
edited
Loading

We generally don't hardcode z-index values greater than 1 anywhere.

https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/TableCell/TableCell.js#L105

But I agree that value of 1050 makes much more sense.

As for if that won't break anything I don't see why it should, but I'm still fairly new to this project, so my opinion should hold little value here.

@mmacu mmacu closed this Jan 17, 2022
@mmacu mmacu reopened this Jan 17, 2022
michaldudak
michaldudak requested changes Jan 20, 2022
View reviewed changes
packages/mui-material/src/Fab/Fab.js
@@ -52,6 +52,7 @@ const FabRoot = styled(ButtonBase, {
minWidth: 0,
width: 56,
height: 56,
zIndex: 1050,
Copy link
Member

Choose a reason for hiding this comment

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

The value should not be hardcoded. A new field called fab should be created in packages\mui-material\src\styles\zIndex.js and then used similarly to other zIndex values.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I see. Will update that later.

issamElmohadeb098 added a commit to issamElmohadeb098/material-ui that referenced this pull request Jan 30, 2022
@issamElmohadeb098
added z-index to fab component mui#30615
0e9f5e5
@mnajdova
Copy link
Member

I'm just wondering if this wouldn't be a breaking change and if we should wait for v6. @mnajdova, @siriwatknp - do you have any opinions?

I would say that it would be a fix. Adding a new value in the theme sounds great 👍

@mnajdova
Copy link
Member

Closing in favor of #30842 Thank you for the work :)

@mnajdova mnajdova closed this Jan 31, 2022
@hzhz hzhz mentioned this pull request Jun 24, 2023
Open
@hzhz hzhz mentioned this pull request May 13, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@michaldudak michaldudak michaldudak requested changes

Assignees
No one assigned
Labels
component: Fab The React component.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@mmacu @mui-bot @michaldudak @mnajdova @danilo-leal