Skip to content

[system] Use spacing unit in gap, row-gap, and column-gap#24794

Merged
oliviertassinari merged 4 commits intomui:nextfrom
ruppysuppy:box-gap-fix
Feb 7, 2021
Merged

[system] Use spacing unit in gap, row-gap, and column-gap#24794
oliviertassinari merged 4 commits intomui:nextfrom
ruppysuppy:box-gap-fix

Conversation

@ruppysuppy
Copy link
Contributor

@ruppysuppy ruppysuppy commented Feb 6, 2021

Breaking changes

  • [system] Use spacing unit in gap, rowGap, and columnGap. If you were using a number previously, you need to mention the px to bypass the new transformation with theme.spacing.

    <Box
    - gap={2}
    + gap="2px"
    >

After the change, <Box gap={1}> behaves like <Grid spacing={1}>.

Fix #24773

@mui-pr-bot
Copy link

mui-pr-bot commented Feb 6, 2021

@material-ui/core: parsed: +0.08% , gzip: +0.10%
@material-ui/lab: parsed: +0.10% , gzip: +0.07%
@material-ui/system: parsed: +2.57% , gzip: +1.16%

Details of bundle changes

Generated by 🚫 dangerJS against 891d78f

@mbrookes mbrookes added breaking change Introduces changes that are not backward compatible. component: Box The React component. labels Feb 6, 2021
@oliviertassinari oliviertassinari changed the title [Box] prop doesn't use theme spacing fix [Box] Use spacing for gap, row-gap, and column-gap Feb 7, 2021
@oliviertassinari oliviertassinari added the scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI label Feb 7, 2021
@oliviertassinari oliviertassinari changed the title [Box] Use spacing for gap, row-gap, and column-gap [system] Use spacing unit in gap, row-gap, and column-gap Feb 7, 2021
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I have pushed the approach further. The implementation is quick and dirty but it's working. We can rewrite the system later on. At least, we have new tests in place.

@oliviertassinari oliviertassinari merged commit 50e1450 into mui:next Feb 7, 2021
@oliviertassinari oliviertassinari added this to the v5-beta milestone Aug 17, 2021
@oliviertassinari oliviertassinari mentioned this pull request Aug 17, 2021
42 tasks
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. component: Box The React component. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Box] gap prop doesn't use theme spacing

4 participants