feat(Flex): added row-gap responsive props

Author: mtorromeo

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

@@ -56,7 +56,7 @@
       </pf-flex>
     </story-canvas>
 
-    <story-canvas title="Row gap">
+    <story-canvas title="Gap">
       <pf-flex gap="2xl">
         <pf-flex-item>Flex item</pf-flex-item>
         <pf-flex-item>Flex item</pf-flex-item>
@@ -71,6 +71,21 @@
       </pf-flex>
     </story-canvas>
 
+    <story-canvas title="Row gap">
+      <pf-flex row-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>

packages/core/src/breakpoints.ts

@@ -79,6 +79,15 @@ export type GapBreakpointProps = {
   gapXl2?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 }
 
+export type RowGapBreakpointProps = {
+  rowGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  rowGapSm?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  rowGapMd?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  rowGapLg?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  rowGapXl?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  rowGapXl2?: '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';

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

@@ -12,6 +12,7 @@
       'gap',
       'grow',
       'justifyContent',
+      'rowGap',
       'shrink',
       'spaceItems',
       'spacer',
@@ -29,7 +30,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, GapBreakpointProps, ColumnGapBreakpointProps } from '../../breakpoints';
+import type { SpacerBreakpointProps, SpaceItemsBreakpointProps, GrowBreakpointProps, ShrinkBreakpointProps, FlexBreakpointProps, DirectionBreakpointProps, AlignItemsBreakpointProps, AlignContentBreakpointProps, AlignSelfBreakpointProps, AlignBreakpointProps, JustifyContentBreakpointProps, DisplayBreakpointProps, FullWidthBreakpointProps, FlexWrapBreakpointProps, GapBreakpointProps, RowGapBreakpointProps, ColumnGapBreakpointProps } from '../../breakpoints';
 import type { Component, HTMLAttributes } from 'vue';
 
 defineOptions({
@@ -50,6 +51,7 @@ export interface Props extends
   GapBreakpointProps,
   GrowBreakpointProps,
   JustifyContentBreakpointProps,
+  RowGapBreakpointProps,
   ShrinkBreakpointProps,
   SpaceItemsBreakpointProps,
   SpacerBreakpointProps,