feat(ui-progress): migrate progress bar to new theming

packages/ui-progress/src/ProgressBar/README.md

@@ -20,9 +20,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -37,9 +37,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -53,9 +53,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -69,9 +69,9 @@ type: example
     valueMax={60}
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -98,9 +98,9 @@ type: example
     valueMax={60}
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -127,9 +127,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -144,9 +144,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -161,9 +161,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -178,9 +178,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -195,9 +195,9 @@ type: example
     margin="0 0 small"
     renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -230,9 +230,9 @@ type: example
   valueMax={60}
   renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   formatScreenReaderValue={({ valueNow, valueMax }) => {
@@ -263,9 +263,9 @@ type: example
   }}
   renderValue={({ valueNow, valueMax }) => {
     return (
-      <Text>
+      <span>
         {Math.round(valueNow / valueMax * 100)}%
-      </Text>
+      </span>
     )
   }}
   valueMax={88}
@@ -359,7 +359,7 @@ const Example = () => {
         valueMax={MAX}
         shouldAnimate={shouldAnimate}
         renderValue={({ valueNow, valueMax }) => {
-          return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
+          return <span>{Math.round((valueNow / valueMax) * 100)}%</span>
         }}
         formatScreenReaderValue={({ valueNow, valueMax }) => {
           return Math.round((valueNow / valueMax) * 100) + ' percent'

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<ProgressBarProps> {
   static readonly componentId = 'ProgressBar'
 

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
     }
   }
 }