Skip to content

Commit acc868a

Browse files
DianaSuvorovaDianaSuvorova
authored
Progress Bar: adding intent prop and ally updates (#5392)
* Progress Bar: adding intent prop and ally updates * minor release
1 parent 1ac82e5 commit acc868a

14 files changed

Lines changed: 230 additions & 44 deletions

File tree

‎documentation-site/examples/progress-bar/intent.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react";
2+
import { ProgressBar, INTENT } from "baseui/progress-bar";
3+
4+
export default function Example() {
5+
return (
6+
<>
7+
<ProgressBar value={50} showLabel intent={INTENT.positive} />
8+
<br />
9+
<ProgressBar value={50} showLabel intent={INTENT.warning} />
10+
<br />
11+
<ProgressBar value={50} showLabel intent={INTENT.negative} />
12+
<br />
13+
<ProgressBar value={50} showLabel intent={INTENT.brand} />
14+
<br />
15+
<ProgressBar infinite showLabel intent={INTENT.positive} />
16+
</>
17+
);
18+
}

‎documentation-site/examples/progress-bar/steps.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function Example() {
99
return (
1010
<div>
1111
<ProgressBar value={value} steps={5} />
12-
<div style={{ display: "flex", justifyContent: "center" }}>
12+
<div
13+
style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}
14+
>
1315
<Button
1416
onClick={() => setValue((prevValue) => prevValue - stepSize)}
1517
size={SIZE.compact}

‎documentation-site/pages/components/progress-bar.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import WithLabel from "examples/progress-bar/with-label.tsx";
88
import CustomLabel from "examples/progress-bar/custom-label.tsx";
99
import Customization from "examples/progress-bar/overrides.tsx";
1010
import Steps from "examples/progress-bar/steps.tsx";
11+
import Intent from "examples/progress-bar/intent.tsx";
1112
import ProgressBarRounded from "examples/progress-bar/rounded.tsx";
1213

1314
import { ProgressBar } from "baseui/progress-bar";
@@ -26,11 +27,13 @@ Indicates a wait time for actions - either within an experience flow or loading
2627

2728
## Accessibility
2829

29-
- The progress bar always sets `role="progressbar"`
30+
- The progress bar always sets `role="progressbar"` and `aria-live="polite"`
3031
- When `infinite` is `false` (the progress bar is determinate), these determinate aria tags are set:
3132
- `aria-valuenow={value}`
3233
- `aria-valuemin={0}`
3334
- `aria-valuemax={100}`
35+
- When `infinite` is `true`, `aria-busy="true"` is set
36+
- Use `ariaLabel` or `aria-label` prop to provide a descriptive label for screen readers
3437

3538
## Examples
3639

@@ -45,6 +48,10 @@ Indicates a wait time for actions - either within an experience flow or loading
4548
<Negative />
4649
</Example>
4750

51+
<Example title="Progress bar with Intent" path="progress-bar/intent.tsx">
52+
<Intent />
53+
</Example>
54+
4855
<Example
4956
title="Progress bar with Visible Label"
5057
path="progress-bar/with-label.tsx"

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "baseui",
3-
"version": "16.1.1",
3+
"version": "16.2.1",
44
"description": "A React Component library implementing the Base design language",
55
"keywords": [
66
"react",

‎src/progress-bar/__tests__/progress-bar.stories.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ This source code is licensed under the MIT license found in the
55
LICENSE file in the root directory of this source tree.
66
*/
77
import React from 'react';
8+
import { Scenario as ProgressbarIntentScenario } from './progressbar-intent.scenario';
89
import { Scenario as ProgressbarNegativeScenario } from './progressbar-negative.scenario';
910
import { Scenario as ProgressbarRoundedAnimatedScenario } from './progressbar-rounded-animated.scenario';
1011
import { Scenario as ProgressbarRoundedOverridesScenario } from './progressbar-rounded-overrides.scenario';
1112
import { Scenario as ProgressbarRoundedScenario } from './progressbar-rounded.scenario';
1213
import { Scenario as ProgressbarScenario } from './progressbar.scenario';
1314

15+
export const ProgressbarIntent = () => <ProgressbarIntentScenario />;
1416
export const ProgressbarNegative = () => <ProgressbarNegativeScenario />;
1517
export const ProgressbarRoundedAnimated = () => <ProgressbarRoundedAnimatedScenario />;
1618

‎src/progress-bar/__tests__/progressbar-intent.scenario.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/*
2+
Copyright (c) Uber Technologies, Inc.
3+
4+
This source code is licensed under the MIT license found in the
5+
LICENSE file in the root directory of this source tree.
6+
*/
7+
import * as React from 'react';
8+
9+
import { ProgressBar, SIZE, INTENT } from '..';
10+
11+
export function Scenario() {
12+
return (
13+
<>
14+
<h3>Determinate - All Intents</h3>
15+
<ProgressBar value={50} showLabel intent={INTENT.default} />
16+
<br />
17+
<ProgressBar value={50} showLabel intent={INTENT.positive} />
18+
<br />
19+
<ProgressBar value={50} showLabel intent={INTENT.warning} />
20+
<br />
21+
<ProgressBar value={50} showLabel intent={INTENT.negative} />
22+
<br />
23+
<ProgressBar value={50} showLabel intent={INTENT.brand} />
24+
<br />
25+
26+
<h3>Indeterminate - All Intents</h3>
27+
<ProgressBar infinite showLabel intent={INTENT.default} />
28+
<br />
29+
<ProgressBar infinite showLabel intent={INTENT.positive} />
30+
<br />
31+
<ProgressBar infinite showLabel intent={INTENT.warning} />
32+
<br />
33+
<ProgressBar infinite showLabel intent={INTENT.negative} />
34+
<br />
35+
<ProgressBar infinite showLabel intent={INTENT.brand} />
36+
<br />
37+
38+
<h3>Different Sizes with Intent</h3>
39+
<ProgressBar value={60} showLabel size={SIZE.small} intent={INTENT.positive} />
40+
<br />
41+
<ProgressBar value={60} showLabel size={SIZE.medium} intent={INTENT.warning} />
42+
<br />
43+
<ProgressBar value={60} showLabel size={SIZE.large} intent={INTENT.negative} />
44+
<br />
45+
46+
<h3>Segmented with Intent</h3>
47+
<ProgressBar value={60} showLabel steps={5} intent={INTENT.positive} />
48+
<br />
49+
<ProgressBar value={60} showLabel steps={5} intent={INTENT.warning} />
50+
<br />
51+
<ProgressBar value={60} showLabel steps={5} intent={INTENT.negative} />
52+
</>
53+
);
54+
}

‎src/progress-bar/__tests__/progressbar-rounded.test.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,35 @@ describe('Rounded progress bar', function () {
2121
getByText(container, '50%');
2222
});
2323

24-
it('should render component and set a correct aria-valuenow value (rounded and formatted)', async () => {
24+
it('should render component and set a correct aria-valuenow value (numeric)', async () => {
2525
const { container } = render(<ProgressBarRounded progress={0.5} size={SIZE.medium} />);
2626
const progressBar = getByRole(container, 'progressbar');
2727
expect(progressBar).toHaveAttribute('aria-valuenow', '0.5');
2828
});
29+
30+
it('should have aria-live attribute for accessibility', () => {
31+
const { container } = render(<ProgressBarRounded progress={0.5} />);
32+
const progressBar = getByRole(container, 'progressbar');
33+
expect(progressBar).toHaveAttribute('aria-live', 'polite');
34+
});
35+
36+
it('should have default aria-label with percentage', () => {
37+
const { container } = render(<ProgressBarRounded progress={0.75} />);
38+
const progressBar = getByRole(container, 'progressbar', { name: '75% complete' });
39+
expect(progressBar).toBeInTheDocument();
40+
});
41+
42+
it('should accept custom aria-label prop', () => {
43+
const { container } = render(<ProgressBarRounded progress={0.5} ariaLabel="Uploading file" />);
44+
const progressBar = getByRole(container, 'progressbar', { name: 'Uploading file' });
45+
expect(progressBar).toBeInTheDocument();
46+
});
47+
48+
it('should accept custom aria-label via kebab-case prop', () => {
49+
const { container } = render(
50+
<ProgressBarRounded progress={0.5} aria-label="Processing data" />
51+
);
52+
const progressBar = getByRole(container, 'progressbar', { name: 'Processing data' });
53+
expect(progressBar).toBeInTheDocument();
54+
});
2955
});

‎src/progress-bar/__tests__/progressbar.test.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
66
*/
77
import * as React from 'react';
88
import { render, getByRole, getByText } from '@testing-library/react';
9+
import '@testing-library/jest-dom';
910

1011
import { ProgressBar } from '..';
1112

@@ -37,4 +38,22 @@ describe('Stateless progress bar', function () {
3738
const { container } = render(<ProgressBar aria-label="test" steps={2} />);
3839
getByRole(container, 'progressbar', { name: 'test' });
3940
});
41+
42+
it('should have aria-live attribute for accessibility', () => {
43+
const { container } = render(<ProgressBar value={75} />);
44+
const progressBar = getByRole(container, 'progressbar');
45+
expect(progressBar).toHaveAttribute('aria-live', 'polite');
46+
});
47+
48+
it('should have aria-busy true for infinite progress bar', () => {
49+
const { container } = render(<ProgressBar infinite />);
50+
const progressBar = getByRole(container, 'progressbar');
51+
expect(progressBar).toHaveAttribute('aria-busy', 'true');
52+
});
53+
54+
it('should not have aria-busy for determinate progress bar', () => {
55+
const { container } = render(<ProgressBar value={75} />);
56+
const progressBar = getByRole(container, 'progressbar');
57+
expect(progressBar).not.toHaveAttribute('aria-busy');
58+
});
4059
});

‎src/progress-bar/constants.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,11 @@ export const SIZE = {
99
medium: 'medium',
1010
large: 'large',
1111
} as const;
12+
13+
export const INTENT = {
14+
default: 'default',
15+
positive: 'positive',
16+
warning: 'warning',
17+
negative: 'negative',
18+
brand: 'brand',
19+
} as const;

‎src/progress-bar/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
66
*/
77
export { default as ProgressBar } from './progressbar';
88
export { default as ProgressBarRounded } from './progressbar-rounded';
9-
export { SIZE } from './constants';
9+
export { SIZE, INTENT } from './constants';
1010
// Styled elements
1111
export {
1212
StyledRoot,

0 commit comments

Comments
 (0)