@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

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

@@ -11,6 +11,7 @@ export const SelectFooter: React.FunctionComponent = () => {
 
   const toggle = (toggleRef) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

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

@@ -27,6 +27,7 @@ export const SelectGrouped: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

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

@@ -188,6 +188,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead menu toggle"
       onClick={onToggleClick}

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

@@ -196,6 +196,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead checkbox menu toggle"
       onClick={onToggleClick}

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

@@ -201,6 +201,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead creatable menu toggle"
       onClick={onToggleClick}

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

@@ -20,6 +20,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

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

@@ -199,6 +199,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead menu toggle"

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

@@ -206,6 +206,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead creatable menu toggle"

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

@@ -30,6 +30,7 @@ export const SelectValidated: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

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

@@ -101,6 +101,7 @@ export const SelectViewMore: React.FunctionComponent = () => {
 
   const toggle = (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Slider/Slider.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
 import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
 import { getLanguageDirection } from '../../helpers/util';
@@ -42,8 +42,12 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   className?: string;
   /** Array of custom slider step objects (value and label of each step) for the slider. */
   customSteps?: SliderStepObject[];
-  /* Adds a tooltip over the slider thumb containing the current value. */
+  /** Enables a tooltip over the silder thumb. Defaults to the current value, or tooltipContent if provided. */
   hasTooltipOverThumb?: boolean;
+  /** Content of the tooltip over the slider thumb. Defaults to the current value.  */
+  tooltipContent?: React.ReactNode;
+  /** Additional props passed to the tooltip. */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Accessible label for the input field. */
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
@@ -56,6 +60,8 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
+  /** Flag indicating if the input value should also update the slider value as the user types. When false, the slider will update its value on blur or enter key press. */
+  isInputLive?: boolean;
   /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
   /** Actions placed at the start of the slider. */
@@ -81,8 +87,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   showTicks?: boolean;
   /** The step interval. */
   step?: number;
-  /* Accessible label for the slider thumb. */
+  /** Accessible label for the slider thumb. */
   thumbAriaLabel?: string;
+  /** Accessible text for the current value of the slider. Defaults to the current value. */
+  thumbAriaValueText?: string;
   /** Current value of the slider.  */
   value?: number;
 }
@@ -97,10 +105,14 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   isDisabled = false,
   isInputVisible = false,
   inputValue = 0,
+  isInputLive = false,
   inputLabel,
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
+  thumbAriaValueText,
   hasTooltipOverThumb = false,
+  tooltipContent,
+  tooltipProps,
   inputPosition = 'end',
   onChange,
   leftActions,
@@ -145,8 +157,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const widthChars = useMemo(() => localInputValue.toString().length, [localInputValue]);
   const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
-  const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setLocalInputValue(Number(value));
+  const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+    const newValue = Number(value);
+    setLocalInputValue(newValue);
+
+    isInputLive && onChange && onChange(event, localValue, newValue, setLocalInputValue);
   };
 
   const handleKeyPressOnInput = (event: React.KeyboardEvent) => {
@@ -425,7 +440,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       aria-valuemin={customSteps ? customSteps[0].value : min}
       aria-valuemax={customSteps ? customSteps[customSteps.length - 1].value : max}
       aria-valuenow={localValue}
-      aria-valuetext={findAriaTextValue()}
+      aria-valuetext={thumbAriaValueText ?? findAriaTextValue()}
       aria-label={thumbAriaLabel}
       aria-disabled={isDisabled}
       aria-describedby={ariaDescribedby}
@@ -477,7 +492,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             className={css('pf-v6-m-tabular-nums')}
             triggerRef={thumbRef}
             entryDelay={0}
-            content={findAriaTextValue()}
+            content={tooltipContent ?? findAriaTextValue()}
+            {...tooltipProps}
           >
             {thumbComponent}
           </Tooltip>

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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';
 
@@ -77,6 +78,17 @@ 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 slider with aria-labelledby', () => {
@@ -104,3 +116,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/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>