From 4d27d3bf5a76599a3a0bf17c77ea1c9d46c68670 Mon Sep 17 00:00:00 2001 From: Peter Pal Hudak Date: Wed, 17 Dec 2025 13:03:46 +0100 Subject: [PATCH] feat(ui-progress): migrate progress bar to new theming --- .../ui-progress/src/ProgressBar/README.md | 50 ++++---- .../ui-progress/src/ProgressBar/index.tsx | 5 +- .../ui-progress/src/ProgressBar/styles.ts | 28 ++++- packages/ui-progress/src/ProgressBar/theme.ts | 107 ------------------ 4 files changed, 49 insertions(+), 141 deletions(-) delete mode 100644 packages/ui-progress/src/ProgressBar/theme.ts diff --git a/packages/ui-progress/src/ProgressBar/README.md b/packages/ui-progress/src/ProgressBar/README.md index 39cd7bc61b..6527478ccc 100644 --- a/packages/ui-progress/src/ProgressBar/README.md +++ b/packages/ui-progress/src/ProgressBar/README.md @@ -20,9 +20,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -37,9 +37,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -53,9 +53,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -69,9 +69,9 @@ type: example valueMax={60} renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -98,9 +98,9 @@ type: example valueMax={60} renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -127,9 +127,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -144,9 +144,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -161,9 +161,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -178,9 +178,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -195,9 +195,9 @@ type: example margin="0 0 small" renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -230,9 +230,9 @@ type: example valueMax={60} renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} formatScreenReaderValue={({ valueNow, valueMax }) => { @@ -263,9 +263,9 @@ type: example }} renderValue={({ valueNow, valueMax }) => { return ( - + {Math.round(valueNow / valueMax * 100)}% - + ) }} valueMax={88} @@ -359,7 +359,7 @@ const Example = () => { valueMax={MAX} shouldAnimate={shouldAnimate} renderValue={({ valueNow, valueMax }) => { - return {Math.round((valueNow / valueMax) * 100)}% + return {Math.round((valueNow / valueMax) * 100)}% }} formatScreenReaderValue={({ valueNow, valueMax }) => { return Math.round((valueNow / valueMax) * 100) + ' percent' diff --git a/packages/ui-progress/src/ProgressBar/index.tsx b/packages/ui-progress/src/ProgressBar/index.tsx index 462b879fb3..87a31814b0 100644 --- a/packages/ui-progress/src/ProgressBar/index.tsx +++ b/packages/ui-progress/src/ProgressBar/index.tsx @@ -27,10 +27,9 @@ import { Component } from 'react' import { View } from '@instructure/ui-view' import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import type { ProgressBarProps, Values } from './props' import { allowedProps } from './props' @@ -40,7 +39,7 @@ import { allowedProps } from './props' category: components --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class ProgressBar extends Component { static readonly componentId = 'ProgressBar' diff --git a/packages/ui-progress/src/ProgressBar/styles.ts b/packages/ui-progress/src/ProgressBar/styles.ts index b6932cf157..a78930309e 100644 --- a/packages/ui-progress/src/ProgressBar/styles.ts +++ b/packages/ui-progress/src/ProgressBar/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { ProgressBarTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { ProgressBarProps, ProgressBarStyle } from './props' /** @@ -32,12 +32,13 @@ import type { ProgressBarProps, ProgressBarStyle } from './props' * Generates the style object from the theme and provided additional information * @param {Object} componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to + * @param {Object} sharedTokens Shared token object that stores common values for the theme. * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: ProgressBarTheme, - props: ProgressBarProps + componentTheme: NewComponentTypes['ProgressBar'], + props: ProgressBarProps, + _sharedTokens: SharedTokens ): ProgressBarStyle => { const { valueNow = 0, @@ -82,12 +83,24 @@ const generateStyle = ( trackLayout: { background: componentTheme.trackColor }, trackBorder: { borderBottomColor: componentTheme.trackBottomBorderColor + }, + value: { + color: componentTheme.textColor + }, + htmlProgress: { + borderColor: componentTheme.borderColor } }, 'primary-inverse': { trackLayout: { background: componentTheme.trackColorInverse }, trackBorder: { borderBottomColor: componentTheme.trackBottomBorderColorInverse + }, + value: { + color: componentTheme.textColorInverse + }, + htmlProgress: { + borderColor: componentTheme.borderColorInverse } } } @@ -167,7 +180,8 @@ const generateStyle = ( paddingInlineStart: componentTheme.valuePadding, flex: '0 0 5.625rem', - ...sizeVariants[size!].value + ...sizeVariants[size!].value, + ...colorVariants[color!].value }, htmlProgress: { @@ -180,7 +194,9 @@ const generateStyle = ( height: '100%', boxSizing: 'border-box', zIndex: -1, - opacity: 0 + opacity: 0, + + ...colorVariants[color!].htmlProgress } } } diff --git a/packages/ui-progress/src/ProgressBar/theme.ts b/packages/ui-progress/src/ProgressBar/theme.ts deleted file mode 100644 index 2589c7367c..0000000000 --- a/packages/ui-progress/src/ProgressBar/theme.ts +++ /dev/null @@ -1,107 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' -import { ProgressBarTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): ProgressBarTheme => { - const { borders, colors, spacing, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - meterColorBrand: theme['ic-brand-primary'] - }, - 'canvas-high-contrast': { - meterColorBrandInverse: colors?.contrasts?.white1010, - meterColorSuccessInverse: colors?.contrasts?.white1010, - meterColorInfoInverse: colors?.contrasts?.white1010, - meterColorAlertInverse: colors?.contrasts?.white1010, - meterColorWarningInverse: colors?.contrasts?.white1010, - meterColorDangerInverse: colors?.contrasts?.white1010 - } - } - - const componentVariables: ProgressBarTheme = { - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - lineHeight: typography?.lineHeightCondensed, - fontSize: typography?.fontSizeMedium, - - xSmallHeight: spacing?.xSmall, - xSmallValueFontSize: typography?.fontSizeXSmall, - - smallHeight: '1.125rem', // product design wants = 18px - smallValueFontSize: typography?.fontSizeXSmall, - - mediumHeight: spacing?.medium, - mediumValueFontSize: typography?.fontSizeSmall, - - largeHeight: spacing?.large, - largeValueFontSize: typography?.fontSizeMedium, - - valuePadding: `${spacing?.xxSmall}`, - - // variables are split out for inverse to allow - // color value changes for inverse-high-constrast - meterColorBrand: colors?.contrasts?.blue4570, - meterColorBrandInverse: colors?.contrasts?.blue4570, - - meterColorInfo: colors?.contrasts?.blue4570, - meterColorInfoInverse: colors?.contrasts?.blue4570, - - meterColorSuccess: colors?.contrasts?.green4570, - meterColorSuccessInverse: colors?.contrasts?.green4570, - - meterColorDanger: colors?.contrasts?.red4570, - meterColorDangerInverse: colors?.contrasts?.red4570, - - meterColorAlert: colors?.contrasts?.blue4570, - meterColorAlertInverse: colors?.contrasts?.blue4570, - - meterColorWarning: colors?.contrasts?.orange4570, - meterColorWarningInverse: colors?.contrasts?.orange4570, - - meterBorderWidthInverse: borders?.widthSmall, - meterBorderColorInverse: 'transparent', - - trackColor: colors?.contrasts?.white1010, - trackColorInverse: 'transparent', - trackBottomBorderWidth: borders?.widthSmall, - trackBottomBorderColor: colors?.contrasts?.grey3045, - trackBottomBorderColorInverse: colors?.contrasts?.white1010, - - borderRadius: '0px' - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} -export default generateComponentTheme