Icons in uu-base & reset state timeout

Author: nielslyngsoe

packages/uui-base/lib/svgs/icon-check.ts

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path d="M461.884 68.14c-132.601 81.297-228.817 183.87-272.048 235.345l-105.874-82.95-46.751 37.691 182.941 186.049c31.485-80.646 131.198-238.264 252.956-350.252L461.884 68.14z"/>
+</svg>`;

packages/uui-base/lib/svgs/icon-wrong.ts

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path d="M422.952 371.305L307.064 255.418l115.884-115.887-51.722-51.723L255.34 203.693 139.457 87.812l-51.726 51.719 115.885 115.885L87.731 371.305l51.726 51.721L255.344 307.14l115.884 115.882z"/>
+</svg>`;

packages/uui-button/lib/button-icons.ts

@@ -9,7 +9,8 @@ import {
   InterfaceLookType,
   InterfaceLookDefaultValue,
 } from '@umbraco-ui/uui-base/lib/types';
-import { iconCheck, iconWrong } from './button-icons';
+import IconCheck from '@umbraco-ui/uui-base/lib/svgs/icon-check';
+import IconWrong from '@umbraco-ui/uui-base/lib/svgs/icon-wrong';
 
 export type UUIButtonState = null | 'waiting' | 'success' | 'failed';
 
@@ -433,12 +434,17 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
     }
   }
 
+  private _resetStateTimeout?: number;
+
   // Reset the state after 2sec if it is 'success' or 'failed'.
   updated(changedProperties: any) {
     if (changedProperties.has('state')) {
-      this.disabled = !!this.state;
+      clearTimeout(this._resetStateTimeout);
       if (this.state === 'success' || this.state === 'failed') {
-        setTimeout(() => (this.state = null), 2000);
+        this._resetStateTimeout = setTimeout(
+          () => (this.state = null),
+          2000
+        ) as any;
       }
     }
   }
@@ -450,10 +456,10 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
         element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
         break;
       case 'success':
-        element = html`<div id="icon-check" style="">${iconCheck}</div>`;
+        element = html`<div id="icon-check" style="">${IconCheck}</div>`;
         break;
       case 'failed':
-        element = html`<div id="icon-wrong" style="">${iconWrong}</div>`;
+        element = html`<div id="icon-wrong" style="">${IconWrong}</div>`;
         break;
       default:
         return '';

packages/uui-button/lib/uui-button.element.ts

@@ -141,18 +141,21 @@ export const Sizing: Story = props => {
     <uui-button
       style="font-size:9px; font-weight:bold;"
       look=${props.look}
+      state=${props.state}
       ?disabled=${props.disabled}
       ?compact=${props.compact}
       label=${props.label}></uui-button>
     <uui-button
       style="font-size:12px"
       look=${props.look}
+      state=${props.state}
       ?disabled=${props.disabled}
       ?compact=${props.compact}
       label=${props.label}></uui-button>
     <uui-button
       style="font-size:15px"
       look=${props.look}
+      state=${props.state}
       ?disabled=${props.disabled}
       ?compact=${props.compact}
       label=${props.label}></uui-button>
@@ -187,7 +190,12 @@ export const Looks: Story = props => html`
   <h5>Looks</h5>
   ${InterfaceLookNames.map(
     (lookName: InterfaceLookType) =>
-      html`<uui-button .look=${lookName} style="margin-right:12px;">
+      html`<uui-button
+        .look=${lookName}
+        state=${props.state}
+        ?disabled=${props.disabled}
+        ?compact=${props.compact}
+        style="margin-right:12px;">
         ${uppercaseFirstLetter(lookName)} look
       </uui-button>`
   )}