@patternfly/react-core 6.6.0-prerelease.6 → 6.6.0-prerelease.8

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.0-prerelease.6",
+  "version": "6.6.0-prerelease.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.0-prerelease.1",
-    "@patternfly/react-styles": "^6.6.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.6.0-prerelease.1",
+    "@patternfly/react-icons": "^6.6.0-prerelease.3",
+    "@patternfly/react-styles": "^6.6.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.6.0-prerelease.3",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.2",
+    "@patternfly/patternfly": "6.6.0-prerelease.9",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "04d4b22048d55a10d2b87bb3fabad41da6887d9e"
+  "gitHead": "6403b82a97c1ff1ec98902e3c6f1998233f88dbd"
 }

package/src/components/ActionList/examples/ActionList.md

@@ -8,7 +8,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggleElement,
   Divider
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -84,7 +84,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen}

package/src/components/Alert/examples/Alert.md

@@ -8,10 +8,10 @@ ouia: true
 
 import './alert.css';
 import { Fragment, useEffect, useState } from 'react';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 

package/src/components/Alert/examples/AlertCustomIcons.tsx

@@ -1,17 +1,17 @@
 import { Fragment } from 'react';
 import { Alert } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 
 export const AlertCustomIcons: React.FunctionComponent = () => (
   <Fragment>
-    <Alert customIcon={<UsersIcon />} title="Default alert title" />
-    <Alert customIcon={<BoxIcon />} variant="info" title="Info alert title" />
+    <Alert customIcon={<RhUiUsersFillIcon />} title="Default alert title" />
+    <Alert customIcon={<RhUiContainerFillIcon />} variant="info" title="Info alert title" />
     <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
-    <Alert customIcon={<ServerIcon />} variant="warning" title="Warning alert title" />
+    <Alert customIcon={<RhUiServerStackFillIcon />} variant="warning" title="Warning alert title" />
     <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
   </Fragment>
 );

package/src/components/Avatar/Avatar.tsx

@@ -5,31 +5,59 @@ export interface AvatarProps extends React.DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 > {
+  /** Content rendered inside the avatar, such as custom svgs or icons. */
+  children?: React.ReactNode;
   /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the avatar. */
+  /** Specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the avatar. */
+  /** Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar
+   * from assistive technologies when passing children or initials, pass an empty string to the alt prop.
+   */
   alt: string;
   /** Flag to indicate the avatar should have a border. */
   isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Color of the avatar. */
+  color?: 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray';
+  /** Initials of the avatar. */
+  initials?: string;
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
+  children,
   className,
   src = '',
   alt,
   isBordered,
   size,
+  color,
+  initials,
   ...props
-}: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
-    {...props}
-  />
-);
+}: AvatarProps) => {
+  const avatarClasses = css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className);
+  const isAltEmptyString = alt === '';
+
+  if (initials || children) {
+    return (
+      <div
+        className={css(avatarClasses, color && styles.modifiers.colorful, color && styles.modifiers[color])}
+        role="img"
+        aria-hidden={isAltEmptyString || undefined}
+        {...(!isAltEmptyString && { 'aria-label': alt })}
+        {...props}
+      >
+        {initials && (
+          <span className="pf-v6-c-avatar__initials" aria-hidden="true">
+            {initials}
+          </span>
+        )}
+        {children && children}
+      </div>
+    );
+  }
+
+  return <img src={src} alt={alt} className={avatarClasses} {...props} />;
+};
 Avatar.displayName = 'Avatar';

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

@@ -62,6 +62,67 @@ test('Renders with passed aria-label prop', () => {
   expect(screen.getByRole('img')).toHaveAccessibleName('Avatar test');
 });
 
+test('Renders with passed initials prop', () => {
+  render(<Avatar alt="avatar" initials="AB" />);
+  expect(screen.getByText('AB')).toBeVisible();
+});
+
+test('Renders with passed children prop', () => {
+  render(<Avatar alt="avatar">Test</Avatar>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with class name ${styles.modifiers.colorful} when color prop is passed`, () => {
+  render(
+    <Avatar alt="avatar" color="red">
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.colorful);
+});
+
+const colors = ['red', 'orangered', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'gray'] as const;
+test.each(colors)('Renders with passed color prop: %s', (color) => {
+  render(
+    <Avatar alt="avatar" color={color}>
+      Test
+    </Avatar>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers[color]);
+});
+
+test('Passes alt prop as aria-label when initials are passed', () => {
+  render(<Avatar alt="User avatar" initials="AB" />);
+  expect(screen.getByRole('img')).toHaveAccessibleName('User avatar');
+});
+
+test('Passes alt prop as aria-label when children are passed', () => {
+  render(<Avatar alt="User avatar">Test</Avatar>);
+  expect(screen.getByRole('img')).toHaveAccessibleName('User avatar');
+});
+
+test('Applies aria-hidden="true" when alt is empty string and initials are passed', () => {
+  render(<Avatar alt="" initials="AB" />);
+  expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('Applies aria-hidden="true" when alt is empty string and children are passed', () => {
+  render(<Avatar alt="">Test</Avatar>);
+  expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('Does not apply aria-label attribute when alt is empty string and initials are passed', () => {
+  render(<Avatar alt="" initials="AB" />);
+  const avatar = screen.getByRole('img', { hidden: true });
+  expect(avatar).not.toHaveAttribute('aria-label');
+});
+
+test('Does not apply aria-label attribute when alt is empty string and children are passed', () => {
+  render(<Avatar alt="">Test</Avatar>);
+  const avatar = screen.getByRole('img', { hidden: true });
+  expect(avatar).not.toHaveAttribute('aria-label');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Avatar alt="avatar" aria-label="Avatar test" src="test.png" className="test-class" />);
 

package/src/components/Avatar/examples/Avatar.md

@@ -5,22 +5,49 @@ cssPrefix: pf-v6-c-avatar
 propComponents: ['Avatar']
 ---
 
+import './avatar.css';
 import { Fragment } from 'react';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 
 ## Examples
 
-### Basic
+### Basic usage
+
+Pass in the `src` property to apply an image for the avatar, or pass `children` for custom content such as icons or svg elements.
 
 ```ts file="./AvatarBasic.tsx"
+
+```
+
+### Color modifiers
+
+Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".
+
+```ts file="./AvatarColorModifiers.tsx"
+
+```
+
+### With initials
+
+An avatar can display initials by using the `initials` property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.
+
+```ts file="./AvatarInitials.tsx"
+
 ```
 
-### Bordered 
+### Bordered
+
+A border can be applied by passing the `isBordered` property to a non-colorful avatar.
 
 ```ts file="./AvatarBordered.tsx"
+
 ```
 
 ### Size variations
 
+An avatar can be rendered at different sizes by passing the `size` property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".
+
 ```ts file="./AvatarSizeVariations.tsx"
+
 ```

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -1,4 +1,34 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import avatarImg from '../../assets/img_avatar-light.svg';
 
-<Avatar src={avatarImg} alt="avatar" />;
+const rhdsLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <g>
+      <rect width="48" height="48" fill="#147878"></rect>
+      <rect x="36" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="36" width="24" height="6" fill="#004D4D"></rect>
+      <rect x="18" y="30" width="12" height="6" fill="#004D4D"></rect>
+      <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"></rect>
+      <rect x="18" width="12" height="12" fill="#004D4D"></rect>
+      <rect x="6" y="30" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="24" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="18" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="12" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="6" width="6" height="6" fill="#004D4D"></rect>
+      <rect y="12" width="6" height="24" fill="#004D4D"></rect>
+    </g>
+  </svg>
+);
+
+export const AvatarBasic: React.FunctionComponent = () => (
+  <>
+    <Avatar src={avatarImg} alt="Basic avatar with image" />
+    <Avatar alt="Basic avatar with children">{rhdsLogo}</Avatar>
+  </>
+);

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -1,4 +1,8 @@
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 
-<Avatar src={avatarImg} alt="avatar" isBordered />;
+export const AvatarBordered: React.FunctionComponent = () => (
+  <Avatar alt="Avatar with border" isBordered>
+    <RhUiAiChatbotIcon />
+  </Avatar>
+);

package/src/components/Avatar/examples/AvatarColorModifiers.tsx

@@ -0,0 +1,43 @@
+import { Avatar } from '@patternfly/react-core';
+
+const profileSvg = (
+  <svg aria-hidden="true" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
+    <path fill="currentColor" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z" />
+    <path
+      fill="currentColor"
+      d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
+    />
+  </svg>
+);
+
+export const AvatarColorModifiers: React.FunctionComponent = () => (
+  <>
+    <Avatar color="red" alt="red avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="orangered" alt="orangered avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="orange" alt="orange avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="yellow" alt="yellow avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="green" alt="green avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="teal" alt="teal avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="blue" alt="blue avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="purple" alt="purple avatar">
+      {profileSvg}
+    </Avatar>
+    <Avatar color="gray" alt="gray avatar">
+      {profileSvg}
+    </Avatar>
+  </>
+);

package/src/components/Avatar/examples/AvatarInitials.tsx

@@ -0,0 +1,16 @@
+import { Avatar } from '@patternfly/react-core';
+
+export const AvatarInitials: React.FunctionComponent = () => (
+  <>
+    <Avatar alt="non-color avatar with initial C" isBordered initials="C" />
+    <Avatar color="red" alt="red avatar with initial C" initials="C" />
+    <Avatar color="orangered" alt="orangered avatar with initial C" initials="C" />
+    <Avatar color="orange" alt="orange avatar with initial C" initials="C" />
+    <Avatar color="yellow" alt="yellow avatar with initial C" initials="C" />
+    <Avatar color="green" alt="green avatar with initial C" initials="C" />
+    <Avatar color="teal" alt="teal avatar with initial C" initials="C" />
+    <Avatar color="blue" alt="blue avatar with initial C" initials="C" />
+    <Avatar color="purple" alt="purple avatar with initial C" initials="C" />
+    <Avatar color="gray" alt="gray avatar with initial C" initials="C" />
+  </>
+);

package/src/components/Avatar/examples/AvatarSizeVariations.tsx

@@ -1,21 +1,10 @@
-import { Fragment } from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
 
-<Fragment>
-  Small
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="xl" />
-</Fragment>;
+export const AvatarSizeVariations: React.FunctionComponent = () => (
+  <>
+    <Avatar alt="small red avatar with initial C" initials="C" color="red" size="sm" />
+    <Avatar alt="medium red avatar with initial C" initials="C" color="red" size="md" />
+    <Avatar alt="large red avatar with initial C" initials="C" color="red" size="lg" />
+    <Avatar alt="extra large red avatar with initial C" initials="C" color="red" size="xl" />
+  </>
+);

package/src/components/Avatar/examples/avatar.css

@@ -0,0 +1,7 @@
+.ws-react-c-avatar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pf-t--global--spacer--sm);
+  align-items: end;
+  height: auto !important;
+}

package/src/components/Button/examples/Button.md

@@ -10,7 +10,7 @@ import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';

package/src/components/Button/examples/ButtonCircle.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -48,7 +48,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
         aria-label="Add warning circle variant example"
       />
       <Button variant="link" isCircle icon={<RhUiAddCircleFillIcon />} aria-label="Add link circle variant example" />
-      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="control" isCircle icon={<RhUiCopyFillIcon />} aria-label="Copy control circle variant example" />
       <Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
       <Button
         variant="stateful"

package/src/components/Button/examples/ButtonDisabled.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 
 export const ButtonDisabled: React.FunctionComponent = () => (
   <>
@@ -41,7 +41,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
       <Button isDisabled variant="control">
         Control
       </Button>
-      <Button isDisabled variant="control" aria-label="Copy" icon={<CopyIcon />} />
+      <Button isDisabled variant="control" aria-label="Copy" icon={<RhUiCopyFillIcon />} />
     </Flex>
   </>
 );

package/src/components/Button/examples/ButtonVariations.tsx

@@ -2,7 +2,7 @@ import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
@@ -46,7 +46,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button variant="control">Control</Button>
-      <Button variant="control" aria-label="Copy" icon={<CopyIcon />} />
+      <Button variant="control" aria-label="Copy" icon={<RhUiCopyFillIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>

package/src/components/Card/examples/Card.md

@@ -19,7 +19,7 @@ ouia: true
 import { Fragment, useState } from 'react';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ## Examples

package/src/components/Card/examples/CardExpandable.tsx

@@ -14,7 +14,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const CardExpandable: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -71,7 +71,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -14,7 +14,7 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import pfLogoSmall from '../../PF-IconLogo.svg';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -67,7 +67,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -13,7 +13,7 @@ import {
   MenuToggleElement,
   Divider
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -58,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggleElement,
   Divider
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -56,7 +56,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}