@instructure/ui-progress 8.12.1-snapshot.56 → 8.13.1-snapshot.11

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+**Note:** Version bump only for package @instructure/ui-progress
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-progress

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

@@ -27,14 +27,13 @@ export default {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    _ref => {
+    renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
           valueMax = _ref.valueMax;
       return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -44,6 +43,5 @@ export default {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };

package/es/ProgressBar/index.js

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressBar extends Component {
@@ -82,10 +83,10 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           styles = _this$props3.styles,
           props = _objectWithoutProperties(_this$props3, _excluded);
 
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -118,7 +119,6 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
-    /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
   }
 
 }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/ProgressBar/props.js

@@ -24,63 +24,16 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: PropTypes.string.isRequired,
-
-  /**
-   * Control the height of the progress bar
-   */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: PropTypes.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: PropTypes.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
   formatScreenReaderValue: PropTypes.func,
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
   renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * 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: ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: PropTypes.elementType
 };
 const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as'];

package/es/ProgressBar/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const valueNow = props.valueNow,
-        valueMax = props.valueMax,
+  const _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
         size = props.size,
         color = props.color,
         meterColor = props.meterColor;

package/es/ProgressCircle/__examples__/ProgressCircle.examples.js

@@ -27,14 +27,13 @@ export default {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    _ref => {
+    renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
           valueMax = _ref.valueMax;
       return /*#__PURE__*/React.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -44,6 +43,5 @@ export default {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };

package/es/ProgressCircle/index.js

@@ -41,6 +41,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressCircle extends Component {
@@ -108,10 +109,10 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
           styles = _this$props3.styles,
           props = _objectWithoutProperties(_this$props3, _excluded);
 
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -120,7 +121,7 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
       valueNow,
       valueMax
     });
-    const style = this.state.animateOnMount ? null : {
+    const style = {
       strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
     };
     return jsx(View, Object.assign({}, passthroughProps(props), {

package/es/ProgressCircle/props.js

@@ -24,63 +24,16 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: PropTypes.string.isRequired,
-
-  /**
-   * Control the size of the progress circle
-   */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: PropTypes.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: PropTypes.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
-  formatScreenReaderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
+  formatScreenReaderValue: PropTypes.func,
   renderValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * 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: ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: PropTypes.elementType,
   shouldAnimateOnMount: PropTypes.bool,
   animationDelay: PropTypes.number

package/es/ProgressCircle/styles.js

@@ -36,8 +36,10 @@ const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
         color = props.color,
         meterColor = props.meterColor,
-        valueNow = props.valueNow,
-        valueMax = props.valueMax;
+        _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
   const shouldAnimateOnMount = state.shouldAnimateOnMount;
   const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,

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

@@ -37,14 +37,13 @@ var _default = {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    _ref => {
+    renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
           valueMax = _ref.valueMax;
       return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -54,7 +53,6 @@ var _default = {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };
 exports.default = _default;

package/lib/ProgressBar/index.js

@@ -35,6 +35,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressBar extends _react.Component {
   constructor() {
@@ -75,10 +76,10 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
           meterColor = _this$props3.meterColor,
           styles = _this$props3.styles,
           props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -111,7 +112,6 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));
-    /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/no-noninteractive-element-to-interactive-role */
   }
 
 }, _class2.displayName = "ProgressBar", _class2.componentId = 'ProgressBar', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/ProgressBar/props.js

@@ -35,63 +35,16 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: _propTypes.default.string.isRequired,
-
-  /**
-   * Control the height of the progress bar
-   */
   size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: _propTypes.default.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: _propTypes.default.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
   formatScreenReaderValue: _propTypes.default.func,
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
   renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * 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: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: _propTypes.default.elementType
 };
 exports.propTypes = propTypes;

package/lib/ProgressBar/styles.js

@@ -40,8 +40,10 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const valueNow = props.valueNow,
-        valueMax = props.valueMax,
+  const _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
         size = props.size,
         color = props.color,
         meterColor = props.meterColor;

package/lib/ProgressCircle/__examples__/ProgressCircle.examples.js

@@ -37,14 +37,13 @@ var _default = {
   sectionProp: 'color',
   propValues: {
     valueNow: [0, 40, 80, 100],
-    renderValue: [null, // eslint-disable-next-line react/display-name
-    _ref => {
+    renderValue: [null, _ref => {
       let valueNow = _ref.valueNow,
           valueMax = _ref.valueMax;
       return /*#__PURE__*/_react.default.createElement("span", null, Math.round(valueNow / valueMax * 100));
     }]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
@@ -54,7 +53,6 @@ var _default = {
     return {
       background: props.color.includes('inverse') ? 'primary-inverse' : 'primary'
     };
-  },
-  filter: props => {}
+  }
 };
 exports.default = _default;

package/lib/ProgressCircle/index.js

@@ -37,6 +37,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ProgressCircle extends _react.Component {
   constructor(props) {
@@ -102,10 +103,10 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           size = _this$props3.size,
           styles = _this$props3.styles,
           props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const valueText = typeof formatScreenReaderValue === 'function' && formatScreenReaderValue({
-      valueNow,
-      valueMax
-    }); // consolidating the label and aria-valuetext to put in aria-label because
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0; // consolidating the label and aria-valuetext to put in aria-label because
     // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
     // But leaving aria-valuetext because JAWS ignores aria-label
 
@@ -114,7 +115,7 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       valueNow,
       valueMax
     });
-    const style = this.state.animateOnMount ? null : {
+    const style = {
       strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
     };
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {

package/lib/ProgressCircle/props.js

@@ -35,63 +35,16 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   screenReaderLabel: _propTypes.default.string.isRequired,
-
-  /**
-   * Control the size of the progress circle
-   */
   size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Maximum value (defaults to 100)
-   */
   valueMax: _propTypes.default.number,
-
-  /**
-   * Receives the progress of the event
-   */
   valueNow: _propTypes.default.number,
-
-  /**
-   * A function for formatting the text provided to screen readers via `aria-valuenow`
-   */
-  formatScreenReaderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * A function to format the displayed value. If null the value will not display.
-   * Takes `valueNow` and `valueMax` as parameters.
-   */
+  formatScreenReaderValue: _propTypes.default.func,
   renderValue: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Controls the overall color scheme of the component
-   */
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Control the color of the progress meter. Defaults to showing theme success
-   * color on completion, based on `valueNow` and `valueMax`.
-   */
   meterColor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['info', 'warning', 'danger', 'alert', 'success', 'brand'])]),
-
-  /**
-   * 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: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the component's root HTML element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Set the element type of the component's root
-   */
   as: _propTypes.default.elementType,
   shouldAnimateOnMount: _propTypes.default.bool,
   animationDelay: _propTypes.default.number

package/lib/ProgressCircle/styles.js

@@ -43,8 +43,10 @@ const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
         color = props.color,
         meterColor = props.meterColor,
-        valueNow = props.valueNow,
-        valueMax = props.valueMax;
+        _props$valueNow = props.valueNow,
+        valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+        _props$valueMax = props.valueMax,
+        valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax;
   const shouldAnimateOnMount = state.shouldAnimateOnMount;
   const getMeterColorClassName = typeof meterColor === 'function' ? meterColor({
     valueNow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-progress",
-  "version": "8.12.1-snapshot.56+3ce75f0b6",
+  "version": "8.13.1-snapshot.11+b420bacc3",
   "description": "Styled HTML <progress /> elements for showing completion of a task",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,21 +25,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/emotion": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/shared-types": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-a11y-content": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-color-utils": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-react-utils": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-testable": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-view": "8.12.1-snapshot.56+3ce75f0b6",
+    "@instructure/console": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/emotion": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/shared-types": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-a11y-content": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-testable": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-view": "8.13.1-snapshot.11+b420bacc3",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-test-locator": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-test-utils": "8.12.1-snapshot.56+3ce75f0b6",
-    "@instructure/ui-themes": "8.12.1-snapshot.56+3ce75f0b6"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.11+b420bacc3",
+    "@instructure/ui-themes": "8.13.1-snapshot.11+b420bacc3"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "3ce75f0b670d195e74357fd200381393dd5c1300"
+  "gitHead": "b420bacc32da9bd8569d1bc8082e7d5c46ebd408"
 }

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

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import React from 'react'
+import type { ProgressBarProps, Values } from '../props'
 
 const valueMax = 100
 
@@ -31,28 +32,22 @@ export default {
     valueNow: [0, 40, 80, 100],
     renderValue: [
       null,
-      // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'valueNow' implicitly has an 'any'... Remove this comment to see the full error message
-      // eslint-disable-next-line react/display-name
-      ({ valueNow, valueMax }) => (
+      ({ valueNow, valueMax }: Values) => (
         <span>{Math.round((valueNow / valueMax) * 100)}</span>
       )
     ]
   },
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       screenReaderLabel: 'Passing students',
       valueMax
     }
   },
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  getExampleProps: (props) => {
+  getExampleProps: (props: ProgressBarProps) => {
     return {
-      background: props.color.includes('inverse')
+      background: props.color!.includes('inverse')
         ? 'primary-inverse'
         : 'primary'
     }
-  },
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  filter: (props) => {}
+  }
 }