Disable elements when color picker is disabled

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -107,8 +107,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         margin-left: 0.75rem;
         border-radius: 50%;
       }
-      color-picker__trigger {
-        cursor: pointer;
+      .color-picker__trigger[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
       }
       .color-picker__preview::before,
       .color-picker__trigger::before {
@@ -558,14 +559,18 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
           'color-picker--disabled': this.disabled,
         })}
         aria-disabled=${this.disabled ? 'true' : 'false'}>
-        <uui-color-area .value="${this.value}" @change=${this.handleGridChange}>
+        <uui-color-area
+          .value="${this.value}"
+          ?disabled=${this.disabled}
+          @change=${this.handleGridChange}>
         </uui-color-area>
         <div class="color-picker__controls">
           <div class="color-picker__sliders">
             <uui-color-slider
               label="hue"
               class="hue-slider"
               .value=${Math.round(this.hue)}
+              ?disabled=${this.disabled}
               @change=${this.handleHueChange}>
             </uui-color-slider>
             ${this.opacity
@@ -576,6 +581,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
                     .value=${Math.round(this.alpha)}
                     type="opacity"
                     .color=${this.value}
+                    ?disabled=${this.disabled}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
                 `
@@ -610,21 +616,21 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
           </uui-input>
           <uui-button-group>
             ${!this.noFormatToggle
-              ? html`
-                  <uui-button
+              ? html`<uui-button
                     label="Toggle color format"
                     @click=${this.handleFormatToggle}
                     class="color-picker__toggle-format"
+                    ?disabled=${this.disabled}
                     compact>
                     <span>${this.format}</span>
-                  </uui-button>
-                `
+                  </uui-button>`
               : ''}
             ${hasEyeDropper
-              ? html` <uui-button
+              ? html`<uui-button
                   label="Select a color"
-                  compact
-                  @click=${this.handleEyeDropper}>
+                  ?disabled=${this.disabled}
+                  @click=${this.handleEyeDropper}
+                  compact>
                   <uui-icon-registry-essential>
                     <uui-icon name="colorpicker"></uui-icon>
                   </uui-icon-registry-essential>
@@ -642,12 +648,14 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"
+      ?disabled=${this.disabled}
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
         swatch =>
           html`<uui-color-swatch
             label="${swatch}"
-            .value=${swatch}></uui-color-swatch>`
+            .value=${swatch}>
+          </uui-color-swatch>`
       )}
     </uui-color-swatches>`;
   }
@@ -670,6 +678,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
             this.lightness
           }%, ${this.alpha / 100})`,
         })}
+        ?disabled=${this.disabled}
         @click=${this.openColorPicker}
         aria-haspopup="true"
         aria-expanded="false"></button>

packages/uui-color-picker/lib/uui-color-picker.story.ts

@@ -67,7 +67,22 @@ export const Inline: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-color-picker inline="true"></uui-color-picker>`,
+        code: `<uui-color-picker inline></uui-color-picker>`,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    inline: true,
+    opacity: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-color-picker inline disabled opacity></uui-color-picker>`,
       },
     },
   },

packages/uui-color-swatch/lib/uui-color-swatch.element.ts

@@ -62,9 +62,11 @@ export class UUIColorSwatchElement extends LabelMixin(
 
       :host([disabled]) {
         cursor: not-allowed;
+        opacity: 0.5;
       }
 
       #swatch {
+        cursor: inherit;
         outline: none;
         background: none;
         border: none;

packages/uui-color-swatches/lib/uui-color-swatches.element.ts

@@ -35,6 +35,14 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   @property()
   value = '';
 
+ /**
+  * Disables the color swatches.
+  * @type {boolean}
+  * @attr
+  * @default false
+  **/
+   @property({ type: Boolean, reflect: true }) disabled = false;
+
   @queryAssignedElements({ selector: 'uui-color-swatch' })
   swatches!: Array<UUIColorSwatchElement>;
 
@@ -78,12 +86,17 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   private _handleSlotChange() {
     if (!this.swatches || this.swatches.length === 0) return;
     this.swatches.forEach(swatch => {
-      //? does it make sense to have non selectable swatches in the swatches element?
-      //for some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:
-      swatch.setAttribute('selectable', 'selectable');
       swatch.setAttribute('aria-checked', 'false');
       swatch.setAttribute('role', 'radio');
 
+      if (this.disabled) {
+        swatch.setAttribute('disabled', '')
+      }
+      else {
+        // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:
+        swatch.setAttribute('selectable', 'selectable');
+      }
+
       if (this.value !== '' && swatch.color?.isEqual(this.value)) {
         swatch.selected = true;
         swatch.setAttribute('aria-checked', 'true');
@@ -128,6 +141,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
       );
     }
   };
+
   /**
    * Deselects all swatches.
    *
@@ -137,7 +151,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
     this.swatches.forEach(swatch => {
       swatch.selected = false;
       swatch.active = false;
-      swatch.selectable = true;
+      swatch.selectable = !swatch.disabled;
     });
     this._activeElement = undefined;
     this._selectedElement = undefined;