@lion/ui 0.21.1-menu-system.0 → 0.22.0

package/components/button/src/LionButton.js

@@ -220,8 +220,4 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
-
-  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
-  // so we use a static property for that that doesn't get renamed by minifiers
-  static ['_$isLionButton$'] = true;
 }

package/components/form/test/lion-form.test.js

@@ -222,10 +222,11 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
+    expect(el.getAttribute('aria-invalid')).to.equal('false');
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(el.formElements[1]._inputNode)).to.be.true;
   });
@@ -247,7 +248,7 @@ describe('<lion-form>', () => {
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(fieldset.formElements[1]._inputNode)).to.be.true;
@@ -268,7 +269,7 @@ describe('<lion-form>', () => {
     const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     expect(isActiveElement(fieldset.formElements[0]._inputNode)).to.be.true;
   });

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -15,6 +15,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @typedef {import('../../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {import('../../types/registration/FormRegisteringMixinTypes.js').FormRegisteringHost} FormRegisteringHost
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes.js').ElementWithParentFormGroup} ElementWithParentFormGroup
+ * @typedef {import('../../types/InteractionStateMixinTypes.js').InteractionStates} InteractionStates
  */
 
 /**
@@ -322,6 +323,42 @@ const FormGroupMixinImplementation = /** @type {FormGroupMixin} */ (superclass =
       });
     }
 
+    /**
+     * @override ValidateMixin
+     * Show the validity feedback when one of the following conditions is met:
+     *
+     * - submitted
+     *   If the form is submitted, always show the error message.
+     *
+     * - prefilled
+     *   all form elements already had a value when the group was initially rendered.
+     *
+     * - touched && dirty
+     *   When a user has changed the value of (one of) the form elements (making it dirty)
+     *   and then leaves the group as a whole (making it touched), an error message should
+     *   be shown. Before that, the group is considered 'invalid, but not yet interacting'.
+     * @protected
+     * @param {string} type
+     * @param {InteractionStates} meta
+     */
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _showFeedbackConditionFor(type, meta) {
+      return (meta.touched && meta.dirty) || meta.prefilled || meta.submitted;
+    }
+
+    /**
+     * @enhance ValidateMixin
+     */
+    get _feedbackConditionMeta() {
+      return {
+        ...super._feedbackConditionMeta,
+        submitted: this.submitted,
+        touched: this.touched,
+        dirty: this.dirty,
+        prefilled: this.prefilled,
+      };
+    }
+
     /**
      * A filter function which will exclude a form field when returning false
      * By default, exclude form fields which are disabled

package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -596,6 +596,31 @@ export function runFormGroupMixinSuite(cfg = {}) {
         expect(el.validationStates.error.Required).to.be.true;
       });
 
+      it('does not show error feedback (nor aria-invalid) for invalid children before interaction', async () => {
+        const el = /**  @type {FormGroup} */ (
+          await fixture(html`
+        <${tag}>
+          <${childTag} name="myField" .validators=${[new Required()]}></${childTag}>
+        </${tag}>
+      `)
+        );
+        await el.updateComplete;
+        await el.feedbackComplete;
+
+        // the group itself is already invalid, but its error feedback should not be
+        // visible before the user interacted with the group
+        expect(el.hasFeedbackFor).to.deep.equal(['error']);
+        expect(el.showsFeedbackFor).to.deep.equal([]);
+        expect(el.getAttribute('aria-invalid')).to.equal('false');
+
+        // after interaction, feedback becomes visible
+        el.submitGroup();
+        await el.updateComplete;
+        await el.feedbackComplete;
+        expect(el.showsFeedbackFor).to.deep.equal(['error']);
+        expect(el.getAttribute('aria-invalid')).to.equal('true');
+      });
+
       it('validates on children (de)registration', async () => {
         class HasEvenNumberOfChildren extends Validator {
           static get validatorName() {

package/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -460,9 +460,9 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   _initModelValueBasedOnDropdown() {
     const { currency, amount } = this._initialModelValue || {};
-    if (!currency && !amount && !this.dirty) {
+    if (!currency && !this.dirty) {
       this.__initializedCurrencyCode = this.currency;
-      this._initialModelValue = { currency: this.currency };
+      this._initialModelValue = { currency: this.currency, amount };
       this.modelValue = this._initialModelValue;
       this.initInteractionState();
     }

package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js

@@ -15,9 +15,18 @@ describe('<lion-input-amount-dropdown> integrations', () => {
       }
       return !toggleValue ? { amount: 123, currency: 'EUR' } : { amount: 456, currency: 'EUR' };
     },
-    getExpectedInitialModelValue: el => ({ currency: /** @type {any} */ (el).currency }),
-    getExpectedInitialFormattedValue: el => ({ currency: /** @type {any} */ (el).currency }),
-    getExpectedInitialSerializedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialModelValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
+    getExpectedInitialFormattedValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
+    getExpectedInitialSerializedValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
     getExpectedModelValueForEmptyInputNode: el => ({
       currency: /** @type {any} */ (el).currency,
       amount: '',

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -53,7 +53,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
         'GBP',
       );
-      expect(el.modelValue).to.eql({ currency: 'GBP' });
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: '' });
     });
 
     it('syncs value of dropdown on reset if input has no value', async () => {
@@ -62,7 +62,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       await el.updateComplete;
       el.reset();
       await el.updateComplete;
-      expect(el.modelValue).to.eql({ currency: 'GBP' });
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: '' });
       expect(el.value).to.equal('');
     });
 
@@ -89,7 +89,13 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       const el = await fixture(html` <${tag}
           .preferredCurrencies="${['JPY', 'EUR']}"
           ></${tag}> `);
-      expect(el.modelValue).to.eql({ currency: 'JPY' });
+      expect(el.modelValue).to.eql({ currency: 'JPY', amount: '' });
+    });
+
+    it('derives currency when modelValue only has an amount', async () => {
+      const el = await fixture(html` <${tag} .modelValue="${{ amount: 123 }}" ></${tag}> `);
+      expect(el.currency).to.equal('GBP');
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: 123 });
     });
 
     it('sets correct interaction states on init if input has a value', async () => {
@@ -262,6 +268,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
         );
         expect(el.modelValue).to.eql({
           currency: 'GBP',
+          amount: '',
         });
       });