@instructure/ui-color-picker 8.56.0 → 8.56.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.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
+
+
+### Bug Fixes
+
+* **ui-color-picker:** add disabled styling for ColorPreset ([5fda291](https://github.com/instructure/instructure-ui/commit/5fda2914d9b0162e88f44073e1353176a16d05ed))
+
+
+
+
+
 # [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorPreset/index.js

@@ -145,10 +145,12 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, (_this$props$colorMixe3 = this.props.colorMixerSettings) === null || _this$props$colorMixe3 === void 0 ? void 0 : _this$props$colorMixe3.popoverCloseButtonLabel)));
     };
     this.renderColorIndicator = (color, selectOnClick) => {
+      const indicatorBase = this.renderIndicatorBase(color, selectOnClick);
+      return this.props.disabled ? indicatorBase : this.renderIndicatorTooltip(indicatorBase, color);
+    };
+    this.renderIndicatorBase = (color, selectOnClick) => {
       var _this$props6, _this$props6$styles;
-      return jsx(Tooltip, {
-        renderTip: jsx("div", null, color)
-      }, jsx(View, Object.assign({
+      return jsx(View, Object.assign({
         disabled: this.props.disabled,
         position: "relative",
         width: "2.375rem",
@@ -159,6 +161,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         borderRadius: "medium",
         borderWidth: "0",
         padding: "0",
+        cursor: this.props.disabled ? 'not-allowed' : 'auto',
         as: "button"
       }, selectOnClick ? {
         onClick: () => this.props.onSelect(color)
@@ -175,8 +178,11 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           sizeXSmall: '0.8rem'
         },
         size: "x-small"
-      })))));
+      }))));
     };
+    this.renderIndicatorTooltip = (child, color) => jsx(Tooltip, {
+      renderTip: jsx("div", null, color)
+    }, child);
     this.renderSettingsMenu = (color, index) => jsx(Drilldown, {
       onSelect: this.onMenuItemSelected(color),
       trigger: this.renderColorIndicator(color),

package/es/ColorPreset/styles.js

@@ -33,13 +33,17 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const colorMixerSettings = props.colorMixerSettings;
+  const colorMixerSettings = props.colorMixerSettings,
+    disabled = props.disabled;
   return {
     colorPreset: {
       label: 'colorPreset',
       display: 'flex',
       flexWrap: 'wrap',
-      width: '17rem'
+      width: '17rem',
+      ...(disabled && {
+        opacity: 0.5
+      })
     },
     addNewPresetButton: {
       label: 'colorPreset__addNewPresetButton',

package/lib/ColorPreset/index.js

@@ -152,10 +152,12 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       }, (_this$props$colorMixe3 = this.props.colorMixerSettings) === null || _this$props$colorMixe3 === void 0 ? void 0 : _this$props$colorMixe3.popoverCloseButtonLabel)));
     };
     this.renderColorIndicator = (color, selectOnClick) => {
+      const indicatorBase = this.renderIndicatorBase(color, selectOnClick);
+      return this.props.disabled ? indicatorBase : this.renderIndicatorTooltip(indicatorBase, color);
+    };
+    this.renderIndicatorBase = (color, selectOnClick) => {
       var _this$props6, _this$props6$styles;
-      return (0, _emotion.jsx)(_Tooltip.Tooltip, {
-        renderTip: (0, _emotion.jsx)("div", null, color)
-      }, (0, _emotion.jsx)(_View.View, Object.assign({
+      return (0, _emotion.jsx)(_View.View, Object.assign({
         disabled: this.props.disabled,
         position: "relative",
         width: "2.375rem",
@@ -166,6 +168,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
         borderRadius: "medium",
         borderWidth: "0",
         padding: "0",
+        cursor: this.props.disabled ? 'not-allowed' : 'auto',
         as: "button"
       }, selectOnClick ? {
         onClick: () => this.props.onSelect(color)
@@ -182,8 +185,11 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
           sizeXSmall: '0.8rem'
         },
         size: "x-small"
-      })))));
+      }))));
     };
+    this.renderIndicatorTooltip = (child, color) => (0, _emotion.jsx)(_Tooltip.Tooltip, {
+      renderTip: (0, _emotion.jsx)("div", null, color)
+    }, child);
     this.renderSettingsMenu = (color, index) => (0, _emotion.jsx)(_Drilldown.Drilldown, {
       onSelect: this.onMenuItemSelected(color),
       trigger: this.renderColorIndicator(color),

package/lib/ColorPreset/styles.js

@@ -39,13 +39,17 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const colorMixerSettings = props.colorMixerSettings;
+  const colorMixerSettings = props.colorMixerSettings,
+    disabled = props.disabled;
   return {
     colorPreset: {
       label: 'colorPreset',
       display: 'flex',
       flexWrap: 'wrap',
-      width: '17rem'
+      width: '17rem',
+      ...(disabled && {
+        opacity: 0.5
+      })
     },
     addNewPresetButton: {
       label: 'colorPreset__addNewPresetButton',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.56.0",
+  "version": "8.56.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.23.2",
-    "@instructure/console": "8.56.0",
-    "@instructure/emotion": "8.56.0",
-    "@instructure/shared-types": "8.56.0",
-    "@instructure/ui-a11y-content": "8.56.0",
-    "@instructure/ui-buttons": "8.56.0",
-    "@instructure/ui-color-utils": "8.56.0",
-    "@instructure/ui-dom-utils": "8.56.0",
-    "@instructure/ui-drilldown": "8.56.0",
-    "@instructure/ui-form-field": "8.56.0",
-    "@instructure/ui-icons": "8.56.0",
-    "@instructure/ui-pill": "8.56.0",
-    "@instructure/ui-popover": "8.56.0",
-    "@instructure/ui-react-utils": "8.56.0",
-    "@instructure/ui-testable": "8.56.0",
-    "@instructure/ui-text": "8.56.0",
-    "@instructure/ui-text-input": "8.56.0",
-    "@instructure/ui-themes": "8.56.0",
-    "@instructure/ui-tooltip": "8.56.0",
-    "@instructure/ui-utils": "8.56.0",
-    "@instructure/ui-view": "8.56.0",
+    "@instructure/console": "8.56.1",
+    "@instructure/emotion": "8.56.1",
+    "@instructure/shared-types": "8.56.1",
+    "@instructure/ui-a11y-content": "8.56.1",
+    "@instructure/ui-buttons": "8.56.1",
+    "@instructure/ui-color-utils": "8.56.1",
+    "@instructure/ui-dom-utils": "8.56.1",
+    "@instructure/ui-drilldown": "8.56.1",
+    "@instructure/ui-form-field": "8.56.1",
+    "@instructure/ui-icons": "8.56.1",
+    "@instructure/ui-pill": "8.56.1",
+    "@instructure/ui-popover": "8.56.1",
+    "@instructure/ui-react-utils": "8.56.1",
+    "@instructure/ui-testable": "8.56.1",
+    "@instructure/ui-text": "8.56.1",
+    "@instructure/ui-text-input": "8.56.1",
+    "@instructure/ui-themes": "8.56.1",
+    "@instructure/ui-tooltip": "8.56.1",
+    "@instructure/ui-utils": "8.56.1",
+    "@instructure/ui-view": "8.56.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.0",
-    "@instructure/ui-test-locator": "8.56.0",
-    "@instructure/ui-test-queries": "8.56.0",
-    "@instructure/ui-test-utils": "8.56.0"
+    "@instructure/ui-babel-preset": "8.56.1",
+    "@instructure/ui-test-locator": "8.56.1",
+    "@instructure/ui-test-queries": "8.56.1",
+    "@instructure/ui-test-utils": "8.56.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ColorPreset/index.tsx

@@ -241,38 +241,46 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     </Popover>
   )
 
-  renderColorIndicator = (color: string, selectOnClick?: boolean) => (
-    <Tooltip renderTip={<div>{color}</div>}>
-      <View
-        disabled={this.props.disabled}
-        position="relative"
-        width="2.375rem"
-        height="2.375rem"
-        background="transparent"
-        margin="xx-small"
-        display="inline-block"
-        borderRadius="medium"
-        borderWidth="0"
-        padding="0"
-        as="button"
-        {...(selectOnClick
-          ? { onClick: () => this.props.onSelect(color) }
-          : {})}
-        {...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
-      >
-        <div>
-          <ColorIndicator color={color} shape="rectangle" role="presentation" />
-          {this.isSelectedColor(color) && (
-            <div css={this.props?.styles?.selectedIndicator}>
-              <IconCheckDarkSolid
-                themeOverride={{ sizeXSmall: '0.8rem' }}
-                size="x-small"
-              />
-            </div>
-          )}
-        </div>
-      </View>
-    </Tooltip>
+  renderColorIndicator = (color: string, selectOnClick?: boolean) => {
+    const indicatorBase = this.renderIndicatorBase(color, selectOnClick)
+    return this.props.disabled
+      ? indicatorBase
+      : this.renderIndicatorTooltip(indicatorBase, color)
+  }
+
+  renderIndicatorBase = (color: string, selectOnClick?: boolean) => (
+    <View
+      disabled={this.props.disabled}
+      position="relative"
+      width="2.375rem"
+      height="2.375rem"
+      background="transparent"
+      margin="xx-small"
+      display="inline-block"
+      borderRadius="medium"
+      borderWidth="0"
+      padding="0"
+      cursor={this.props.disabled ? 'not-allowed' : 'auto'}
+      as="button"
+      {...(selectOnClick ? { onClick: () => this.props.onSelect(color) } : {})}
+      {...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
+    >
+      <div>
+        <ColorIndicator color={color} shape="rectangle" role="presentation" />
+        {this.isSelectedColor(color) && (
+          <div css={this.props?.styles?.selectedIndicator}>
+            <IconCheckDarkSolid
+              themeOverride={{ sizeXSmall: '0.8rem' }}
+              size="x-small"
+            />
+          </div>
+        )}
+      </div>
+    </View>
+  )
+
+  renderIndicatorTooltip = (child: React.ReactElement, color: string) => (
+    <Tooltip renderTip={<div>{color}</div>}>{child}</Tooltip>
   )
 
   renderSettingsMenu = (color: string, index: number) => (

package/src/ColorPreset/styles.ts

@@ -38,13 +38,16 @@ const generateStyle = (
   componentTheme: ColorPresetTheme,
   props: ColorPresetProps
 ) => {
-  const { colorMixerSettings } = props
+  const { colorMixerSettings, disabled } = props
   return {
     colorPreset: {
       label: 'colorPreset',
       display: 'flex',
       flexWrap: 'wrap',
-      width: '17rem'
+      width: '17rem',
+      ...(disabled && {
+        opacity: 0.5
+      })
     },
     addNewPresetButton: {
       label: 'colorPreset__addNewPresetButton',