Skip to content

Commit d9750a7

Browse files
mshrivercursoragent
mshriver
and
cursoragent
committed
chore(Slider): Include OUIAProps for Slider
Add OUIA attribute support to Slider for better test automation. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent f59b184 commit d9750a7

4 files changed

Lines changed: 65 additions & 8 deletions

File tree

‎packages/react-core/src/components/Slider/Slider.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Tooltip, TooltipProps } from '../Tooltip';
88
import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
99
import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
1010
import { getLanguageDirection } from '../../helpers/util';
11+
import { useOUIAProps, OUIAProps } from '../../helpers';
1112

1213
/** Properties for creating custom steps in a slider. These properties should be passed in as
1314
* an object within an array to the slider component's customSteps property.
@@ -29,7 +30,7 @@ export type SliderOnChangeEvent =
2930
| React.FocusEvent<HTMLInputElement>;
3031

3132
/** The main slider component. */
32-
export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
33+
export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
3334
/** Flag indicating if the slider is discrete for custom steps. This will cause the slider
3435
* to snap to the closest value.
3536
*/
@@ -93,6 +94,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
9394
thumbAriaValueText?: string;
9495
/** Current value of the slider. */
9596
value?: number;
97+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
98+
ouiaId?: number | string;
99+
/** 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. */
100+
ouiaSafe?: boolean;
96101
}
97102

98103
const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -126,8 +131,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
126131
showBoundaries = true,
127132
'aria-describedby': ariaDescribedby,
128133
'aria-labelledby': ariaLabelledby,
134+
ouiaId,
135+
ouiaSafe = true,
129136
...props
130137
}: SliderProps) => {
138+
const ouiaProps = useOUIAProps(Slider.displayName, ouiaId, ouiaSafe);
131139
const sliderRailRef = useRef<HTMLDivElement>(undefined);
132140
const thumbRef = useRef<HTMLDivElement>(undefined);
133141

@@ -457,6 +465,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
457465
className={css(styles.slider, className, isDisabled && styles.modifiers.disabled)}
458466
style={{ ...style, ...inputStyle }}
459467
{...props}
468+
{...ouiaProps}
460469
>
461470
{(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
462471
<div className={css(styles.sliderMain)}>

‎packages/react-core/src/components/Slider/__tests__/Slider.test.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Button } from '../../Button';
55

66
describe('slider', () => {
77
test('renders continuous slider', () => {
8-
const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} />);
8+
const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} ouiaId="ouia-id" />);
99
expect(asFragment()).toMatchSnapshot();
1010
});
1111

@@ -91,6 +91,26 @@ describe('slider', () => {
9191
});
9292
});
9393

94+
test('Renders with custom ouiaId', () => {
95+
const { container } = render(<Slider value={50} ouiaId="test-id" />);
96+
expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
97+
});
98+
99+
test('Renders with expected ouia component type', () => {
100+
const { container } = render(<Slider value={50} ouiaId="test-id" />);
101+
expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/Slider');
102+
});
103+
104+
test('Renders with ouiaSafe defaulting to true', () => {
105+
const { container } = render(<Slider value={50} ouiaId="test-id" />);
106+
expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
107+
});
108+
109+
test('Renders with ouiaSafe=false when specified', () => {
110+
const { container } = render(<Slider value={50} ouiaId="test-id" ouiaSafe={false} />);
111+
expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
112+
});
113+
94114
test('renders slider with aria-labelledby', () => {
95115
render(
96116
<>

‎packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ exports[`slider renders continuous slider 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-slider"
7+
data-ouia-component-id="ouia-id"
8+
data-ouia-component-type="PF6/Slider"
9+
data-ouia-safe="true"
710
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
811
>
912
<div
@@ -62,7 +65,7 @@ exports[`slider renders continuous slider 1`] = `
6265
<input
6366
aria-invalid="false"
6467
aria-label="Slider value input"
65-
data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
68+
data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
6669
data-ouia-component-type="PF6/TextInput"
6770
data-ouia-safe="true"
6871
type="number"
@@ -78,6 +81,9 @@ exports[`slider renders continuous slider with custom steps 1`] = `
7881
<DocumentFragment>
7982
<div
8083
class="pf-v6-c-slider"
84+
data-ouia-component-id="OUIA-Generated-Slider-:r7:"
85+
data-ouia-component-type="PF6/Slider"
86+
data-ouia-safe="true"
8187
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
8288
>
8389
<div
@@ -141,6 +147,9 @@ exports[`slider renders disabled slider 1`] = `
141147
<DocumentFragment>
142148
<div
143149
class="pf-v6-c-slider pf-m-disabled"
150+
data-ouia-component-id="OUIA-Generated-Slider-:rh:"
151+
data-ouia-component-type="PF6/Slider"
152+
data-ouia-safe="true"
144153
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
145154
>
146155
<div
@@ -198,6 +207,9 @@ exports[`slider renders discrete slider 1`] = `
198207
<DocumentFragment>
199208
<div
200209
class="pf-v6-c-slider"
210+
data-ouia-component-id="OUIA-Generated-Slider-:r3:"
211+
data-ouia-component-type="PF6/Slider"
212+
data-ouia-safe="true"
201213
style="--pf-v6-c-slider--value: 40%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
202214
>
203215
<div
@@ -256,7 +268,7 @@ exports[`slider renders discrete slider 1`] = `
256268
<input
257269
aria-invalid="false"
258270
aria-label="Slider value input"
259-
data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
271+
data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
260272
data-ouia-component-type="PF6/TextInput"
261273
data-ouia-safe="true"
262274
type="number"
@@ -272,6 +284,9 @@ exports[`slider renders discrete slider with custom steps 1`] = `
272284
<DocumentFragment>
273285
<div
274286
class="pf-v6-c-slider"
287+
data-ouia-component-id="OUIA-Generated-Slider-:r6:"
288+
data-ouia-component-type="PF6/Slider"
289+
data-ouia-safe="true"
275290
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
276291
>
277292
<div
@@ -364,6 +379,9 @@ exports[`slider renders slider with input 1`] = `
364379
<DocumentFragment>
365380
<div
366381
class="pf-v6-c-slider"
382+
data-ouia-component-id="OUIA-Generated-Slider-:r8:"
383+
data-ouia-component-type="PF6/Slider"
384+
data-ouia-safe="true"
367385
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
368386
>
369387
<div
@@ -428,7 +446,7 @@ exports[`slider renders slider with input 1`] = `
428446
<input
429447
aria-invalid="false"
430448
aria-label="Slider value input"
431-
data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
449+
data-ouia-component-id="OUIA-Generated-TextInputBase-:ra:"
432450
data-ouia-component-type="PF6/TextInput"
433451
data-ouia-safe="true"
434452
type="number"
@@ -455,6 +473,9 @@ exports[`slider renders slider with input above thumb 1`] = `
455473
<DocumentFragment>
456474
<div
457475
class="pf-v6-c-slider"
476+
data-ouia-component-id="OUIA-Generated-Slider-:rb:"
477+
data-ouia-component-type="PF6/Slider"
478+
data-ouia-safe="true"
458479
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
459480
>
460481
<div
@@ -518,7 +539,7 @@ exports[`slider renders slider with input above thumb 1`] = `
518539
<input
519540
aria-invalid="false"
520541
aria-label="Slider value input"
521-
data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
542+
data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
522543
data-ouia-component-type="PF6/TextInput"
523544
data-ouia-safe="true"
524545
type="number"
@@ -546,6 +567,9 @@ exports[`slider renders slider with input actions 1`] = `
546567
<DocumentFragment>
547568
<div
548569
class="pf-v6-c-slider"
570+
data-ouia-component-id="OUIA-Generated-Slider-:re:"
571+
data-ouia-component-type="PF6/Slider"
572+
data-ouia-safe="true"
549573
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
550574
>
551575
<div
@@ -554,7 +578,7 @@ exports[`slider renders slider with input actions 1`] = `
554578
<button
555579
aria-label="Minus"
556580
class="pf-v6-c-button pf-m-plain"
557-
data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
581+
data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
558582
data-ouia-component-type="PF6/Button"
559583
data-ouia-safe="true"
560584
type="button"
@@ -613,7 +637,7 @@ exports[`slider renders slider with input actions 1`] = `
613637
<button
614638
aria-label="Plus"
615639
class="pf-v6-c-button pf-m-plain"
616-
data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
640+
data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
617641
data-ouia-component-type="PF6/Button"
618642
data-ouia-safe="true"
619643
type="button"
@@ -627,6 +651,9 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
627651
<DocumentFragment>
628652
<div
629653
class="pf-v6-c-slider"
654+
data-ouia-component-id="OUIA-Generated-Slider-:ri:"
655+
data-ouia-component-type="PF6/Slider"
656+
data-ouia-safe="true"
630657
style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
631658
>
632659
<div

‎packages/react-core/src/helpers/OUIA/OUIA.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ component.
6868
* [Pagination](/components/pagination)
6969
* [Radio](/components/forms/radio)
7070
* [Select](/components/menus/select)
71+
* [Slider](/components/slider)
7172
* [Switch](/components/switch)
7273
* [TabContent](/components/tabs)
7374
* [Tabs](/components/tabs)

0 commit comments

Comments
 (0)