Skip to content

Commit

Permalink
[Stack] Fix CSS selector (#37525)
Browse files Browse the repository at this point in the history 
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
  • Loading branch information
@sai6855 @oliviertassinari
sai6855 and oliviertassinari committed Jul 29, 2023
1 parent 0dd89d3 commit fd73f71
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 32 deletions.
124 changes: 93 additions & 31 deletions packages/mui-system/src/Stack/Stack.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,29 @@ describe('<Stack />', () => {
).to.deep.equal({
'@media (min-width:0px)': {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '8px',
},
'& > :not(style):not(style)': {
margin: 0,
},
flexDirection: 'column',
},
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginLeft: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
flexDirection: 'row',
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginLeft: '32px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
display: 'flex',
flexDirection: 'column',
Expand All @@ -65,16 +71,20 @@ describe('<Stack />', () => {
).to.deep.equal({
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
flexDirection: 'column',
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginLeft: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
flexDirection: 'row',
},
display: 'flex',
Expand All @@ -94,15 +104,19 @@ describe('<Stack />', () => {
).to.deep.equal({
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '32px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
display: 'flex',
flexDirection: 'column',
Expand All @@ -121,21 +135,27 @@ describe('<Stack />', () => {
).to.deep.equal({
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '0px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
[`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '32px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
display: 'flex',
flexDirection: 'column',
Expand All @@ -153,9 +173,11 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
'& > :not(style) ~ :not(style)': {
margin: 0,
marginLeft: '24px',
},
'& > :not(style):not(style)': {
margin: 0,
},
display: 'flex',
flexDirection: 'row',
});
Expand All @@ -173,16 +195,20 @@ describe('<Stack />', () => {
).to.deep.equal({
'@media (min-width:0px)': {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '8px',
},
'& > :not(style):not(style)': {
margin: 0,
},
flexDirection: 'column',
},
[`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '16px',
},
'& > :not(style):not(style)': {
margin: 0,
},
},
display: 'flex',
flexDirection: 'column',
Expand All @@ -201,9 +227,11 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
'& > :not(style) ~ :not(style)': {
margin: 0,
marginBottom: '8px',
},
'& > :not(style):not(style)': {
margin: 0,
},
display: 'flex',
flexDirection: 'column-reverse',
});
Expand All @@ -220,22 +248,28 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
'@media (min-width:0px)': {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '8px',
},
flexDirection: 'column',
},
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '16px',
},
flexDirection: 'row',
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '24px',
},
},
Expand Down Expand Up @@ -272,27 +306,35 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
[`@media (min-width:${theme.breakpoints.values.xs}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '0px',
},
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '16px',
},
},
[`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '16px',
},
flexDirection: 'row',
},
[`@media (min-width:${theme.breakpoints.values.xl}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '32px',
},
},
Expand All @@ -310,34 +352,44 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
[`@media (min-width:${theme.breakpoints.values.xs}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '0px',
},
},
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '0px',
},
flexDirection: 'row',
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginLeft: '16px',
},
},
[`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '16px',
},
flexDirection: 'column',
},
[`@media (min-width:${theme.breakpoints.values.xl}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '32px',
},
},
Expand All @@ -359,20 +411,26 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
'@media (min-width:0px)': {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '8px',
},
},
[`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '16px',
},
},
[`@media (min-width:${theme.breakpoints.values.md}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '24px',
},
},
Expand Down Expand Up @@ -404,9 +462,11 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
'& > :not(style) ~ :not(style)': {
margin: 0,
marginTop: '32px',
},
'& > :not(style):not(style)': {
margin: 0,
},
display: 'flex',
flexDirection: 'column',
});
Expand Down Expand Up @@ -435,8 +495,10 @@ describe('<Stack />', () => {
}),
).to.deep.equal({
[`@media (min-width:${customTheme.breakpoints.values.small}px)`]: {
'& > :not(style) ~ :not(style)': {
'& > :not(style):not(style)': {
margin: 0,
},
'& > :not(style) ~ :not(style)': {
marginTop: '32px',
},
},
Expand Down
6 changes: 5 additions & 1 deletion packages/mui-system/src/Stack/createStack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,12 @@ export const style = ({ ownerState, theme }: StyleFunctionProps) => {
return { gap: getValue(transformer, propValue) };
}
return {
'& > :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,
},
'& > :not(style) ~ :not(style)': {
[`margin${getSideFromDirection(
breakpoint ? directionValues[breakpoint] : ownerState.direction,
)}`]: getValue(transformer, propValue),
Expand Down

0 comments on commit fd73f71

Please sign in to comment.