Adjust markup

Author: bjarnef

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

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 @defineElement('uui-input-color')
 export class UUIInputColorElement extends UUIInputElement {
   @state()
-  private inputType: InputType = 'color';
+  private inputType: InputType = 'text';
 
   // this overrides the inherited type property, and moves the input's type handling to the passwordType state.
   @property()
@@ -22,31 +22,58 @@ export class UUIInputColorElement extends UUIInputElement {
     this.inputType = newValue;
   }
 
+  onChange(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    this.value = target.value;
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
 
     demandCustomElement(this, 'uui-color-swatch');
   }
 
   renderPrepend() {
-    return html`<uui-color-swatch
-      .disabled=${this.disabled}
-      .readonly=${this.readonly}
-      .value=${this.value}>
-    </uui-color-swatch>`;
+    return html`<label id="color-picker">
+      <uui-color-swatch
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        .value=${this.value}>
+      </uui-color-swatch>
+      <input
+        type="color"
+        id="color-input"
+        .value="${this.value}"
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        aria-hidden="true" />
+    </label>`;
   }
 
-  static styles = [...UUIInputElement.styles, css``];
-
-  /*render(){
-      return html`
-          <div class="color-wrapper">
-            <uui-input id="input" label="Value" placeholder="Value" required style="--uui-show-focus-outline: 0;">
-              <uui-color-swatch slot="prepend" label="" value="#"></uui-color-swatch>
-            </uui-input>
-            <input type="color" id="color" aria-hidden="true" value="">
-          </div>`;
-  }*/
+  static styles = [
+    ...UUIInputElement.styles,
+    css`
+      :host {
+      }
+
+      #color-picker {
+        cursor: pointer;
+        position: relative;
+        border-right: var(--uui-input-border-width, 1px) solid
+          var(--uui-input-border-color, var(--uui-color-border));
+      }
+
+      #color-input {
+        visibility: hidden;
+        appearance: none;
+      }
+
+      uui-color-swatch {
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+      }
+    `,
+  ];
 }
 
 declare global {

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

@@ -3,17 +3,26 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import './uui-input-color.element';
 import type { UUIInputColorElement } from './uui-input-color.element';
 import readme from '../README.md?raw';
+import { html } from 'lit';
+import { renderSlots, spread } from '../../../storyhelpers';
 
+/**
+ * uui-input-color extends uui-input. See [uui-input](/docs/uui-input--docs) for more details.
+ */
 const meta: Meta<UUIInputColorElement> = {
   id: 'uui-input-color',
   title: 'Inputs/Input Color',
   component: 'uui-input-color',
+  args: {
+    label: 'Label',
+  },
+  render: args =>
+    html`<uui-input-color ${spread(args)}
+      >${renderSlots(args)}</uui-input-color
+    >`,
   parameters: {
-    readme: { markdown: readme },
-    docs: {
-      source: {
-        code: `<uui-input-color></uui-input-color>`,
-      },
+    readme: {
+      markdown: readme,
     },
   },
 };