@instructure/ui-progress 10.7.1-snapshot-1 → 10.7.1-snapshot-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +13 -13
  3. package/src/ProgressBar/README.md +122 -0
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.7.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.7.0...v10.7.1-snapshot-1) (2024-12-06)
6
+ ## [10.7.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.7.0...v10.7.1-snapshot-2) (2024-12-09)
7
7
 
8
8
 
9
9
  ### Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-progress",
3
- "version": "10.7.1-snapshot-1",
3
+ "version": "10.7.1-snapshot-2",
4
4
  "description": "Styled HTML <progress /> elements for showing completion of a task",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,21 +24,21 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.25.6",
27
- "@instructure/console": "10.7.1-snapshot-1",
28
- "@instructure/emotion": "10.7.1-snapshot-1",
29
- "@instructure/shared-types": "10.7.1-snapshot-1",
30
- "@instructure/ui-a11y-content": "10.7.1-snapshot-1",
31
- "@instructure/ui-color-utils": "10.7.1-snapshot-1",
32
- "@instructure/ui-react-utils": "10.7.1-snapshot-1",
33
- "@instructure/ui-testable": "10.7.1-snapshot-1",
34
- "@instructure/ui-view": "10.7.1-snapshot-1",
27
+ "@instructure/console": "10.7.1-snapshot-2",
28
+ "@instructure/emotion": "10.7.1-snapshot-2",
29
+ "@instructure/shared-types": "10.7.1-snapshot-2",
30
+ "@instructure/ui-a11y-content": "10.7.1-snapshot-2",
31
+ "@instructure/ui-color-utils": "10.7.1-snapshot-2",
32
+ "@instructure/ui-react-utils": "10.7.1-snapshot-2",
33
+ "@instructure/ui-testable": "10.7.1-snapshot-2",
34
+ "@instructure/ui-view": "10.7.1-snapshot-2",
35
35
  "prop-types": "^15.8.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@instructure/ui-axe-check": "10.7.1-snapshot-1",
39
- "@instructure/ui-babel-preset": "10.7.1-snapshot-1",
40
- "@instructure/ui-test-utils": "10.7.1-snapshot-1",
41
- "@instructure/ui-themes": "10.7.1-snapshot-1",
38
+ "@instructure/ui-axe-check": "10.7.1-snapshot-2",
39
+ "@instructure/ui-babel-preset": "10.7.1-snapshot-2",
40
+ "@instructure/ui-test-utils": "10.7.1-snapshot-2",
41
+ "@instructure/ui-themes": "10.7.1-snapshot-2",
42
42
  "@testing-library/jest-dom": "^6.4.6",
43
43
  "@testing-library/react": "^16.0.1",
44
44
  "vitest": "^2.1.1"
package/src/ProgressBar/README.md CHANGED
@@ -18,6 +18,16 @@ type: example
18
18
  valueNow={40}
19
19
  valueMax={60}
20
20
  margin="0 0 small"
21
+ renderValue={({ valueNow, valueMax }) => {
22
+ return (
23
+ <Text>
24
+ {Math.round(valueNow / valueMax * 100)}%
25
+ </Text>
26
+ )
27
+ }}
28
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
29
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
30
+ }}
21
31
  />
22
32
  <ProgressBar
23
33
  size="small"
@@ -25,18 +35,48 @@ type: example
25
35
  valueNow={40}
26
36
  valueMax={60}
27
37
  margin="0 0 small"
38
+ renderValue={({ valueNow, valueMax }) => {
39
+ return (
40
+ <Text>
41
+ {Math.round(valueNow / valueMax * 100)}%
42
+ </Text>
43
+ )
44
+ }}
45
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
46
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
47
+ }}
28
48
  />
29
49
  <ProgressBar
30
50
  screenReaderLabel="Loading completion"
31
51
  valueNow={40}
32
52
  valueMax={60}
33
53
  margin="0 0 small"
54
+ renderValue={({ valueNow, valueMax }) => {
55
+ return (
56
+ <Text>
57
+ {Math.round(valueNow / valueMax * 100)}%
58
+ </Text>
59
+ )
60
+ }}
61
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
62
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
63
+ }}
34
64
  />
35
65
  <ProgressBar
36
66
  size="large"
37
67
  screenReaderLabel="Loading completion"
38
68
  valueNow={40}
39
69
  valueMax={60}
70
+ renderValue={({ valueNow, valueMax }) => {
71
+ return (
72
+ <Text>
73
+ {Math.round(valueNow / valueMax * 100)}%
74
+ </Text>
75
+ )
76
+ }}
77
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
78
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
79
+ }}
40
80
  />
41
81
  </div>
42
82
  ```
@@ -56,6 +96,16 @@ type: example
56
96
  color="primary-inverse"
57
97
  valueNow={30}
58
98
  valueMax={60}
99
+ renderValue={({ valueNow, valueMax }) => {
100
+ return (
101
+ <Text>
102
+ {Math.round(valueNow / valueMax * 100)}%
103
+ </Text>
104
+ )
105
+ }}
106
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
107
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
108
+ }}
59
109
  />
60
110
  </View>
61
111
  ```
@@ -75,6 +125,16 @@ type: example
75
125
  valueNow={40}
76
126
  valueMax={60}
77
127
  margin="0 0 small"
128
+ renderValue={({ valueNow, valueMax }) => {
129
+ return (
130
+ <Text>
131
+ {Math.round(valueNow / valueMax * 100)}%
132
+ </Text>
133
+ )
134
+ }}
135
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
136
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
137
+ }}
78
138
  />
79
139
  <ProgressBar
80
140
  screenReaderLabel="Loading completion"
@@ -82,6 +142,16 @@ type: example
82
142
  valueNow={40}
83
143
  valueMax={60}
84
144
  margin="0 0 small"
145
+ renderValue={({ valueNow, valueMax }) => {
146
+ return (
147
+ <Text>
148
+ {Math.round(valueNow / valueMax * 100)}%
149
+ </Text>
150
+ )
151
+ }}
152
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
153
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
154
+ }}
85
155
  />
86
156
  <ProgressBar
87
157
  screenReaderLabel="Loading completion"
@@ -89,6 +159,16 @@ type: example
89
159
  valueNow={40}
90
160
  valueMax={60}
91
161
  margin="0 0 small"
162
+ renderValue={({ valueNow, valueMax }) => {
163
+ return (
164
+ <Text>
165
+ {Math.round(valueNow / valueMax * 100)}%
166
+ </Text>
167
+ )
168
+ }}
169
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
170
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
171
+ }}
92
172
  />
93
173
  <ProgressBar
94
174
  screenReaderLabel="Loading completion"
@@ -96,6 +176,16 @@ type: example
96
176
  valueNow={40}
97
177
  valueMax={60}
98
178
  margin="0 0 small"
179
+ renderValue={({ valueNow, valueMax }) => {
180
+ return (
181
+ <Text>
182
+ {Math.round(valueNow / valueMax * 100)}%
183
+ </Text>
184
+ )
185
+ }}
186
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
187
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
188
+ }}
99
189
  />
100
190
  <ProgressBar
101
191
  screenReaderLabel="Loading completion"
@@ -103,6 +193,16 @@ type: example
103
193
  valueNow={40}
104
194
  valueMax={60}
105
195
  margin="0 0 small"
196
+ renderValue={({ valueNow, valueMax }) => {
197
+ return (
198
+ <Text>
199
+ {Math.round(valueNow / valueMax * 100)}%
200
+ </Text>
201
+ )
202
+ }}
203
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
204
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
205
+ }}
106
206
  />
107
207
  </div>
108
208
  ```
@@ -128,6 +228,16 @@ type: example
128
228
  }}
129
229
  valueNow={10}
130
230
  valueMax={60}
231
+ renderValue={({ valueNow, valueMax }) => {
232
+ return (
233
+ <Text>
234
+ {Math.round(valueNow / valueMax * 100)}%
235
+ </Text>
236
+ )
237
+ }}
238
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
239
+ return Math.round((valueNow / valueMax * 100)) + ' percent'
240
+ }}
131
241
  />
132
242
  ```
133
243
 
@@ -259,6 +369,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
259
369
  valueNow={this.state.value}
260
370
  valueMax={this.MAX}
261
371
  shouldAnimate={this.state.shouldAnimate}
372
+ renderValue={({ valueNow, valueMax }) => {
373
+ return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
374
+ }}
375
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
376
+ return Math.round((valueNow / valueMax) * 100) + ' percent'
377
+ }}
262
378
  />
263
379
  </div>
264
380
  )
@@ -346,6 +462,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
346
462
  valueNow={value}
347
463
  valueMax={MAX}
348
464
  shouldAnimate={shouldAnimate}
465
+ renderValue={({ valueNow, valueMax }) => {
466
+ return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
467
+ }}
468
+ formatScreenReaderValue={({ valueNow, valueMax }) => {
469
+ return Math.round((valueNow / valueMax) * 100) + ' percent'
470
+ }}
349
471
  />
350
472
  </div>
351
473
  )