@patternfly/react-core 6.5.0-prerelease.45 → 6.5.0-prerelease.47

package/src/components/Tabs/OverflowTab.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 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 { Popper, PopperOptions } from '../../helpers';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { TabsContext } from './TabsContext';
@@ -117,7 +117,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
           {showTabCount && tabTitle === defaultTitleText && ` (${overflowingTabs.length})`}
         </TabTitleText>
         <span className={styles.tabsLinkToggleIcon}>
-          <AngleRightIcon />
+          <RhMicronsCaretDownIcon />
         </span>
       </button>
     </li>

package/src/components/Tabs/Tabs.tsx

@@ -2,8 +2,9 @@ import { Children, Component, createRef, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-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 RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import {
   isElementInView,
@@ -608,7 +609,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                             aria-labelledby={`${randomId}-text ${randomId}-button`}
                             icon={
                               <span className={css(styles.tabsToggleIcon)}>
-                                <AngleRightIcon />
+                                <RhMicronsCaretDownIcon />
                               </span>
                             }
                           >
@@ -628,7 +629,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                       aria-hidden={disableBackScrollButton}
                       ref={this.leftScrollButtonRef}
                       variant="plain"
-                      icon={<AngleLeftIcon />}
+                      icon={<RhMicronsCaretLeftIcon />}
                     />
                   </div>
                 )}
@@ -651,7 +652,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                       isDisabled={disableForwardScrollButton}
                       aria-hidden={disableForwardScrollButton}
                       variant="plain"
-                      icon={<AngleRightIcon />}
+                      icon={<RhMicronsCaretRightIcon />}
                     />
                   </div>
                 )}

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -27,24 +27,12 @@ exports[`Matches snapshot when expanded 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>
     </button>
@@ -124,24 +112,12 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 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>
     </button>

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

@@ -515,24 +515,12 @@ exports[`should render expandable vertical tabs 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>

package/src/components/TreeView/TreeViewListItem.tsx

@@ -1,7 +1,7 @@
 import { memo, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
-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 { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { useSSRSafeId } from '../../helpers';
@@ -155,7 +155,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
-        <AngleRightIcon />
+        <RhMicronsCaretDownIcon />
       </span>
     </ToggleComponent>
   );

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -32,24 +32,12 @@ exports[`Matches snapshot 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="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>

package/src/components/Wizard/WizardNavItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -121,7 +121,7 @@ export const WizardNavItem = ({
               <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
-                  <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
+                  <RhMicronsCaretDownIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
                 </span>
               </span>
             </>

package/src/components/Wizard/WizardToggle.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useCallback, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-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 CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -112,7 +112,11 @@ export const WizardToggle = ({
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
+            {isActiveSubStep && (
+              <span className={css(styles.wizardToggleSeparator)}>
+                <RhMicronsCaretRightIcon />
+              </span>
+            )}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -29,7 +29,7 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
@@ -96,7 +96,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                   icon={
                     <Icon shouldMirrorRTL>
                       <ToolbarExpandIconWrapper>
-                        <AngleRightIcon />
+                        <RhMicronsCaretDownIcon />
                       </ToolbarExpandIconWrapper>
                     </Icon>
                   }

package/src/demos/DataListDemo.md

@@ -6,8 +6,8 @@ section: components
 import { Fragment, useState } from 'react';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-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 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 { css } from '@patternfly/react-styles';
 

package/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { Badge } from '../../../components/Badge';
-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 { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon />
+                  <RhMicronsCaretDownIcon />
                 </span>
               </div>
             )}

package/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -1867,24 +1867,12 @@ exports[`DualListSelector with tree 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>
                   </div>

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-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 { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface WizardNavItemProps extends OUIAProps {
@@ -95,7 +95,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
               <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
-                  <AngleRightIcon />
+                  <RhMicronsCaretDownIcon />
                 </span>
               </span>
             </>

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-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 CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { WizardStep } from './Wizard';
 import { WizardBody } from './WizardBody';
@@ -88,7 +88,11 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
             <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName}
-            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
+            {activeStepSubName && (
+              <span className={css(styles.wizardToggleSeparator)}>
+                <RhMicronsCaretRightIcon />
+              </span>
+            )}
           </span>
           {activeStepSubName && <span className={css(styles.wizardToggleListItem)}>{activeStepSubName}</span>}
         </span>

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -171,24 +171,12 @@ exports[`Wizard Expandable Nav Wizard should match 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>
                     </span>
                   </span>