Skip to content

Commit

Permalink
Box, Flex: extended margin/padding range with 0.25, 0.5 and 1.5 (#3822)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlbertCarreras
AlbertCarreras authored Oct 24, 2024
1 parent 22218c9 commit 68986f3
Show file tree
Hide file tree
Showing 70 changed files with 4,029 additions and 3,218 deletions.
28 changes: 14 additions & 14 deletions packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
for="fake_id"
>
<div
class="VxL zI7 iyn Hsu"
class="u8x zI7 iyn Hsu"
>
<div
class="X8m zDA IZT tBJ dyH iFc dR0 swG"
Expand All @@ -29,10 +29,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
class="react-datepicker__input-container"
>
<div
class="Jea KS5 XiG ujU xcv L4E zI7 iyn Hsu"
class="Jea KS5 XiG ujU zI7 iyn Hsu "
>
<div
class="ujU xcv L4E zI7 iyn Hsu"
class="ujU zI7 iyn Hsu "
>
<span>
<div
Expand All @@ -54,7 +54,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
class="calendarIcon"
>
<div
class="Jea KS5 XiG wzk zI7 iyn Hsu"
class="Jea KS5 NyI XiG zI7 iyn Hsu"
style="min-height: 48px;"
>
<div
Expand Down Expand Up @@ -131,41 +131,41 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
style="width: 100%;"
>
<div
class="XiG fZz qDf xuU zI7 iyn Hsu"
class="Kzl XiG i1W xuU zI7 iyn Hsu"
>
<div
class="hs0 mQ8 un8 C9i TB_"
>
<div
class="VxL zI7 iyn Hsu"
class="u8x zI7 iyn Hsu"
>
<div
aria-disabled="false"
aria-label="Grabber"
class="S9z v_3 iyn e8F BG7"
class="S9z iyn e8F BG7"
role="button"
tabindex="0"
>
<div
class="haa v_3 zI7 iyn Hsu"
class="haa zI7 iyn Hsu "
style="height: 5px; width: 37px;"
/>
</div>
</div>
</div>
<div
class="KS5 hs0 mQ8 un8 HOt BxF"
class="KS5 hs0 mQ8 un8 a1C qQp"
>
<div
class="ujU xuA"
/>
</div>
</div>
<div
class="XbT hA- lnZ ujU zI7 iyn Hsu"
class="XbT _co lnZ ujU zI7 iyn Hsu"
>
<div
class="KS5 jzS mQ8 un8 HOt BxF"
class="KS5 jzS mQ8 un8 a1C qQp"
style="width: 100%;"
>
<div
Expand Down Expand Up @@ -796,10 +796,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
class="XiG xuU zI7 iyn Hsu"
>
<div
class="fZz qDf zI7 iyn Hsu"
class="Kzl i1W zI7 iyn Hsu"
>
<div
class="KS5 jzS mQ8 un8 HOt BxF"
class="KS5 jzS mQ8 un8 a1C qQp"
style="width: 100%;"
>
<div
Expand All @@ -812,7 +812,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
type="button"
>
<div
class="RCK Hsu USg adn NTm KhY iyn S9z F10 xD4 fZz hUC a_A hNT BG7 hDj _O1 KS5 mQ8 Tbt L4E"
class="RCK Hsu USg adn NTm KhY iyn S9z F10 xD4 i1W V92 a_A hNT BG7 hDj _O1 KS5 mQ8 Tbt L4E"
>
<div
class="X8m tg7 tBJ dyH iFc sAJ H2s"
Expand Down
88 changes: 44 additions & 44 deletions packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

exports[`AccordionExpandableItem renders correctly 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -36,13 +36,13 @@ exports[`AccordionExpandableItem renders correctly 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -76,10 +76,10 @@ exports[`AccordionExpandableItem renders correctly 1`] = `

exports[`AccordionExpandableItem renders correctly with badge 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -110,13 +110,13 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -158,7 +158,7 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
className="badge info middle"
>
<div
className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -190,10 +190,10 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `

exports[`AccordionExpandableItem renders correctly with children 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -224,13 +224,13 @@ exports[`AccordionExpandableItem renders correctly with children 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -264,10 +264,10 @@ exports[`AccordionExpandableItem renders correctly with children 1`] = `

exports[`AccordionExpandableItem renders correctly with error 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -298,13 +298,13 @@ exports[`AccordionExpandableItem renders correctly with error 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -360,10 +360,10 @@ exports[`AccordionExpandableItem renders correctly with error 1`] = `

exports[`AccordionExpandableItem renders correctly with icon 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -394,13 +394,13 @@ exports[`AccordionExpandableItem renders correctly with icon 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -456,10 +456,10 @@ exports[`AccordionExpandableItem renders correctly with icon 1`] = `

exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -490,13 +490,13 @@ exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -584,10 +584,10 @@ exports[`AccordionExpandableItem renders correctly with icon button 1`] = `

exports[`AccordionExpandableItem renders correctly with summary 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -618,13 +618,13 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol6"
className="box xsCol600"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand All @@ -649,10 +649,10 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
</div>
</div>
<div
className="box marginStart6 xsCol6"
className="box marginStart600 xsCol600"
>
<div
className="Flex rowGap0 columnGap2 xsDirectionColumn"
className="Flex rowGap0 columnGap200 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -711,10 +711,10 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `

exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
<div
className="box paddingX6 paddingY6"
className="box paddingX600 paddingY600"
>
<div
className="Flex rowGap0 columnGap6 xsDirectionColumn"
className="Flex rowGap0 columnGap600 xsDirectionColumn"
>
<div
className="FlexItem"
Expand Down Expand Up @@ -745,13 +745,13 @@ exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
className="Flex rowGap0 columnGap0 xsDirectionRow"
>
<div
className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
>
<div
className="box xsCol12"
className="box xsCol1200"
>
<div
className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
>
<div
className="FlexItem"
Expand All @@ -777,7 +777,7 @@ exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
</div>
</div>
<div
className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
id="uniqueTestID"
style={
Object {
Expand Down
Loading

0 comments on commit 68986f3

Please sign in to comment.