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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.7.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.7.0...v10.7.1-snapshot-1) (2024-12-06)
+
+
+### Features
+
+* **shared-types,ui-progress:** add customization options for progressbar ([56308de](https://github.com/instructure/instructure-ui/commit/56308de9aa4b84a9f9f6fb7096b4916014c56b5b))
+
+
+
+
+
 # [10.7.0](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.7.0) (2024-12-03)
 
 **Note:** Version bump only for package @instructure/ui-progress

package/es/ProgressBar/__new-tests__/ProgressBar.test.js

@@ -75,4 +75,30 @@ describe('<ProgressBar />', () => {
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);
   });
+  it('should not render the value inside when the prop is set to false', () => {
+    const valueNow = 33;
+    const _render5 = render(/*#__PURE__*/React.createElement(ProgressBar, {
+        screenReaderLabel: "Chapters read",
+        valueMax: 100,
+        valueNow: valueNow,
+        renderValueInside: false,
+        renderValue: `${valueNow}%`
+      })),
+      container = _render5.container;
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
+    expect(progressMeter).not.toHaveTextContent('33%');
+  });
+  it('should render the value inside when the prop is set', () => {
+    const valueNow = 33;
+    const _render6 = render(/*#__PURE__*/React.createElement(ProgressBar, {
+        screenReaderLabel: "Chapters read",
+        valueMax: 100,
+        valueNow: valueNow,
+        renderValueInside: true,
+        renderValue: `${valueNow}%`
+      })),
+      container = _render6.container;
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
+    expect(progressMeter).toHaveTextContent('33%');
+  });
 });

package/es/ProgressBar/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "styles"];
+const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
 var _dec, _dec2, _class, _ProgressBar;
 /*
  * The MIT License (MIT)
@@ -70,6 +70,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       size = _this$props3.size,
       color = _this$props3.color,
       meterColor = _this$props3.meterColor,
+      renderValueInside = _this$props3.renderValueInside,
       styles = _this$props3.styles,
       props = _objectWithoutProperties(_this$props3, _excluded);
     const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
@@ -102,7 +103,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       "aria-hidden": "true"
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.trackValue
-    }))), value && jsx("span", {
+    }, renderValueInside && value))), value && !renderValueInside && jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));

package/es/ProgressBar/props.js

@@ -35,7 +35,8 @@ const propTypes = {
   shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
-  as: PropTypes.elementType
+  as: PropTypes.elementType,
+  renderValueInside: PropTypes.bool
 };
 const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];
 export { propTypes, allowedProps };

package/es/ProgressBar/styles.js

@@ -150,12 +150,14 @@ const generateStyle = (componentTheme, props) => {
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      borderRadius: componentTheme.borderRadius
     },
     trackLayout: {
       label: 'progressBar__trackLayout',
       position: 'relative',
       flex: 1,
+      borderRadius: 'inherit',
       ...colorVariants[color].trackLayout
     },
     track: {
@@ -166,6 +168,7 @@ const generateStyle = (componentTheme, props) => {
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
       background: 'transparent',
+      borderRadius: 'inherit',
       ...sizeVariants[size].track,
       ...colorVariants[color].trackBorder
     },
@@ -176,6 +179,7 @@ const generateStyle = (componentTheme, props) => {
       height: '100%',
       width: currentValuePercent,
       maxWidth: '100%',
+      borderRadius: 'inherit',
       ...(shouldAnimate && {
         transition: 'all 0.5s'
       }),

package/es/ProgressBar/theme.js

@@ -82,7 +82,8 @@ const generateComponentTheme = theme => {
     trackColorInverse: 'transparent',
     trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey3045,
-    trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010
+    trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
+    borderRadius: '0px'
   };
   return {
     ...componentVariables,

package/lib/ProgressBar/__new-tests__/ProgressBar.test.js

@@ -77,4 +77,30 @@ describe('<ProgressBar />', () => {
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);
   });
+  it('should not render the value inside when the prop is set to false', () => {
+    const valueNow = 33;
+    const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
+        screenReaderLabel: "Chapters read",
+        valueMax: 100,
+        valueNow: valueNow,
+        renderValueInside: false,
+        renderValue: `${valueNow}%`
+      })),
+      container = _render5.container;
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
+    expect(progressMeter).not.toHaveTextContent('33%');
+  });
+  it('should render the value inside when the prop is set', () => {
+    const valueNow = 33;
+    const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ProgressBar, {
+        screenReaderLabel: "Chapters read",
+        valueMax: 100,
+        valueNow: valueNow,
+        renderValueInside: true,
+        renderValue: `${valueNow}%`
+      })),
+      container = _render6.container;
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]');
+    expect(progressMeter).toHaveTextContent('33%');
+  });
 });

package/lib/ProgressBar/index.js

@@ -15,7 +15,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "styles"];
+const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
 var _dec, _dec2, _class, _ProgressBar;
 /*
  * The MIT License (MIT)
@@ -76,6 +76,7 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.
       size = _this$props3.size,
       color = _this$props3.color,
       meterColor = _this$props3.meterColor,
+      renderValueInside = _this$props3.renderValueInside,
       styles = _this$props3.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
@@ -108,7 +109,7 @@ let ProgressBar = exports.ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.
       "aria-hidden": "true"
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.trackValue
-    }))), value && (0, _emotion.jsx)("span", {
+    }, renderValueInside && value))), value && !renderValueInside && (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.value,
       "aria-hidden": "true"
     }, value));

package/lib/ProgressBar/props.js

@@ -43,6 +43,7 @@ const propTypes = exports.propTypes = {
   shouldAnimate: _propTypes.default.bool,
   margin: _emotion.ThemeablePropTypes.spacing,
   elementRef: _propTypes.default.func,
-  as: _propTypes.default.elementType
+  as: _propTypes.default.elementType,
+  renderValueInside: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];

package/lib/ProgressBar/styles.js

@@ -156,12 +156,14 @@ const generateStyle = (componentTheme, props) => {
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      borderRadius: componentTheme.borderRadius
     },
     trackLayout: {
       label: 'progressBar__trackLayout',
       position: 'relative',
       flex: 1,
+      borderRadius: 'inherit',
       ...colorVariants[color].trackLayout
     },
     track: {
@@ -172,6 +174,7 @@ const generateStyle = (componentTheme, props) => {
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
       background: 'transparent',
+      borderRadius: 'inherit',
       ...sizeVariants[size].track,
       ...colorVariants[color].trackBorder
     },
@@ -182,6 +185,7 @@ const generateStyle = (componentTheme, props) => {
       height: '100%',
       width: currentValuePercent,
       maxWidth: '100%',
+      borderRadius: 'inherit',
       ...(shouldAnimate && {
         transition: 'all 0.5s'
       }),

package/lib/ProgressBar/theme.js

@@ -88,7 +88,8 @@ const generateComponentTheme = theme => {
     trackColorInverse: 'transparent',
     trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey3045,
-    trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010
+    trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
+    borderRadius: '0px'
   };
   return {
     ...componentVariables,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-progress",
-  "version": "10.7.0",
+  "version": "10.7.1-snapshot-1",
   "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.25.6",
-    "@instructure/console": "10.7.0",
-    "@instructure/emotion": "10.7.0",
-    "@instructure/shared-types": "10.7.0",
-    "@instructure/ui-a11y-content": "10.7.0",
-    "@instructure/ui-color-utils": "10.7.0",
-    "@instructure/ui-react-utils": "10.7.0",
-    "@instructure/ui-testable": "10.7.0",
-    "@instructure/ui-view": "10.7.0",
+    "@instructure/console": "10.7.1-snapshot-1",
+    "@instructure/emotion": "10.7.1-snapshot-1",
+    "@instructure/shared-types": "10.7.1-snapshot-1",
+    "@instructure/ui-a11y-content": "10.7.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.7.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.7.1-snapshot-1",
+    "@instructure/ui-testable": "10.7.1-snapshot-1",
+    "@instructure/ui-view": "10.7.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.7.0",
-    "@instructure/ui-babel-preset": "10.7.0",
-    "@instructure/ui-test-utils": "10.7.0",
-    "@instructure/ui-themes": "10.7.0",
+    "@instructure/ui-axe-check": "10.7.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.7.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.7.1-snapshot-1",
+    "@instructure/ui-themes": "10.7.1-snapshot-1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.1"

package/src/ProgressBar/__new-tests__/ProgressBar.test.tsx

@@ -83,4 +83,36 @@ describe('<ProgressBar />', () => {
     const axeCheck = await runAxeCheck(container)
     expect(axeCheck).toBe(true)
   })
+
+  it('should not render the value inside when the prop is set to false', () => {
+    const valueNow = 33
+    const { container } = render(
+      <ProgressBar
+        screenReaderLabel="Chapters read"
+        valueMax={100}
+        valueNow={valueNow}
+        renderValueInside={false}
+        renderValue={`${valueNow}%`}
+      />
+    )
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]')
+
+    expect(progressMeter).not.toHaveTextContent('33%')
+  })
+
+  it('should render the value inside when the prop is set', () => {
+    const valueNow = 33
+    const { container } = render(
+      <ProgressBar
+        screenReaderLabel="Chapters read"
+        valueMax={100}
+        valueNow={valueNow}
+        renderValueInside
+        renderValue={`${valueNow}%`}
+      />
+    )
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]')
+
+    expect(progressMeter).toHaveTextContent('33%')
+  })
 })

package/src/ProgressBar/index.tsx

@@ -95,6 +95,7 @@ class ProgressBar extends Component<ProgressBarProps> {
       size,
       color,
       meterColor,
+      renderValueInside,
       styles,
       ...props
     } = this.props
@@ -130,11 +131,11 @@ class ProgressBar extends Component<ProgressBarProps> {
           />
 
           <span css={styles?.track} role="presentation" aria-hidden="true">
-            <span css={styles?.trackValue}></span>
+            <span css={styles?.trackValue}>{renderValueInside && value}</span>
           </span>
         </span>
 
-        {value && (
+        {value && !renderValueInside && (
           <span css={styles?.value} aria-hidden="true">
             {value}
           </span>

package/src/ProgressBar/props.ts

@@ -114,6 +114,14 @@ type ProgressBarOwnProps = {
    * Set the element type of the component's root
    */
   as?: AsElementType
+
+  /**
+   * If true, displays the `renderValue` inside the progress meter for customization.
+   *
+   * Note: This should not be used in most cases. When enabled, ensure `renderValue` is styled for proper
+   * legibility and alignment across themes and sizes.
+   */
+  renderValueInside?: boolean
 }
 
 type PropKeys = keyof ProgressBarOwnProps
@@ -148,7 +156,8 @@ const propTypes: PropValidators<PropKeys> = {
   shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
-  as: PropTypes.elementType
+  as: PropTypes.elementType,
+  renderValueInside: PropTypes.bool,
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/ProgressBar/styles.ts

@@ -119,13 +119,15 @@ const generateStyle = (
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      borderRadius: componentTheme.borderRadius
     },
 
     trackLayout: {
       label: 'progressBar__trackLayout',
       position: 'relative',
       flex: 1,
+      borderRadius: 'inherit',
 
       ...colorVariants[color!].trackLayout
     },
@@ -138,6 +140,7 @@ const generateStyle = (
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
       background: 'transparent',
+      borderRadius: 'inherit',
 
       ...sizeVariants[size!].track,
       ...colorVariants[color!].trackBorder
@@ -150,6 +153,7 @@ const generateStyle = (
       height: '100%',
       width: currentValuePercent,
       maxWidth: '100%',
+      borderRadius: 'inherit',
 
       ...(shouldAnimate && { transition: 'all 0.5s' }),
       ...(meterColorClassName &&

package/src/ProgressBar/theme.ts

@@ -94,7 +94,9 @@ const generateComponentTheme = (theme: Theme): ProgressBarTheme => {
     trackColorInverse: 'transparent',
     trackBottomBorderWidth: borders?.widthSmall,
     trackBottomBorderColor: colors?.contrasts?.grey3045,
-    trackBottomBorderColorInverse: colors?.contrasts?.white1010
+    trackBottomBorderColorInverse: colors?.contrasts?.white1010,
+
+    borderRadius: '0px'
   }
 
   return {