@instructure/ui-progress 8.36.1-snapshot-18 → 8.36.1-snapshot-24

package/CHANGELOG.md

@@ -3,9 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.36.1-snapshot-18](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-18) (2023-04-17)
+## [8.36.1-snapshot-24](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-24) (2023-04-21)
 
-**Note:** Version bump only for package @instructure/ui-progress
+
+### Bug Fixes
+
+* **ui-progress:** fix ProgressBar `info` and `success` color in inverse mode ([920fa49](https://github.com/instructure/instructure-ui/commit/920fa49e89f7796faf8a527781a44c6f63f26bac))
+
+
+### Features
+
+* **ui-progress:** add `shouldAnimate` prop to ProgressBar ([c528956](https://github.com/instructure/instructure-ui/commit/c528956f81c96df52b07b9dc59ae1e137307c780))
 
 
 

package/es/ProgressBar/__examples__/ProgressBar.examples.js

@@ -26,6 +26,7 @@ import React from 'react';
 const valueMax = 100;
 export default {
   sectionProp: 'color',
+  excludeProps: ['shouldAnimate'],
   propValues: {
     valueNow: [0, 40, 80, 100],
     renderValue: [null, _ref => {

package/es/ProgressBar/index.js

@@ -24,6 +24,7 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
@@ -93,10 +94,8 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       elementRef: this.handleRef
     }), jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
-    }), jsx("progress", {
-      css: styles === null || styles === void 0 ? void 0 : styles.track,
+    }, jsx("progress", {
+      css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
       max: valueMax,
       value: valueNow,
       role: "progressbar",
@@ -104,7 +103,13 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       "aria-valuenow": valueNow,
       "aria-valuemax": valueMax,
       "aria-label": labelAndValueText
-    })), value && jsx("span", {
+    }), jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.track,
+      role: "presentation",
+      "aria-hidden": "true"
+    }, jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.trackValue
+    }))), value && jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
@@ -120,6 +125,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   valueNow: 0,
   as: 'div',
   color: 'primary',
+  shouldAnimate: false,
   // default to showing `success` color on completion
   meterColor: _ref2 => {
     let valueNow = _ref2.valueNow,

package/es/ProgressBar/props.js

@@ -32,9 +32,10 @@ const propTypes = {
   renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
   meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
+  shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
   as: PropTypes.elementType
 };
-const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as'];
+const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];
 export { propTypes, allowedProps };

package/es/ProgressBar/styles.js

@@ -39,11 +39,14 @@ const generateStyle = (componentTheme, props) => {
     valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
     size = props.size,
     color = props.color,
-    meterColor = props.meterColor;
+    meterColor = props.meterColor,
+    shouldAnimate = props.shouldAnimate;
   const meterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,
     valueMax
   }) : meterColor;
+  const currentValue = valueNow > valueMax ? valueMax : valueNow < 0 ? 0 : valueNow;
+  const currentValuePercent = `${currentValue / valueMax * 100}%`;
   const sizeVariants = {
     'x-small': {
       track: {
@@ -123,9 +126,11 @@ const generateStyle = (componentTheme, props) => {
         background: componentTheme.meterColorBrandInverse
       },
       info: {
+        background: componentTheme.meterColorInfoInverse
+      },
+      success: {
         background: componentTheme.meterColorSuccessInverse
       },
-      success: {},
       danger: {
         background: componentTheme.meterColorDangerInverse
       },
@@ -153,44 +158,28 @@ const generateStyle = (componentTheme, props) => {
       flex: 1,
       ...colorVariants[color].trackLayout
     },
-    trackBorder: {
-      label: 'progressBar__trackBorder',
+    track: {
+      label: 'progressBar__track',
       display: 'block',
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
       boxSizing: 'border-box',
+      width: '100%',
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
+      background: 'transparent',
+      ...sizeVariants[size].track,
       ...colorVariants[color].trackBorder
     },
-    track: {
-      label: 'progressBar__track',
-      '&[value]': {
-        display: 'block',
-        position: 'relative',
-        boxSizing: 'border-box',
-        appearance: 'none',
-        background: 'transparent',
-        width: '100%',
-        border: 'none',
-        ...sizeVariants[size].track,
-        '&::-webkit-progress-bar': {
-          background: 'transparent'
-        },
-        '&::-webkit-progress-value': {
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        },
-        '&::-moz-progress-bar': {
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        },
-        '&::-ms-fill': {
-          border: 'none',
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        }
-      }
+    trackValue: {
+      label: 'progressBar__trackValue',
+      display: 'block',
+      boxSizing: 'border-box',
+      height: '100%',
+      width: currentValuePercent,
+      maxWidth: '100%',
+      ...(shouldAnimate && {
+        transition: 'all 0.5s'
+      }),
+      ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
     },
     value: {
       label: 'progressBar__value',
@@ -199,6 +188,18 @@ const generateStyle = (componentTheme, props) => {
       paddingInlineStart: componentTheme.valuePadding,
       flex: '0 0 5.625rem',
       ...sizeVariants[size].value
+    },
+    htmlProgress: {
+      label: 'progressBar__htmlProgress',
+      display: 'block',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      zIndex: -1,
+      opacity: 0
     }
   };
 };

package/lib/ProgressBar/__examples__/ProgressBar.examples.js

@@ -33,6 +33,7 @@ var _react = _interopRequireDefault(require("react"));
 const valueMax = 100;
 var _default = {
   sectionProp: 'color',
+  excludeProps: ['shouldAnimate'],
   propValues: {
     valueNow: [0, 40, 80, 100],
     renderValue: [null, _ref => {

package/lib/ProgressBar/index.js

@@ -100,10 +100,8 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       elementRef: this.handleRef
     }), (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
-    }), (0, _emotion.jsx)("progress", {
-      css: styles === null || styles === void 0 ? void 0 : styles.track,
+    }, (0, _emotion.jsx)("progress", {
+      css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
       max: valueMax,
       value: valueNow,
       role: "progressbar",
@@ -111,7 +109,13 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       "aria-valuenow": valueNow,
       "aria-valuemax": valueMax,
       "aria-label": labelAndValueText
-    })), value && (0, _emotion.jsx)("span", {
+    }), (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.track,
+      role: "presentation",
+      "aria-hidden": "true"
+    }, (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.trackValue
+    }))), value && (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
@@ -127,6 +131,7 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   valueNow: 0,
   as: 'div',
   color: 'primary',
+  shouldAnimate: false,
   // default to showing `success` color on completion
   meterColor: _ref2 => {
     let valueNow = _ref2.valueNow,

package/lib/ProgressBar/props.js

@@ -40,10 +40,11 @@ const propTypes = {
   renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
   meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
+  shouldAnimate: _propTypes.default.bool,
   margin: _emotion.ThemeablePropTypes.spacing,
   elementRef: _propTypes.default.func,
   as: _propTypes.default.elementType
 };
 exports.propTypes = propTypes;
-const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as'];
+const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];
 exports.allowedProps = allowedProps;

package/lib/ProgressBar/styles.js

@@ -45,11 +45,14 @@ const generateStyle = (componentTheme, props) => {
     valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
     size = props.size,
     color = props.color,
-    meterColor = props.meterColor;
+    meterColor = props.meterColor,
+    shouldAnimate = props.shouldAnimate;
   const meterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,
     valueMax
   }) : meterColor;
+  const currentValue = valueNow > valueMax ? valueMax : valueNow < 0 ? 0 : valueNow;
+  const currentValuePercent = `${currentValue / valueMax * 100}%`;
   const sizeVariants = {
     'x-small': {
       track: {
@@ -129,9 +132,11 @@ const generateStyle = (componentTheme, props) => {
         background: componentTheme.meterColorBrandInverse
       },
       info: {
+        background: componentTheme.meterColorInfoInverse
+      },
+      success: {
         background: componentTheme.meterColorSuccessInverse
       },
-      success: {},
       danger: {
         background: componentTheme.meterColorDangerInverse
       },
@@ -159,44 +164,28 @@ const generateStyle = (componentTheme, props) => {
       flex: 1,
       ...colorVariants[color].trackLayout
     },
-    trackBorder: {
-      label: 'progressBar__trackBorder',
+    track: {
+      label: 'progressBar__track',
       display: 'block',
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
       boxSizing: 'border-box',
+      width: '100%',
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
+      background: 'transparent',
+      ...sizeVariants[size].track,
       ...colorVariants[color].trackBorder
     },
-    track: {
-      label: 'progressBar__track',
-      '&[value]': {
-        display: 'block',
-        position: 'relative',
-        boxSizing: 'border-box',
-        appearance: 'none',
-        background: 'transparent',
-        width: '100%',
-        border: 'none',
-        ...sizeVariants[size].track,
-        '&::-webkit-progress-bar': {
-          background: 'transparent'
-        },
-        '&::-webkit-progress-value': {
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        },
-        '&::-moz-progress-bar': {
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        },
-        '&::-ms-fill': {
-          border: 'none',
-          ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
-        }
-      }
+    trackValue: {
+      label: 'progressBar__trackValue',
+      display: 'block',
+      boxSizing: 'border-box',
+      height: '100%',
+      width: currentValuePercent,
+      maxWidth: '100%',
+      ...(shouldAnimate && {
+        transition: 'all 0.5s'
+      }),
+      ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
     },
     value: {
       label: 'progressBar__value',
@@ -205,6 +194,18 @@ const generateStyle = (componentTheme, props) => {
       paddingInlineStart: componentTheme.valuePadding,
       flex: '0 0 5.625rem',
       ...sizeVariants[size].value
+    },
+    htmlProgress: {
+      label: 'progressBar__htmlProgress',
+      display: 'block',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      zIndex: -1,
+      opacity: 0
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-progress",
-  "version": "8.36.1-snapshot-18",
+  "version": "8.36.1-snapshot-24",
   "description": "Styled HTML <progress /> elements for showing completion of a task",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@instructure/console": "8.36.1-snapshot-18",
-    "@instructure/emotion": "8.36.1-snapshot-18",
-    "@instructure/shared-types": "8.36.1-snapshot-18",
-    "@instructure/ui-a11y-content": "8.36.1-snapshot-18",
-    "@instructure/ui-color-utils": "8.36.1-snapshot-18",
-    "@instructure/ui-react-utils": "8.36.1-snapshot-18",
-    "@instructure/ui-testable": "8.36.1-snapshot-18",
-    "@instructure/ui-view": "8.36.1-snapshot-18",
+    "@instructure/console": "8.36.1-snapshot-24",
+    "@instructure/emotion": "8.36.1-snapshot-24",
+    "@instructure/shared-types": "8.36.1-snapshot-24",
+    "@instructure/ui-a11y-content": "8.36.1-snapshot-24",
+    "@instructure/ui-color-utils": "8.36.1-snapshot-24",
+    "@instructure/ui-react-utils": "8.36.1-snapshot-24",
+    "@instructure/ui-testable": "8.36.1-snapshot-24",
+    "@instructure/ui-view": "8.36.1-snapshot-24",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.36.1-snapshot-18",
-    "@instructure/ui-test-locator": "8.36.1-snapshot-18",
-    "@instructure/ui-test-utils": "8.36.1-snapshot-18",
-    "@instructure/ui-themes": "8.36.1-snapshot-18"
+    "@instructure/ui-babel-preset": "8.36.1-snapshot-24",
+    "@instructure/ui-test-locator": "8.36.1-snapshot-24",
+    "@instructure/ui-test-utils": "8.36.1-snapshot-24",
+    "@instructure/ui-themes": "8.36.1-snapshot-24"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ProgressBar/README.md

@@ -162,3 +162,109 @@ example: true
   valueNow={33}
 />
 ```
+
+### `shouldAnimate`
+
+The `shouldAnimate` prop makes the progress bar animate the transition between value changes, giving it a smoother look.
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  MIN = 0
+  MAX = 100
+
+  state = {
+    value: 25,
+    shouldAnimate: true
+  }
+
+  bound (n) {
+    if (n < this.MIN) return this.MIN
+    if (n > this.MAX) return this.MAX
+    return n
+  }
+
+  setNumber (n) {
+    return { value: this.bound(n) }
+  }
+
+  handleChange = (event, value) => {
+    const newValue = Number(value)
+
+    if (isNaN(newValue)) {
+      return
+    }
+
+    this.setState({
+      value: newValue
+    })
+  }
+
+  handleDecrement = (event) => this.setState(({ value }) => {
+    if (Number.isInteger(value)) {
+      return this.setNumber(value - 1)
+    }
+    return this.setNumber(Math.floor(value))
+  })
+
+  handleIncrement = (event) => this.setState(({ value }) => {
+    if (Number.isInteger(value)) {
+      return this.setNumber(value + 1)
+    }
+    return this.setNumber(Math.ceil(value))
+  })
+
+  handleBlur = (event) => this.setState(({ value }) => {
+    return this.setNumber(Math.round(value))
+  })
+
+  render() {
+    return (
+      <div>
+        <View
+          as="div"
+          background="primary"
+          padding="medium"
+          margin="0 0 large 0"
+        >
+          <FormFieldGroup
+            description={<ScreenReaderContent>Settings</ScreenReaderContent>}
+          >
+            <Checkbox
+              label="Should animate"
+              checked={this.state.shouldAnimate}
+              onChange={() => {
+                this.setState({ shouldAnimate: !this.state.shouldAnimate })
+              }}
+              variant="toggle"
+            />
+
+            <NumberInput
+              renderLabel={`ProgressBar value (${this.MIN}-${this.MAX})`}
+              display="inline-block"
+              onBlur={this.handleBlur}
+              onChange={this.handleChange}
+              onDecrement={this.handleDecrement}
+              onIncrement={this.handleIncrement}
+              showArrows
+              value={this.state.value}
+            />
+          </FormFieldGroup>
+        </View>
+
+        <ProgressBar
+          screenReaderLabel="Loading completion"
+          valueNow={this.state.value}
+          valueMax={this.MAX}
+          shouldAnimate={this.state.shouldAnimate}
+        />
+      </div>
+    )
+  }
+}
+
+render(<Example />)
+```

package/src/ProgressBar/__examples__/ProgressBar.examples.tsx

@@ -31,6 +31,7 @@ const valueMax = 100
 
 export default {
   sectionProp: 'color',
+  excludeProps: ['shouldAnimate'],
   propValues: {
     valueNow: [0, 40, 80, 100],
     renderValue: [

package/src/ProgressBar/index.tsx

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /** @jsx jsx */
 import { Component } from 'react'
 
@@ -32,6 +33,7 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+
 import type { ProgressBarProps, Values } from './props'
 import { allowedProps, propTypes } from './props'
 
@@ -57,6 +59,7 @@ class ProgressBar extends Component<ProgressBarProps> {
     valueNow: 0,
     as: 'div',
     color: 'primary',
+    shouldAnimate: false,
 
     // default to showing `success` color on completion
     meterColor: ({ valueNow, valueMax }: Values) =>
@@ -121,11 +124,8 @@ class ProgressBar extends Component<ProgressBarProps> {
         elementRef={this.handleRef}
       >
         <span css={styles?.trackLayout}>
-          {/* creates bottom border effect - <progress /> hard to style x-browser */}
-          <span css={styles?.trackBorder}></span>
-
           <progress
-            css={styles?.track}
+            css={styles?.htmlProgress}
             max={valueMax}
             value={valueNow}
             role="progressbar"
@@ -134,6 +134,10 @@ class ProgressBar extends Component<ProgressBarProps> {
             aria-valuemax={valueMax}
             aria-label={labelAndValueText}
           />
+
+          <span css={styles?.track} role="presentation" aria-hidden="true">
+            <span css={styles?.trackValue}></span>
+          </span>
         </span>
 
         {value && (

package/src/ProgressBar/props.ts

@@ -53,31 +53,38 @@ type ProgressBarOwnProps = {
    * A label is required for accessibility
    */
   screenReaderLabel: string
+
   /**
    * Control the height of the progress bar
    */
   size?: 'x-small' | 'small' | 'medium' | 'large'
+
   /**
    * Maximum value (defaults to 100)
    */
   valueMax?: Values['valueMax']
+
   /**
    * Receives the progress of the event
    */
   valueNow?: Values['valueNow']
+
   /**
    * A function for formatting the text provided to screen readers via `aria-valuenow`
    */
   formatScreenReaderValue?: (values: Values) => string
+
   /**
    * A function to format the displayed value. If null the value will not display.
    * Takes `valueNow` and `valueMax` as parameters.
    */
   renderValue?: Renderable<Values>
+
   /**
    * Controls the overall color scheme of the component
    */
   color?: 'primary' | 'primary-inverse'
+
   /**
    * Control the color of the progress meter. Defaults to showing theme success
    * color on completion, based on `valueNow` and `valueMax`.
@@ -85,16 +92,24 @@ type ProgressBarOwnProps = {
   meterColor?:
     | ((values: Values) => ProgressBarMeterColor)
     | ProgressBarMeterColor
+
+  /**
+   * Whether the change of value should have a transition
+   */
+  shouldAnimate?: boolean
+
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
   margin?: Spacing
+
   /**
    * Provides a reference to the component's root HTML element
    */
   elementRef?: (element: Element | null) => void
+
   /**
    * Set the element type of the component's root
    */
@@ -110,7 +125,12 @@ type ProgressBarProps = ProgressBarOwnProps &
   OtherHTMLAttributes<ProgressBarOwnProps>
 
 type ProgressBarStyle = ComponentStyle<
-  'progressBar' | 'trackLayout' | 'trackBorder' | 'track' | 'value'
+  | 'progressBar'
+  | 'trackLayout'
+  | 'track'
+  | 'trackValue'
+  | 'value'
+  | 'htmlProgress'
 >
 
 const propTypes: PropValidators<PropKeys> = {
@@ -125,6 +145,7 @@ const propTypes: PropValidators<PropKeys> = {
     PropTypes.func,
     PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])
   ]),
+  shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
   as: PropTypes.elementType
@@ -139,6 +160,7 @@ const allowedProps: AllowedPropKeys = [
   'renderValue',
   'color',
   'meterColor',
+  'shouldAnimate',
   'margin',
   'elementRef',
   'as'