@patternfly/react-core 6.6.2 → 6.7.0-prerelease.2

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -22,12 +22,12 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
 import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 interface Option {
   text: string;
@@ -221,7 +221,12 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
   };
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+    <EmptyState
+      headingLevel="h4"
+      titleText="No results found"
+      icon={RhMicronsSearchIcon}
+      variant={EmptyStateVariant.sm}
+    >
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -271,13 +276,13 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
             onClick={() => moveSelected(true)}
             aria-label="Add selected"
-            icon={<AngleRightIcon />}
+            icon={<RhMicronsCaretRightIcon />}
           />
           <DualListSelectorControl
             isDisabled={availableOptions.length === 0 || isDisabled}
             onClick={() => moveAll(true)}
             aria-label="Add all"
-            icon={<AngleDoubleRightIcon />}
+            icon={<RhMicronsDoubleCaretRightIcon />}
           />
           <DualListSelectorControl
             isDisabled={chosenOptions.length === 0 || isDisabled}
@@ -289,7 +294,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             onClick={() => moveSelected(false)}
             isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
             aria-label="Remove selected"
-            icon={<AngleLeftIcon />}
+            icon={<RhMicronsCaretLeftIcon />}
           />
         </DualListSelectorControlsWrapper>
         <DualListSelectorPane

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -16,10 +16,10 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 
 interface FoodNode {
   id: string;
@@ -259,7 +259,12 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
-          <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+          <EmptyState
+            headingLevel="h4"
+            titleText="No results found"
+            icon={RhMicronsSearchIcon}
+            variant={EmptyStateVariant.sm}
+          >
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
             <EmptyStateFooter>
               <EmptyStateActions>
@@ -290,13 +295,13 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           isDisabled={!checkedLeafIds.filter((x) => visibleAvailableLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
-          icon={<AngleRightIcon />}
+          icon={<RhMicronsCaretRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<AngleDoubleRightIcon />}
+          icon={<RhMicronsDoubleCaretRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === 0}
@@ -308,7 +313,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           onClick={() => moveChecked(false)}
           isDisabled={!checkedLeafIds.filter((x) => visibleChosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
-          icon={<AngleLeftIcon />}
+          icon={<RhMicronsCaretLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       {buildPane(true)}

package/src/components/EmptyState/examples/EmptyState.md

@@ -6,45 +6,56 @@ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyState
 ---
 
 import { useState } from 'react';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 ## Examples
+
 ### Basic
 
 ```ts file="EmptyStateBasic.tsx"
+
 ```
 
 ### Extra small
 
 ```ts file="EmptyStateExtraSmall.tsx"
+
 ```
 
 ### Small
 
 ```ts file="EmptyStateSmall.tsx"
+
 ```
 
 ### Large
 
 ```ts file="EmptyStateLarge.tsx"
+
 ```
 
 ### Extra large
 
 ```ts file="EmptyStateExtraLarge.tsx"
+
 ```
 
 ### With status
+
 ```ts file="EmptyStateWithStatus.tsx"
+
 ```
 
 ### Spinner
 
 ```ts file="EmptyStateSpinner.tsx"
+
 ```
 
 ### No match found
 
 ```ts file="EmptyStateNoMatchFound.tsx"
+
 ```

package/src/components/EmptyState/examples/EmptyStateBasic.tsx

@@ -1,8 +1,8 @@
 import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 export const EmptyStateBasic: React.FunctionComponent = () => (
-  <EmptyState titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+  <EmptyState titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
     <EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -1,8 +1,8 @@
 import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
-  <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
+  <EmptyState titleText="No results found" headingLevel="h4" icon={RhMicronsSearchIcon}>
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>

package/src/components/EmptyState/examples/EmptyStateSmall.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -6,7 +6,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { GenerateId } from '../../helpers';
+import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -16,7 +16,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'>, OUIAProps {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
@@ -84,6 +84,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * This is useful when the toggle text should function as a heading in the document structure.
    */
   toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface ExpandableSectionState {
@@ -134,7 +138,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    variant: 'default'
+    variant: 'default',
+    ouiaSafe: true
   };
 
   private calculateToggleText(
@@ -232,6 +237,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       truncateMaxLines,
       direction,
       toggleWrapper = 'div',
+      ouiaId,
+      ouiaSafe,
       ...props
     } = this.props;
 
@@ -307,6 +314,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
                     className
                   )}
                   {...props}
+                  {...getOUIAProps(ExpandableSection.displayName, ouiaId, ouiaSafe)}
                 >
                   {variant === ExpandableSectionVariant.default && expandableToggle}
                   <div

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -8,7 +8,11 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} ouiaId="ouia-id">
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -306,3 +310,27 @@ test('Renders toggle icon by default when hasToggleIcon is true', () => {
   const button = screen.getByRole('button');
   expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
 });
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/ExpandableSection');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(
+    <ExpandableSection ouiaId="test-id" ouiaSafe={false}>
+      Test content
+    </ExpandableSection>
+  );
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap

@@ -4,6 +4,8 @@ exports[`Disclosure ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -57,6 +59,9 @@ exports[`ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -110,6 +115,8 @@ exports[`Renders ExpandableSection expanded 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -163,6 +170,8 @@ exports[`Renders ExpandableSection indented 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -216,6 +225,8 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"

package/src/components/FileUpload/examples/FileUpload.md

@@ -7,7 +7,7 @@ subsection: file-upload
 ---
 
 import { useState } from 'react';
-import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';
 
 ## Examples
 
@@ -21,6 +21,7 @@ Pressing _Clear_ button triggers `onClearClick` event.
 ### Simple text file
 
 ```ts file="./FileUploadSimpleText.tsx"
+
 ```
 
 ### With helper text
@@ -28,6 +29,7 @@ Pressing _Clear_ button triggers `onClearClick` event.
 You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.
 
 ```ts file="./FileUploadWithHelperText.tsx"
+
 ```
 
 ### Text file with edits allowed
@@ -36,6 +38,7 @@ A user can always type instead of selecting a file, but by default, once a user
 Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
 
 ```ts file="./FileUploadTextWithEdits.tsx"
+
 ```
 
 ### Restricting file size and type
@@ -49,6 +52,7 @@ Restricting file sizes and types in this way is for user convenience only, and i
 ### Text file with restrictions
 
 ```ts file="./FileUploadTextWithRestrictions.tsx"
+
 ```
 
 ### Other file types
@@ -58,6 +62,7 @@ If no `type` prop is specified, the component will not read files directly. When
 ### Simple file of any format
 
 ```ts file="./FileUploadSimpleFile.tsx"
+
 ```
 
 ### Customizing the file preview
@@ -67,6 +72,7 @@ Regardless of `type`, the preview area (the TextArea, or any future implementati
 ### Custom file preview
 
 ```ts file="./FileUploadCustomPreview.tsx"
+
 ```
 
 ### Bringing your own file browse logic
@@ -78,6 +84,7 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 ### Custom file upload
 
 ```ts file="./FileUploadCustomUpload.tsx"
+
 ```
 
 ## Types

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { FileUpload } from '@patternfly/react-core';
-import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = useState<File>();
@@ -29,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     >
       {value && (
         <div>
-          <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
+          <RhUiDocumentFillIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>
       )}

package/src/components/Form/ActionGroup.tsx

@@ -1,6 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
+/** ActionGroup has been deprecated, please use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
 export interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Anything that can be rendered as ActionGroup content. */
   children?: React.ReactNode;
@@ -8,6 +9,7 @@ export interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
 }
 
+/** ActionGroup has been deprecated, please use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
 export const ActionGroup: React.FunctionComponent<ActionGroupProps> = ({
   children = null,
   className = '',

package/src/components/Form/Form.tsx

@@ -2,8 +2,9 @@ import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
+export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'>, OUIAProps {
   /** Anything that can be rendered as Form content. */
   children?: React.ReactNode;
   /** Additional classes added to the Form. */
@@ -16,6 +17,10 @@ export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'>
   maxWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const FormBase: React.FunctionComponent<FormProps> = ({
@@ -25,28 +30,34 @@ const FormBase: React.FunctionComponent<FormProps> = ({
   isWidthLimited = false,
   maxWidth = '',
   innerRef,
+  ouiaId,
+  ouiaSafe = true,
   ...props
-}: FormProps) => (
-  <form
-    noValidate
-    {...(maxWidth && {
-      style: {
-        [cssMaxWidth.name]: maxWidth,
-        ...props.style
-      } as React.CSSProperties
-    })}
-    {...props}
-    className={css(
-      styles.form,
-      isHorizontal && styles.modifiers.horizontal,
-      (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
-      className
-    )}
-    ref={innerRef}
-  >
-    {children}
-  </form>
-);
+}: FormProps) => {
+  const ouiaProps = useOUIAProps(Form.displayName, ouiaId, ouiaSafe);
+  return (
+    <form
+      noValidate
+      {...(maxWidth && {
+        style: {
+          [cssMaxWidth.name]: maxWidth,
+          ...props.style
+        } as React.CSSProperties
+      })}
+      {...props}
+      {...ouiaProps}
+      className={css(
+        styles.form,
+        isHorizontal && styles.modifiers.horizontal,
+        (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
+        className
+      )}
+      ref={innerRef}
+    >
+      {children}
+    </form>
+  );
+};
 
 export const Form = forwardRef((props: FormProps, ref: React.Ref<any>) => <FormBase innerRef={ref} {...props} />);
 

package/src/components/Form/FormGroup.tsx

@@ -2,9 +2,9 @@ import { Fragment, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'>, OUIAProps {
   /** Anything that can be rendered as FormGroup content. */
   children?: React.ReactNode;
   /** Additional classes added to the FormGroup. */
@@ -21,6 +21,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   isInline?: boolean;
   /** Sets the FormGroupControl to be stacked */
   isStack?: boolean;
+  /** Sets the FormGroup action modifier. Used to contain form action buttons. */
+  isActionGroup?: boolean;
   /** Removes top spacer from label. */
   hasNoPaddingTop?: boolean;
   /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
@@ -31,6 +33,10 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
    * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
    */
   role?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
@@ -43,10 +49,14 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   isInline = false,
   hasNoPaddingTop = false,
   isStack = false,
+  isActionGroup = false,
   fieldId,
   role,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: FormGroupProps) => {
+  const ouiaProps = useOUIAProps(FormGroup.displayName, ouiaId, ouiaSafe);
   const randomId = useSSRSafeId();
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
@@ -68,10 +78,11 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
 
   return (
     <div
-      className={css(styles.formGroup, className)}
+      className={css(styles.formGroup, isActionGroup && styles.modifiers.action, className)}
       {...(role && { role })}
       {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
       {...props}
+      {...ouiaProps}
     >
       {label && (
         <div

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useRef } from 'react';
 import { Button, ButtonProps } from '../Button';
 import { KeyTypes } from '../../helpers/constants';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 /** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
  * to our Popover component.
@@ -45,7 +45,7 @@ const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> =
       variant="plain"
       hasNoPadding
       {...props}
-      icon={<HelpIcon />}
+      icon={<RhUiQuestionMarkCircleIcon />}
     />
   );
 };