Adding flexWrap prop to Box (#12542)

ui/components/ui/box/box.js

@@ -11,6 +11,7 @@ import {
   SIZES,
   TEXT_ALIGN,
   FLEX_DIRECTION,
+  FLEX_WRAP,
 } from '../../../helpers/constants/design-system';
 
 const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
@@ -77,6 +78,7 @@ export default function Box({
   justifyContent,
   textAlign,
   flexDirection = FLEX_DIRECTION.ROW,
+  flexWrap,
   display,
   width,
   height,
@@ -122,6 +124,7 @@ export default function Box({
     [`box--justify-content-${justifyContent}`]: Boolean(justifyContent),
     [`box--align-items-${alignItems}`]: Boolean(alignItems),
     [`box--flex-direction-${flexDirection}`]: Boolean(flexDirection),
+    [`box--flex-wrap-${flexWrap}`]: Boolean(flexWrap),
     // text align
     [`box--text-align-${textAlign}`]: Boolean(textAlign),
     // display
@@ -142,6 +145,7 @@ export default function Box({
 Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   flexDirection: PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
+  flexWrap: PropTypes.oneOf(Object.values(FLEX_WRAP)),
   margin: MultipleSizes,
   marginTop: ValidSize,
   marginBottom: ValidSize,

ui/components/ui/box/box.scss

@@ -90,6 +90,12 @@ $attributes: padding, margin;
     }
   }
 
+  @each $wrap in design-system.$flex-wrap {
+    &--flex-wrap-#{$wrap} {
+      flex-wrap: $wrap;
+    }
+  }
+
   // Width and Height
   &--width-full {
     width: 100%;

ui/css/design-system/attributes.scss

@@ -19,6 +19,11 @@ $flex-direction:
   column,
   column-reverse;
 
+$flex-wrap:
+  wrap,
+  wrap-reverse,
+  nowrap;
+
 $fractions: (
   1\/2: 50%,
   1\/3: 33.333333%,

ui/helpers/constants/design-system.js

@@ -96,6 +96,12 @@ export const FLEX_DIRECTION = {
   COLUMN_REVERSE: 'column-reverse',
 };
 
+export const FLEX_WRAP = {
+  WRAP: 'wrap',
+  WRAP_REVERSE: 'wrap-reverse',
+  NO_WRAP: 'nowrap',
+};
+
 export const DISPLAY = {
   BLOCK: 'block',
   FLEX: 'flex',