feat(uui-color-swatches): color swatches changes form when showLabel is true (#427)

* Color swatches changes form when showLabel is true

---------

Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { Colord, colord, extend, HslaColor } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -180,6 +180,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
 
       uui-color-swatches {
         border-top: solid 1px #d4d4d8;
+        padding: 0.75rem;
       }
 
       button[slot='trigger'] {
@@ -631,21 +632,26 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
               : ''}
           </uui-button-group>
         </div>
-        <uui-color-swatches
-          id="swatches"
-          class="color-picker__swatches"
-          @change=${this.handleColorSwatchChange}>
-          ${this.swatches.map(
-            swatch =>
-              html`<uui-color-swatch
-                label="${swatch}"
-                .value=${swatch}></uui-color-swatch>`
-          )}
-        </uui-color-swatches>
+        ${this._renderSwatches()}
       </div>
     `;
   }
 
+  private _renderSwatches() {
+    if (!this.swatches) return nothing;
+    return html`<uui-color-swatches
+      id="swatches"
+      class="color-picker__swatches"
+      @change=${this.handleColorSwatchChange}>
+      ${this.swatches.map(
+        swatch =>
+          html`<uui-color-swatch
+            label="${swatch}"
+            .value=${swatch}></uui-color-swatch>`
+      )}
+    </uui-color-swatches>`;
+  }
+
   private _renderPreviewButton() {
     return html`<button
         type="button"

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

@@ -2,7 +2,7 @@ import { Colord } from 'colord';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 
 import { styleMap } from 'lit/directives/style-map.js';
@@ -49,22 +49,36 @@ export class UUIColorSwatchElement extends LabelMixin(
         outline: none;
       }
 
-      :host(:focus:not([disabled])) .color-swatch {
+      :host(:focus:not([disabled])) #swatch {
         outline-color: var(--uui-color-focus);
         outline-width: var(--uui-swatch-border-width, 1px);
         outline-style: solid;
         outline-offset: var(--uui-swatch-border-width, 1px);
       }
 
-      :host([selectable]) {
+      :host([selectable]) #swatch {
         cursor: pointer;
       }
 
       :host([disabled]) {
         cursor: not-allowed;
       }
 
-      :host([selectable]) .color-swatch::after {
+      #swatch {
+        outline: none;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+        border-radius: 3px;
+      }
+
+      :host(:not([selectable])) #swatch:focus {
+        outline: none;
+      }
+
+      :host([selectable]) #swatch::after {
         content: '';
         position: absolute;
         pointer-events: none;
@@ -80,13 +94,13 @@ export class UUIColorSwatchElement extends LabelMixin(
         transition: opacity 100ms ease-out;
         opacity: 0;
       }
-      :host([selectable]:not([disabled]):hover) .color-swatch::after {
+      :host([selectable]:not([disabled]):hover) #swatch::after {
         opacity: 0.33;
       }
-      :host([selectable][selected]:not([disabled]):hover) .color-swatch::after {
+      :host([selectable][selected]:not([disabled]):hover) #swatch::after {
         opacity: 0.66;
       }
-      :host([selectable][selected]:not([disabled])) .color-swatch::after {
+      :host([selectable][selected]:not([disabled])) #swatch::after {
         opacity: 1;
       }
 
@@ -96,6 +110,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         height: var(--uui-swatch-size, 25px);
         border-radius: 3px;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
       }
@@ -119,6 +134,10 @@ export class UUIColorSwatchElement extends LabelMixin(
         box-sizing: border-box;
       }
 
+      .color-swatch--big .color-swatch__color {
+        border-radius: 3px 3px 0 0;
+      }
+
       .color-swatch__check {
         position: absolute;
         vertical-align: middle;
@@ -143,6 +162,31 @@ export class UUIColorSwatchElement extends LabelMixin(
       .label {
         font-size: var(--uui-size-4);
       }
+
+      .color-swatch--big {
+        width: 120px;
+        height: 50px;
+      }
+
+      .color-swatch__label {
+        max-width: 120px;
+        box-sizing: border-box;
+        padding: var(--uui-size-space-1) var(--uui-size-space-2);
+        line-height: 1.5;
+        display: flex;
+        flex-direction: column;
+        background: white;
+        border: 1px solid var(--uui-color-border);
+        border-radius: 0 0 3px 3px;
+        font-size: var(--uui-size-4, 12px);
+      }
+
+      .color-swatch__label strong {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+      }
     `,
   ];
 
@@ -251,23 +295,35 @@ export class UUIColorSwatchElement extends LabelMixin(
 
   render() {
     return html`
-      <div
-        class=${classMap({
-          'color-swatch': true,
-          'color-swatch--transparent-bg': true,
-          'color-swatch--light': this.isLight,
-        })}
-        role="button"
+      <button
+        id="swatch"
         aria-label=${this.label}
-        aria-disabled="${this.disabled}">
+        aria-disabled="${this.disabled}"
+        title="${this.label}">
         <div
-          class="color-swatch__color"
-          style=${styleMap({ backgroundColor: this.value })}></div>
-        <div class="color-swatch__check">${iconCheck}</div>
-      </div>
-      ${this.showLabel ? this.renderLabel() : ''}
+          class=${classMap({
+            'color-swatch': true,
+            'color-swatch--transparent-bg': true,
+            'color-swatch--light': this.isLight,
+            'color-swatch--big': this.showLabel,
+          })}>
+          <div
+            class="color-swatch__color"
+            style=${styleMap({ backgroundColor: this.value })}></div>
+          <div class="color-swatch__check">${iconCheck}</div>
+        </div>
+        ${this._renderWithLabel()}
+      </button>
     `;
   }
+
+  private _renderWithLabel() {
+    if (!this.showLabel) return nothing;
+    return html`<div class="color-swatch__label">
+      <strong>${this.renderLabel()}</strong>
+      ${this.value}
+    </div>`;
+  }
 }
 
 declare global {

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

@@ -21,6 +21,11 @@ export const Selectable: Story = () =>
     label=${value}></uui-color-swatch>`;
 
 export const InvalidValue: Story = () =>
+  html`<uui-color-swatch
+    .value=${'askjhsdiusyhdiudhg'}
+    label="Invalid color"></uui-color-swatch>`;
+
+export const InvalidValue2: Story = () =>
   html`<uui-color-swatch
     .value=${'askjhsdiusyhdiudhg'}
     label="Invalid color"
@@ -37,7 +42,10 @@ export const DisabledSelected: Story = () =>
   >`;
 
 export const WithLabel: Story = () =>
-  html`<uui-color-swatch selectable show-label label=${value}
+  html`<uui-color-swatch
+    selectable
+    show-label
+    label=${"This is the most beautiful color I've ever seen"}
     >${value}</uui-color-swatch
   >`;
 

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

@@ -23,7 +23,6 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
         display: flex;
         flex-wrap: wrap;
         gap: 0.4rem;
-        padding: 0.75rem;
       }
     `,
   ];