Skip to content

chore(Progress): Include OUIAProps for Progress #12576

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
+90 −4
Open

chore(Progress): Include OUIAProps for Progress #12576

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
16 changes: 16 additions & 0 deletions ...nts/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -152,6 +154,8 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -268,6 +272,8 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -386,6 +392,8 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -504,6 +512,8 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
</div>
<div
class="pf-v6-c-progress pf-m-warning"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -639,6 +649,8 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -757,6 +769,8 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down Expand Up @@ -873,6 +887,8 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
</div>
<div
class="pf-v6-c-progress"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="test-progress-id"
>
<div
Expand Down
14 changes: 11 additions & 3 deletions packages/react-core/src/components/Progress/Progress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
import { css } from '@patternfly/react-styles';
import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
import { AriaProps } from './ProgressBar';
import { GenerateId } from '../../helpers';
import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';

export enum ProgressSize {
sm = 'sm',
md = 'md',
lg = 'lg'
}

export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'> {
export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'>, OUIAProps {
/** Classname for progress component. */
className?: string;
/** Size variant of progress. */
Expand Down Expand Up @@ -50,6 +50,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
helperText?: React.ReactNode;
/** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
hideStatusIcon?: boolean;
/** 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;
}

class Progress extends Component<ProgressProps> {
Expand All @@ -70,7 +74,8 @@ class Progress extends Component<ProgressProps> {
tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
'aria-label': null as string,
'aria-labelledby': null as string,
'aria-describedby': null as string
'aria-describedby': null as string,
ouiaSafe: true
};

render() {
Expand All @@ -94,6 +99,8 @@ class Progress extends Component<ProgressProps> {
'aria-describedby': ariaDescribedBy,
helperText,
hideStatusIcon,
ouiaId,
ouiaSafe,
...props
} = this.props;

Expand Down Expand Up @@ -147,6 +154,7 @@ class Progress extends Component<ProgressProps> {
className
)}
id={id}
{...getOUIAProps(Progress.displayName, ouiaId, ouiaSafe)}
Comment thread
mshriver marked this conversation as resolved.
>
<ProgressContainer
parentId={id}
Expand Down
22 changes: 21 additions & 1 deletion packages/react-core/src/components/Progress/__tests__/Progress.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Progress, ProgressSize } from '../Progress';
import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';

test('Simple progress', () => {
const { asFragment } = render(<Progress value={33} id="progress-simple-example" />);
const { asFragment } = render(<Progress value={33} id="progress-simple-example" ouiaId="ouia-id" />);
expect(asFragment()).toMatchSnapshot();
});

Expand Down Expand Up @@ -109,6 +109,26 @@ test('Renders passed helper text', () => {
expect(screen.getByText('Test helper text')).toBeVisible();
});

test('Renders with custom ouiaId', () => {
render(<Progress value={33} id="progress-ouia-id" ouiaId="test-id" title="Test" />);
expect(document.getElementById('progress-ouia-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
});

test('Renders with expected ouia component type', () => {
render(<Progress value={33} id="progress-ouia-type" ouiaId="test-id" title="Test" />);
expect(document.getElementById('progress-ouia-type')).toHaveAttribute('data-ouia-component-type', 'PF6/Progress');
});

test('Renders with ouiaSafe defaulting to true', () => {
render(<Progress value={33} id="progress-ouia-safe" ouiaId="test-id" title="Test" />);
expect(document.getElementById('progress-ouia-safe')).toHaveAttribute('data-ouia-safe', 'true');
});

test('Renders with ouiaSafe=false when specified', () => {
render(<Progress value={33} id="progress-ouia-unsafe" ouiaId="test-id" ouiaSafe={false} title="Test" />);
expect(document.getElementById('progress-ouia-unsafe')).toHaveAttribute('data-ouia-safe', 'false');
});

describe('hideStatusIcon prop behavior', () => {
test('shows status icon by default when hideStatusIcon is not set', () => {
render(<Progress id="default-status-icon-test" value={100} variant="success" />);
Expand Down
41 changes: 41 additions & 0 deletions packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ exports[`Progress measure location inside 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="inside-progress"
>
<div
Expand Down Expand Up @@ -36,6 +38,8 @@ exports[`Progress measure location inside and small should render large 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="large-progress"
>
<div
Expand Down Expand Up @@ -68,6 +72,8 @@ exports[`Progress measure location none 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="none-progress"
>
<div
Expand All @@ -94,6 +100,8 @@ exports[`Progress measure location outside 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-outside pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="outside-progress"
>
<div
Expand Down Expand Up @@ -130,6 +138,8 @@ exports[`Progress measure location top 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="top-progress"
>
<div
Expand Down Expand Up @@ -166,6 +176,8 @@ exports[`Progress size lg 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-lg pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="lg-progress"
>
<div
Expand Down Expand Up @@ -202,6 +214,8 @@ exports[`Progress size md 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="md-progress"
>
<div
Expand Down Expand Up @@ -238,6 +252,8 @@ exports[`Progress size sm 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-sm pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="sm-progress"
>
<div
Expand Down Expand Up @@ -274,6 +290,8 @@ exports[`Progress variant danger 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-danger pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="danger-progress"
>
<div
Expand Down Expand Up @@ -327,6 +345,8 @@ exports[`Progress variant success 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-success pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="success-progress"
>
<div
Expand Down Expand Up @@ -380,6 +400,8 @@ exports[`Progress variant warning 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-warning pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="warning-progress"
>
<div
Expand Down Expand Up @@ -433,6 +455,8 @@ exports[`Progress with aria-valuetext 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="progress-aria-valuetext"
>
<div
Expand Down Expand Up @@ -470,6 +494,9 @@ exports[`Simple progress 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-id="ouia-id"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="progress-simple-example"
>
<div
Expand Down Expand Up @@ -506,6 +533,8 @@ exports[`additional label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="additional-label"
>
<div
Expand Down Expand Up @@ -542,6 +571,8 @@ exports[`no value specified 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="no-value"
>
<div
Expand Down Expand Up @@ -578,6 +609,8 @@ exports[`value higher than maxValue 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="higher-max-value"
>
<div
Expand Down Expand Up @@ -614,6 +647,8 @@ exports[`value lower than minValue 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="lower-min-value"
>
<div
Expand Down Expand Up @@ -650,6 +685,8 @@ exports[`value scaled between minValue and maxValue 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="scaled-range-value"
>
<div
Expand Down Expand Up @@ -686,6 +723,8 @@ exports[`value scaled with maxValue 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="scaled-max-value"
>
<div
Expand Down Expand Up @@ -722,6 +761,8 @@ exports[`value scaled with minValue 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-progress pf-m-singleline"
data-ouia-component-type="PF6/Progress"
data-ouia-safe="true"
id="scaled-min-value"
>
<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 @@ -66,6 +66,7 @@ component.
* [NavExpandable](/components/navigation)
* [NavItem](/components/navigation)
* [Pagination](/components/pagination)
* [Progress](/components/progress)
* [Radio](/components/forms/radio)
* [Select](/components/menus/select)
* [Switch](/components/switch)
Expand Down
Loading