@instructure/ui-color-picker 10.26.1 → 11.0.1-snapshot-0

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.
 
-## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
+## [11.0.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
 
 **Note:** Version bump only for package @instructure/ui-color-picker
 
@@ -11,6 +11,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+# [11.0.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
+
+
+### Features
+
+* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
+
+
+### BREAKING CHANGES
+
+* **many:** InstUI v11 contains the following breaking changes:
+- React 16 and 17 are no longer supported
+- remove `PropTypes` from all packages
+- remove `CodeEditor` component
+- remove `@instui/theme-registry` package
+- remove `@testable`, `@experimental`, `@hack` decorators
+- InstUISettingsProvider's `as` prop is removed
+- `canvas.use()`, `canvasHighContrast.use()` functions are removed
+- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
+- `variables` field on theme objects are removed
+- remove deprecated props from Table: Row's `isStacked`, Body's
+  `isStacked`, `hover`, and `headers`
+- `Table`'s `caption` prop is now required
+- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
+
+
+
+
+
 # [10.26.0](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.26.0) (2025-10-01)
 
 

package/es/ColorContrast/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ColorContrast;
+var _dec, _class, _ColorContrast;
 /*
  * The MIT License (MIT)
  *
@@ -25,14 +25,13 @@ var _dec, _dec2, _class, _ColorContrast;
 
 import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
 import { error } from '@instructure/console';
 import { contrastWithAlpha, validateContrast } from '@instructure/ui-color-utils';
 import { withStyle } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { Pill } from '@instructure/ui-pill';
 import ColorIndicator from '../ColorIndicator';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 
@@ -42,7 +41,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorContrast = class ColorContrast extends Component {
+let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorContrast = class ColorContrast extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -171,6 +170,7 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       ...omitProps(this.props, ColorContrast.allowedProps),
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorContrast,
+      "data-cid": "ColorContrast",
       children: [_jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
         children: _jsx(Text, {
@@ -184,9 +184,9 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       }), this.renderPreview(), this.renderStatus(isValidNormalText, normalTextLabel), this.renderStatus(isValidLargeText, largeTextLabel), this.renderStatus(isValidGraphicsText, graphicsTextLabel)]
     });
   }
-}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = propTypes, _ColorContrast.allowedProps = allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
+}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.allowedProps = allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
   withoutColorPreview: false,
   validationLevel: 'AA'
-}, _ColorContrast)) || _class) || _class);
+}, _ColorContrast)) || _class);
 export { ColorContrast };
 export default ColorContrast;

package/es/ColorContrast/props.js

@@ -22,22 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  elementRef: PropTypes.func,
-  failureLabel: PropTypes.string.isRequired,
-  firstColor: PropTypes.string.isRequired,
-  firstColorLabel: PropTypes.string,
-  graphicsTextLabel: PropTypes.string.isRequired,
-  withoutColorPreview: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  largeTextLabel: PropTypes.string.isRequired,
-  normalTextLabel: PropTypes.string.isRequired,
-  secondColor: PropTypes.string.isRequired,
-  secondColorLabel: PropTypes.string,
-  successLabel: PropTypes.string.isRequired,
-  onContrastChange: PropTypes.func,
-  validationLevel: PropTypes.oneOf(['AA', 'AAA'])
-};
 const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorIndicator/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ColorIndicator;
+var _dec, _class, _ColorIndicator;
 /*
  * The MIT License (MIT)
  *
@@ -24,12 +24,11 @@ var _dec, _dec2, _class, _ColorIndicator;
  */
 
 import { Component } from 'react';
-import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 
 /**
 ---
@@ -37,7 +36,7 @@ category: components
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorIndicator = class ColorIndicator extends Component {
+let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorIndicator = class ColorIndicator extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -62,11 +61,12 @@ let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _
     return _jsx("div", {
       ...omitProps(this.props, ColorIndicator.allowedProps),
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator
+      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator,
+      "data-cid": "ColorIndicator"
     });
   }
-}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.propTypes = propTypes, _ColorIndicator.allowedProps = allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
+}, _ColorIndicator.displayName = "ColorIndicator", _ColorIndicator.allowedProps = allowedProps, _ColorIndicator.componentId = 'ColorIndicator', _ColorIndicator.defaultProps = {
   shape: 'circle'
-}, _ColorIndicator)) || _class) || _class);
+}, _ColorIndicator)) || _class);
 export default ColorIndicator;
 export { ColorIndicator };

package/es/ColorIndicator/props.js

@@ -22,11 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  color: PropTypes.string,
-  elementRef: PropTypes.func,
-  shape: PropTypes.oneOf(['circle', 'rectangle'])
-};
 const allowedProps = ['color', 'elementRef', 'shape'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorMixer/ColorPalette/index.js

@@ -30,7 +30,7 @@ import { View } from '@instructure/ui-view';
 import { px } from '@instructure/ui-utils';
 import { withDeterministicId } from '@instructure/ui-react-utils';
 import shallowCompare from '../utils/shallowCompare';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 
@@ -231,5 +231,5 @@ let ColorPalette = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
       })]
     });
   }
-}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.propTypes = propTypes, _ColorPalette.allowedProps = allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
+}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.allowedProps = allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
 export default ColorPalette;

package/es/ColorMixer/ColorPalette/props.js

@@ -22,17 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  disabled: PropTypes.bool,
-  hue: PropTypes.number.isRequired,
-  color: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  indicatorRadius: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-  elementRef: PropTypes.func,
-  navigationExplanationScreenReaderLabel: PropTypes.string.isRequired
-};
 const allowedProps = ['disabled', 'hue', 'color', 'width', 'height', 'indicatorRadius', 'onChange', 'elementRef', 'navigationExplanationScreenReaderLabel'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorMixer/RGBAInput/index.js

@@ -28,7 +28,7 @@ import { withStyle } from '@instructure/emotion';
 import shallowCompare from '../utils/shallowCompare';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TextInput } from '@instructure/ui-text-input';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 
@@ -145,7 +145,7 @@ let RGBAInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       })]
     });
   }
-}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.propTypes = propTypes, _RGBAInput.allowedProps = allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
+}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.allowedProps = allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
   withAlpha: false
 }, _RGBAInput)) || _class);
 export default RGBAInput;

package/es/ColorMixer/RGBAInput/props.js

@@ -22,19 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  disabled: PropTypes.bool,
-  label: PropTypes.string,
-  width: PropTypes.number.isRequired,
-  value: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  withAlpha: PropTypes.bool,
-  rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
-  elementRef: PropTypes.func
-};
 const allowedProps = ['disabled', 'label', 'width', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'elementRef'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorMixer/Slider/index.js

@@ -27,7 +27,7 @@ import { Component } from 'react';
 import { addEventListener } from '@instructure/ui-dom-utils';
 import { withStyle } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 
@@ -189,7 +189,7 @@ let Slider = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
       })]
     });
   }
-}, _Slider.displayName = "Slider", _Slider.propTypes = propTypes, _Slider.allowedProps = allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
+}, _Slider.displayName = "Slider", _Slider.allowedProps = allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
   isColorSlider: false
 }, _Slider)) || _class);
 export default Slider;

package/es/ColorMixer/Slider/props.js

@@ -22,18 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  isColorSlider: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  width: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-  minValue: PropTypes.number.isRequired,
-  maxValue: PropTypes.number.isRequired,
-  indicatorRadius: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  elementRef: PropTypes.func,
-  navigationExplanationScreenReaderLabel: PropTypes.string.isRequired
-};
 const allowedProps = ['isColorSlider', 'onChange', 'width', 'value', 'minValue', 'maxValue', 'indicatorRadius', 'height', 'elementRef', 'navigationExplanationScreenReaderLabel'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorMixer/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ColorMixer;
+var _dec, _class, _ColorMixer;
 /*
  * The MIT License (MIT)
  *
@@ -26,14 +26,13 @@ var _dec, _dec2, _class, _ColorMixer;
 import { Component } from 'react';
 import { withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
 import { isValid } from '@instructure/ui-color-utils';
 import conversions from '@instructure/ui-color-utils';
 import { logWarn as warn } from '@instructure/console';
 import ColorPalette from './ColorPalette';
 import Slider from './Slider';
 import RGBAInput from './RGBAInput';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import generateStyle from './styles';
 
 /**
@@ -42,7 +41,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorMixer = class ColorMixer extends Component {
+let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = (_ColorMixer = class ColorMixer extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -122,6 +121,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       "aria-disabled": disabled,
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorMixer,
+      "data-cid": "ColorMixer",
       children: [_jsxs("span", {
         css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
         "aria-label": `${conversions.colorToHex8({
@@ -209,10 +209,10 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       })]
     });
   }
-}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.propTypes = propTypes, _ColorMixer.allowedProps = allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
+}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.allowedProps = allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
   value: '#000',
   withAlpha: false,
   disabled: false
-}, _ColorMixer)) || _class) || _class);
+}, _ColorMixer)) || _class);
 export { ColorMixer };
 export default ColorMixer;

package/es/ColorMixer/props.js

@@ -22,20 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  disabled: PropTypes.bool,
-  elementRef: PropTypes.func,
-  withAlpha: PropTypes.bool,
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
-  rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
-  colorSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-  alphaSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-  colorPaletteNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired
-};
 const allowedProps = ['disabled', 'elementRef', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'colorSliderNavigationExplanationScreenReaderLabel', 'alphaSliderNavigationExplanationScreenReaderLabel', 'colorPaletteNavigationExplanationScreenReaderLabel'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorPicker/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
+var _dec, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
 /*
  * The MIT License (MIT)
  *
@@ -27,7 +27,6 @@ import { Component } from 'react';
 import { withStyle, InstUISettingsProvider } from '@instructure/emotion';
 import { warn, error } from '@instructure/console';
 import { omitProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
 import { isValid, contrast as getContrast } from '@instructure/ui-color-utils';
 import conversions from '@instructure/ui-color-utils';
 import { TextInput } from '@instructure/ui-text-input';
@@ -41,7 +40,7 @@ import ColorContrast from '../ColorContrast';
 import ColorPreset from '../ColorPreset';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const acceptedCharactersForHEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'A', 'b', 'B', 'c', 'C', 'd', 'D', 'e', 'E', 'f', 'F', null];
 
@@ -50,7 +49,7 @@ const acceptedCharactersForHEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '
 category: components
 ---
 **/
-let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorPicker = class ColorPicker extends Component {
+let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorPicker = class ColorPicker extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -444,6 +443,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       ...omitProps(this.props, ColorPicker.allowedProps),
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.colorPicker,
       ref: this.handleRef,
+      "data-cid": "ColorPicker",
       children: [_jsx(TextInput, {
         id: id,
         isRequired: isRequired,
@@ -476,11 +476,11 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       })]
     });
   }
-}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.propTypes = propTypes, _ColorPicker.allowedProps = allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
+}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.allowedProps = allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
   disabled: false,
   withAlpha: false,
   width: '22.5rem',
   popoverMaxHeight: '100vh'
-}, _ColorPicker)) || _class) || _class);
+}, _ColorPicker)) || _class);
 export { ColorPicker };
 export default ColorPicker;

package/es/ColorPicker/props.js

@@ -22,65 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  checkContrast: PropTypes.shape({
-    isStrict: PropTypes.bool,
-    contrastStrength: PropTypes.oneOf(['min', 'mid', 'max']),
-    contrastAgainst: PropTypes.string,
-    renderContrastSuccessMessage: PropTypes.func,
-    renderContrastErrorMessage: PropTypes.func
-  }),
-  colorMixerSettings: PropTypes.shape({
-    popoverAddButtonLabel: PropTypes.string.isRequired,
-    popoverCloseButtonLabel: PropTypes.string.isRequired,
-    colorMixer: PropTypes.shape({
-      withAlpha: PropTypes.bool,
-      rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
-      colorSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-      alphaSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-      colorPaletteNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired
-    }),
-    colorPreset: PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      label: PropTypes.string.isRequired
-    }),
-    colorContrast: PropTypes.shape({
-      firstColor: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      successLabel: PropTypes.string.isRequired,
-      failureLabel: PropTypes.string.isRequired,
-      normalTextLabel: PropTypes.string.isRequired,
-      largeTextLabel: PropTypes.string.isRequired,
-      graphicsTextLabel: PropTypes.string.isRequired,
-      firstColorLabel: PropTypes.string.isRequired,
-      secondColorLabel: PropTypes.string.isRequired,
-      onContrastChange: PropTypes.func
-    })
-  }),
-  children: PropTypes.func,
-  disabled: PropTypes.bool,
-  elementRef: PropTypes.func,
-  isRequired: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  onChange: PropTypes.func,
-  placeholderText: PropTypes.string,
-  popoverScreenReaderLabel: PropTypes.string,
-  popoverButtonScreenReaderLabel: PropTypes.string,
-  popoverMaxHeight: PropTypes.string,
-  renderInvalidColorMessage: PropTypes.func,
-  renderIsRequiredMessage: PropTypes.func,
-  renderMessages: PropTypes.func,
-  tooltip: PropTypes.node,
-  id: PropTypes.string,
-  value: PropTypes.string,
-  width: PropTypes.string,
-  withAlpha: PropTypes.bool,
-  margin: PropTypes.string,
-  inputRef: PropTypes.func
-};
 const allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin', 'inputRef'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ColorPreset/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
+var _dec, _class, _ColorPreset, _IconAddLine;
 /*
  * The MIT License (MIT)
  *
@@ -26,7 +26,6 @@ var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
 import { Component } from 'react';
 import { withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
 import conversions from '@instructure/ui-color-utils';
 import { IconButton, Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
@@ -40,7 +39,7 @@ import { ColorMixer } from '../ColorMixer';
 import { ColorContrast } from '../ColorContrast';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 
 /**
 ---
@@ -48,7 +47,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorPreset = class ColorPreset extends Component {
+let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorPreset = class ColorPreset extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -273,6 +272,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       ...omitProps(this.props, ColorPreset.allowedProps),
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorPreset,
+      "data-cid": "ColorPreset",
       children: [label && _jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
         children: _jsx(Text, {
@@ -286,8 +286,8 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       })]
     });
   }
-}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.propTypes = propTypes, _ColorPreset.allowedProps = allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
+}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.allowedProps = allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
   disabled: false
-}, _ColorPreset)) || _class) || _class);
+}, _ColorPreset)) || _class);
 export { ColorPreset };
 export default ColorPreset;

package/es/ColorPreset/props.js

@@ -22,46 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  colors: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  selected: PropTypes.string,
-  disabled: PropTypes.bool,
-  elementRef: PropTypes.func,
-  label: PropTypes.string,
-  popoverScreenReaderLabel: PropTypes.string,
-  colorScreenReaderLabel: PropTypes.func,
-  colorMixerSettings: PropTypes.shape({
-    addNewPresetButtonScreenReaderLabel: PropTypes.string.isRequired,
-    selectColorLabel: PropTypes.string.isRequired,
-    removeColorLabel: PropTypes.string.isRequired,
-    onPresetChange: PropTypes.func,
-    popoverAddButtonLabel: PropTypes.string.isRequired,
-    popoverCloseButtonLabel: PropTypes.string.isRequired,
-    maxHeight: PropTypes.string,
-    colorMixer: PropTypes.shape({
-      withAlpha: PropTypes.bool,
-      rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
-      rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
-      colorSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-      alphaSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
-      colorPaletteNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired
-    }).isRequired,
-    colorContrast: PropTypes.shape({
-      firstColor: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      successLabel: PropTypes.string.isRequired,
-      failureLabel: PropTypes.string.isRequired,
-      normalTextLabel: PropTypes.string.isRequired,
-      largeTextLabel: PropTypes.string.isRequired,
-      graphicsTextLabel: PropTypes.string.isRequired,
-      firstColorLabel: PropTypes.string.isRequired,
-      secondColorLabel: PropTypes.string.isRequired
-    })
-  })
-};
 const allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected', 'colorScreenReaderLabel'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/lib/ColorContrast/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColorContrast = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _console = require("@instructure/console");
 var _contrastWithAlpha = require("@instructure/ui-color-utils/lib/contrastWithAlpha.js");
 var _validateContrast = require("@instructure/ui-color-utils/lib/validateContrast.js");
@@ -19,7 +18,7 @@ var _props = require("./props");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ColorContrast;
+var _dec, _class, _ColorContrast;
 /*
  * The MIT License (MIT)
  *
@@ -48,7 +47,7 @@ var _dec, _dec2, _class, _ColorContrast;
 category: components
 ---
 **/
-let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ColorContrast = class ColorContrast extends _react.Component {
+let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorContrast = class ColorContrast extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -177,6 +176,7 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       ...(0, _omitProps.omitProps)(this.props, ColorContrast.allowedProps),
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorContrast,
+      "data-cid": "ColorContrast",
       children: [(0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
         children: (0, _jsxRuntime.jsx)(_Text.Text, {
@@ -190,8 +190,8 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       }), this.renderPreview(), this.renderStatus(isValidNormalText, normalTextLabel), this.renderStatus(isValidLargeText, largeTextLabel), this.renderStatus(isValidGraphicsText, graphicsTextLabel)]
     });
   }
-}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = _props.propTypes, _ColorContrast.allowedProps = _props.allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
+}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.allowedProps = _props.allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
   withoutColorPreview: false,
   validationLevel: 'AA'
-}, _ColorContrast)) || _class) || _class);
+}, _ColorContrast)) || _class);
 var _default = exports.default = ColorContrast;