From d9750a7b9951e5fe145505db075a705fc8ef87ed Mon Sep 17 00:00:00 2001
From: mshriver <mshriver@redhat.com>
Date: Mon, 20 Jul 2026 09:40:08 -0400
Subject: [PATCH] chore(Slider): Include OUIAProps for Slider

Add OUIA attribute support to Slider for better test automation.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/Slider/Slider.tsx          | 11 +++++-
 .../Slider/__tests__/Slider.test.tsx          | 22 ++++++++++-
 .../__snapshots__/Slider.test.tsx.snap        | 39 ++++++++++++++++---
 packages/react-core/src/helpers/OUIA/OUIA.md  |  1 +
 4 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 08b8dadf339..6845518e5da 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -8,6 +8,7 @@ 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';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -29,7 +30,7 @@ export type SliderOnChangeEvent =
   | React.FocusEvent<HTMLInputElement>;
 
 /** The main slider component. */
-export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
    * to snap to the closest value.
    */
@@ -93,6 +94,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   thumbAriaValueText?: string;
   /** Current value of the slider.  */
   value?: number;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -126,8 +131,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   showBoundaries = true,
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: SliderProps) => {
+  const ouiaProps = useOUIAProps(Slider.displayName, ouiaId, ouiaSafe);
   const sliderRailRef = useRef<HTMLDivElement>(undefined);
   const thumbRef = useRef<HTMLDivElement>(undefined);
 
@@ -457,6 +465,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       className={css(styles.slider, className, isDisabled && styles.modifiers.disabled)}
       style={{ ...style, ...inputStyle }}
       {...props}
+      {...ouiaProps}
     >
       {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>
diff --git a/packages/react-core/src/components/Slider/__tests__/Slider.test.tsx b/packages/react-core/src/components/Slider/__tests__/Slider.test.tsx
index 8bb83203c76..11d4ad245fc 100644
--- a/packages/react-core/src/components/Slider/__tests__/Slider.test.tsx
+++ b/packages/react-core/src/components/Slider/__tests__/Slider.test.tsx
@@ -5,7 +5,7 @@ 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();
   });
 
@@ -91,6 +91,26 @@ describe('slider', () => {
   });
 });
 
+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', () => {
   render(
     <>
diff --git a/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
index 3cb539b1129..dea3a20938c 100644
--- a/packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/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
diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md
index d971aeb61b2..ce8ed6deec8 100644
--- a/packages/react-core/src/helpers/OUIA/OUIA.md
+++ b/packages/react-core/src/helpers/OUIA/OUIA.md
@@ -68,6 +68,7 @@ component.
 * [Pagination](/components/pagination)
 * [Radio](/components/forms/radio)
 * [Select](/components/menus/select)
+* [Slider](/components/slider)
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)