npm - @patternfly/react-core - Versions diffs - 6.6.0-prerelease.6 → 6.6.0-prerelease.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (375) hide show

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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}

package/src/components/Card/examples/CardSubtitleActions.tsx CHANGED Viewed

@@ -14,7 +14,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';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -64,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardWithImageAndActions.tsx CHANGED Viewed

@@ -14,7 +14,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';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -64,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={<EllipsisVIcon />}
+            icon={<RhUiEllipsisVerticalFillIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { createRef } from 'react';
-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 { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
@@ -87,7 +87,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         aria-label={ariaLabel}
         className={className}
         id={id}
-        icon={<CopyIcon />}
+        icon={<RhUiCopyFillIcon />}
         {...props}
         ref={triggerRef}
       />

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap CHANGED Viewed

@@ -45,24 +45,12 @@ exports[`Matches snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 32 32"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
-            />
-          </svg>
+          <path
+            d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
+          />
         </svg>
       </span>
     </button>

package/src/components/CodeBlock/examples/CodeBlock.md CHANGED Viewed

@@ -6,7 +6,7 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 import { Fragment, useState } from 'react';
-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 PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 **Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.

package/src/components/Compass/examples/Compass.md CHANGED Viewed

@@ -16,10 +16,6 @@ propComponents:
 ---
 import { useRef, useState, useEffect } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
-import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
-import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import './compass.css';

package/src/components/DataList/DataListDragButton.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
+import RhUiGripVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-grip-vertical-fill-icon';
 export interface DataListDragButtonProps extends React.HTMLProps<HTMLButtonElement> {
   /** Additional classes added to the drag button */
@@ -23,7 +23,7 @@ export const DataListDragButton: React.FunctionComponent<DataListDragButtonProps
     {...props}
   >
     <span className={css(styles.dataListItemDraggableIcon)}>
-      <GripVerticalIcon />
+      <RhUiGripVerticalFillIcon />
     </span>
   </button>
 );

package/src/components/DataList/examples/DataList.md CHANGED Viewed

@@ -19,10 +19,10 @@ propComponents:
 ---
 import { Fragment, useState } from 'react';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-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';
 import { css } from '@patternfly/react-styles';
 import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';

package/src/components/DataList/examples/DataListActions.tsx CHANGED Viewed

@@ -13,7 +13,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 DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -86,7 +86,7 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen}

package/src/components/DataList/examples/DataListCheckboxes.tsx CHANGED Viewed

@@ -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 DataListCheckboxes: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = useState(false);
@@ -84,7 +84,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen1}
@@ -138,7 +138,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen3}

package/src/components/DataList/examples/DataListClickableRows.tsx CHANGED Viewed

@@ -12,7 +12,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 DataListClickableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = useState(false);
@@ -76,7 +76,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -125,7 +125,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen2}

package/src/components/DataList/examples/DataListExpandable.tsx CHANGED Viewed

@@ -14,8 +14,8 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = useState(false);
@@ -66,7 +66,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="primary content">
                   <div id="ex-item1">Primary content</div>
@@ -92,7 +92,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -137,7 +137,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="secondary content">
                   <div id="ex-item2">Secondary content</div>
@@ -162,7 +162,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -207,7 +207,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="tertiary content">
                   <div id="ex-item3">Tertiary content</div>
@@ -232,7 +232,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx CHANGED Viewed

@@ -14,8 +14,8 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 export const DataListMixedExpandable: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = useState(false);
@@ -68,7 +68,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="primary content">
                   <div id="m-ex-item1">Primary content</div>
@@ -94,7 +94,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -141,7 +141,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="secondary content">
                   <div id="m-ex-item2">Secondary content</div>
@@ -166,7 +166,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="tertiary content">
                   <div id="m-ex-item3">Tertiary content</div>
@@ -226,7 +226,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx CHANGED Viewed

@@ -16,7 +16,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 DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = useState(true);
@@ -103,7 +103,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -176,7 +176,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={isOpen2}

package/src/components/DatePicker/DatePicker.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Button } from '../Button';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
+import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
@@ -333,7 +333,7 @@ const DatePickerBase = (
                 aria-label={buttonAriaLabel}
                 onClick={() => setPopoverOpen(!popoverOpen)}
                 isDisabled={isDisabled}
-                icon={<OutlinedCalendarAltIcon />}
+                icon={<RhUiCalendarIcon />}
                 aria-haspopup="dialog"
               />
             </InputGroupItem>