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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.106",
+  "version": "5.0.0-alpha.107",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5627bdc7f27951dc9485026dd832585760749a66"
+  "gitHead": "2da278eeebfb3475c31e3693435a8c7f04a0edde"
 }

package/src/components/DatePicker/examples/DatePicker.md

@@ -4,7 +4,6 @@ section: components
 subsection: date-and-time
 cssPrefix: pf-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
-beta: true
 ---
 
 ## Examples

package/src/components/Icon/examples/Icon.md

@@ -3,7 +3,6 @@ id: Icon
 section: components
 cssPrefix: pf-c-icon
 propComponents: ['Icon']
-beta: true
 ---
 
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;

package/src/components/Menu/examples/Menu.md

@@ -81,7 +81,7 @@ Use the `description` property to add short descriptive text below any menu item
 
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 
 ```
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -54,7 +54,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
-  /** @beta Additional content related to the status item. */
+  /** Additional content related to the status item. */
   progressHelperText?: React.ReactNode;
 }
 

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/ProgressContainer.tsx

@@ -54,7 +54,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/examples/Progress.md

@@ -76,5 +76,5 @@ propComponents: ['Progress']
 ```
 
 ### Helper text
-```ts file="./ProgressHelperText.tsx" isBeta
+```ts file="./ProgressHelperText.tsx"
 ```

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -3,7 +3,6 @@ id: Progress stepper
 section: components
 cssPrefix: pf-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
-beta: true
 ---
 
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';

package/src/components/SearchInput/examples/SearchInput.md

@@ -3,7 +3,6 @@ id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
-beta: true
 ---
 
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

package/src/components/Tabs/Tab.tsx

@@ -37,11 +37,11 @@ export interface TabProps
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
-  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
   closeButtonAriaLabel?: string;
-  /** @beta Flag indicating the close button should be disabled */
+  /** Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
-  /** @beta Actions rendered beside the tab content */
+  /** Actions rendered beside the tab content */
   actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;

package/src/components/Tabs/Tabs.tsx

@@ -105,7 +105,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  /** Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/Tabs/examples/Tabs.md

@@ -89,7 +89,7 @@ To enable horizontal overflow, use the `isOverflowHorizontal` property.
 
 In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
-```ts file="./TabsHorizontalOverflow.tsx" isBeta
+```ts file="./TabsHorizontalOverflow.tsx"
 ```
 
 ### With tooltip react ref
@@ -218,7 +218,7 @@ You may add a help action to a tab to provide users with additional context in a
 
 To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
 
-```ts file="./TabsHelp.tsx" isBeta
+```ts file="./TabsHelp.tsx"
 ```
 
 ### With help and close actions
@@ -227,5 +227,5 @@ To add multiple actions to a tab, create a `<TabAction>` component for each acti
 
 The following example passes in both help popover and close actions.
 
-```ts file="./TabsHelpAndClose.tsx" isBeta
+```ts file="./TabsHelpAndClose.tsx"
 ```

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -3,7 +3,6 @@ id: Text input group
 section: components
 cssPrefix: pf-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/components/Tile/examples/Tile.md

@@ -3,7 +3,6 @@ id: Tile
 section: components
 cssPrefix: pf-c-tile
 propComponents: ['Tile']
-beta: true
 ---
 
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';

package/src/components/Truncate/examples/Truncate.md

@@ -2,7 +2,6 @@
 id: Truncate
 section: components
 propComponents: [Truncate]
-beta: true
 ---
 
 import './TruncateExamples.css';
@@ -56,4 +55,4 @@ import { Truncate } from '@patternfly/react-core';
     tooltipPosition={'bottom'}
   />
 </div>
-```
+```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -46,17 +46,17 @@ Custom menus can be constructed using a composable approach by combining the [Me
 
 ### Composable simple checkbox select
 
-```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
+```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
 ```
 
 ### Composable typeahead select
 
-```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
+```ts file="./examples/ComposableTypeaheadSelect.tsx"
 ```
 
 ### Composable multiple typeahead select
 
-```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
 ```
 
 ### Composable drilldown menu

package/src/demos/DatePicker/DatePicker.md

@@ -2,7 +2,6 @@
 id: Date picker
 section: components
 subsection: date-and-time
-beta: true
 ---
 
 ## Demos

package/src/demos/ProgressStepperDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Progress stepper
 section: components
-beta: true
 ---
 
 ## Demos

package/src/demos/SearchInput/SearchInput.md

@@ -1,7 +1,6 @@
 ---
 id: Search input
 section: components
-beta: true
 ---
 
 import {

package/src/demos/TextInputGroupDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Text input group
 section: components
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -16,7 +16,7 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
-  /** @beta Flag to show if the checkbox is in progress */
+  /** Flag to show if the checkbox is in progress */
   isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
@@ -28,9 +28,9 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** @beta Text describing current loading status or progress */
+  /** Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
-  /** @beta Aria-label for the default progress icon to describe what is loading */
+  /** Aria-label for the default progress icon to describe what is loading */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/deprecated/components/Dropdown/examples/Dropdown.md

@@ -161,7 +161,7 @@ Text labels may optionally be used alongside actions within split buttons.
 
 The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```ts file="./DropdownSplitButtonProgressCheckbox.tsx"
 
 ```
 

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">