docs(ui-progress): add renderValue and formatScreenreaderValue to eac…

…h example in ProgressBar Closes: INSTUI-4283
instructure · Dec 9, 2024 · f1b4172 · f1b4172
1 parent 56308de
commit f1b4172
Showing 1 changed file with 122 additions and 0 deletions.
diff --git a/packages/ui-progress/src/ProgressBar/README.md b/packages/ui-progress/src/ProgressBar/README.md
@@ -18,25 +18,65 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     size="small"
     screenReaderLabel="Loading completion"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     size="large"
     screenReaderLabel="Loading completion"
     valueNow={40}
     valueMax={60}
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </div>
 ```
@@ -56,6 +96,16 @@ type: example
     color="primary-inverse"
     valueNow={30}
     valueMax={60}
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </View>
 ```
@@ -75,34 +125,84 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     meterColor="success"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     meterColor="alert"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     meterColor="warning"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     meterColor="danger"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </div>
 ```
@@ -128,6 +228,16 @@ type: example
   }}
   valueNow={10}
   valueMax={60}
+  renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
 />
 ```
 
@@ -259,6 +369,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
             valueNow={this.state.value}
             valueMax={this.MAX}
             shouldAnimate={this.state.shouldAnimate}
+            renderValue={({ valueNow, valueMax }) => {
+              return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
+            }}
+            formatScreenReaderValue={({ valueNow, valueMax }) => {
+              return Math.round((valueNow / valueMax) * 100) + ' percent'
+            }}
           />
         </div>
       )
@@ -346,6 +462,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
           valueNow={value}
           valueMax={MAX}
           shouldAnimate={shouldAnimate}
+          renderValue={({ valueNow, valueMax }) => {
+            return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
+          }}
+          formatScreenReaderValue={({ valueNow, valueMax }) => {
+            return Math.round((valueNow / valueMax) * 100) + ' percent'
+          }}
         />
       </div>
     )