feat(ui-themes,ui-range-input): rework RangeInput

INSTUI-4805

Author: ToMESSKa

docs/guides/upgrade-guide.md

@@ -135,9 +135,10 @@ type: example
   <TextInput renderLabel="Name" placeholder="Doe, John Doe"/>
 </InstUISettingsProvider>
 ```
+
 ### Breadcrumb
 
-#### New tokens 
+#### New tokens
 
 - gapSm - Gap spacing for small size breadcrumbs
 - gapMd - Gap spacing for medium size breadcrumbs
@@ -255,6 +256,12 @@ type: example
 - theme variable `invalidAsteriskColor` is now removed
 - `error` or `success` messages are no longer displayed when the component is '`readOnly` or `disabled`
 
+### RangeInput
+
+- theme variable `handleShadow` is now renamed to `boxShadow`
+- theme variable `handleFocusRingSize` is now removed style uses the `focusOutline.width` token
+- theme variable `handleFocusRingColor` is now removed style uses the `sharedTokens.focusOutline.onColor` token
+
 ### TextInput
 
 - theme variable `requiredInvalidColor` is now removed

packages/ui-range-input/src/RangeInput/index.tsx

@@ -28,15 +28,14 @@ import { warn } from '@instructure/console'
 import { ContextView } from '@instructure/ui-view'
 import { FormField } from '@instructure/ui-form-field'
 import { addEventListener } from '@instructure/ui-dom-utils'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import {
   omitProps,
   pickProps,
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import type { RangeInputProps, RangeInputState } from './props'
 import { allowedProps } from './props'
@@ -47,7 +46,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class RangeInput extends Component<RangeInputProps, RangeInputState> {
   static readonly componentId = 'RangeInput'
   static outputLocatorAttribute = 'data-range-output'

packages/ui-range-input/src/RangeInput/styles.ts

@@ -22,8 +22,29 @@
  * SOFTWARE.
  */
 
-import type { RangeInputTheme } from '@instructure/shared-types'
+import type {
+  NewComponentTypes,
+  SharedTokens,
+  TokenBoxshadowValueInst
+} from '@instructure/ui-themes'
 import type { RangeInputProps, RangeInputStyle } from './props'
+import { darken, alpha } from '@instructure/ui-color-utils'
+import { boxShadowObjectToString } from '@instructure/ui-themes'
+
+/**
+ * Converts a boxShadow object with multiple shadows to CSS string
+ */
+const convertBoxShadow = (boxShadowObj: any): string => {
+  if (
+    boxShadowObj.type &&
+    (boxShadowObj.type === 'dropShadow' || boxShadowObj.type === 'innerShadow')
+  ) {
+    return boxShadowObjectToString(boxShadowObj)
+  }
+  return Object.values(boxShadowObj)
+    .map((shadow) => boxShadowObjectToString(shadow as TokenBoxshadowValueInst))
+    .join(', ')
+}
 
 /**
  * ---
@@ -36,8 +57,9 @@ import type { RangeInputProps, RangeInputStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: RangeInputTheme,
-  props: RangeInputProps
+  componentTheme: NewComponentTypes['RangeInput'],
+  props: RangeInputProps,
+  sharedTokens: SharedTokens
 ): RangeInputStyle => {
   const { size, thumbVariant } = props
   const valueSizeVariants = {
@@ -60,7 +82,9 @@ const generateStyle = (
 
   const trackStyle = {
     borderRadius: '0.312em',
-    borderColor: 'transparent',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: componentTheme.trackBorderColor,
     color: 'transparent',
     cursor: 'pointer',
     background: componentTheme.trackBackground,
@@ -73,7 +97,7 @@ const generateStyle = (
     deprecated: {
       width: componentTheme.handleSize,
       height: componentTheme.handleSize,
-      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`
+      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}`
     },
     accessible: {
       width: borderedHandleSize,
@@ -82,7 +106,7 @@ const generateStyle = (
       borderColor: componentTheme.handleBorderColor,
       borderStyle: 'solid',
       boxSizing: 'border-box',
-      boxShadow: componentTheme.handleShadow
+      boxShadow: convertBoxShadow(componentTheme.boxShadow)
     }
   }
 
@@ -101,25 +125,29 @@ const generateStyle = (
 
   const thumbPosition = {
     deprecated: {
-      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4 - 1px)`
     },
     accessible: {
-      marginTop: `calc(-1 * ${borderedHandleSize} / 4)`
+      marginTop: `calc(-1 * ${borderedHandleSize} / 4 - 1px)`
     }
   }
 
   const thumbFocusActiveStyle = {
     deprecated: {
       background: componentTheme.handleFocusBackground,
-      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+      boxShadow: `0 0.0625rem 0 ${darken(
+        componentTheme.handleShadowColor
+      )}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${alpha(
+        componentTheme.handleFocusOutlineColor,
+        40
+      )}`
     },
     accessible: {
       background: componentTheme.handleFocusBackground,
       boxShadow:
-        componentTheme.handleShadow +
-        ', ' +
+        `${convertBoxShadow(componentTheme.boxShadow)}, ` +
         `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` +
-        `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${componentTheme.handleFocusRingSize}) ${componentTheme.handleFocusRingColor}`
+        `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
     }
   }
 

packages/ui-range-input/src/RangeInput/theme.ts

@@ -50,6 +50,7 @@ import {
   additionalPrimitives
 } from './sharedThemeTokens/colors/primitives'
 import dataVisualization from './sharedThemeTokens/colors/dataVisualization'
+import { boxShadowObjectToString } from './utils/boxShadowObjectToString'
 
 import type {
   Canvas as NewCanvas,
@@ -85,7 +86,8 @@ export {
   canvasHighContrast,
   primitives,
   additionalPrimitives,
-  dataVisualization
+  dataVisualization,
+  boxShadowObjectToString
 }
 export default canvas
 export type {