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

[Stack] Fix CSS selector #37525

Merged
merged 2 commits into from
Jul 29, 2023
Merged

[Stack] Fix CSS selector #37525

merged 2 commits into from
Jul 29, 2023

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Jun 6, 2023

closes: #37381 by forcing the margin: 0 reset on all the children of the Stack component. Before this change, the reset is done on almost all the children but not the first child.

https://deploy-preview-37525--material-ui.netlify.app/system/react-stack/

before: https://codesandbox.io/s/sad-aj-45wiii?file=/src/App.js
Screenshot 2023-06-06 at 10 26 31 PM

after: https://codesandbox.io/s/sharp-sun-7pgg8k?file=/package.json

Screenshot 2023-06-06 at 10 29 44 PM

@sai6855 sai6855 marked this pull request as draft June 6, 2023 16:27
@sai6855 sai6855 added bug 🐛 Something doesn't work component: Stack The React component. labels Jun 6, 2023
@mui-bot
Copy link

mui-bot commented Jun 6, 2023

Netlify deploy preview

https://deploy-preview-37525--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fbd502e

@sai6855 sai6855 marked this pull request as ready for review June 6, 2023 17:14
@sai6855 sai6855 requested review from mnajdova and a team June 6, 2023 17:14
@danilo-leal danilo-leal changed the title [Stack] Fix css selector [Stack] Fix CSS selector Jun 6, 2023
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 1, 2023
@oliviertassinari oliviertassinari removed request for a team and mnajdova July 1, 2023 12:24
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 1, 2023
'& > :not(style) ~ :not(style)': {
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
'& > :not(style):not(style)': {
margin: 0,
Copy link
Member

@oliviertassinari oliviertassinari Jul 1, 2023

Choose a reason for hiding this comment

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

We could consider the path to not reset the margin in the first place. It would get closer to useFlexGap={true}'s behavior. I have made this proposal in #28035 (comment).

Suggested change
margin: 0,

The problem is that it's a bit more breaking change than the current changes in this PR, so maybe for v6.

Comment on lines +138 to +139
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
// The useFlexGap={false} implementation relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
// TODO: remove this reset https://github.com/mui/material-ui/issues/28035#issuecomment-1615855826

@oliviertassinari
Copy link
Member

@DiegoAndai Do you want to own the merge of this PR? I see you are a maintainer of the Stack component with Jun https://www.notion.so/mui-org/Components-Layout-72421c160bcd4089a8ef8a4fd804c950.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: Stack The React component.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Stack] Doesn't reset margin on first item
5 participants