feat(Flex): added gap and column-gap responsive props

Author: mtorromeo

apps/docs/src/stories/Layouts/Flex.story.vue

@@ -55,6 +55,36 @@
         <pf-flex-item>Flex item</pf-flex-item>
       </pf-flex>
     </story-canvas>
+
+    <story-canvas title="Row gap">
+      <pf-flex gap="2xl">
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+      </pf-flex>
+    </story-canvas>
+
+    <story-canvas title="Column gap">
+      <pf-flex column-gap="2xl">
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+        <pf-flex-item>Flex item</pf-flex-item>
+      </pf-flex>
+    </story-canvas>
   </doc-page>
 </template>
 

packages/core/src/breakpoints.ts

@@ -70,6 +70,24 @@ export type SpaceItemsBreakpointProps = {
   spaceItemsXl2?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 }
 
+export type GapBreakpointProps = {
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  gapSm?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  gapMd?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  gapLg?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  gapXl?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  gapXl2?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+}
+
+export type ColumnGapBreakpointProps = {
+  columnGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  columnGapSm?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  columnGapMd?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  columnGapLg?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  columnGapXl?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  columnGapXl2?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+}
+
 export type GrowBreakpointProps = {
   grow?: boolean;
   growSm?: boolean;

packages/core/src/layouts/Flex/Flex.vue

@@ -6,8 +6,10 @@
       'alignContent',
       'alignItems',
       'alignSelf',
+      'columnGap',
       'flex',
       'fullWidth',
+      'gap',
       'grow',
       'justifyContent',
       'shrink',
@@ -27,7 +29,7 @@
 import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 import { classesFromBreakpointProps } from '../../breakpoints';
-import type { SpacerBreakpointProps, SpaceItemsBreakpointProps, GrowBreakpointProps, ShrinkBreakpointProps, FlexBreakpointProps, DirectionBreakpointProps, AlignItemsBreakpointProps, AlignContentBreakpointProps, AlignSelfBreakpointProps, AlignBreakpointProps, JustifyContentBreakpointProps, DisplayBreakpointProps, FullWidthBreakpointProps, FlexWrapBreakpointProps } from '../../breakpoints';
+import type { SpacerBreakpointProps, SpaceItemsBreakpointProps, GrowBreakpointProps, ShrinkBreakpointProps, FlexBreakpointProps, DirectionBreakpointProps, AlignItemsBreakpointProps, AlignContentBreakpointProps, AlignSelfBreakpointProps, AlignBreakpointProps, JustifyContentBreakpointProps, DisplayBreakpointProps, FullWidthBreakpointProps, FlexWrapBreakpointProps, GapBreakpointProps, ColumnGapBreakpointProps } from '../../breakpoints';
 import type { Component, HTMLAttributes } from 'vue';
 
 defineOptions({
@@ -39,11 +41,13 @@ export interface Props extends
   AlignContentBreakpointProps,
   AlignItemsBreakpointProps,
   AlignSelfBreakpointProps,
+  ColumnGapBreakpointProps,
   DirectionBreakpointProps,
   DisplayBreakpointProps,
   FlexBreakpointProps,
   FlexWrapBreakpointProps,
   FullWidthBreakpointProps,
+  GapBreakpointProps,
   GrowBreakpointProps,
   JustifyContentBreakpointProps,
   ShrinkBreakpointProps,