Skip to content

Commit cec7001

Browse files
committed
Fix progress documentation.
1 parent e6543b0 commit cec7001

File tree

1 file changed

+28
-29
lines changed
  • apps/website/src/routes/docs/headless/progress

1 file changed

+28
-29
lines changed

apps/website/src/routes/docs/headless/progress/index.mdx

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ Displays a progress bar related to a task.
1414

1515
<Showcase name="hero" />
1616

17-
Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/meter) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
17+
Qwik UI's Progress implementation follows the [WAI-Aria](https://w3c.github.io/aria/#progressbar) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
18+
19+
## ✨ Features
1820

1921
<FeatureList
2022
features={['Provides context for assistive technology to read the progress of a task.']}
@@ -24,34 +26,49 @@ Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/
2426

2527
<CodeSnippet name="building-blocks" />
2628

27-
{/* TODO: Match docs conventions with the select, collapsible, or label. */}
29+
### 🎨 Anatomy
30+
31+
<AnatomyTable
32+
propDescriptors={[
33+
{
34+
name: 'Progress.Root',
35+
description: 'The root container for the progress',
36+
},
37+
{
38+
name: 'Progress.Indicator',
39+
description: 'Displays the progression process',
40+
},
41+
]}
42+
/>
43+
44+
## Example CSS
45+
46+
<CodeSnippet name="progress.css" />
2847

2948
## Accessibility
3049

31-
Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
50+
Adheres to the [progressbar role requirements](https://w3c.github.io/aria/#progressbar/).
3251

3352
## API
3453

35-
### Progress
36-
37-
Contains all of the progress parts.
54+
### Progress.Root
3855

3956
<APITable
4057
propDescriptors={[
4158
{
4259
name: 'class',
4360
type: 'string',
44-
description: 'CSS classes to apply to the Progress.',
61+
description: 'Custom class for the progress wrapper',
4562
},
4663
{
4764
name: 'value',
4865
type: 'number',
49-
description: 'The progress value.',
66+
description: 'Current value of the progress bar.',
5067
},
5168
{
5269
name: 'max',
5370
type: 'number',
54-
description: 'The maximum progress value',
71+
description: 'Maximum value of the progress bar.',
5572
},
5673
{
5774
name: 'getValueLabel',
@@ -62,32 +79,14 @@ Contains all of the progress parts.
6279
]}
6380
/>
6481

65-
### Progress Indicator
66-
67-
Contains all of the progress parts.
82+
### Progress.Indicator
6883

6984
<APITable
7085
propDescriptors={[
7186
{
7287
name: 'class',
7388
type: 'string',
74-
description: 'CSS classes to apply to the Progress.',
75-
},
76-
{
77-
name: 'value',
78-
type: 'number',
79-
description: 'The progress value.',
80-
},
81-
{
82-
name: 'max',
83-
type: 'number',
84-
description: 'The maximum progress value',
85-
},
86-
{
87-
name: 'getValueLabel',
88-
type: 'function',
89-
description:
90-
'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.',
89+
description: 'Custom class for the progress indicator',
9190
},
9291
]}
9392
/>

0 commit comments

Comments
 (0)