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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -51,24 +51,12 @@ exports[`With popover opened 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="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
-                  />
-                </svg>
+                <path
+                  d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                />
               </svg>
             </span>
           </button>
@@ -856,24 +844,12 @@ exports[`disabled date picker 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="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
-                  />
-                </svg>
+                <path
+                  d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                />
               </svg>
             </span>
           </button>

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -21,8 +21,8 @@ import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
-import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
+import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
+import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
 ## Examples
 

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -9,8 +9,8 @@ import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
-import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
+import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
+import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
 export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
   <DescriptionList aria-label="With icons examples">
@@ -29,7 +29,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       <DescriptionListDescription>example</DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>
+      <DescriptionListTerm icon={<RhUiLanguageFillIcon />}>Pod selector</DescriptionListTerm>
       <DescriptionListDescription>
         <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
           app=MyApp
@@ -37,7 +37,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       </DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>
+      <DescriptionListTerm icon={<RhUiFlagFillIcon />}>Annotation</DescriptionListTerm>
       <DescriptionListDescription>2 Annotations</DescriptionListDescription>
     </DescriptionListGroup>
   </DescriptionList>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -105,12 +105,11 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
   const [shouldCollapseSpace, setShouldCollapseSpace] = useState(hidden);
   const previouslyFocusedElement = useRef(null);
-  let currWidth: number = 0;
-  let panelRect: DOMRect;
-  let end: number;
-  let start: number;
-  let bottom: number;
-  let setInitialVals: boolean = true;
+  const resizeState = useRef({
+    initialPointerPos: 0,
+    initialPanelSize: 0,
+    currWidth: 0
+  });
 
   if (isStatic && focusTrap?.enabled) {
     // eslint-disable-next-line no-console
@@ -186,8 +185,20 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
   };
 
+  const setInitialResizeState = (controlPosition: number) => {
+    const panelRect = panel.current.getBoundingClientRect();
+    const initialPanelSize = position === 'bottom' ? panelRect.height : panelRect.width;
+
+    resizeState.current = {
+      initialPointerPos: controlPosition,
+      initialPanelSize,
+      currWidth: initialPanelSize
+    };
+  };
+
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
+    setInitialResizeState(position === 'bottom' ? e.touches[0].clientY : e.touches[0].clientX);
     document.addEventListener('touchmove', callbackTouchMove, { passive: false });
     document.addEventListener('touchend', callbackTouchEnd);
     isResizing = true;
@@ -196,11 +207,11 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const handleMousedown = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
+    setInitialResizeState(position === 'bottom' ? e.clientY : e.clientX);
     document.addEventListener('mousemove', callbackMouseMove);
     document.addEventListener('mouseup', callbackMouseUp);
     drawerRef.current.classList.add(css(styles.modifiers.resizing));
     isResizing = true;
-    setInitialVals = true;
   };
 
   const handleMouseMove = (e: MouseEvent) => {
@@ -223,33 +234,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
 
-    if (setInitialVals) {
-      panelRect = panel.current.getBoundingClientRect();
-      if (isRTL) {
-        start = panelRect.right;
-        end = panelRect.left;
-      } else {
-        end = panelRect.right;
-        start = panelRect.left;
-      }
-      bottom = panelRect.bottom;
-      setInitialVals = false;
-    }
-    const mousePos = controlPosition;
+    const { initialPointerPos, initialPanelSize } = resizeState.current;
+    const delta = controlPosition - initialPointerPos;
     let newSize = 0;
     if (position === 'end' || position === 'right') {
-      newSize = isRTL ? mousePos - end : end - mousePos;
+      newSize = isRTL ? initialPanelSize + delta : initialPanelSize - delta;
     } else if (position === 'start' || position === 'left') {
-      newSize = isRTL ? start - mousePos : mousePos - start;
+      newSize = isRTL ? initialPanelSize - delta : initialPanelSize + delta;
     } else {
-      newSize = bottom - mousePos;
+      newSize = initialPanelSize - delta;
     }
 
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
     panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
-    currWidth = newSize;
+    resizeState.current.currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
 
@@ -259,8 +259,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
     drawerRef.current.classList.remove(css(styles.modifiers.resizing));
     isResizing = false;
-    onResize && onResize(e, currWidth, id);
-    setInitialVals = true;
+    onResize && onResize(e, resizeState.current.currWidth, id);
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
   };
@@ -271,7 +270,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
     isResizing = false;
-    onResize && onResize(e, currWidth, id);
+    onResize && onResize(e, resizeState.current.currWidth, id);
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
   };
@@ -301,7 +300,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     e.preventDefault();
 
     if (key === 'Escape' || key === 'Enter') {
-      onResize && onResize(e, currWidth, id);
+      onResize && onResize(e, resizeState.current.currWidth, id);
     }
     const panelRect = panel.current.getBoundingClientRect();
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
@@ -328,7 +327,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       panel.current.style.overflowAnchor = 'none';
     }
     panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
-    currWidth = newSize;
+    resizeState.current.currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};

package/src/components/Dropdown/examples/Dropdown.md

@@ -17,7 +17,7 @@ propComponents:
 ---
 
 import { useState, useRef } from 'react';
-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