Merge pull request #2231 from ing-bank/release-0.6.0

Release 0.6.0

docs/blog/lion-without-polyfills.md

@@ -23,7 +23,7 @@ To clarify: within Lion class files we never import files that run `customElemen
 
 ```js
 import { LitElement, html } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { MyCardHeader } from './MyCardHeader.js';
 
 export class MyCard extends ScopedElementsMixin(LitElement) {
@@ -78,7 +78,7 @@ Be sure to always define **ALL** the sub elements you are using in your template
 
 ```js
 import { LitElement, html } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { MyCardHeader } from './MyCardHeader.js';
 
 export class MyCard extends ScopedElementsMixin(LitElement) {

docs/components/accordion/overview.md

@@ -8,7 +8,7 @@ import { html as previewHtml } from '@mdjs/mdjs-preview';
 
 ```js preview-story
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionAccordion } from '@lion/ui/accordion.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {
@@ -83,7 +83,7 @@ npm i --save @lion/ui
 
 ```js
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionAccordion } from '@lion/ui/accordion.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {

docs/components/fieldset/use-cases.md

@@ -4,7 +4,6 @@
 import { html } from '@mdjs/mdjs-preview';
 import { localize } from '@lion/ui/localize.js';
 import { MinLength, Validator, Required } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 
 import '@lion/ui/define/lion-input.js';
 import '@lion/ui/define/lion-fieldset.js';

docs/components/form/overview.md

@@ -11,14 +11,25 @@ A web component that enhances the functionality of the native `form` component.
 It is designed to interact with (instances of) the [form controls](../../fundamentals/systems/form/overview.md).
 
 ```js preview-story
-export const main = () => html`
-  <lion-form>
-    <form>
-      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-    </form>
-  </lion-form>
-`;
+export const main = () => {
+  const submitHandler = ev => {
+    const formData = ev.target.serializedValue;
+    console.log('formData', formData);
+    fetch('/api/foo/', {
+      method: 'POST',
+      body: JSON.stringify(formData),
+    });
+  };
+  return html`
+    <lion-form @submit=${submitHandler}>
+      <form @submit=${ev => ev.preventDefault()}>
+        <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+        <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+        <button>Submit</button>
+      </form>
+    </lion-form>
+  `;
+};
 ```
 
 ## Features

docs/components/form/use-cases.md

@@ -10,32 +10,28 @@ import '@lion/ui/define/lion-form.js';
 
 ## Submit & Reset
 
-To submit a form, use a regular button (or `LionButtonSubmit`) somewhere inside the native `<form>`.
+To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`.
 
-Then, add a `submit` handler on the `lion-form`.
+Then, add a `submit` handler on the `<lion-form>`.
 
 You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 
 Another example is checking if the form has errors, and focusing the first field with an error.
 
-To fire a submit from JavaScript, select the `lion-form` element and call `.submit()`.
+To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
 
 ```js preview-story
 export const formSubmit = () => {
   loadDefaultFeedbackMessages();
   const submitHandler = ev => {
-    if (ev.target.hasFeedbackFor.includes('error')) {
-      const firstFormElWithError = ev.target.formElements.find(el =>
-        el.hasFeedbackFor.includes('error'),
-      );
-      firstFormElWithError.focus();
-      return;
-    }
     const formData = ev.target.serializedValue;
-    fetch('/api/foo/', {
-      method: 'POST',
-      body: JSON.stringify(formData),
-    });
+    console.log('formData', formData);
+    if (!ev.target.hasFeedbackFor?.includes('error')) {
+      fetch('/api/foo/', {
+        method: 'POST',
+        body: JSON.stringify(formData),
+      });
+    }
   };
   const submitViaJS = ev => {
     // Call submit on the lion-form element, in your own code you should use

docs/components/input-file/use-cases.md

@@ -4,7 +4,7 @@
 import { Required, Validator } from '@lion/ui/form-core.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { html } from '@mdjs/mdjs-preview';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LitElement } from 'lit';
 import '@lion/ui/define/lion-input-file.js';
 loadDefaultFeedbackMessages();

docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js

@@ -1,4 +1,4 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { html, css } from 'lit';
 import { ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';

docs/components/switch/overview.md

@@ -9,7 +9,7 @@ import '@lion/ui/define/lion-switch.js';
 
 ```js preview-story
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionSwitch } from '@lion/ui/switch.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {
@@ -51,7 +51,7 @@ npm i --save @lion/ui
 
 ```js
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionSwitch } from '@lion/ui/switch.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {

docs/fundamentals/systems/form/use-cases.md

@@ -30,6 +30,8 @@ import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-switch.js';
 import '@lion/ui/define/lion-textarea.js';
+import '@lion/ui/define/lion-button-submit.js';
+import '@lion/ui/define/lion-button-reset.js';
 import { MinLength, Required } from '@lion/ui/form-core.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 ```
@@ -39,19 +41,20 @@ import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 ```js preview-story
 export const main = () => {
   loadDefaultFeedbackMessages();
-  Required.getMessage = () => 'Please enter a value';
   return html`
     <lion-form>
       <form>
         <lion-fieldset name="fullName">
           <lion-input
             name="firstName"
             label="First Name"
+            .fieldName="${'first name'}"
             .validators="${[new Required()]}"
           ></lion-input>
           <lion-input
             name="lastName"
             label="Last Name"
+            .fieldName="${'last name'}"
             .validators="${[new Required()]}"
           ></lion-input>
         </lion-fieldset>
@@ -70,6 +73,7 @@ export const main = () => {
         <lion-textarea
           name="bio"
           label="Biography"
+          .fieldName="${'value'}"
           .validators="${[new Required(), new MinLength(10)]}"
           help-text="Please enter at least 10 characters"
         ></lion-textarea>
@@ -82,6 +86,7 @@ export const main = () => {
           label="What do you like?"
           name="checkers"
           .validators="${[new Required()]}"
+          .fieldName="${'value'}"
         >
           <lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
           <lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
@@ -90,6 +95,7 @@ export const main = () => {
         <lion-radio-group
           name="dinosaurs"
           label="Favorite dinosaur"
+          .fieldName="${'dinosaur'}"
           .validators="${[new Required()]}"
         >
           <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
@@ -136,18 +142,23 @@ export const main = () => {
           label="Input range"
         ></lion-input-range>
         <lion-checkbox-group
-          .multipleChoice="${false}"
           name="terms"
-          .validators="${[new Required()]}"
+          .validators="${[
+            new Required('', {
+              getMessage: () => `Please accept our terms.`,
+            }),
+          ]}"
         >
-          <lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
+          <lion-checkbox
+            .choiceValue="${'true'}"
+            label="I blindly accept all terms and conditions"
+          ></lion-checkbox>
         </lion-checkbox-group>
         <lion-switch name="notifications" label="Notifications"></lion-switch>
         <lion-input-stepper max="5" min="0" name="rsvp">
           <label slot="label">RSVP</label>
           <div slot="help-text">Max. 5 guests</div>
         </lion-input-stepper>
-        <lion-textarea name="comments" label="Comments"></lion-textarea>
         <div class="buttons">
           <lion-button-submit>Submit</lion-button-submit>
           <lion-button-reset

docs/guides/principles/scoped-elements.md

@@ -7,7 +7,8 @@ apply ScopedElementsMixin to make sure it uses the right version of this interna
 
 ```js
 import { LitElement, html } from '@lion/ui/core.js';
-import { ScopedElementsMixin, LitElement, html } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { html, LitElement } from 'lit';
 
 import { LionInput } from '@lion/ui/input.js';
 import { LionButton } from '@lion/ui/button.js';
@@ -29,28 +30,31 @@ class MyElement extends ScopedElementsMixin(LitElement) {
 }
 ```
 
-## Query selectors
+## Polyfill
 
-Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written like this:
+This package requires use of the Scoped Custom Element Registry polyfill. Make sure to load it as the first thing in your application:
 
 ```js
-this.querySelector(
-  this.constructor.getScopedTagName('lion-input', this.constructor.scopedElements),
-);
+import '@webcomponents/scoped-custom-element-registry';
 ```
 
-## CSS selectors
+If you're using `@web/rollup-plugin-polyfills-loader`, you can use it in your rollup config like this:
 
-Avoid tagname css selectors.
-We already avoid query selectors internally in lion, but just be aware that a selector like
-
-```css
-lion-input {
-  padding: 20px;
-}
+```js
+polyfillsLoader({
+  polyfills: {
+    scopedCustomElementRegistry: true,
+  },
+});
 ```
 
-will stop working.
+If you're using `@web/dev-server` for local development, you can use the `@web/dev-server-polyfill` plugin:
+
+```js
+polyfill({
+  scopedCustomElementRegistry: true,
+});
+```
 
 ## Edge cases
 
@@ -91,12 +95,12 @@ In a less complex case, we might just want to add a child node to the dom.
 
 ```js
 import { LitElement  } from 'lit';
-import { ScopedElementsMixin, getScopedTagName } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 
 ...
 
 __getLightDomNode() {
-  return document.createElement(getScopedTagName('lion-input', this.constructor.scopedElements));
+  return document.createElement('lion-input', this.constructor.scopedElements);
 }
 ```