diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 914a77783..7ceba5c9a 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -38,7 +38,7 @@ wa-page > [slot='banner'] { } &.banner-wa-launch { - /* custom brand colors carrried over from theme-site for the banner */ + /* custom brand colors carried over from theme-site for the banner */ --wa-color-brand-95: #fef0ec; --wa-color-brand-90: #fce0d8; --wa-color-brand-80: #f8bcac; diff --git a/packages/webawesome/docs/assets/styles/search.css b/packages/webawesome/docs/assets/styles/search.css index 8e0f37771..a40834b07 100644 --- a/packages/webawesome/docs/assets/styles/search.css +++ b/packages/webawesome/docs/assets/styles/search.css @@ -5,7 +5,6 @@ border-radius: var(--wa-border-radius-l); padding: 0; margin: 0 auto; - overflow: hidden; &::part(dialog) { margin-block-start: 10vh; diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index e1ae4c7fc..513432106 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -13,16 +13,17 @@ Components with the Experimental badge sh ## Next -- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `` [issue:1671] - Fixed a bug in `` that caused some touch devices to end up with the incorrect value [issue:1703] - Fixed a bug in `` that prevented some slots from being detected correctly [discuss:1450] - Fixed a z-index bug in `` styles [issue:1724] +- Fixed a bug in `` that caused some icon libraries to render with the incorrect SVG fill [issue:1733] +- Fixed a bug in `` that caused the spinner to not show when lazy loading [issue:1678] +- Fixed a bug in `` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483] - Improved performance of `` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] ## 3.0.0 - 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127] - - `` - `` - `` - `` diff --git a/packages/webawesome/src/components/dropdown/dropdown.test.ts b/packages/webawesome/src/components/dropdown/dropdown.test.ts index 0ec43f66a..f557189d8 100644 --- a/packages/webawesome/src/components/dropdown/dropdown.test.ts +++ b/packages/webawesome/src/components/dropdown/dropdown.test.ts @@ -1,4 +1,6 @@ -import { expect, fixture, html } from '@open-wc/testing'; +import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing'; +import sinon from 'sinon'; +import type WaDropdown from './dropdown.js'; describe('', () => { it('should render a component', async () => { @@ -6,4 +8,112 @@ describe('', () => { expect(el).to.exist; }); + + it('should respect the open attribute when included', async () => { + const el = await fixture(html` + + Dropdown + One + + `); + + await el.updateComplete; + await aTimeout(200); + + expect(el.open).to.be.true; + }); + + it('should fire a single show/after-show and hide/after-hide in normal open/close flow', async () => { + const el = await fixture(html` + + Dropdown + One + Two + + `); + + // setup spies to track how often we see different show/hide events + const showSpy = sinon.spy(); + const afterShowSpy = sinon.spy(); + const hideSpy = sinon.spy(); + const afterHideSpy = sinon.spy(); + + el.addEventListener('wa-show', showSpy); + el.addEventListener('wa-after-show', afterShowSpy); + el.addEventListener('wa-hide', hideSpy); + el.addEventListener('wa-after-hide', afterHideSpy); + + // open the dropdown by triggering a click on the trigger + const trigger = el.querySelector('[slot="trigger"]')!; + trigger.click(); + + await waitUntil(() => showSpy.calledOnce); + await waitUntil(() => afterShowSpy.calledOnce); + + expect(showSpy.callCount).to.equal(1); + expect(afterShowSpy.callCount).to.equal(1); + + expect(el.open).to.be.true; + + // close the dropdown by clicking the trigger again + trigger.click(); + + await waitUntil(() => hideSpy.calledOnce); + await waitUntil(() => afterHideSpy.calledOnce); + + expect(hideSpy.callCount).to.equal(1); + expect(afterHideSpy.callCount).to.equal(1); + + expect(el.open).to.be.false; + }); + + it('should fire a single show/after-show and hide/after-hide when wa-hide event is cancelled', async () => { + const el = await fixture(html` + + Dropdown + One + Two + + `); + + // setup spies to track how often we see different show/hide events + const showSpy = sinon.spy(); + const afterShowSpy = sinon.spy(); + const hideSpy = sinon.spy(); + const afterHideSpy = sinon.spy(); + + el.addEventListener('wa-show', showSpy); + el.addEventListener('wa-after-show', afterShowSpy); + + // Intercept wa-hide and prevent it + el.addEventListener('wa-hide', event => { + event.preventDefault(); + hideSpy(event); + }); + + el.addEventListener('wa-after-hide', afterHideSpy); + + // open the dropdown by triggering a click on the trigger + const trigger = el.querySelector('[slot="trigger"]')!; + trigger.click(); + + await waitUntil(() => showSpy.calledOnce); + await waitUntil(() => afterShowSpy.calledOnce); + + expect(showSpy.callCount).to.equal(1); + expect(afterShowSpy.callCount).to.equal(1); + + expect(el.open).to.be.true; + + // click on the trigger (which should do nothing to the open state) + trigger.click(); + + await waitUntil(() => hideSpy.calledOnce); + + expect(hideSpy.callCount).to.equal(1); + // after-hide should not have been called if hide is cancelled + expect(afterHideSpy.callCount).to.equal(0); + + expect(el.open).to.be.true; + }); }); diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts index 2b21643d0..a8d03f4fc 100644 --- a/packages/webawesome/src/components/dropdown/dropdown.ts +++ b/packages/webawesome/src/components/dropdown/dropdown.ts @@ -109,6 +109,18 @@ export default class WaDropdown extends WebAwesomeElement { async updated(changedProperties: PropertyValues) { if (changedProperties.has('open')) { + const previousOpen = changedProperties.get('open'); + // check if the previous value is the same + // (if they are, do not trigger menu showing / hiding) + if (previousOpen === this.open) { + return; + } + // check if we are changing from undefined to false + // (if we are, we can skip menu hiding) + if (previousOpen === undefined && this.open === false) { + return; + } + this.customStates.set('open', this.open); if (this.open) { @@ -227,6 +239,12 @@ export default class WaDropdown extends WebAwesomeElement { return; } + // if this dropdown is already open, do nothing + // (this can happen when wa-hide was cancelled) + if (this.popup.active) { + return; + } + openDropdowns.forEach(dropdown => (dropdown.open = false)); this.popup.active = true; // Use wa-popup's active property instead of showPopover diff --git a/packages/webawesome/src/components/icon/icon.css b/packages/webawesome/src/components/icon/icon.css index bac395ab3..9a90c004f 100644 --- a/packages/webawesome/src/components/icon/icon.css +++ b/packages/webawesome/src/components/icon/icon.css @@ -25,7 +25,6 @@ svg { height: 1em; - fill: currentColor; overflow: visible; /* Duotone colors with path-specific opacity fallback */ diff --git a/packages/webawesome/src/components/icon/icon.ts b/packages/webawesome/src/components/icon/icon.ts index d9e8d9760..b30ac07f6 100644 --- a/packages/webawesome/src/components/icon/icon.ts +++ b/packages/webawesome/src/components/icon/icon.ts @@ -249,7 +249,7 @@ export default class WaIcon extends WebAwesomeElement { return this.svg; } - return html``; + return html``; } } diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css index a01654461..6318fb590 100644 --- a/packages/webawesome/src/components/select/select.css +++ b/packages/webawesome/src/components/select/select.css @@ -74,7 +74,6 @@ padding: 0 var(--wa-form-control-padding-inline); position: relative; vertical-align: middle; - width: 100%; transition: background-color var(--wa-transition-normal), border var(--wa-transition-normal), diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts index cfedcdd6d..2e1459e1c 100644 --- a/packages/webawesome/src/components/select/select.ts +++ b/packages/webawesome/src/components/select/select.ts @@ -119,7 +119,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { @state() optionValues: Set | undefined; /** The name of the select, submitted as a name/value pair with form data. */ - @property() name = ''; + @property({ reflect: true }) name = ''; private _defaultValue: null | string | string[] = null; diff --git a/packages/webawesome/src/components/tree-item/tree-item.css b/packages/webawesome/src/components/tree-item/tree-item.css index 11b3c9bb8..a34ed4d3d 100644 --- a/packages/webawesome/src/components/tree-item/tree-item.css +++ b/packages/webawesome/src/components/tree-item/tree-item.css @@ -73,12 +73,16 @@ slot:not([name])::slotted(wa-icon) { rotate: -90deg; } -.tree-item-expanded slot[name='expand-icon'], +.tree-item-expanded:not(.tree-item-loading) slot[name='expand-icon'], .tree-item:not(.tree-item-expanded) slot[name='collapse-icon'] { display: none; } -.tree-item:not(.tree-item-has-expand-button) .expand-icon-slot { +.tree-item:not(.tree-item-has-expand-button):not(.tree-item-loading) .expand-icon-slot { + display: none; +} + +.tree-item-loading .expand-icon-slot wa-icon { display: none; } diff --git a/packages/webawesome/src/components/tree-item/tree-item.ts b/packages/webawesome/src/components/tree-item/tree-item.ts index 5c96b5629..dc15888d6 100644 --- a/packages/webawesome/src/components/tree-item/tree-item.ts +++ b/packages/webawesome/src/components/tree-item/tree-item.ts @@ -254,6 +254,7 @@ export default class WaTreeItem extends WebAwesomeElement { 'tree-item-expanded': this.expanded, 'tree-item-selected': this.selected, 'tree-item-leaf': this.isLeaf, + 'tree-item-loading': this.loading, 'tree-item-has-expand-button': showExpandButton, })}" > @@ -272,8 +273,10 @@ export default class WaTreeItem extends WebAwesomeElement { ${when( this.loading, () => html` `, + () => html` + + `, )} -