@instructure/ui-color-picker 10.26.1-snapshot-2 → 10.26.1

package/CHANGELOG.md

@@ -3,30 +3,9 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1-snapshot-2) (2025-10-06)
+## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (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`
+**Note:** Version bump only for package @instructure/ui-color-picker
 
 
 

package/es/ColorContrast/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ColorContrast;
+var _dec, _dec2, _class, _ColorContrast;
 /*
  * The MIT License (MIT)
  *
@@ -25,13 +25,14 @@ var _dec, _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 { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 
@@ -41,7 +42,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorContrast = class ColorContrast extends Component {
+let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorContrast = class ColorContrast extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -170,7 +171,6 @@ 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.allowedProps = allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
+}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = propTypes, _ColorContrast.allowedProps = allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
   withoutColorPreview: false,
   validationLevel: 'AA'
-}, _ColorContrast)) || _class);
+}, _ColorContrast)) || _class) || _class);
 export { ColorContrast };
 export default ColorContrast;

package/es/ColorContrast/props.js

@@ -22,5 +22,22 @@
  * 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 { allowedProps };
+export { propTypes, allowedProps };

package/es/ColorIndicator/index.js

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

package/es/ColorIndicator/props.js

@@ -22,5 +22,11 @@
  * 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 { allowedProps };
+export { propTypes, 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 { allowedProps } from './props';
+import { propTypes, 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.allowedProps = allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
+}, _ColorPalette.displayName = "ColorPalette", _ColorPalette.propTypes = propTypes, _ColorPalette.allowedProps = allowedProps, _ColorPalette.componentId = 'ColorMixer.Palette', _ColorPalette)) || _class) || _class);
 export default ColorPalette;

package/es/ColorMixer/ColorPalette/props.js

@@ -22,5 +22,17 @@
  * 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 { allowedProps };
+export { propTypes, 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 { allowedProps } from './props';
+import { propTypes, 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.allowedProps = allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
+}, _RGBAInput.displayName = "RGBAInput", _RGBAInput.propTypes = propTypes, _RGBAInput.allowedProps = allowedProps, _RGBAInput.componentId = 'ColorMixer.RGBAInput', _RGBAInput.defaultProps = {
   withAlpha: false
 }, _RGBAInput)) || _class);
 export default RGBAInput;

package/es/ColorMixer/RGBAInput/props.js

@@ -22,5 +22,19 @@
  * 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 { allowedProps };
+export { propTypes, 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 { allowedProps } from './props';
+import { propTypes, 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.allowedProps = allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
+}, _Slider.displayName = "Slider", _Slider.propTypes = propTypes, _Slider.allowedProps = allowedProps, _Slider.componentId = 'ColorMixer.Slider', _Slider.defaultProps = {
   isColorSlider: false
 }, _Slider)) || _class);
 export default Slider;

package/es/ColorMixer/Slider/props.js

@@ -22,5 +22,18 @@
  * 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 { allowedProps };
+export { propTypes, allowedProps };

package/es/ColorMixer/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ColorMixer;
+var _dec, _dec2, _class, _ColorMixer;
 /*
  * The MIT License (MIT)
  *
@@ -26,13 +26,14 @@ var _dec, _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 { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 
 /**
@@ -41,7 +42,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = (_ColorMixer = class ColorMixer extends Component {
+let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorMixer = class ColorMixer extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -121,7 +122,6 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = (_ColorMi
       "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), _dec(_class = (_ColorMi
       })]
     });
   }
-}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.allowedProps = allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
+}, _ColorMixer.displayName = "ColorMixer", _ColorMixer.propTypes = propTypes, _ColorMixer.allowedProps = allowedProps, _ColorMixer.componentId = 'ColorMixer', _ColorMixer.defaultProps = {
   value: '#000',
   withAlpha: false,
   disabled: false
-}, _ColorMixer)) || _class);
+}, _ColorMixer)) || _class) || _class);
 export { ColorMixer };
 export default ColorMixer;

package/es/ColorMixer/props.js

@@ -22,5 +22,20 @@
  * 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 { allowedProps };
+export { propTypes, allowedProps };

package/es/ColorPicker/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
+var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
 /*
  * The MIT License (MIT)
  *
@@ -27,6 +27,7 @@ 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';
@@ -40,7 +41,7 @@ import ColorContrast from '../ColorContrast';
 import ColorPreset from '../ColorPreset';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, 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];
 
@@ -49,7 +50,7 @@ const acceptedCharactersForHEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '
 category: components
 ---
 **/
-let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorPicker = class ColorPicker extends Component {
+let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorPicker = class ColorPicker extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -443,7 +444,6 @@ 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.allowedProps = allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
+}, _ColorPicker.displayName = "ColorPicker", _ColorPicker.propTypes = propTypes, _ColorPicker.allowedProps = allowedProps, _ColorPicker.componentId = 'ColorPicker', _ColorPicker.defaultProps = {
   disabled: false,
   withAlpha: false,
   width: '22.5rem',
   popoverMaxHeight: '100vh'
-}, _ColorPicker)) || _class);
+}, _ColorPicker)) || _class) || _class);
 export { ColorPicker };
 export default ColorPicker;

package/es/ColorPicker/props.js

@@ -22,5 +22,65 @@
  * 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 { allowedProps };
+export { propTypes, allowedProps };

package/es/ColorPreset/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ColorPreset, _IconAddLine;
+var _dec, _dec2, _class, _ColorPreset, _IconAddLine;
 /*
  * The MIT License (MIT)
  *
@@ -26,6 +26,7 @@ var _dec, _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';
@@ -39,7 +40,7 @@ import { ColorMixer } from '../ColorMixer';
 import { ColorContrast } from '../ColorContrast';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps } from './props';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -47,7 +48,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ColorPreset = class ColorPreset extends Component {
+let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ColorPreset = class ColorPreset extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -272,7 +273,6 @@ 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.allowedProps = allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
+}, _ColorPreset.displayName = "ColorPreset", _ColorPreset.propTypes = propTypes, _ColorPreset.allowedProps = allowedProps, _ColorPreset.componentId = 'ColorPreset', _ColorPreset.defaultProps = {
   disabled: false
-}, _ColorPreset)) || _class);
+}, _ColorPreset)) || _class) || _class);
 export { ColorPreset };
 export default ColorPreset;

package/es/ColorPreset/props.js

@@ -22,5 +22,46 @@
  * 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 { allowedProps };
+export { propTypes, allowedProps };

package/lib/ColorContrast/index.js

@@ -7,6 +7,7 @@ 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");
@@ -18,7 +19,7 @@ var _props = require("./props");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ColorContrast;
+var _dec, _dec2, _class, _ColorContrast;
 /*
  * The MIT License (MIT)
  *
@@ -47,7 +48,7 @@ var _dec, _class, _ColorContrast;
 category: components
 ---
 **/
-let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ColorContrast = class ColorContrast extends _react.Component {
+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 {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -176,7 +177,6 @@ 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.allowedProps = _props.allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
+}, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = _props.propTypes, _ColorContrast.allowedProps = _props.allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
   withoutColorPreview: false,
   validationLevel: 'AA'
-}, _ColorContrast)) || _class);
+}, _ColorContrast)) || _class) || _class);
 var _default = exports.default = ColorContrast;