@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

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

@@ -1,10 +1,11 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';
 
 describe('slider', () => {
   test('renders continuous slider', () => {
-    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} />);
+    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} ouiaId="ouia-id" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -77,6 +78,37 @@ describe('slider', () => {
     const { asFragment } = render(<Slider value={50} hasTooltipOverThumb />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders slider with custom tooltip content on thumb', async () => {
+    const user = userEvent.setup();
+
+    render(<Slider value={50} hasTooltipOverThumb tooltipContent="Custom tooltip content" />);
+
+    await user.hover(screen.getByRole('slider'));
+
+    await screen.findByRole('tooltip');
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip content');
+  });
+});
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/Slider');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" ouiaSafe={false} />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
 });
 
 test('renders slider with aria-labelledby', () => {
@@ -104,3 +136,11 @@ test('renders slider with aria-describedby', () => {
 
   expect(slider).toBeVisible();
 });
+
+test('renders slider with thumbAriaValueText', () => {
+  render(<Slider value={50} thumbAriaValueText="Half capacity" />);
+
+  const slider = screen.getByRole('slider');
+
+  expect(slider).toHaveAttribute('aria-valuetext', 'Half capacity');
+});

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

@@ -4,6 +4,9 @@ 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
@@ -62,7 +65,7 @@ exports[`slider renders continuous slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -78,6 +81,9 @@ 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
@@ -141,6 +147,9 @@ 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
@@ -198,6 +207,9 @@ 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
@@ -256,7 +268,7 @@ exports[`slider renders discrete slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -272,6 +284,9 @@ 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
@@ -364,6 +379,9 @@ 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
@@ -428,7 +446,7 @@ exports[`slider renders slider with input 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-:ra:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -455,6 +473,9 @@ 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
@@ -518,7 +539,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-:r7:"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -546,6 +567,9 @@ 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
@@ -554,7 +578,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-:r8:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -613,7 +637,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-:r9:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -627,6 +651,9 @@ 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 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';
+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';
 
 ## Examples
 
@@ -50,6 +50,16 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 
 ```
 
+### 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 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';
+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';
 
 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 ? <LockIcon /> : <LockOpenIcon />}
+      icon={isDisabled ? <RhUiLockFillIcon /> : <RhUiUnlockFillIcon />}
     />
   );
 
@@ -68,8 +68,8 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        startActions={<Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />}
-        endActions={<Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />}
+        startActions={<Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<RhUiMinusIcon />} />}
+        endActions={<Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<RhUiAddIcon />} />}
       />
       <br />
       <br />

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

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+
+export const SliderCustomTooltip: React.FunctionComponent = () => {
+  const [value, setValue] = useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    const step = steps.find((step) => step.value === value);
+    return step ? step.label : 0;
+  };
+
+  const customTooltipContent = () => <div>Custom tooltip content for step: {displayValue()}</div>;
+
+  return (
+    <Slider
+      hasTooltipOverThumb
+      tooltipContent={customTooltipContent()}
+      value={value}
+      onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+      customSteps={steps}
+    />
+  );
+};

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
   const [valueDiscrete, setValueDiscrete] = useState(62.5);
@@ -8,6 +8,7 @@ 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' },
@@ -154,9 +155,17 @@ 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}
@@ -165,6 +174,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valuePercent}
         isInputVisible
+        isInputLive={isInputLive}
         inputValue={inputValuePercent}
         inputLabel="%"
         onChange={onChangePercent}
@@ -174,6 +184,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valueContinuous}
         isInputVisible
+        isInputLive={isInputLive}
         inputValue={inputValueContinuous}
         inputLabel="%"
         onChange={onChangeContinuous}

package/src/components/Spinner/Spinner.tsx

@@ -22,8 +22,10 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
-  /** Id of element which describes what is being loaded */
+  /** 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. */
   '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> = ({
@@ -32,8 +34,9 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   diameter,
   isInline = false,
-  'aria-label': ariaLabel,
-  'aria-labelledBy': ariaLabelledBy,
+  'aria-label': ariaLabel = 'Contents',
+  'aria-labelledBy': deprecatedAriaLabelledBy,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: SpinnerProps) => (
   <svg
@@ -42,9 +45,10 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
     aria-valuetext={ariaValueText}
     viewBox="0 0 100 100"
     {...(diameter && { style: { [cssDiameter.name]: diameter } as React.CSSProperties })}
-    {...(ariaLabel && { 'aria-label': ariaLabel })}
-    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
-    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
+    aria-label={ariaLabel}
+    {...((ariaLabelledby ?? deprecatedAriaLabelledBy) && {
+      'aria-labelledby': ariaLabelledby ?? deprecatedAriaLabelledBy
+    })}
     {...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 } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 
 test('simple spinner', () => {
@@ -6,6 +6,42 @@ 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 CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-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)}>
-                        <CheckIcon />
+                        <RhMicronsCheckmarkIcon />
                       </span>
                     )}
                   </span>
@@ -126,7 +126,7 @@ class Switch extends Component<SwitchProps & OUIAProps> {
               ) : (
                 <span className={css(styles.switchToggle)}>
                   <div className={css(styles.switchToggleIcon)}>
-                    <CheckIcon />
+                    <RhMicronsCheckmarkIcon />
                   </div>
                 </span>
               )}

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

@@ -29,24 +29,12 @@ exports[`Switch no label switch is checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 20 20"
           width="1em"
         >
-          <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>
+          <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>
       </div>
     </span>
@@ -82,24 +70,12 @@ exports[`Switch no label switch is not checked 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 20 20"
           width="1em"
         >
-          <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>
+          <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>
       </div>
     </span>
@@ -167,24 +143,12 @@ exports[`Switch switch is checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 20 20"
           width="1em"
         >
-          <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>
+          <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>
       </div>
     </span>
@@ -250,24 +214,12 @@ exports[`Switch switch is not checked and disabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 20 20"
           width="1em"
         >
-          <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>
+          <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>
       </div>
     </span>