@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

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

@@ -4,9 +4,6 @@ exports[`slider renders continuous slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -65,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-:r2:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -81,9 +78,6 @@ exports[`slider renders continuous slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r7:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -147,9 +141,6 @@ exports[`slider renders disabled slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Slider-:rh:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -207,9 +198,6 @@ exports[`slider renders discrete slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r3:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 40%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -268,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-:r5:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -284,9 +272,6 @@ exports[`slider renders discrete slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r6:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -379,9 +364,6 @@ exports[`slider renders slider with input 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:r8:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -446,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-:ra:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -473,9 +455,6 @@ exports[`slider renders slider with input above thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:rb:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -539,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-:rd:"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -567,9 +546,6 @@ exports[`slider renders slider with input actions 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:re:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -578,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-:rf:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -637,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-:rg:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -651,9 +627,6 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
-    data-ouia-component-id="OUIA-Generated-Slider-:ri:"
-    data-ouia-component-type="PF6/Slider"
-    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div

package/src/components/Slider/examples/Slider.md

@@ -7,10 +7,10 @@ propComponents: ['Slider', 'SliderStepObject']
 
 import { useState } from 'react';
 import { Slider, Button, Content, ContentVariants } from '@patternfly/react-core';
-import RhUiMinusIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-minus-icon';
-import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
-import RhUiLockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-lock-fill-icon';
-import RhUiUnlockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-unlock-fill-icon';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
+import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
 
 ## Examples
 
@@ -50,16 +50,6 @@ import RhUiUnlockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-unl
 
 ```
 
-### Custom step tooltip
-
-You can customize the content of the tooltip by passing the tooltipContent property. By default this tooltip will act as a description to the slider thumb, and thus shouldn't include critical information about the current slider step unless that information is part of the step's aria-valuetext.
-
-If instead you want the tooltip to act as the human-readable value of the slider step - such as when all slider step labels are hidden - you must also pass the thumbAriaValueText property with the same string value as the tooltipContent. Additionally, you should pass the tooltip props object `{aria: 'none', 'aria-live': 'off'}` to tooltipProps in order to help prevent duplicate announcement from assistive technologies.
-
-```ts file="./SliderCustomTooltip.tsx"
-
-```
-
 ## Types
 
 ### SliderOnChangeEvent

package/src/components/Slider/examples/SliderActions.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
-import RhUiMinusIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-minus-icon';
-import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
-import RhUiLockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-lock-fill-icon';
-import RhUiUnlockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-unlock-fill-icon';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
+import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
 
 export const SliderActions: React.FunctionComponent = () => {
   const [value1, setValue1] = useState(50);
@@ -58,7 +58,7 @@ export const SliderActions: React.FunctionComponent = () => {
       variant="plain"
       aria-label={isDisabled ? 'Lock' : 'Unlock'}
       onClick={() => setIsDisabled(!isDisabled)}
-      icon={isDisabled ? <RhUiLockFillIcon /> : <RhUiUnlockFillIcon />}
+      icon={isDisabled ? <LockIcon /> : <LockOpenIcon />}
     />
   );
 
@@ -68,8 +68,8 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        startActions={<Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<RhUiMinusIcon />} />}
-        endActions={<Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<RhUiAddIcon />} />}
+        startActions={<Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />}
+        endActions={<Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />}
       />
       <br />
       <br />

package/src/components/Slider/examples/SliderValueInput.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Checkbox, Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
   const [valueDiscrete, setValueDiscrete] = useState(62.5);
@@ -8,7 +8,6 @@ export const SliderValueInput: React.FunctionComponent = () => {
   const [inputValuePercent, setInputValuePercent] = useState(50);
   const [valueContinuous, setValueContinuous] = useState(50);
   const [inputValueContinuous, setInputValueContinuous] = useState(50);
-  const [isInputLive, setIsInputLive] = useState(false);
 
   const stepsDiscrete = [
     { value: 0, label: '0' },
@@ -155,17 +154,9 @@ export const SliderValueInput: React.FunctionComponent = () => {
 
   return (
     <>
-      <Checkbox
-        id="isInputLiveCheckbox"
-        label="isInputLive"
-        isChecked={isInputLive}
-        onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsInputLive(checked)}
-        style={{ marginBottom: 20 }}
-      />
       <Slider
         value={valueDiscrete}
         isInputVisible
-        isInputLive={isInputLive}
         inputValue={inputValueDiscrete}
         customSteps={stepsDiscrete}
         onChange={onChangeDiscrete}
@@ -174,7 +165,6 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valuePercent}
         isInputVisible
-        isInputLive={isInputLive}
         inputValue={inputValuePercent}
         inputLabel="%"
         onChange={onChangePercent}
@@ -184,7 +174,6 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valueContinuous}
         isInputVisible
-        isInputLive={isInputLive}
         inputValue={inputValueContinuous}
         inputLabel="%"
         onChange={onChangeContinuous}

package/src/components/Spinner/Spinner.tsx

@@ -22,10 +22,8 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
-  /** ID of the element(s) that provide an accessible name for the spinner. This prop is deprecated and you should instead use the aria-labelledby prop (with a lowercase "b") instead. */
+  /** Id of element which describes what is being loaded */
   'aria-labelledBy'?: string;
-  /** ID of the element(s) that provide an accessible name for the spinner. */
-  'aria-labelledby'?: string;
 }
 
 export const Spinner: React.FunctionComponent<SpinnerProps> = ({
@@ -34,9 +32,8 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   diameter,
   isInline = false,
-  'aria-label': ariaLabel = 'Contents',
-  'aria-labelledBy': deprecatedAriaLabelledBy,
-  'aria-labelledby': ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledBy': ariaLabelledBy,
   ...props
 }: SpinnerProps) => (
   <svg
@@ -45,10 +42,9 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
     aria-valuetext={ariaValueText}
     viewBox="0 0 100 100"
     {...(diameter && { style: { [cssDiameter.name]: diameter } as React.CSSProperties })}
-    aria-label={ariaLabel}
-    {...((ariaLabelledby ?? deprecatedAriaLabelledBy) && {
-      'aria-labelledby': ariaLabelledby ?? deprecatedAriaLabelledBy
-    })}
+    {...(ariaLabel && { 'aria-label': ariaLabel })}
+    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
+    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
     {...props}
   >
     <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />

package/src/components/Spinner/__tests__/Spinner.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 
 test('simple spinner', () => {
@@ -6,42 +6,6 @@ test('simple spinner', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('uses default aria-label of "Contents" when none is provided', () => {
-  render(<Spinner />);
-  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Contents');
-});
-
-test('uses a custom aria-label when one is provided', () => {
-  render(<Spinner aria-label="Loading users" />);
-  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Loading users');
-});
-
-test('Renders with accessible name via aria-labelledby when passed', () => {
-  render(
-    <>
-      <span id="spinner-label">Loading reports</span>
-      <Spinner aria-labelledby="spinner-label" />
-    </>
-  );
-
-  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Loading reports');
-});
-
-test('Renders deprecated aria-labelledBy as aria-labelledby', () => {
-  render(<Spinner aria-labelledBy="external-label" />);
-  expect(screen.getByRole('progressbar')).toHaveAttribute('aria-labelledby', 'external-label');
-});
-
-test('Prefers aria-labelledby over the deprecated aria-labelledBy when both are passed', () => {
-  render(<Spinner aria-labelledby="lowercase-label" aria-labelledBy="deprecated-label" />);
-  expect(screen.getByRole('progressbar')).toHaveAttribute('aria-labelledby', 'lowercase-label');
-});
-
-test('Renders with aria-label even when aria-labelledby is passed', () => {
-  render(<Spinner aria-labelledby="external-label" />);
-  expect(screen.getByRole('progressbar')).toHaveAccessibleName('Contents');
-});
-
 test('small spinner', () => {
   const { asFragment } = render(<Spinner size="sm" />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Switch/Switch.tsx

@@ -1,7 +1,7 @@
 import { Component, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Switch/switch';
 import { css } from '@patternfly/react-styles';
-import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
@@ -111,7 +111,7 @@ class Switch extends Component<SwitchProps & OUIAProps> {
                   <span className={css(styles.switchToggle)}>
                     {hasCheckIcon && (
                       <span className={css(styles.switchToggleIcon)}>
-                        <RhMicronsCheckmarkIcon />
+                        <CheckIcon />
                       </span>
                     )}
                   </span>
@@ -126,7 +126,7 @@ class Switch extends Component<SwitchProps & OUIAProps> {
               ) : (
                 <span className={css(styles.switchToggle)}>
                   <div className={css(styles.switchToggleIcon)}>
-                    <RhMicronsCheckmarkIcon />
+                    <CheckIcon />
                   </div>
                 </span>
               )}

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

@@ -29,12 +29,24 @@ exports[`Switch no label switch is checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 20 20"
           width="1em"
         >
-          <path
-            d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-          />
+          <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>
@@ -70,12 +82,24 @@ exports[`Switch no label switch is not checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 20 20"
           width="1em"
         >
-          <path
-            d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-          />
+          <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>
@@ -143,12 +167,24 @@ exports[`Switch switch is checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 20 20"
           width="1em"
         >
-          <path
-            d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-          />
+          <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>
@@ -214,12 +250,24 @@ exports[`Switch switch is not checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 20 20"
           width="1em"
         >
-          <path
-            d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
-          />
+          <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>

package/src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 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 RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import {
   isElementInView,
   formatBreakpointMods,
@@ -140,25 +140,6 @@ const variantStyle = {
   secondary: styles.modifiers.secondary
 };
 
-const getHashFromHref = (href?: string) => {
-  const hashIndex = href?.indexOf('#') ?? -1;
-
-  return hashIndex >= 0 ? href.slice(hashIndex) : undefined;
-};
-
-const getTabHashActiveKey = ({ children, component, isNav }: Pick<TabsProps, 'children' | 'component' | 'isNav'>) => {
-  if (!canUseDOM || !(component === TabsComponent.nav || isNav) || !window.location.hash) {
-    return undefined;
-  }
-
-  return Children.toArray(children)
-    .filter((child): child is TabElement => isValidElement(child))
-    .filter(({ props }) => !props.isHidden)
-    .find(
-      ({ props }) => !props.isDisabled && !props.isAriaDisabled && getHashFromHref(props.href) === window.location.hash
-    )?.props.eventKey;
-};
-
 interface TabsState {
   /** Used to signal if the scroll buttons should be used  */
   enableScrollButtons: boolean;
@@ -171,8 +152,7 @@ interface TabsState {
   disableBackScrollButton: boolean;
   disableForwardScrollButton: boolean;
   shownKeys: (string | number)[];
-  uncontrolledActiveKey: number | string | undefined;
-  initialActiveKey: number | string | undefined;
+  uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
   overflowingTabCount: number;
   isInitializingAccent: boolean;
@@ -187,17 +167,14 @@ class Tabs extends Component<TabsProps, TabsState> {
   private direction = 'ltr';
   constructor(props: TabsProps) {
     super(props);
-    const hashActiveKey = getTabHashActiveKey(props);
-
     this.state = {
       enableScrollButtons: false,
       showScrollButtons: false,
       renderScrollButtons: false,
       disableBackScrollButton: true,
       disableForwardScrollButton: true,
-      shownKeys: [hashActiveKey ?? this.props.defaultActiveKey ?? this.props.activeKey],
-      uncontrolledActiveKey: hashActiveKey ?? this.props.defaultActiveKey,
-      initialActiveKey: this.props.defaultActiveKey === undefined ? hashActiveKey : undefined,
+      shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
+      uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
       overflowingTabCount: 0,
       isInitializingAccent: true,
@@ -244,26 +221,14 @@ class Tabs extends Component<TabsProps, TabsState> {
     eventKey: number | string,
     tabContentRef: React.RefObject<any>
   ) {
-    const { shownKeys, initialActiveKey } = this.state;
-    const { onSelect, defaultActiveKey, component, isNav } = this.props;
-
-    if (event.currentTarget instanceof HTMLAnchorElement && event.currentTarget.hasAttribute('href')) {
-      event.preventDefault();
-
-      if (canUseDOM && (component === TabsComponent.nav || isNav)) {
-        window.history.pushState(null, '', event.currentTarget.href);
-      }
-    }
-
+    const { shownKeys } = this.state;
+    const { onSelect, defaultActiveKey } = this.props;
     // if defaultActiveKey Tabs are uncontrolled, set new active key internally
     if (defaultActiveKey !== undefined) {
       this.setState({
         uncontrolledActiveKey: eventKey
       });
     } else {
-      if (initialActiveKey !== undefined) {
-        this.setState({ initialActiveKey: undefined });
-      }
       onSelect(event, eventKey);
     }
 
@@ -436,9 +401,8 @@ class Tabs extends Component<TabsProps, TabsState> {
   componentDidUpdate(prevProps: TabsProps, prevState: TabsState) {
     this.direction = getLanguageDirection(this.tabList.current);
     const { activeKey, mountOnEnter, isOverflowHorizontal, children, defaultActiveKey } = this.props;
-    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey, initialActiveKey } = this.state;
+    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey } = this.state;
     const isOnCloseUpdate = !!prevProps.onClose !== !!this.props.onClose;
-
     if (
       (defaultActiveKey !== undefined && prevState.uncontrolledActiveKey !== uncontrolledActiveKey) ||
       (defaultActiveKey === undefined && prevProps.activeKey !== activeKey) ||
@@ -453,10 +417,6 @@ class Tabs extends Component<TabsProps, TabsState> {
       });
     }
 
-    if (defaultActiveKey === undefined && prevProps.activeKey !== activeKey && initialActiveKey !== undefined) {
-      this.setState({ initialActiveKey: undefined });
-    }
-
     if (
       prevProps.children &&
       children &&
@@ -557,7 +517,6 @@ class Tabs extends Component<TabsProps, TabsState> {
       disableForwardScrollButton,
       shownKeys,
       uncontrolledActiveKey,
-      initialActiveKey,
       uncontrolledIsExpandedLocal,
       overflowingTabCount,
       isInitializingAccent,
@@ -574,7 +533,7 @@ class Tabs extends Component<TabsProps, TabsState> {
 
     const defaultComponent = isNav && !component ? 'nav' : 'div';
     const Component: any = component !== undefined ? component : defaultComponent;
-    const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : (initialActiveKey ?? activeKey);
+    const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;
     /*  Uncontrolled expandable tabs */
@@ -703,7 +662,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                       variant="plain"
                       aria-label={addButtonAriaLabel || 'Add tab'}
                       onClick={onAdd}
-                      icon={<RhUiAddIcon />}
+                      icon={<PlusIcon />}
                       isDisabled={isAddButtonDisabled}
                     />
                   </span>