Skip to content

chore(Slider): Include OUIAProps for Slider #12585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mshriver wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(Slider): Include OUIAProps for Slider #12585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/react-core/src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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)}>
Expand Down
22 changes: 21 additions & 1 deletion packages/react-core/src/components/Slider/__tests__/Slider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down Expand Up @@ -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(
<>
Expand Down
39 changes: 33 additions & 6 deletions packages/react-core/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/react-core/src/helpers/OUIA/OUIA.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Loading