@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

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

@@ -8,11 +8,7 @@ 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} ouiaId="ouia-id">
-      test{' '}
-    </ExpandableSection>
-  );
+  const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -310,27 +306,3 @@ 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,8 +4,6 @@ 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"
@@ -59,9 +57,6 @@ 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"
@@ -115,8 +110,6 @@ 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"
@@ -170,8 +163,6 @@ 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"
@@ -225,8 +216,6 @@ 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 RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';
+import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 ## Examples
 
@@ -21,7 +21,6 @@ Pressing _Clear_ button triggers `onClearClick` event.
 ### Simple text file
 
 ```ts file="./FileUploadSimpleText.tsx"
-
 ```
 
 ### With helper text
@@ -29,7 +28,6 @@ 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
@@ -38,7 +36,6 @@ 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
@@ -52,7 +49,6 @@ 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
@@ -62,7 +58,6 @@ 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
@@ -72,7 +67,6 @@ 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
@@ -84,7 +78,6 @@ 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 RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';
+import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = useState<File>();
@@ -29,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     >
       {value && (
         <div>
-          <RhUiDocumentFillIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
+          <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>
       )}

package/src/components/Form/ActionGroup.tsx

@@ -1,7 +1,6 @@
 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;
@@ -9,7 +8,6 @@ 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,9 +2,8 @@ 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'>, OUIAProps {
+export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Anything that can be rendered as Form content. */
   children?: React.ReactNode;
   /** Additional classes added to the Form. */
@@ -17,10 +16,6 @@ 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> = ({
@@ -30,34 +25,28 @@ const FormBase: React.FunctionComponent<FormProps> = ({
   isWidthLimited = false,
   maxWidth = '',
   innerRef,
-  ouiaId,
-  ouiaSafe = true,
   ...props
-}: 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>
-  );
-};
+}: 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>
+);
 
 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, useOUIAProps, OUIAProps } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 
-export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'>, OUIAProps {
+export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
   children?: React.ReactNode;
   /** Additional classes added to the FormGroup. */
@@ -21,8 +21,6 @@ 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.
@@ -33,10 +31,6 @@ 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> = ({
@@ -49,14 +43,10 @@ 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';
@@ -78,11 +68,10 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
 
   return (
     <div
-      className={css(styles.formGroup, isActionGroup && styles.modifiers.action, className)}
+      className={css(styles.formGroup, 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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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={<RhUiQuestionMarkCircleIcon />}
+      icon={<HelpIcon />}
     />
   );
 };

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,7 +3,6 @@ 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. */
@@ -73,7 +72,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
         <div
           className={css(styles.formFieldGroupBody)}
-          {...(hasAnimations && isExpandable && !isExpanded && { inert: IS_INERT })}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
         >
           {children}
         </div>

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

@@ -34,15 +34,6 @@ 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,9 +24,6 @@ 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,9 +4,6 @@ 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>
@@ -16,9 +13,6 @@ 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>
@@ -28,9 +22,6 @@ 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,9 +4,6 @@ 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"
@@ -44,9 +41,6 @@ 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"
@@ -78,9 +72,6 @@ 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"
@@ -114,9 +105,6 @@ 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"
@@ -154,9 +142,6 @@ 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"
@@ -173,9 +158,6 @@ 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"
@@ -218,16 +200,10 @@ 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"
@@ -260,16 +236,10 @@ 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,9 +6,6 @@ cssPrefix: pf-v6-c-form
 propComponents:
   [
     'ActionGroup',
-    'ActionList',
-    'ActionListGroup',
-    'ActionListItem',
     'Form',
     'FormGroup',
     'FormGroupLabelHelp',
@@ -27,8 +24,8 @@ propComponents:
 
 import { useRef, useEffect, useState } from 'react';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-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 HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples

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

@@ -5,9 +5,7 @@ import {
   TextInput,
   Checkbox,
   Popover,
-  ActionList,
-  ActionListGroup,
-  ActionListItem,
+  ActionGroup,
   Button,
   Radio,
   HelperText,
@@ -125,18 +123,10 @@ 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>
-      <FormGroup isActionGroup>
-        <ActionList>
-          <ActionListGroup>
-            <ActionListItem>
-              <Button variant="primary">Submit</Button>
-            </ActionListItem>
-            <ActionListItem>
-              <Button variant="link">Cancel</Button>
-            </ActionListItem>
-          </ActionListGroup>
-        </ActionList>
-      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
     </Form>
   );
 };

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

@@ -8,7 +8,7 @@ import {
   TextInput,
   Button
 } from '@patternfly/react-core';
-import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
 export const FormFieldGroups: React.FunctionComponent = () => {
   const initialValues = {
@@ -75,7 +75,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
               titleDescription="Nested field group 1 description text."
-              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -104,7 +104,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           header={
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
-              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -134,7 +134,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
               titleDescription="Field group 3 description text."
-              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >

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

@@ -7,9 +7,7 @@ import {
   FormSelect,
   FormSelectOption,
   Checkbox,
-  ActionList,
-  ActionListGroup,
-  ActionListItem,
+  ActionGroup,
   Button,
   Radio,
   HelperText,
@@ -114,18 +112,10 @@ export const FormHorizontal: React.FunctionComponent = () => {
         <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
         <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
       </FormGroup>
-      <FormGroup isActionGroup>
-        <ActionList>
-          <ActionListGroup>
-            <ActionListItem>
-              <Button variant="primary">Submit</Button>
-            </ActionListItem>
-            <ActionListItem>
-              <Button variant="link">Cancel</Button>
-            </ActionListItem>
-          </ActionListGroup>
-        </ActionList>
-      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
     </Form>
   );
 };