Adding margin auto support to Box (#12801)

ui/components/ui/box/box.js

@@ -14,13 +14,33 @@ import {
   FLEX_WRAP,
 } from '../../../helpers/constants/design-system';
 
-const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
+const ValidSize = PropTypes.oneOf([
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+]);
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
 export const MultipleSizes = PropTypes.oneOfType([
   ValidSize,
   ArrayOfValidSizes,
 ]);
 
+function isValidValue(type, value) {
+  // for now only margin type can have 'auto'
+  return typeof value === 'number' || (type === 'margin' && value === 'auto');
+}
+
 function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
   const arr = Array.isArray(main) ? main : [];
   const singleDigit = Array.isArray(main) ? undefined : main;
@@ -35,12 +55,13 @@ function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
   const isAllFour = arr.length === 4;
   const hasAtLeastTwo = arr.length >= 2;
   const hasAtLeastThree = arr.length >= 3;
+
   return {
-    [`${baseClass}--${type}-${singleDigit}`]: singleDigit !== undefined,
-    [`${baseClass}--${type}-top-${top}`]: typeof top === 'number',
-    [`${baseClass}--${type}-right-${right}`]: typeof right === 'number',
-    [`${baseClass}--${type}-bottom-${bottom}`]: typeof bottom === 'number',
-    [`${baseClass}--${type}-left-${left}`]: typeof left === 'number',
+    [`${baseClass}--${type}-${singleDigit}`]: isValidValue(type, singleDigit),
+    [`${baseClass}--${type}-top-${top}`]: isValidValue(type, top),
+    [`${baseClass}--${type}-right-${right}`]: isValidValue(type, right),
+    [`${baseClass}--${type}-bottom-${bottom}`]: isValidValue(type, bottom),
+    [`${baseClass}--${type}-left-${left}`]: isValidValue(type, left),
     // As long as an array of length >= 2 has been provided, the first number
     // will always be for the top value.
     [`${baseClass}--${type}-top-${arr?.[0]}`]: hasAtLeastTwo,

ui/components/ui/box/box.scss

@@ -1,8 +1,11 @@
+@use "sass:list";
 @use "sass:map";
 @use "design-system";
 @use "utilities";
 
 $attributes: padding, margin, gap;
+$extraProperties: auto;
+$attributesToApplyExtraProperties: margin;
 
 .box {
   // Padding, Margin, and Gap
@@ -20,6 +23,20 @@ $attributes: padding, margin, gap;
         }
       }
     }
+
+    @if list.index($attributesToApplyExtraProperties, $attribute) {
+      @each $property in $extraProperties {
+        &--#{$attribute}-#{$property} {
+          #{$attribute}: $property;
+        }
+
+        @each $direction in design-system.$directions {
+          &--#{$attribute}-#{$direction}-#{$property} {
+            #{$attribute}-#{$direction}: $property;
+          }
+        }
+      }
+    }
   }
 
   // Borders

ui/components/ui/box/box.stories.js

@@ -17,6 +17,7 @@ export default {
 };
 
 const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
 
 export const DefaultStory = () => {
   const items = [];
@@ -42,16 +43,31 @@ export const DefaultStory = () => {
       )}
       textAlign={select('textAlign', TEXT_ALIGN, undefined, 'left')}
       alignItems={select('alignItems', ALIGN_ITEMS, undefined, 'display')}
-      margin={select('margin', sizeKnobOptions, undefined, 'margin')}
-      marginTop={select('marginTop', sizeKnobOptions, undefined, 'margin')}
-      marginRight={select('marginRight', sizeKnobOptions, undefined, 'margin')}
-      marginBottom={select(
-        'marginBottom',
-        sizeKnobOptions,
+      margin={select('margin', marginSizeKnobOptions, undefined, 'margin')}
+      marginTop={select(
+        'marginTop',
+        marginSizeKnobOptions,
+        undefined,
+        'margin',
+      )}
+      marginRight={select(
+        'marginRight',
+        marginSizeKnobOptions,
+        undefined,
+        'margin',
+      )}
+      marginBottom={select(
+        'marginBottom',
+        marginSizeKnobOptions,
+        undefined,
+        'margin',
+      )}
+      marginLeft={select(
+        'marginLeft',
+        marginSizeKnobOptions,
         undefined,
         'margin',
       )}
-      marginLeft={select('marginLeft', sizeKnobOptions, undefined, 'margin')}
       padding={select('padding', sizeKnobOptions, undefined, 'padding')}
       paddingTop={select('paddingTop', sizeKnobOptions, undefined, 'padding')}
       paddingRight={select(