@instructure/ui-color-picker 8.40.0 → 8.40.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.40.1](https://github.com/instructure/instructure-ui/compare/v8.40.0...v8.40.1) (2023-08-18)
+
+
+### Bug Fixes
+
+* **ui-color-picker:** add id as allowed prop for color-picker ([2ced2b2](https://github.com/instructure/instructure-ui/commit/2ced2b2b16e3996d67a4e957ff6e2ed02e3db669))
+
+
+
+
+
 # [8.40.0](https://github.com/instructure/instructure-ui/compare/v8.39.0...v8.40.0) (2023-08-17)
 
 ### Bug Fixes

package/es/ColorPicker/index.js

@@ -382,11 +382,13 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       disabled = _this$props10.disabled,
       isRequired = _this$props10.isRequired,
       placeholderText = _this$props10.placeholderText,
-      width = _this$props10.width;
+      width = _this$props10.width,
+      id = _this$props10.id;
     return jsx("div", Object.assign({}, 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
     }), jsx(TextInput, {
+      id: id,
       isRequired: isRequired,
       disabled: disabled,
       renderLabel: () => this.renderLabel(),

package/es/ColorPicker/props.js

@@ -74,9 +74,10 @@ const propTypes = {
   renderIsRequiredMessage: PropTypes.func,
   renderMessages: PropTypes.func,
   tooltip: PropTypes.node,
+  id: PropTypes.string,
   value: PropTypes.string,
   width: PropTypes.string,
   withAlpha: PropTypes.bool
 };
-const allowedProps = ['checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha'];
+const allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha'];
 export { propTypes, allowedProps };

package/lib/ColorPicker/index.js

@@ -394,11 +394,13 @@ let ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       disabled = _this$props10.disabled,
       isRequired = _this$props10.isRequired,
       placeholderText = _this$props10.placeholderText,
-      width = _this$props10.width;
+      width = _this$props10.width,
+      id = _this$props10.id;
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.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
     }), (0, _emotion.jsx)(_TextInput.TextInput, {
+      id: id,
       isRequired: isRequired,
       disabled: disabled,
       renderLabel: () => this.renderLabel(),

package/lib/ColorPicker/props.js

@@ -81,10 +81,11 @@ const propTypes = {
   renderIsRequiredMessage: _propTypes.default.func,
   renderMessages: _propTypes.default.func,
   tooltip: _propTypes.default.node,
+  id: _propTypes.default.string,
   value: _propTypes.default.string,
   width: _propTypes.default.string,
   withAlpha: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha'];
+const allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.40.0",
+  "version": "8.40.1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "@instructure/console": "8.40.0",
-    "@instructure/emotion": "8.40.0",
-    "@instructure/shared-types": "8.40.0",
-    "@instructure/ui-a11y-content": "8.40.0",
-    "@instructure/ui-buttons": "8.40.0",
-    "@instructure/ui-color-utils": "8.40.0",
-    "@instructure/ui-dom-utils": "8.40.0",
-    "@instructure/ui-drilldown": "8.40.0",
-    "@instructure/ui-form-field": "8.40.0",
-    "@instructure/ui-icons": "8.40.0",
-    "@instructure/ui-pill": "8.40.0",
-    "@instructure/ui-popover": "8.40.0",
-    "@instructure/ui-react-utils": "8.40.0",
-    "@instructure/ui-testable": "8.40.0",
-    "@instructure/ui-text": "8.40.0",
-    "@instructure/ui-text-input": "8.40.0",
-    "@instructure/ui-themes": "8.40.0",
-    "@instructure/ui-tooltip": "8.40.0",
-    "@instructure/ui-utils": "8.40.0",
-    "@instructure/ui-view": "8.40.0",
+    "@instructure/console": "8.40.1",
+    "@instructure/emotion": "8.40.1",
+    "@instructure/shared-types": "8.40.1",
+    "@instructure/ui-a11y-content": "8.40.1",
+    "@instructure/ui-buttons": "8.40.1",
+    "@instructure/ui-color-utils": "8.40.1",
+    "@instructure/ui-dom-utils": "8.40.1",
+    "@instructure/ui-drilldown": "8.40.1",
+    "@instructure/ui-form-field": "8.40.1",
+    "@instructure/ui-icons": "8.40.1",
+    "@instructure/ui-pill": "8.40.1",
+    "@instructure/ui-popover": "8.40.1",
+    "@instructure/ui-react-utils": "8.40.1",
+    "@instructure/ui-testable": "8.40.1",
+    "@instructure/ui-text": "8.40.1",
+    "@instructure/ui-text-input": "8.40.1",
+    "@instructure/ui-themes": "8.40.1",
+    "@instructure/ui-tooltip": "8.40.1",
+    "@instructure/ui-utils": "8.40.1",
+    "@instructure/ui-view": "8.40.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.40.0",
-    "@instructure/ui-test-locator": "8.40.0",
-    "@instructure/ui-test-queries": "8.40.0",
-    "@instructure/ui-test-utils": "8.40.0"
+    "@instructure/ui-babel-preset": "8.40.1",
+    "@instructure/ui-test-locator": "8.40.1",
+    "@instructure/ui-test-queries": "8.40.1",
+    "@instructure/ui-test-utils": "8.40.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ColorPicker/index.tsx

@@ -572,7 +572,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
   )
 
   render() {
-    const { disabled, isRequired, placeholderText, width } = this.props
+    const { disabled, isRequired, placeholderText, width, id } = this.props
 
     return (
       <div
@@ -581,6 +581,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
         ref={this.handleRef}
       >
         <TextInput
+          id={id}
           isRequired={isRequired}
           disabled={disabled}
           renderLabel={() => this.renderLabel()}

package/src/ColorPicker/props.ts

@@ -199,6 +199,11 @@ type ColorPickerOwnProps = {
    */
   tooltip?: React.ReactNode
 
+  /**
+   * The id of the text input. One is generated if not supplied.
+   */
+  id?: string
+
   /**
    * If set, the component will behave as controlled
    */
@@ -299,12 +304,14 @@ const propTypes: PropValidators<PropKeys> = {
   renderIsRequiredMessage: PropTypes.func,
   renderMessages: PropTypes.func,
   tooltip: PropTypes.node,
+  id: PropTypes.string,
   value: PropTypes.string,
   width: PropTypes.string,
   withAlpha: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
+  'id',
   'checkContrast',
   'colorMixerSettings',
   'children',