@instructure/ui-range-input 11.7.3-snapshot-37 → 11.7.3-snapshot-39

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-37](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-37) (2026-05-07)
+## [11.7.3-snapshot-39](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-39) (2026-05-07)
 
 
 ### Bug Fixes
@@ -11,6 +11,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
+### Features
+
+* **ui-range-input:** remove deprecated thumb variant ([ca4a3fb](https://github.com/instructure/instructure-ui/commit/ca4a3fb45885fbcc9807566dadd3d027a17b8f72))
+
+
+### BREAKING CHANGES
+
+* **ui-range-input:** `thumbVariant` prop removed from RangeInput
+
+INSTUI-5016
+
+
 
 
 

package/es/RangeInput/v2/index.js

@@ -55,8 +55,7 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateSty
     layout: 'stacked',
     displayValue: true,
     disabled: false,
-    readOnly: false,
-    thumbVariant: 'deprecated'
+    readOnly: false
   };
   ref = null;
   _input = null;

package/es/RangeInput/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant', 'inputRef'];
+const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'inputRef'];
 export { allowedProps };

package/es/RangeInput/v2/styles.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import { darken, alpha } from '@instructure/ui-color-utils';
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
 
 /**
@@ -37,8 +36,7 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
  */
 const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
-    size,
-    thumbVariant
+    size
   } = props;
   const valueSizeVariants = {
     small: {
@@ -69,29 +67,19 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     height: `calc(${componentTheme.handleSize} / 2)`
   };
   const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`;
-  const thumbVariantStyle = {
-    deprecated: {
-      width: componentTheme.handleSize,
-      height: componentTheme.handleSize,
-      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}`
-    },
-    accessible: {
-      width: borderedHandleSize,
-      height: borderedHandleSize,
-      borderWidth: componentTheme.handleBorderSize,
-      borderColor: componentTheme.handleBorderColor,
-      borderStyle: 'solid',
-      boxSizing: 'border-box',
-      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
-    }
-  };
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
     background: componentTheme.handleBackground,
-    ...thumbVariantStyle[thumbVariant],
+    width: borderedHandleSize,
+    height: borderedHandleSize,
+    borderWidth: componentTheme.handleBorderSize,
+    borderColor: componentTheme.handleBorderColor,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
     '&:hover': {
       background: componentTheme.handleHoverBackground
     }
@@ -99,22 +87,11 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
 
   // Center the thumb vertically on the track by accounting for the track borders
   const thumbPosition = {
-    deprecated: {
-      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4 - ${trackBorderWidth})`
-    },
-    accessible: {
-      marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
-    }
+    marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
   };
   const thumbFocusActiveStyle = {
-    deprecated: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${alpha(componentTheme.handleFocusOutlineColor, 40)}`
-    },
-    accessible: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow: `${boxShadowObjectsToCSSString(componentTheme.boxShadow)}, ` + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
-    }
+    background: componentTheme.handleFocusBackground,
+    boxShadow: `${boxShadowObjectsToCSSString(componentTheme.boxShadow)}, ` + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
   };
   return {
     rangeInput: {
@@ -136,13 +113,13 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       margin: 0,
       '&::-webkit-slider-thumb': {
         ...thumbStyle,
-        ...thumbPosition[thumbVariant]
+        ...thumbPosition
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant],
-        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant]
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
+        '&::-moz-range-thumb': thumbFocusActiveStyle
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {

package/lib/RangeInput/v2/index.js

@@ -63,8 +63,7 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
     layout: 'stacked',
     displayValue: true,
     disabled: false,
-    readOnly: false,
-    thumbVariant: 'deprecated'
+    readOnly: false
   };
   ref = null;
   _input = null;

package/lib/RangeInput/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant', 'inputRef'];
+const allowedProps = exports.allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'inputRef'];

package/lib/RangeInput/v2/styles.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _darken = require("@instructure/ui-color-utils/lib/darken.js");
-var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
 var _uiThemes = require("@instructure/ui-themes");
 /*
  * The MIT License (MIT)
@@ -43,8 +41,7 @@ var _uiThemes = require("@instructure/ui-themes");
  */
 const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
-    size,
-    thumbVariant
+    size
   } = props;
   const valueSizeVariants = {
     small: {
@@ -75,29 +72,19 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     height: `calc(${componentTheme.handleSize} / 2)`
   };
   const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`;
-  const thumbVariantStyle = {
-    deprecated: {
-      width: componentTheme.handleSize,
-      height: componentTheme.handleSize,
-      boxShadow: `0 0.0625rem 0 ${(0, _darken.darken)(componentTheme.handleShadowColor)}`
-    },
-    accessible: {
-      width: borderedHandleSize,
-      height: borderedHandleSize,
-      borderWidth: componentTheme.handleBorderSize,
-      borderColor: componentTheme.handleBorderColor,
-      borderStyle: 'solid',
-      boxSizing: 'border-box',
-      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow)
-    }
-  };
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
     background: componentTheme.handleBackground,
-    ...thumbVariantStyle[thumbVariant],
+    width: borderedHandleSize,
+    height: borderedHandleSize,
+    borderWidth: componentTheme.handleBorderSize,
+    borderColor: componentTheme.handleBorderColor,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow),
     '&:hover': {
       background: componentTheme.handleHoverBackground
     }
@@ -105,22 +92,11 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
 
   // Center the thumb vertically on the track by accounting for the track borders
   const thumbPosition = {
-    deprecated: {
-      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4 - ${trackBorderWidth})`
-    },
-    accessible: {
-      marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
-    }
+    marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
   };
   const thumbFocusActiveStyle = {
-    deprecated: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow: `0 0.0625rem 0 ${(0, _darken.darken)(componentTheme.handleShadowColor)}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${(0, _alpha.alpha)(componentTheme.handleFocusOutlineColor, 40)}`
-    },
-    accessible: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow: `${(0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow)}, ` + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
-    }
+    background: componentTheme.handleFocusBackground,
+    boxShadow: `${(0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow)}, ` + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
   };
   return {
     rangeInput: {
@@ -142,13 +118,13 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       margin: 0,
       '&::-webkit-slider-thumb': {
         ...thumbStyle,
-        ...thumbPosition[thumbVariant]
+        ...thumbPosition
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant],
-        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant]
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
+        '&::-moz-range-thumb': thumbFocusActiveStyle
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "11.7.3-snapshot-37",
+  "version": "11.7.3-snapshot-39",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.3-snapshot-37",
-    "@instructure/emotion": "11.7.3-snapshot-37",
-    "@instructure/shared-types": "11.7.3-snapshot-37",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-37",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-37",
-    "@instructure/ui-form-field": "11.7.3-snapshot-37",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-37",
-    "@instructure/ui-themes": "11.7.3-snapshot-37",
-    "@instructure/ui-utils": "11.7.3-snapshot-37",
-    "@instructure/ui-view": "11.7.3-snapshot-37",
-    "@instructure/uid": "11.7.3-snapshot-37",
-    "@instructure/ui-i18n": "11.7.3-snapshot-37"
+    "@instructure/console": "11.7.3-snapshot-39",
+    "@instructure/shared-types": "11.7.3-snapshot-39",
+    "@instructure/emotion": "11.7.3-snapshot-39",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-39",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-39",
+    "@instructure/ui-form-field": "11.7.3-snapshot-39",
+    "@instructure/ui-i18n": "11.7.3-snapshot-39",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-39",
+    "@instructure/ui-themes": "11.7.3-snapshot-39",
+    "@instructure/ui-utils": "11.7.3-snapshot-39",
+    "@instructure/uid": "11.7.3-snapshot-39",
+    "@instructure/ui-view": "11.7.3-snapshot-39"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.3-snapshot-37",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-37"
+    "@instructure/ui-axe-check": "11.7.3-snapshot-39",
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-39"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/RangeInput/v2/README.md

@@ -10,16 +10,11 @@ type: example
 ---
 const Example = () => {
   const [size, setSize] = useState('small')
-  const [thumbVariant, setThumbVariant] = useState('accessible')
 
   const handleSizeChange = (event, value) => {
     setSize(value)
   }
 
-  const handleThumbVariantChange = (event, value) => {
-    setThumbVariant(value)
-  }
-
   return (
     <div>
       <View as="div" padding="medium" background="primary">
@@ -29,7 +24,6 @@ const Example = () => {
           max={100}
           min={0}
           size={size}
-          thumbVariant={thumbVariant}
         />
       </View>
 
@@ -53,16 +47,6 @@ const Example = () => {
             <RadioInput label="medium" value="medium" />
             <RadioInput label="large" value="large" />
           </RadioInputGroup>
-
-          <RadioInputGroup
-            onChange={handleThumbVariantChange}
-            name="thumbVariant"
-            value={thumbVariant}
-            description="Thumb variant"
-          >
-            <RadioInput label="accessible" value="accessible" />
-            <RadioInput label="deprecated" value="deprecated" />
-          </RadioInputGroup>
         </FormFieldGroup>
       </View>
     </div>

package/src/RangeInput/v2/index.tsx

@@ -67,8 +67,7 @@ class RangeInput extends Component<RangeInputProps, RangeInputState> {
     layout: 'stacked',
     displayValue: true,
     disabled: false,
-    readOnly: false,
-    thumbVariant: 'deprecated'
+    readOnly: false
   }
 
   ref: Element | null = null

package/src/RangeInput/v2/props.ts

@@ -88,14 +88,6 @@ type RangeInputOwnProps = {
 
   readOnly?: boolean
 
-  /**
-   * The "deprecated" variant has an outer shadow on focus.
-   * The "accessible" variant has better color contrast, border and inset focus ring for better accessibility.
-   */
-  thumbVariant?:
-    | 'deprecated' // TODO: deprecated, remove in V9.
-    | 'accessible'
-
   /**
    * A function that provides a reference to the actual underlying input element
    */
@@ -147,7 +139,6 @@ const allowedProps: AllowedPropKeys = [
   'inline',
   'disabled',
   'readOnly',
-  'thumbVariant',
   'inputRef'
 ]
 

package/src/RangeInput/v2/styles.ts

@@ -24,7 +24,6 @@
 
 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'
 
 /**
@@ -42,7 +41,7 @@ const generateStyle = (
   props: RangeInputProps,
   sharedTokens: SharedTokens
 ): RangeInputStyle => {
-  const { size, thumbVariant } = props
+  const { size } = props
   const valueSizeVariants = {
     small: {
       fontSize: componentTheme.valueSmallFontSize,
@@ -76,30 +75,19 @@ const generateStyle = (
 
   const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`
 
-  const thumbVariantStyle = {
-    deprecated: {
-      width: componentTheme.handleSize,
-      height: componentTheme.handleSize,
-      boxShadow: `0 0.0625rem 0 ${darken(componentTheme.handleShadowColor)}`
-    },
-    accessible: {
-      width: borderedHandleSize,
-      height: borderedHandleSize,
-      borderWidth: componentTheme.handleBorderSize,
-      borderColor: componentTheme.handleBorderColor,
-      borderStyle: 'solid',
-      boxSizing: 'border-box',
-      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
-    }
-  }
-
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
     background: componentTheme.handleBackground,
-    ...thumbVariantStyle[thumbVariant!],
+    width: borderedHandleSize,
+    height: borderedHandleSize,
+    borderWidth: componentTheme.handleBorderSize,
+    borderColor: componentTheme.handleBorderColor,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
 
     '&:hover': {
       background: componentTheme.handleHoverBackground
@@ -108,31 +96,15 @@ const generateStyle = (
 
   // Center the thumb vertically on the track by accounting for the track borders
   const thumbPosition = {
-    deprecated: {
-      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4 - ${trackBorderWidth})`
-    },
-    accessible: {
-      marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
-    }
+    marginTop: `calc(-1 * ${borderedHandleSize} / 4 - ${trackBorderWidth})`
   }
 
   const thumbFocusActiveStyle = {
-    deprecated: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow: `0 0.0625rem 0 ${darken(
-        componentTheme.handleShadowColor
-      )}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${alpha(
-        componentTheme.handleFocusOutlineColor,
-        40
-      )}`
-    },
-    accessible: {
-      background: componentTheme.handleFocusBackground,
-      boxShadow:
-        `${boxShadowObjectsToCSSString(componentTheme.boxShadow)}, ` +
-        `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` +
-        `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
-    }
+    background: componentTheme.handleFocusBackground,
+    boxShadow:
+      `${boxShadowObjectsToCSSString(componentTheme.boxShadow)}, ` +
+      `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` +
+      `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${sharedTokens.focusOutline.width}) ${sharedTokens.focusOutline.onColor}`
   }
 
   return {
@@ -155,13 +127,13 @@ const generateStyle = (
 
       '&::-webkit-slider-thumb': {
         ...thumbStyle,
-        ...thumbPosition[thumbVariant!]
+        ...thumbPosition
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant!],
-        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant!]
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
+        '&::-moz-range-thumb': thumbFocusActiveStyle
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {