feat: add gap property to flex component (#726)

Adding the gap property to the Flex component so the gutter size for columns and rows can be set at the same time. Closes D2IQ-90211
d2iq · May 31, 2022 · c35cc35 · c35cc35
1 parent 208f03b
commit c35cc35
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 15 deletions.
diff --git a/packages/messagePanel/tests/__snapshots__/messagePanel.test.tsx.snap b/packages/messagePanel/tests/__snapshots__/messagePanel.test.tsx.snap
@@ -117,7 +117,7 @@ exports[`MessagePanel renders with primary and secondary actions 1`] = `
  Body content
  </div>
  <div
- class="css-bhf0my"
+ class="css-e35dnx"
  data-cy="flex"
  >
  <div

diff --git a/packages/messagePanel/tests/__snapshots__/messagePanelWithGraphic.test.tsx.snap b/packages/messagePanel/tests/__snapshots__/messagePanelWithGraphic.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`MessagePanelWithGraphic renders with primary and secondary actions 1`]
  </div>
  </div>
  <div
- class="css-bhf0my"
+ class="css-e35dnx"
  data-cy="flex"
  >
  <div

diff --git a/packages/promo/__snapshots__/promos.test.tsx.snap b/packages/promo/__snapshots__/promos.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Promos renders PromoBanner 1`] = `
  </div>
  </button>
  <div
- class="css-1qfp4eg"
+ class="css-6cf51q"
  data-cy="flex"
  >
  <div
@@ -62,7 +62,7 @@ exports[`Promos renders PromoBanner 1`] = `
  Some promo details
  </div>
  <div
- class="css-hs4ndh"
+ class="css-u1cluu"
  data-cy="flex"
  >
  <div
@@ -177,7 +177,7 @@ exports[`Promos renders PromoBanner with a custom background color 1`] = `
  </div>
  </button>
  <div
- class="css-1qfp4eg"
+ class="css-6cf51q"
  data-cy="flex"
  >
  <div
@@ -206,7 +206,7 @@ exports[`Promos renders PromoBanner with a custom background color 1`] = `
  Some promo details
  </div>
  <div
- class="css-hs4ndh"
+ class="css-u1cluu"
  data-cy="flex"
  >
  <div
@@ -321,7 +321,7 @@ exports[`Promos renders PromoBanner with a gradientStyle 1`] = `
  </div>
  </button>
  <div
- class="css-1qfp4eg"
+ class="css-6cf51q"
  data-cy="flex"
  >
  <div
@@ -350,7 +350,7 @@ exports[`Promos renders PromoBanner with a gradientStyle 1`] = `
  Some promo details
  </div>
  <div
- class="css-hs4ndh"
+ class="css-u1cluu"
  data-cy="flex"
  >
  <div
@@ -472,7 +472,7 @@ exports[`Promos renders PromoInline 1`] = `
  </div>
  </button>
  <div
- class="css-1qfp4eg"
+ class="css-6cf51q"
  data-cy="flex"
  >
  <div
@@ -501,7 +501,7 @@ exports[`Promos renders PromoInline 1`] = `
  Some promo details
  </div>
  <div
- class="css-hs4ndh"
+ class="css-u1cluu"
  data-cy="flex"
  >
  <div

diff --git a/packages/shared/styles/styleUtils/layout/flexbox.ts b/packages/shared/styles/styleUtils/layout/flexbox.ts
@@ -20,6 +20,10 @@ export interface FlexboxProperties {
  * How `FlexItem` children should handle wrapping. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
  */
  wrap?: BreakpointConfig<React.CSSProperties["flexWrap"]>;
+ /**
+ * Specify the gutter size for both column and row in a single value. This will override any value set via the gutterSize property.
+ */
+ gap?: BreakpointConfig<React.CSSProperties["gap"]>;
 }
 
 const flexStrategies = {
@@ -129,7 +133,7 @@ export const flexItem = (flexStrategy: "grow" | "shrink") =>
  ${flexStrategies[flexStrategy]};
  `;
 
-export const applyFlexItemGutters = (direction, gutterSize) => {
+export const applyFlexItemGutters = (direction, gutterSize, gap) => {
  if (!gutterSize) {
  return;
  }
@@ -148,17 +152,20 @@ export const applyFlexItemGutters = (direction, gutterSize) => {
  return css`
  ${getResponsiveSpacingStyle("column-gap", columnGap)};
  ${getResponsiveSpacingStyle("row-gap", rowGap)};
+ ${getResponsiveSpacingStyle("gap", gap)};
 
  // If column-gap or row-gap are not supported by the browser utilize padding for spacing
  @supports not (column-gap: 1px) {
  > *:not(:last-child) {
  ${getResponsiveSpacingStyle("padding-right", columnGap)};
+ ${getResponsiveSpacingStyle("padding-right", gap)};
  }
  }
 
  @supports not (row-gap: 1px) {
  > *:not(:last-child) {
  ${getResponsiveSpacingStyle("padding-bottom", rowGap)};
+ ${getResponsiveSpacingStyle("padding-bottom", gap)};
  }
  }
  `;

diff --git a/packages/styleUtils/layout/flexbox/components/Flex.tsx b/packages/styleUtils/layout/flexbox/components/Flex.tsx
@@ -36,15 +36,16 @@ const Flex = ({
  direction = "row",
  align = "flex-start",
  wrap = "nowrap",
- justify = "flex-start"
+ justify = "flex-start",
+ gap = "inherit"
  } = flexboxProperties;
  const FlexEl = tag;
 
  return (
  <FlexEl
  className={css`
  ${flex({ align, wrap, justify, ...flexboxProperties })};
- ${applyFlexItemGutters(direction, gutterSize)};
+ ${applyFlexItemGutters(direction, gutterSize, gap)};
  ${className};
  `}
  data-cy={dataCy}

diff --git a/packages/tablev2/__snapshots__/tablev2.test.tsx.snap b/packages/tablev2/__snapshots__/tablev2.test.tsx.snap
@@ -446,7 +446,7 @@ exports[`Table v2 rendering renders default 1`] = `
  gutterSize="xxs"
  >
  <div
- className="css-4vm7kd"
+ className="css-1fz6wig"
  data-cy="flex"
  >
  <div
@@ -3731,7 +3731,7 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
  gutterSize="xxs"
  >
  <div
- className="css-4vm7kd"
+ className="css-1fz6wig"
  data-cy="flex"
  >
  <div