@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -13,7 +13,7 @@ import {
   LabelGroup,
   Button
 } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
   { value: 'Alabama', children: 'Alabama' },
@@ -226,7 +226,12 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -11,7 +11,7 @@ import {
   TextInputGroupUtilities,
   Button
 } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
   { value: 'Alabama', children: 'Alabama' },
@@ -219,7 +219,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
           aria-controls="select-multi-typeahead-checkbox-listbox"
         />
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -13,7 +13,7 @@ import {
   LabelGroup,
   Button
 } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
   { value: 'Alabama', children: 'Alabama' },
@@ -239,7 +239,12 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectOptionVariations.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const SelectOptionVariations: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -57,7 +57,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
         >
           Option with link
         </SelectOption>
-        <SelectOption value="Option with icon" icon={<BellIcon />}>
+        <SelectOption value="Option with icon" icon={<RhUiNotificationFillIcon />}>
           Option with icon
         </SelectOption>
         <SelectOption value="Disabled option" isDisabled>

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -11,7 +11,7 @@ import {
   TextInputGroupUtilities,
   Button
 } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
   { value: 'Alabama', children: 'Alabama' },
@@ -223,7 +223,12 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -11,7 +11,7 @@ import {
   TextInputGroupUtilities,
   Button
 } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
   { value: 'Alabama', children: 'Alabama' },
@@ -230,7 +230,12 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

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

@@ -7,7 +7,7 @@ exports[`Verify Skip To Content 1`] = `
   >
     <a
       class="pf-v6-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-id="OUIA-Generated-Button-primary-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       href="#main-content"

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

@@ -62,7 +62,7 @@ exports[`slider renders continuous slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -256,7 +256,7 @@ exports[`slider renders discrete slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -428,7 +428,7 @@ exports[`slider renders slider with input 1`] = `
             <input
               aria-invalid="false"
               aria-label="Slider value input"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -518,7 +518,7 @@ exports[`slider renders slider with input above thumb 1`] = `
               <input
                 aria-invalid="false"
                 aria-label="Slider value input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -554,7 +554,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Minus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -613,7 +613,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Plus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"

package/src/components/Switch/Switch.tsx

@@ -2,12 +2,11 @@ import { Component, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Switch/switch';
 import { css } from '@patternfly/react-styles';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import { getUniqueId } from '../../helpers/util';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface SwitchProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
   /** id for the label. */
   id?: string;
   /** Additional classes added to the switch */
@@ -40,9 +39,8 @@ export interface SwitchProps
   ouiaSafe?: boolean;
 }
 
-class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
+class Switch extends Component<SwitchProps & OUIAProps> {
   static displayName = 'Switch';
-  id: string;
 
   static defaultProps: SwitchProps = {
     isChecked: true,
@@ -61,17 +59,11 @@ class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }>
         'Switch: Switch requires at least one of label, aria-labelledby, or aria-label props to be specified'
       );
     }
-
-    this.id = props.id || getUniqueId();
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Switch.displayName)
-    };
   }
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      id,
+      id: idProp,
       className,
       label,
       isChecked,
@@ -87,54 +79,61 @@ class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }>
       ...props
     } = this.props;
 
-    const hasAccessibleName = label || ariaLabel || ariaLabelledBy;
-    const isAriaLabelledBy = hasAccessibleName && (!ariaLabel || ariaLabelledBy);
-    const useDefaultAriaLabelledBy = !ariaLabelledBy && !ariaLabel;
-    const ariaLabelledByIds = ariaLabelledBy ?? `${this.id}-label`;
-
     return (
-      <label
-        className={css(styles.switch, isReversed && styles.modifiers.reverse, className)}
-        htmlFor={this.id}
-        {...getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      >
-        <input
-          id={this.id}
-          className={css(styles.switchInput)}
-          type="checkbox"
-          role="switch"
-          onChange={(event) => onChange(event, event.target.checked)}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
-          disabled={isDisabled}
-          aria-labelledby={isAriaLabelledBy ? ariaLabelledByIds : null}
-          aria-label={ariaLabel}
-          {...props}
-        />
-        {label !== undefined ? (
-          <Fragment>
-            <span className={css(styles.switchToggle)}>
-              {hasCheckIcon && (
-                <span className={css(styles.switchToggleIcon)}>
-                  <CheckIcon />
+      <SSRSafeIds prefix="pf-switch-" ouiaComponentType="Switch">
+        {(generatedId, generatedOuiaId) => {
+          const id = idProp || generatedId;
+          const hasAccessibleName = label || ariaLabel || ariaLabelledBy;
+          const isAriaLabelledBy = hasAccessibleName && (!ariaLabel || ariaLabelledBy);
+          const useDefaultAriaLabelledBy = !ariaLabelledBy && !ariaLabel;
+          const ariaLabelledByIds = ariaLabelledBy ?? `${id}-label`;
+
+          return (
+            <label
+              className={css(styles.switch, isReversed && styles.modifiers.reverse, className)}
+              htmlFor={id}
+              {...getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            >
+              <input
+                id={id}
+                className={css(styles.switchInput)}
+                type="checkbox"
+                role="switch"
+                onChange={(event) => onChange(event, event.target.checked)}
+                {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+                disabled={isDisabled}
+                aria-labelledby={isAriaLabelledBy ? ariaLabelledByIds : null}
+                aria-label={ariaLabel}
+                {...props}
+              />
+              {label !== undefined ? (
+                <Fragment>
+                  <span className={css(styles.switchToggle)}>
+                    {hasCheckIcon && (
+                      <span className={css(styles.switchToggleIcon)}>
+                        <CheckIcon />
+                      </span>
+                    )}
+                  </span>
+                  <span
+                    className={css(styles.switchLabel)}
+                    id={isAriaLabelledBy && useDefaultAriaLabelledBy ? `${id}-label` : null}
+                    aria-hidden="true"
+                  >
+                    {label}
+                  </span>
+                </Fragment>
+              ) : (
+                <span className={css(styles.switchToggle)}>
+                  <div className={css(styles.switchToggleIcon)}>
+                    <CheckIcon />
+                  </div>
                 </span>
               )}
-            </span>
-            <span
-              className={css(styles.switchLabel)}
-              id={isAriaLabelledBy && useDefaultAriaLabelledBy ? `${this.id}-label` : null}
-              aria-hidden="true"
-            >
-              {label}
-            </span>
-          </Fragment>
-        ) : (
-          <span className={css(styles.switchToggle)}>
-            <div className={css(styles.switchToggleIcon)}>
-              <CheckIcon />
-            </div>
-          </span>
-        )}
-      </label>
+            </label>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -4,7 +4,7 @@ exports[`Switch no label switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-7"
+    data-ouia-component-id="OUIA-Generated-Switch-:rd:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-checked"
@@ -29,12 +29,24 @@ exports[`Switch no label switch is checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </div>
     </span>
@@ -46,7 +58,7 @@ exports[`Switch no label switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-8"
+    data-ouia-component-id="OUIA-Generated-Switch-:rf:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-not-checked"
@@ -70,12 +82,24 @@ exports[`Switch no label switch is not checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </div>
     </span>
@@ -87,7 +111,7 @@ exports[`Switch switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-3"
+    data-ouia-component-id="OUIA-Generated-Switch-:r5:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -117,7 +141,7 @@ exports[`Switch switch is checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-9"
+    data-ouia-component-id="OUIA-Generated-Switch-:rh:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked-and-disabled"
@@ -143,12 +167,24 @@ exports[`Switch switch is checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </div>
     </span>
@@ -160,7 +196,7 @@ exports[`Switch switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-4"
+    data-ouia-component-id="OUIA-Generated-Switch-:r7:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
@@ -189,7 +225,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-10"
+    data-ouia-component-id="OUIA-Generated-Switch-:rj:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked-and-disabled"
@@ -214,12 +250,24 @@ exports[`Switch switch is not checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </div>
     </span>
@@ -231,7 +279,7 @@ exports[`Switch switch with only label is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-5"
+    data-ouia-component-id="OUIA-Generated-Switch-:r9:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -262,7 +310,7 @@ exports[`Switch switch with only label is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-6"
+    data-ouia-component-id="OUIA-Generated-Switch-:rb:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"

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/Tab.tsx

@@ -5,12 +5,11 @@ import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { TabAction } from './TabAction';
 
 export interface TabProps
-  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>, OUIAProps {
   /** content rendered inside the Tab content area. */
   children?: React.ReactNode;
   /** additional classes added to the Tab */
@@ -139,7 +138,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
           onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
           isDisabled={isCloseDisabled}
         >
-          <TimesIcon />
+          <RhMicronsCloseIcon />
         </TabAction>
       )}
     </li>