@patternfly/react-core 5.0.0-alpha.105 → 5.0.0-alpha.107

package/src/layouts/Flex/Flex.tsx

@@ -136,6 +136,141 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'spaceItems3xl'
       | 'spaceItems4xl';
   };
+  /** Gap between items at various breakpoints. This will override spacers for the main axis. */
+  gap?: {
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    sm?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+  };
+  /** Gap between rows at various breakpoints. This will override spacers for the main axis. */
+  rowGap?: {
+    default?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    sm?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    md?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    lg?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    xl?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    '2xl'?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+  };
+  /** Gap beween columns at various breakpoints. This will override spacers for the main axis. */
+  columnGap?: {
+    default?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    sm?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    md?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    lg?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    xl?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    '2xl'?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+  };
   /** Whether to add flex: grow at various breakpoints */
   grow?: {
     default?: 'grow';
@@ -344,6 +479,9 @@ export const Flex: React.FunctionComponent<FlexProps> = ({
   component = 'div',
   spacer,
   spaceItems,
+  gap,
+  rowGap,
+  columnGap,
   grow,
   shrink,
   flex,
@@ -380,6 +518,9 @@ export const Flex: React.FunctionComponent<FlexProps> = ({
         formatBreakpointMods(display, styles),
         formatBreakpointMods(fullWidth, styles),
         formatBreakpointMods(flexWrap, styles),
+        formatBreakpointMods(gap, styles),
+        formatBreakpointMods(rowGap, styles),
+        formatBreakpointMods(columnGap, styles),
         className
       )}
       style={

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -85,16 +85,40 @@ describe('Flex', () => {
     ],
     display: ['inlineFlex'],
     fullWidth: ['fullWidth'],
-    flexWrap: ['wrap', 'wrapReverse', 'nowrap']
+    flexWrap: ['wrap', 'wrapReverse', 'nowrap'],
+    gap: ['gapNone', 'gapXs', 'gapSm', 'gapMd', 'gapLg', 'gapXl', 'gap2xl', 'gap3xl', 'gap4xl'],
+    rowGap: [
+      'rowGapNone',
+      'rowGapXs',
+      'rowGapSm',
+      'rowGapMd',
+      'rowGapLg',
+      'rowGapXl',
+      'rowGap2xl',
+      'rowGap3xl',
+      'rowGap4xl'
+    ],
+    columnGap: [
+      'columnGapNone',
+      'columnGapXs',
+      'columnGapSm',
+      'columnGapMd',
+      'columnGapLg',
+      'columnGapXl',
+      'columnGap2xl',
+      'columnGap3xl',
+      'columnGap4xl'
+    ]
   };
 
   describe('flex modifiers', () => {
     Object.entries(flexModifiers)
       .map(([mod, values]) =>
-        values.map(value => ({
+        values.map((value) => ({
           [mod]: {
             default: value,
             sm: value,
+            md: value,
             lg: value,
             xl: value,
             '2xl': value
@@ -102,7 +126,7 @@ describe('Flex', () => {
         }))
       )
       .reduce((acc, val) => acc.concat(val), [])
-      .forEach(props =>
+      .forEach((props) =>
         test(`${JSON.stringify(props)} add valid classes to Flex`, () => {
           render(
             <Flex {...props} data-testid="test-id">
@@ -110,11 +134,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen
-            .getByTestId('test-id')
-            .className.replace('pf-l-flex', '')
-            .trim();
-
+          const className = screen.getByTestId('test-id').className.replace('pf-l-flex', '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })
@@ -134,7 +154,7 @@ describe('Flex', () => {
   describe('flexItem modifiers', () => {
     Object.entries(flexItemModifiers)
       .map(([mod, values]) =>
-        values.map(value => ({
+        values.map((value) => ({
           [mod]: {
             default: value,
             sm: value,
@@ -145,7 +165,7 @@ describe('Flex', () => {
         }))
       )
       .reduce((acc, val) => acc.concat(val), [])
-      .forEach(props =>
+      .forEach((props) =>
         test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => {
           render(
             <FlexItem {...props} data-testid="test-id">