@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

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 />}
     />
   );
 };

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -72,7 +73,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
         <div
           className={css(styles.formFieldGroupBody)}
-          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: IS_INERT })}
         >
           {children}
         </div>

package/src/components/Form/__tests__/FormGroup.test.tsx

@@ -34,6 +34,15 @@ describe('FormGroup', () => {
     expect(screen.getByTestId('form-group-test-id').firstElementChild).toHaveClass('pf-m-no-padding-top');
   });
 
+  test('should render action form group variant', () => {
+    render(
+      <FormGroup isActionGroup data-testid="form-group-test-id">
+        <button type="submit">Submit</button>
+      </FormGroup>
+    );
+    expect(screen.getByTestId('form-group-test-id')).toHaveClass('pf-m-action');
+  });
+
   test('should render form group variant with required label', () => {
     const { asFragment } = render(
       <FormGroup label="label" isRequired fieldId="label-id">

package/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap

@@ -24,6 +24,9 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div

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

@@ -4,6 +4,9 @@ exports[`Form component should render default form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
+    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>
@@ -13,6 +16,9 @@ exports[`Form component should render form with limited width 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-limit-width"
+    data-ouia-component-id="OUIA-Generated-Form-:r2:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>
@@ -22,6 +28,9 @@ exports[`Form component should render horizontal form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:r1:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>

package/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -4,6 +4,9 @@ exports[`FormGroup should render correctly when label is not a string with Child
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:ro:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -41,6 +44,9 @@ exports[`FormGroup should render default form group variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:r0:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -72,6 +78,9 @@ exports[`FormGroup should render form group variant with node label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -105,6 +114,9 @@ exports[`FormGroup should render form group variant with required label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -142,6 +154,9 @@ exports[`FormGroup should render form group variant without label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-control"
@@ -158,6 +173,9 @@ exports[`FormGroup should render form group with additional label info 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:rc:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label pf-m-info"
@@ -200,10 +218,16 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:rg:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
+      data-ouia-component-id="OUIA-Generated-FormGroup-:rh:"
+      data-ouia-component-type="PF6/FormGroup"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-form__group-label"
@@ -236,10 +260,16 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:rj:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
+      data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
+      data-ouia-component-type="PF6/FormGroup"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-form__group-label"

package/src/components/Form/examples/Form.md

@@ -6,6 +6,9 @@ cssPrefix: pf-v6-c-form
 propComponents:
   [
     'ActionGroup',
+    'ActionList',
+    'ActionListGroup',
+    'ActionListItem',
     'Form',
     'FormGroup',
     'FormGroupLabelHelp',
@@ -24,8 +27,8 @@ propComponents:
 
 import { useRef, useEffect, useState } from 'react';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples

package/src/components/Form/examples/FormBasic.tsx

@@ -5,7 +5,9 @@ import {
   TextInput,
   Checkbox,
   Popover,
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Radio,
   HelperText,
@@ -123,10 +125,18 @@ export const FormBasic: React.FunctionComponent = () => {
       <FormGroup fieldId="checkbox01">
         <Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
       </FormGroup>
-      <ActionGroup>
-        <Button variant="primary">Submit</Button>
-        <Button variant="link">Cancel</Button>
-      </ActionGroup>
+      <FormGroup isActionGroup>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button variant="primary">Submit</Button>
+            </ActionListItem>
+            <ActionListItem>
+              <Button variant="link">Cancel</Button>
+            </ActionListItem>
+          </ActionListGroup>
+        </ActionList>
+      </FormGroup>
     </Form>
   );
 };