@umbraco-ui/uui-color-swatch 1.2.0-rc.0 → 1.2.0-rc.1

package/lib/index.js

@@ -1,7 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, nothing, css } from 'lit';
 import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import { styleMap } from 'lit/directives/style-map.js';
 import { LabelMixin, SelectableMixin, ActiveMixin } from '@umbraco-ui/uui-base/lib/mixins';
@@ -84,23 +84,35 @@ let UUIColorSwatchElement = class 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>
     `;
   }
+  _renderWithLabel() {
+    if (!this.showLabel)
+      return nothing;
+    return html`<div class="color-swatch__label">
+      <strong>${this.renderLabel()}</strong>
+      ${this.value}
+    </div>`;
+  }
 };
 UUIColorSwatchElement.styles = [
   css`
@@ -125,14 +137,14 @@ UUIColorSwatchElement.styles = [
         outline: none;
       }
 
-      :host(:focus:not([disabled])) .color-swatch {
+      :host(:focus:not([disabled])) #swatch {
         outline-color: var(--uui-color-focus,#3879ff);
         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;
       }
 
@@ -140,7 +152,21 @@ UUIColorSwatchElement.styles = [
         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;
@@ -156,13 +182,13 @@ UUIColorSwatchElement.styles = [
         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;
       }
 
@@ -172,6 +198,7 @@ UUIColorSwatchElement.styles = [
         height: var(--uui-swatch-size, 25px);
         border-radius: 3px;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
       }
@@ -195,6 +222,10 @@ UUIColorSwatchElement.styles = [
         box-sizing: border-box;
       }
 
+      .color-swatch--big .color-swatch__color {
+        border-radius: 3px 3px 0 0;
+      }
+
       .color-swatch__check {
         position: absolute;
         vertical-align: middle;
@@ -219,6 +250,31 @@ UUIColorSwatchElement.styles = [
       .label {
         font-size: var(--uui-size-4,12px);
       }
+
+      .color-swatch--big {
+        width: 120px;
+        height: 50px;
+      }
+
+      .color-swatch__label {
+        max-width: 120px;
+        box-sizing: border-box;
+        padding: var(--uui-size-space-1,3px) var(--uui-size-space-2,6px);
+        line-height: 1.5;
+        display: flex;
+        flex-direction: column;
+        background: white;
+        border: 1px solid var(--uui-color-border,#d8d7d9);
+        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;
+      }
     `
 ];
 __decorateClass([

package/lib/uui-color-swatch.element.d.ts

@@ -55,6 +55,7 @@ export declare class UUIColorSwatchElement extends UUIColorSwatchElement_base {
     firstUpdated(): void;
     willUpdate(changedProperties: Map<string, any>): void;
     render(): import("lit-html").TemplateResult<1>;
+    private _renderWithLabel;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-swatch",
-  "version": "1.2.0-rc.0",
+  "version": "1.2.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.0-rc.0",
-    "@umbraco-ui/uui-icon-registry-essential": "1.2.0-rc.0",
+    "@umbraco-ui/uui-base": "1.2.0-rc.1",
+    "@umbraco-ui/uui-icon-registry-essential": "1.2.0-rc.1",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatch",
-  "gitHead": "43f1b9a8bd1721af30ba7c145517ee665d874df3"
+  "gitHead": "c85fbce0370213590f8b60119ac39f0473ffa0fb"
 }