From bf782223a78cd3d4865a97f49f94a3b3b0ca9b3b Mon Sep 17 00:00:00 2001 From: Sergey Ilinsky Date: Mon, 27 Nov 2023 14:07:18 +0100 Subject: [PATCH] Fix/reuse UUID missing parent callback disabled property (#2090) * refactor: reuse uuid function from the core * fix: invoke parent class callback * fix: do not run disabled property reflection unless it was part of the changeset --- .changeset/khaki-months-ring.md | 5 +++++ .changeset/soft-wombats-dress.md | 5 +++++ .changeset/sweet-zebras-judge.md | 5 +++++ packages/ui/components/button/src/LionButton.js | 4 ++-- packages/ui/components/collapsible/src/LionCollapsible.js | 1 + packages/ui/components/drawer/src/LionDrawer.js | 1 + .../input-datepicker/src/LionInputDatepicker.js | 8 ++------ packages/ui/components/switch/src/LionSwitch.js | 4 +++- packages/ui/components/switch/src/LionSwitchButton.js | 1 + 9 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 .changeset/khaki-months-ring.md create mode 100644 .changeset/soft-wombats-dress.md create mode 100644 .changeset/sweet-zebras-judge.md diff --git a/.changeset/khaki-months-ring.md b/.changeset/khaki-months-ring.md new file mode 100644 index 000000000..0812d849f --- /dev/null +++ b/.changeset/khaki-months-ring.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +do not run disabled property reflection unless it was part of the changeset in LionSwitchButton diff --git a/.changeset/soft-wombats-dress.md b/.changeset/soft-wombats-dress.md new file mode 100644 index 000000000..0110dd282 --- /dev/null +++ b/.changeset/soft-wombats-dress.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +reuse uuid function from the core in LionButton and LionInputDatepicker diff --git a/.changeset/sweet-zebras-judge.md b/.changeset/sweet-zebras-judge.md new file mode 100644 index 000000000..e4a18a919 --- /dev/null +++ b/.changeset/sweet-zebras-judge.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +invoke parent class updated callback in LionCollapsible, LionDrawer and LionSwitchButton diff --git a/packages/ui/components/button/src/LionButton.js b/packages/ui/components/button/src/LionButton.js index 21338daf5..f5d28895c 100644 --- a/packages/ui/components/button/src/LionButton.js +++ b/packages/ui/components/button/src/LionButton.js @@ -1,5 +1,5 @@ import { html, LitElement, css } from 'lit'; -import { browserDetection, DisabledWithTabIndexMixin } from '@lion/ui/core.js'; +import { browserDetection, DisabledWithTabIndexMixin, uuid } from '@lion/ui/core.js'; const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter'; const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' '; @@ -124,7 +124,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) { this.type = 'button'; this.active = false; - this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`; + this._buttonId = uuid('button'); if (browserDetection.isIE11) { this.updateComplete.then(() => { if (!this.hasAttribute('aria-labelledby')) { diff --git a/packages/ui/components/collapsible/src/LionCollapsible.js b/packages/ui/components/collapsible/src/LionCollapsible.js index 7963af2a3..284a24023 100644 --- a/packages/ui/components/collapsible/src/LionCollapsible.js +++ b/packages/ui/components/collapsible/src/LionCollapsible.js @@ -68,6 +68,7 @@ export class LionCollapsible extends LitElement { * @param {import('lit').PropertyValues } changedProperties */ updated(changedProperties) { + super.updated(changedProperties); if (changedProperties.has('opened')) { this.__openedChanged(); } diff --git a/packages/ui/components/drawer/src/LionDrawer.js b/packages/ui/components/drawer/src/LionDrawer.js index 88e65a045..9cbf65924 100644 --- a/packages/ui/components/drawer/src/LionDrawer.js +++ b/packages/ui/components/drawer/src/LionDrawer.js @@ -53,6 +53,7 @@ export class LionDrawer extends LionCollapsible { * @param {import('lit').PropertyValues } changedProperties */ updated(changedProperties) { + super.updated(changedProperties); if (changedProperties.has('opened')) { this._openedChanged(); } diff --git a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js index 8a88b3d70..670a4ff60 100644 --- a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js +++ b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js @@ -1,5 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies */ import { LionCalendar } from '@lion/ui/calendar.js'; +import { uuid } from '@lion/ui/core.js'; import { ScopedElementsMixin } from '@open-wc/scoped-elements'; import { html, css } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -149,7 +150,7 @@ export class LionInputDatepicker extends ScopedElementsMixin( constructor() { super(); /** @private */ - this.__invokerId = this.__createUniqueIdForA11y(); + this.__invokerId = uuid(this.localName); /** @protected */ this._calendarInvokerSlot = 'suffix'; @@ -169,11 +170,6 @@ export class LionInputDatepicker extends ScopedElementsMixin( this._onCalendarUserSelectedChanged = this._onCalendarUserSelectedChanged.bind(this); } - /** @private */ - __createUniqueIdForA11y() { - return `${this.localName}-${Math.random().toString(36).substr(2, 10)}`; - } - /** * @param {string} [name] * @param {unknown} [oldValue] diff --git a/packages/ui/components/switch/src/LionSwitch.js b/packages/ui/components/switch/src/LionSwitch.js index d282b3938..5c7d3e7c7 100644 --- a/packages/ui/components/switch/src/LionSwitch.js +++ b/packages/ui/components/switch/src/LionSwitch.js @@ -100,7 +100,9 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) /** @param {import('lit').PropertyValues } changedProperties */ updated(changedProperties) { super.updated(changedProperties); - this._syncButtonSwitch(); + if (changedProperties.has('disabled')) { + this._syncButtonSwitch(); + } } /** diff --git a/packages/ui/components/switch/src/LionSwitchButton.js b/packages/ui/components/switch/src/LionSwitchButton.js index d6d6a2db2..7175668a5 100644 --- a/packages/ui/components/switch/src/LionSwitchButton.js +++ b/packages/ui/components/switch/src/LionSwitchButton.js @@ -142,6 +142,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) { /** @param {import('lit').PropertyValues } changedProperties */ updated(changedProperties) { + super.updated(changedProperties); if (changedProperties.has('disabled')) { this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places }