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

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

@@ -5,9 +5,7 @@ import {
   TextInput,
   Checkbox,
   Popover,
-  ActionList,
-  ActionListGroup,
-  ActionListItem,
+  ActionGroup,
   Button,
   Radio,
   HelperText,
@@ -125,18 +123,10 @@ export const FormLimitWidth: React.FunctionComponent = () => {
       <FormGroup fieldId="checkbox02">
         <Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" 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/FormState.tsx

@@ -1,8 +1,6 @@
 import { useState } from 'react';
 import {
-  ActionList,
-  ActionListGroup,
-  ActionListItem,
+  ActionGroup,
   Button,
   ButtonType,
   ButtonVariant,
@@ -65,11 +63,9 @@ export const FormState = () => {
             isOpen={isSelectOpen}
             toggle={(toggleRef) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={(isOpen) => setIsSelectOpen(isOpen)}
                 isExpanded={isSelectOpen}
-                isInForm
                 style={
                   {
                     width: '200px'
@@ -92,36 +88,25 @@ export const FormState = () => {
             </SelectList>
           </Select>
 
-          <FormGroup isActionGroup>
-            <ActionList>
-              <ActionListGroup>
-                <ActionListItem>
-                  <Button
-                    type={ButtonType.submit}
-                    onClick={(e) => {
-                      e.preventDefault();
+          <ActionGroup>
+            <Button
+              type={ButtonType.submit}
+              onClick={(e) => {
+                e.preventDefault();
 
-                      if (!values['input-id']) {
-                        setError('input-id', 'Input value is required.');
-                      } else {
-                        alert(`Form submitted with: \n ${JSON.stringify(values)}`);
-                      }
-                    }}
-                  >
-                    Submit
-                  </Button>
-                </ActionListItem>
-                <ActionListItem>
-                  <Button
-                    variant={ButtonVariant.link}
-                    onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}
-                  >
-                    {`${formStateExpanded ? 'Hide' : 'Show'} form state`}
-                  </Button>
-                </ActionListItem>
-              </ActionListGroup>
-            </ActionList>
-          </FormGroup>
+                if (!values['input-id']) {
+                  setError('input-id', 'Input value is required.');
+                } else {
+                  alert(`Form submitted with: \n ${JSON.stringify(values)}`);
+                }
+              }}
+            >
+              Submit
+            </Button>
+            <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>
+              {`${formStateExpanded ? 'Hide' : 'Show'} form state`}
+            </Button>
+          </ActionGroup>
           {formStateExpanded && (
             <>
               <Divider />

package/src/components/HelperText/HelperTextItem.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 import { css } from '@patternfly/react-styles';
-import RhUiMinusIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-minus-icon';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
@@ -37,7 +37,7 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
 }
 
 const defaultVariantIcons = {
-  indeterminate: <RhUiMinusIcon />,
+  indeterminate: <MinusIcon />,
   warning: <RhUiWarningFillIcon />,
   success: <RhUiCheckCircleFillIcon />,
   error: <RhUiErrorFillIcon />

package/src/components/HelperText/examples/HelperText.md

@@ -7,8 +7,8 @@ propComponents: ['HelperText', 'HelperTextItem']
 
 import { Fragment } from 'react';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import RhUiQuestionMarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-icon';
-import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 

package/src/components/HelperText/examples/HelperTextWithCustomIcon.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from 'react';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import RhUiQuestionMarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
-import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
@@ -12,7 +12,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="indeterminate" icon={<RhUiQuestionMarkIcon />}>
+      <HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
         This is indeterminate helper text
       </HelperTextItem>
     </HelperText>
@@ -22,7 +22,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="success" icon={<RhMicronsCheckmarkIcon />}>
+      <HelperTextItem variant="success" icon={<CheckIcon />}>
         This is success helper text
       </HelperTextItem>
     </HelperText>

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

@@ -1,13 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { kebabCase } from 'case-anything';
 import { Icon, IconSize } from '../Icon';
-import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
   const { asFragment } = render(
     <Icon>
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -16,7 +16,7 @@ test('renders basic icon successfully', () => {
 test('checks basic icon structure', () => {
   render(
     <Icon title="icon">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('icon');
@@ -33,7 +33,7 @@ test('renders without children', () => {
 test('sets additional custom class successfully', () => {
   render(
     <Icon className="test" title="custom-icon">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('custom-icon');
@@ -61,7 +61,7 @@ Object.values([
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
       <Icon iconSize={size as IconSize} title={`content-${size}-icon`}>
-        <RhMicronsCheckmarkIcon />
+        <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
@@ -74,7 +74,7 @@ Object.values([
   test(`sets progress icon size modifier successfully - ${size}`, () => {
     render(
       <Icon isInProgress progressIconSize={size as IconSize} title={`progress-content-${size}-icon`}>
-        <RhMicronsCheckmarkIcon />
+        <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
@@ -87,7 +87,7 @@ Object.values([
   test(`sets size modifier successfully - ${size}`, () => {
     render(
       <Icon size={size as IconSize} title={`${size}-icon`}>
-        <RhMicronsCheckmarkIcon />
+        <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`${size}-icon`);
@@ -101,7 +101,7 @@ Object.values([
 test('check icon without iconSize', () => {
   render(
     <Icon title="no-icon-size">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-icon-size').querySelector(`.${styles.iconContent}`);
@@ -111,7 +111,7 @@ test('check icon without iconSize', () => {
 test('check icon without progress icon size', () => {
   render(
     <Icon title="no-progress-icon-size">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector(`.${styles.iconProgress}`);
@@ -121,7 +121,7 @@ test('check icon without progress icon size', () => {
 test('check icon without size', () => {
   render(
     <Icon title="no-size">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-size');
@@ -132,7 +132,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
   test(`sets status modifier successfully - ${status}`, () => {
     render(
       <Icon status={status as 'custom' | 'info' | 'success' | 'warning' | 'danger'} title={`${status}-icon`}>
-        <RhMicronsCheckmarkIcon />
+        <CheckIcon />
       </Icon>
     );
     const iconContent = screen.getByTitle(`${status}-icon`).querySelector(`.${styles.iconContent}`);
@@ -144,7 +144,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
 test('check icon without status', () => {
   render(
     <Icon title="no-status">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContent = screen.getByTitle('no-status').querySelector(`.${styles.iconContent}`);
@@ -154,7 +154,7 @@ test('check icon without status', () => {
 test('sets isInline successfully', () => {
   render(
     <Icon isInline title="inline-icon">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('inline-icon');
@@ -165,7 +165,7 @@ test('sets isInline successfully', () => {
 test('check icon without isInline', () => {
   render(
     <Icon title="no-inline">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-inline');
@@ -175,7 +175,7 @@ test('check icon without isInline', () => {
 test('sets isInProgress successfully', () => {
   render(
     <Icon isInProgress title="progress-icon">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('progress-icon');
@@ -188,7 +188,7 @@ test('sets isInProgress successfully', () => {
 test('check icon without isInProgress', () => {
   render(
     <Icon title="no-in-progress">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-in-progress');
@@ -198,7 +198,7 @@ test('check icon without isInProgress', () => {
 test('sets default progres aria-label successfully', () => {
   render(
     <Icon isInProgress defaultProgressArialabel="test" title="progress-icon">
-      <RhMicronsCheckmarkIcon />
+      <CheckIcon />
     </Icon>
   );
 
@@ -207,8 +207,8 @@ test('sets default progres aria-label successfully', () => {
 
 test('renders progress icon successfully', () => {
   const { asFragment } = render(
-    <Icon isInProgress progressIcon={<RhMicronsCheckmarkIcon />}>
-      <RhMicronsCheckmarkIcon />
+    <Icon isInProgress progressIcon={<CheckIcon />}>
+      <CheckIcon />
     </Icon>
   );
   expect(asFragment()).toMatchSnapshot();

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

@@ -14,12 +14,24 @@ exports[`renders basic icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 20 20"
         width="1em"
       >
-        <path
-          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>
@@ -40,12 +52,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 20 20"
         width="1em"
       >
-        <path
-          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
     <span
@@ -57,12 +81,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 20 20"
         width="1em"
       >
-        <path
-          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>

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

@@ -6,7 +6,7 @@ propComponents: ['Icon']
 ---
 
 import { Fragment, useState } from 'react';
-import RhMicronsArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-down-icon';
+import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';

package/src/components/Icon/examples/IconBasic.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import RhMicronsArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-down-icon';
+import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
@@ -8,7 +8,7 @@ import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-s
 export const IconBasic: React.FunctionComponent = () => (
   <Fragment>
     <Icon>
-      <RhMicronsArrowDownIcon />
+      <LongArrowAltDownIcon />
     </Icon>{' '}
     <Icon>
       <RhMicronsCaretRightIcon />

package/src/components/JumpLinks/JumpLinks.tsx

@@ -142,10 +142,6 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       return;
     }
     const scrollPosition = Math.ceil(scrollableElement.scrollTop + offset);
-    // Take into account the last section not having enough content to trigger a scroll position; without
-    // checking if at the bottom of the scroll container, the last JumpLinksItem never becomes "active".
-    const isAtBottom =
-      Math.ceil(scrollableElement.scrollTop + scrollableElement.clientHeight) >= scrollableElement.scrollHeight;
     window.requestAnimationFrame(() => {
       let newScrollItems = scrollItems;
       // Items might have rendered after this component or offsetTop values may need
@@ -157,11 +153,6 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
         setScrollItems(newScrollItems);
       }
 
-      if (isAtBottom) {
-        const lastIndex = newScrollItems.length - 1;
-        return setActiveIndex(lastIndex);
-      }
-
       const scrollElements = newScrollItems
         .map((e, index) => ({
           y: e ? e.offsetTop : null,

package/src/components/List/examples/List.md

@@ -6,49 +6,34 @@ propComponents: ['List', 'ListItem']
 ---
 
 import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
-import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 ## Examples
-
 ### Basic
-
 ```ts file="./ListBasic.tsx"
-
 ```
 
 ### Inline
-
 ```ts file="./ListInline.tsx"
-
 ```
 
 ### Ordered
-
 ```ts file="./ListOrdered.tsx"
-
 ```
 
 ### Plain
-
 ```ts file="./ListPlain.tsx"
-
 ```
 
 ### With horizontal rules
-
 ```ts file="./ListHorizontalRules.tsx"
-
 ```
 
 ### With icons
-
 ```ts file="./ListIcons.tsx"
-
 ```
 
 ### With large icons
-
 ```ts file="./ListLargeIcons.tsx"
-
 ```

package/src/components/List/examples/ListIcons.tsx

@@ -1,12 +1,12 @@
 import { List, ListItem } from '@patternfly/react-core';
 import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
-import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListIcons: React.FunctionComponent = () => (
   <List isPlain>
     <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
-    <ListItem icon={<RhUiKeyIcon />}>Second</ListItem>
-    <ListItem icon={<RhUiDesktopIcon />}>Third</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>
 );

package/src/components/List/examples/ListLargeIcons.tsx

@@ -1,12 +1,12 @@
 import { List, ListItem } from '@patternfly/react-core';
 import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
-import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListLargeIcons: React.FunctionComponent = () => (
   <List isPlain iconSize="large">
     <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
-    <ListItem icon={<RhUiKeyIcon />}>Second</ListItem>
-    <ListItem icon={<RhUiDesktopIcon />}>Third</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>
 );

package/src/components/LoginPage/LoginForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Form, FormGroup, FormHelperText } from '../Form';
+import { Form, FormGroup, ActionGroup, FormHelperText } from '../Form';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
@@ -147,11 +147,11 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           />
         </FormGroup>
       )}
-      <FormGroup isActionGroup>
+      <ActionGroup>
         <Button variant="primary" type="submit" onClick={onLoginButtonClick} isBlock isDisabled={isLoginButtonDisabled}>
           {loginButtonLabel}
         </Button>
-      </FormGroup>
+      </ActionGroup>
     </Form>
   );
 };