feat: Adds grid display to box props (#970)

Author: amir-zahedi

.changeset/chatty-games-heal.md

@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': minor
+---
+
+Adds grid display to box pros

packages/overdrive/lib/components/Actions/__snapshots__/Actions.spec.jsx.snap

@@ -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"
 />
 `;

packages/overdrive/lib/components/Alert/__snapshots__/Alert.spec.jsx.snap

@@ -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"
@@ -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"

packages/overdrive/lib/components/Anchor/__snapshots__/Anchor.spec.jsx.snap

@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"

packages/overdrive/lib/components/Box/useBoxStyles.css.ts

@@ -154,6 +154,7 @@ export const display = styleVariants(
 			contents: 'contents',
 			block: 'block',
 			flex: 'flex',
+			grid: 'grid',
 			inlineFlex: 'inline-flex',
 			inline: 'inline',
 			inlineBlock: 'inline-block',