[v12] feat(ui-range-input): rework RangeInput

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,13 @@ 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
+- theme variables `valueSmallPadding`,`valueMediumPadding` and `valueLargePadding` now only set the horizontal padding of the value.
+
 ### 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,10 @@
  * SOFTWARE.
  */
 
-import type { RangeInputTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { RangeInputProps, RangeInputStyle } from './props'
+import { darken, alpha } from '@instructure/ui-color-utils'
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
 
 /**
  * ---
@@ -36,31 +38,34 @@ 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 = {
     small: {
       fontSize: componentTheme.valueSmallFontSize,
-      padding: componentTheme.valueSmallPadding,
+      padding: `${'0 ' + componentTheme.valueSmallPadding}`,
       lineHeight: componentTheme.valueSmallLineHeight
     },
     medium: {
       fontSize: componentTheme.valueMediumFontSize,
-      padding: componentTheme.valueMediumPadding,
+      padding: `${'0 ' + componentTheme.valueMediumPadding}`,
       lineHeight: componentTheme.valueMediumLineHeight
     },
     large: {
       fontSize: componentTheme.valueLargeFontSize,
-      padding: componentTheme.valueLargePadding,
+      padding: `${'0 ' + componentTheme.valueLargePadding}`,
       lineHeight: componentTheme.valueLargeLineHeight
     }
   }
 
   const trackStyle = {
     borderRadius: '0.312em',
-    borderColor: 'transparent',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: componentTheme.trackBorderColor,
     color: 'transparent',
     cursor: 'pointer',
     background: componentTheme.trackBackground,
@@ -73,7 +78,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 +87,7 @@ const generateStyle = (
       borderColor: componentTheme.handleBorderColor,
       borderStyle: 'solid',
       boxSizing: 'border-box',
-      boxShadow: componentTheme.handleShadow
+      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
     }
   }
 
@@ -101,25 +106,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 +
-        ', ' +
+        `${boxShadowObjectsToCSSString(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-themes/src/index.ts

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

packages/ui-themes/src/utils/boxShadowObjectToString.ts

@@ -27,20 +27,63 @@ import { TokenBoxshadowValueInst } from '../themes/newThemes/commonTypes'
 /**
  * Converts a BoxShadowObject from Token Studio to a CSS box-shadow string
  */
-function boxShadowObjectToString(boxShadowObject: TokenBoxshadowValueInst) {
+function boxShadowToCSSString(boxShadowObject: TokenBoxshadowValueInst) {
+  // weird string concatenation is to make it look nice in the debugger
   if (boxShadowObject.type === 'innerShadow') {
-    return `inset ${boxShadowObject.x}
-    ${boxShadowObject.y}
-    ${boxShadowObject.blur ? boxShadowObject.blur : ''}
-    ${boxShadowObject.spread ? boxShadowObject.spread : ''}
-    ${boxShadowObject.color}`
+    return (
+      `inset ${boxShadowObject.x} ` +
+      `${boxShadowObject.y} ` +
+      `${boxShadowObject.blur ? boxShadowObject.blur : ''} ` +
+      `${boxShadowObject.spread ? boxShadowObject.spread : ''} ` +
+      `${boxShadowObject.color}`
+    )
   }
-  return `${boxShadowObject.x}
-    ${boxShadowObject.y}
-    ${boxShadowObject.blur ? boxShadowObject.blur : ''}
-    ${boxShadowObject.spread ? boxShadowObject.spread : ''}
-    ${boxShadowObject.color}`
+  return (
+    `${boxShadowObject.x} ` +
+    `${boxShadowObject.y} ` +
+    `${boxShadowObject.blur ? boxShadowObject.blur : ''} ` +
+    `${boxShadowObject.spread ? boxShadowObject.spread : ''} ` +
+    `${boxShadowObject.color}`
+  )
 }
 
-export default boxShadowObjectToString
-export { boxShadowObjectToString }
+function getShadowsInOrder(
+  shadowsObj: Record<string, TokenBoxshadowValueInst>
+) {
+  return Object.keys(shadowsObj)
+    .sort((a, b) => {
+      const numA = parseInt(a)
+      const numB = parseInt(b)
+      return numA - numB
+    })
+    .map((key) => shadowsObj[key])
+}
+
+/**
+ * Converts a box shadow object that looks like this:
+ * ```
+ * {
+ *   '1': {color: 'rgba(12, 0, 0, 0.2)', x:...},
+ *   '2': {color: 'rgba(0, 0, 0, 0.1)', x:...},
+ *   '0': {color: 'rgba(0, 0, 0, 0.1)', x:...}
+ * }
+ * ```
+ * to a CSS box-shadow string e.g.
+ * ```
+ * 0px 0.375rem 0.4375rem 0px rgba(12,0,0,0.2),
+ * 0px 0.625rem 1.75rem 0px rgba(0,0,0,0.1),
+ * 0px 0.625rem 1.75rem 0px rgba(0,0,0,0.1)
+ * ```
+ */
+function boxShadowObjectsToCSSString(
+  shadowObject: Record<string, TokenBoxshadowValueInst>
+) {
+  const shadows = getShadowsInOrder(shadowObject)
+  let result = ''
+  for (const shadow of shadows) {
+    result += boxShadowToCSSString(shadow) + ',\n'
+  }
+  return result.slice(0, -2)
+}
+
+export { boxShadowToCSSString, boxShadowObjectsToCSSString }