Skip to content

Commit

Permalink
feat: Adds grid display to box props (#970)
Browse files Browse the repository at this point in the history
  • Loading branch information
amir-zahedi authored Feb 6, 2024
1 parent 593fb68 commit fb3e74d
Show file tree
Hide file tree
Showing 36 changed files with 574 additions and 568 deletions.
5 changes: 5 additions & 0 deletions .changeset/chatty-games-heal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@autoguru/overdrive': minor
---

Adds grid display to box pros
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

exports[`<Actions /> should match the snapshot 1`] = `
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq8 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y48 Columns_align_stretch__wkgcjh2b Columns_wrapping_wrap__wkgcjh28"
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq8 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y48 Columns_align_stretch__wkgcjh2b Columns_wrapping_wrap__wkgcjh28"
/>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ exports[`<Alert /> should match the snapshot 1`] = `
class="reset_block__6swfds3 useBoxStyles_height_full__7o6k06ey useBoxStyles_position_absolute__7o6k06ez useBoxStyles_backgroundColours_success__7o6k06el IntentStripe_intentBox__1g1aih90"
/>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y410 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y411 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y412 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y413 Columns_align_stretch__wkgcjh2b Columns_wrapping_noWrap__wkgcjh29"
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y410 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y411 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y412 useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y413 Columns_align_stretch__wkgcjh2b Columns_wrapping_noWrap__wkgcjh29"
>
<div
class="reset_block__6swfds3 useBoxStyles_flexGrow_0__7o6k06gn useBoxStyles_flexShrink_0__7o6k06gp Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_align_top__2660ru19"
class="reset_block__6swfds3 useBoxStyles_flexGrow_0__7o6k06go useBoxStyles_flexShrink_0__7o6k06gq Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_align_top__2660ru19"
>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_width_full__7o6k06ew useBoxStyles_height_full__7o6k06ey"
Expand All @@ -36,25 +36,25 @@ exports[`<Alert /> should match the snapshot 1`] = `
</div>
</div>
<div
class="reset_block__6swfds3 useBoxStyles_flexGrow_1__7o6k06go Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_makeResponsiveStyle_key_bp__2660ru14 Column_align_centre__2660ru1a"
class="reset_block__6swfds3 useBoxStyles_flexGrow_1__7o6k06gp Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_makeResponsiveStyle_key_bp__2660ru14 Column_align_centre__2660ru1a"
>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_width_full__7o6k06ew useBoxStyles_height_full__7o6k06ey useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_dark__w6to7ie"
/>
</div>
<div
class="reset_block__6swfds3 useBoxStyles_flexGrow_0__7o6k06gn useBoxStyles_flexShrink_0__7o6k06gp Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_align_top__2660ru19"
class="reset_block__6swfds3 useBoxStyles_flexGrow_0__7o6k06go useBoxStyles_flexShrink_0__7o6k06gq Columns_makeResponsiveStyle_key_bp__wkgcjh4 Columns_makeResponsiveStyle_key_bp__wkgcjh24 Columns_makeResponsiveStyle_key_bp__wkgcjh25 Columns_makeResponsiveStyle_key_bp__wkgcjh26 Columns_makeResponsiveStyle_key_bp__wkgcjh27 Column_align_top__2660ru19"
>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_width_full__7o6k06ew useBoxStyles_height_full__7o6k06ey"
>
<button
aria-label="close"
class="reset_appearance__6swfds0 reset_cursorPointer__6swfds1 reset_trimmedBlockElement__6swfds5 reset_button__6swfds6 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0610 useBoxStyles_makeResponsiveStyle_key_bp__7o6k061c useBoxStyles_makeResponsiveStyle_key_bp__7o6k0638 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063k useBoxStyles_display_inlineBlock__7o6k06fe useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_textAlign_center__7o6k06f3 useBoxStyles_border_style__7o6k069k useBoxStyles_makeResponsiveStyle_key_bp__7o6k06b5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06bl useBoxStyles_makeResponsiveStyle_key_bp__7o6k06c1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ch useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ct useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_white__w6to7if useTextStyles_fontWeight_semiBold__w6to7io useTextStyles_sizes_3__w6to7i3 Button_root__11v3fwx0 Button_minimal_defaults__11v3fwxp Button_minimalStates_secondary__11v3fwxs Button_size_small_default__11v3fwx7 Button_size_small_rounded__11v3fwx8 Button_size_small_iconOnly__11v3fwx9 Button_enabled__11v3fwx4"
class="reset_appearance__6swfds0 reset_cursorPointer__6swfds1 reset_trimmedBlockElement__6swfds5 reset_button__6swfds6 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0610 useBoxStyles_makeResponsiveStyle_key_bp__7o6k061c useBoxStyles_makeResponsiveStyle_key_bp__7o6k0638 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063k useBoxStyles_display_inlineBlock__7o6k06ff useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_textAlign_center__7o6k06f3 useBoxStyles_border_style__7o6k069k useBoxStyles_makeResponsiveStyle_key_bp__7o6k06b5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06bl useBoxStyles_makeResponsiveStyle_key_bp__7o6k06c1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ch useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ct useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_white__w6to7if useTextStyles_fontWeight_semiBold__w6to7io useTextStyles_sizes_3__w6to7i3 Button_root__11v3fwx0 Button_minimal_defaults__11v3fwxp Button_minimalStates_secondary__11v3fwxs Button_size_small_default__11v3fwx7 Button_size_small_rounded__11v3fwx8 Button_size_small_iconOnly__11v3fwx9 Button_enabled__11v3fwx4"
type="button"
>
<div
class="reset_block__6swfds3 useBoxStyles_height_full__7o6k06ey useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06gw Button_body__11v3fwx1"
class="reset_block__6swfds3 useBoxStyles_height_full__7o6k06ey useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06gx Button_body__11v3fwx1"
>
<i
class="useBoxStyles_display_block__7o6k06fa Icon_makeResponsiveStyle_key_bp__14sz1q64 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_muted__w6to7ig"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

exports[`<Anchor /> should match snapshot with label, icon and to props 1`] = `
<a
class="Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_cursorPointer__6swfds1 reset_a__6swfds9 useBoxStyles_display_inline__7o6k06fd"
class="Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_cursorPointer__6swfds1 reset_a__6swfds9 useBoxStyles_display_inline__7o6k06fe"
href="https://www.autoguru.com.au"
>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_position_relative__7o6k06f1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_wrap__7o6k06gq useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y44 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4"
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_position_relative__7o6k06f1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_wrap__7o6k06gr useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y44 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4"
>
<div
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_nowrap__7o6k06gr"
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_nowrap__7o6k06gs"
>
<i
class="useBoxStyles_display_block__7o6k06fa Icon_makeResponsiveStyle_key_bp__14sz1q60 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id"
Expand All @@ -27,7 +27,7 @@ exports[`<Anchor /> should match snapshot with label, icon and to props 1`] = `
</i>
</div>
<div
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_nowrap__7o6k06gr"
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_nowrap__7o6k06gs"
>
<span
class="reset_inlineText__6swfds2 useBoxStyles_textAlign_left__7o6k06f2 useTextStyles_root__w6to7i0 reset_inlineText__6swfds2 useTextStyles_colours_link__w6to7id useTextStyles_fontWeight_bold__w6to7ip useTextStyles_sizes_4__w6to7i4"
Expand All @@ -41,7 +41,7 @@ exports[`<Anchor /> should match snapshot with label, icon and to props 1`] = `

exports[`<Anchor /> should match snapshot without label 1`] = `
<a
class="Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_cursorPointer__6swfds1 reset_a__6swfds9 useBoxStyles_display_inline__7o6k06fd"
class="Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_cursorPointer__6swfds1 reset_a__6swfds9 useBoxStyles_display_inline__7o6k06fe"
>
<span
class="reset_inlineText__6swfds2 useBoxStyles_textAlign_left__7o6k06f2 useTextStyles_root__w6to7i0 reset_inlineText__6swfds2 useTextStyles_colours_link__w6to7id useTextStyles_fontWeight_bold__w6to7ip useTextStyles_sizes_4__w6to7i4"
Expand All @@ -51,17 +51,17 @@ exports[`<Anchor /> should match snapshot without label 1`] = `

exports[`<Anchor /> when custom component should match snapshot with label, icon custom component 1`] = `
<button
class="reset_appearance__6swfds0 reset_cursorPointer__6swfds1 reset_trimmedBlockElement__6swfds5 reset_button__6swfds6 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0610 useBoxStyles_makeResponsiveStyle_key_bp__7o6k061g useBoxStyles_makeResponsiveStyle_key_bp__7o6k0638 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063o useBoxStyles_display_inlineBlock__7o6k06fe useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_textAlign_center__7o6k06f3 useBoxStyles_border_style__7o6k069k useBoxStyles_makeResponsiveStyle_key_bp__7o6k06b5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06bl useBoxStyles_makeResponsiveStyle_key_bp__7o6k06c1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ch useBoxStyles_makeResponsiveStyle_key_bp__7o6k06cl useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_white__w6to7if useTextStyles_fontWeight_semiBold__w6to7io useTextStyles_sizes_4__w6to7i4 Button_root__11v3fwx0 Button_defaultStates_secondary__11v3fwxk Button_variant_secondary__11v3fwxe Button_size_medium_default__11v3fwxa Button_enabled__11v3fwx4 Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_block__6swfds3 useBoxStyles_display_inline__7o6k06fd"
class="reset_appearance__6swfds0 reset_cursorPointer__6swfds1 reset_trimmedBlockElement__6swfds5 reset_button__6swfds6 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0610 useBoxStyles_makeResponsiveStyle_key_bp__7o6k061g useBoxStyles_makeResponsiveStyle_key_bp__7o6k0638 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063o useBoxStyles_display_inlineBlock__7o6k06ff useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_textAlign_center__7o6k06f3 useBoxStyles_border_style__7o6k069k useBoxStyles_makeResponsiveStyle_key_bp__7o6k06b5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06bl useBoxStyles_makeResponsiveStyle_key_bp__7o6k06c1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06ch useBoxStyles_makeResponsiveStyle_key_bp__7o6k06cl useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_white__w6to7if useTextStyles_fontWeight_semiBold__w6to7io useTextStyles_sizes_4__w6to7i4 Button_root__11v3fwx0 Button_defaultStates_secondary__11v3fwxk Button_variant_secondary__11v3fwxe Button_size_medium_default__11v3fwxa Button_enabled__11v3fwx4 Anchor_root__1pk80wh0 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id reset_block__6swfds3 useBoxStyles_display_inline__7o6k06fe"
type="button"
>
<div
class="reset_block__6swfds3 useBoxStyles_height_full__7o6k06ey useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06gw Button_body__11v3fwx1"
class="reset_block__6swfds3 useBoxStyles_height_full__7o6k06ey useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06gx Button_body__11v3fwx1"
>
<div
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_position_relative__7o6k06f1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_wrap__7o6k06gq useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y44 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4"
class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb useBoxStyles_position_relative__7o6k06f1 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_wrap__7o6k06gr useNegativeMarginTop_makeResponsiveStyle_key_bp__7pu7y44 useNegativeMarginLeft_makeResponsiveStyle_key_bp__18e9yxq4"
>
<div
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_nowrap__7o6k06gr"
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_nowrap__7o6k06gs"
>
<i
class="useBoxStyles_display_block__7o6k06fa Icon_makeResponsiveStyle_key_bp__14sz1q60 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_link__w6to7id"
Expand All @@ -79,7 +79,7 @@ exports[`<Anchor /> when custom component should match snapshot with label, icon
</i>
</div>
<div
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06fz useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g7 useBoxStyles_flexWrap_nowrap__7o6k06gr"
class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k064 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063g useBoxStyles_display_flex__7o6k06fb useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g0 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06g8 useBoxStyles_flexWrap_nowrap__7o6k06gs"
>
<span
class="reset_inlineText__6swfds2 useBoxStyles_textAlign_left__7o6k06f2 useTextStyles_root__w6to7i0 reset_inlineText__6swfds2 useTextStyles_colours_link__w6to7id useTextStyles_fontWeight_bold__w6to7ip useTextStyles_sizes_4__w6to7i4"
Expand Down
1 change: 1 addition & 0 deletions packages/overdrive/lib/components/Box/useBoxStyles.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export const display = styleVariants(
contents: 'contents',
block: 'block',
flex: 'flex',
grid: 'grid',
inlineFlex: 'inline-flex',
inline: 'inline',
inlineBlock: 'inline-block',
Expand Down
Loading

0 comments on commit fb3e74d

Please sign in to comment.