feat(icons): updated caret icons to RH microns

packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx

@@ -1,6 +1,6 @@
 import figma from '@figma/code-connect';
 import { Badge, BreadcrumbItem, Dropdown, DropdownItem, DropdownList, Icon, MenuToggle } from '@patternfly/react-core';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 
 // Documentation for BreadcrumbItem can be found at https://www.patternfly.org/components/breadcrumb
 
@@ -33,7 +33,7 @@ figma.connect(
             <DropdownItem
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               key="edit"
@@ -44,7 +44,7 @@ figma.connect(
             <DropdownItem
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               key="action"
@@ -55,7 +55,7 @@ figma.connect(
             <DropdownItem
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               key="apps"

packages/react-core/src/components/Accordion/AccordionToggle.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
 export interface AccordionToggleProps extends React.DetailedHTMLProps<
@@ -27,7 +27,7 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
 }: AccordionToggleProps) => {
   const renderToggleIcon = () => (
     <span className={css(styles.accordionToggleIcon)}>
-      <AngleRightIcon />
+      <RhMicronsCaretDownIcon />
     </span>
   );
 

packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -4,7 +4,7 @@ import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContext, AccordionItemContext } from '../AccordionContext';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', () => () => 'Icon mock');
 
 test('Renders without children', () => {
   render(

packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Button, ButtonProps, ButtonVariant } from '../Button';
 import { AlertContext } from './AlertContext';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
@@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       {...props}
       icon={
         <span className={css(styles.alertToggleIcon)}>
-          <AngleRightIcon />
+          <RhMicronsCaretDownIcon />
         </span>
       }
     />

packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -7,7 +7,7 @@ import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('../../Button');
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', () => () => 'Icon mock');
 
 test('Renders without children', () => {
   render(

packages/react-core/src/components/BackToTop/BackToTop.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/BackToTop/back-to-top';
 import { css } from '@patternfly/react-styles';
-import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
+import RhMicronsCaretUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-up-icon';
 import { canUseDOM } from '../../helpers/util';
 import { Button } from '../Button';
 
@@ -33,7 +33,7 @@
 
   const [scrollElement, setScrollElement] = useState(null);
 
   const toggleVisible = () => {
     if (scrollElement) {
       const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
       if (!isAlwaysVisible) {
@@ -84,7 +84,7 @@
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
+      <Button variant="primary" icon={<RhMicronsCaretUpIcon />} iconPosition="end">
         {title}
       </Button>
     </div>

packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -31,24 +31,12 @@ exports[`Matches the snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 20 20"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 320 512"
-        >
-          <path
-            d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
-          />
-        </svg>
+        <path
+          d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
+        />
       </svg>
     </div>
   </div>

packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -32,7 +32,7 @@ export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>
     <li {...props} className={css(styles.breadcrumbItem, className)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       <h1 className={styles.breadcrumbHeading}>

packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -47,7 +47,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
     <li {...props} className={css(styles.breadcrumbItem, classNameProp)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       {component === 'button' && (

packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -53,24 +53,12 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 256 512"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
-              />
-            </svg>
+            <path
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+            />
           </svg>
         </span>
         <a

packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import { useRef, useState } from 'react';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples

packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -11,13 +11,13 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 
 const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="edit"
@@ -27,7 +27,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="action"
@@ -37,7 +37,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="apps"

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

@@ -4,8 +4,8 @@
 import { Select, SelectList, SelectOption } from '../Select';
 import { MenuToggle, MenuToggleElement } from '../MenuToggle';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { useSSRSafeId } from '../../helpers';
@@ -181,14 +181,14 @@
     } else if (!dateProp) {
       setFocusedDate(today);
     }
   }, [dateProp]);
 
   useEffect(() => {
     // Calendar month should not be focused on page load
     if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
       focusRef.current.focus();
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
   const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
@@ -292,7 +292,7 @@
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-            icon={<AngleLeftIcon />}
+            icon={<RhMicronsCaretLeftIcon />}
           />
         </div>
         <InputGroup>
@@ -355,7 +355,7 @@
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-            icon={<AngleRightIcon />}
+            icon={<RhMicronsCaretRightIcon />}
           />
         </div>
       </div>

packages/react-core/src/components/Card/CardHeader.tsx

@@ -5,7 +5,7 @@ import { CardHeaderMain } from './CardHeaderMain';
 import { CardActions } from './CardActions';
 import { CardSelectableActions } from './CardSelectableActions';
 import { Button } from '../Button';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Radio } from '../Radio';
 import { Checkbox } from '../Checkbox';
 import { useSSRSafeId } from '../../helpers';
@@ -107,7 +107,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
               {...toggleButtonProps}
               icon={
                 <span className={css(styles.cardHeaderToggleIcon)}>
-                  <AngleRightIcon />
+                  <RhMicronsCaretDownIcon />
                 </span>
               }
             />

packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -39,24 +39,12 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
+              viewBox="0 0 20 20"
               width="1em"
             >
-              <svg
-                class="pf-v6-icon-default"
-                viewBox="0 0 256 512"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-              <svg
-                class="pf-v6-icon-rh-ui"
-                viewBox="0 0 32 32"
-              >
-                <path
-                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
-                />
-              </svg>
+              <path
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+              />
             </svg>
           </span>
         </span>

packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps extends Omit<
@@ -31,7 +31,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     {...props}
     icon={
       <div className={css(styles.clipboardCopyToggleIcon)}>
-        <AngleRightIcon />
+        <RhMicronsCaretDownIcon />
       </div>
     }
   />

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -23,24 +23,12 @@ exports[`Matches snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 20 20"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 256 512"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
-            />
-          </svg>
+          <path
+            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+          />
         </svg>
       </div>
     </span>

packages/react-core/src/components/DataList/DataListToggle.tsx

@@ -1,5 +1,5 @@
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Button, ButtonProps, ButtonVariant } from '../Button';
 
@@ -44,7 +44,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
         {...buttonProps}
         icon={
           <div className={css(styles.dataListToggleIcon)}>
-            <AngleRightIcon />
+            <RhMicronsCaretDownIcon />
           </div>
         }
       />