Merge branch 'dev' into feature/formControlMixin-adapt-native-validation

Author: madsrasmussen

package-lock.json

@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.0.17",
+    "@umbraco-ui/uui-avatar": "0.0.19"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-avatar-group/package.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-avatar"
     }
   ]
 }

packages/uui-avatar-group/tsconfig.json

@@ -0,0 +1,15 @@
+import '.';
+
+import { Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+export default {
+  id: 'FormControlMixin',
+  title: 'Inputs/Form/FormControlMixin',
+};
+
+export const AAAOverview: Story = () =>
+  html`
+    <p>FormControlMixin can be used to make a web component part of a form.</p>
+  `;
+AAAOverview.storyName = 'Overview';

packages/uui-base/lib/mixins/FormControlMixin.story.ts

@@ -172,10 +172,22 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       });
     }
 
+    /**
+     * Determn wether this FormControl has a value.
+     * @method hasValue
+     * @returns {boolean}
+     */
     public hasValue(): boolean {
       return this.value !== '';
     }
 
+    /**
+     * Get internal form element.
+     * This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.
+     * @abstract
+     * @method getFormElement
+     * @returns {HTMLElement | undefined}
+     */
     protected abstract getFormElement(): HTMLElement | undefined;
 
     disconnectedCallback(): void {
@@ -188,6 +200,21 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       }
     }
 
+    /**
+     * Add validator, to validate this Form Control.
+     * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.
+     *
+     * @example
+     * this.addValidator(
+     *  'tooLong',
+     *  () => 'This input contains too many characters',
+     *  () => this._value.length > 10
+     * );
+     * @method hasValue
+     * @param {FlagTypes} flagKey the type of validation.
+     * @param {method} getMessage method to retrieve relevant message. Is executed every time the validator is re-executed.
+     * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.
+     */
     protected addValidator(
       flagKey: FlagTypes,
       getMessageMethod: () => String,
@@ -285,8 +312,8 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       this._removeFormListeners();
       this._form = this._internals.form;
       if (this._form) {
-        // This relies on the form begin a child of uui-form:
-        if (this._form.hasAttribute('invalid-submit')) {
+        // This relies on the form begin a 'uui-form':
+        if (this._form.hasAttribute('submit-invalid')) {
           this.pristine = false;
         }
         this._form.addEventListener('submit', this._onFormSubmit);

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -21,9 +21,7 @@ export function defineElement(
 
     const existingElement = window.customElements.get(name);
 
-    if (existingElement) {
-      console.warn(`${name} is already defined`, existingElement); // TODO: Remove this in production
-    } else {
+    if (!existingElement) {
       window.customElements.define(name, constructor, options);
     }
   };

packages/uui-base/lib/registration/index.ts

@@ -31,8 +31,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17",
-    "@umbraco-ui/uui-icon-registry-essential": "0.0.3"
+    "@umbraco-ui/uui-base": "0.0.17"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-button-group/package.json

@@ -12,9 +12,6 @@
   "references": [
     {
       "path": "../uui-base"
-    },
-    {
-      "path": "../uui-icon-registry-essential"
     }
   ]
 }

packages/uui-button-group/tsconfig.json

@@ -1,9 +1,8 @@
-import '@umbraco-ui/uui-icon/lib';
-
 import {
   UUIHorizontalShakeAnimationValue,
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
@@ -167,6 +166,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
       #loader {
         font-size: 1.5em;
       }
+      :host([look]:not([look=''])) #loader {
+        color: inherit;
+      }
 
       /* ANIMATIONS */
       @keyframes fadeIn {
@@ -609,19 +611,17 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
     let element = html``;
     switch (this.state) {
       case 'waiting':
-        if (!customElements.get('uui-loader-circle')) {
-          console.warn(
-            'To properly render the waiting state, the uui-loader-circle element has to be registered'
-          );
-        }
+        demandCustomElement(this, 'uui-loader-circle');
         element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
         break;
       case 'success':
+        demandCustomElement(this, 'uui-icon');
         element = html`<uui-icon
           name="check"
           .fallback=${iconCheck.strings[0]}></uui-icon>`;
         break;
       case 'failed':
+        demandCustomElement(this, 'uui-icon');
         element = html`<uui-icon
           name="wrong"
           .fallback=${iconWrong.strings[0]}></uui-icon>`;

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

@@ -18,6 +18,7 @@ export default {
     look: '',
     type: '',
     label: 'Button',
+    state: '',
   },
   argTypes: {
     look: {
@@ -270,11 +271,8 @@ WithIcon.parameters = {
   },
 };
 
-export const WaitingState = () => html`
-  <uui-button state="waiting" label="A11Y proper label">
-    Loading button
-  </uui-button>
-`;
+export const WaitingState = Template.bind({});
+WaitingState.args = { state: 'waiting' };
 WaitingState.parameters = {
   docs: {
     source: {