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