Adding 'gap' prop to Box (#12611)

ui/components/ui/box/box.js

@@ -79,6 +79,7 @@ export default function Box({
   textAlign,
   flexDirection = FLEX_DIRECTION.ROW,
   flexWrap,
+  gap,
   display,
   width,
   height,
@@ -134,6 +135,7 @@ export default function Box({
     [`box--height-${height}`]: Boolean(height),
     // background
     [`box--background-color-${backgroundColor}`]: Boolean(backgroundColor),
+    ...generateSizeClasses('box', 'gap', gap),
   });
   // Apply Box styles to any other component using function pattern
   if (typeof children === 'function') {
@@ -146,6 +148,7 @@ Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   flexDirection: PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
   flexWrap: PropTypes.oneOf(Object.values(FLEX_WRAP)),
+  gap: ValidSize,
   margin: MultipleSizes,
   marginTop: ValidSize,
   marginBottom: ValidSize,

ui/components/ui/box/box.scss

@@ -2,10 +2,10 @@
 @use "design-system";
 @use "utilities";
 
-$attributes: padding, margin;
+$attributes: padding, margin, gap;
 
 .box {
-  // Padding and Margin
+  // Padding, Margin, and Gap
   @each $attribute in $attributes {
     @each $size in design-system.$sizes-numeric {
       &--#{$attribute}-#{$size} {