Merge branch 'next' into scroller-fix

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;

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;

packages/webawesome/docs/docs/resources/changelog.md

@@ -13,16 +13,17 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
-- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
 - Fixed a z-index bug in `<wa-scroller>` styles [issue:1724]
+- Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
+- Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
+- Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
 - Improved performance of `<wa-icon>` 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]
-  - `<wa-badge>`
   - `<wa-button>`
   - `<wa-callout>`
   - `<wa-card>`

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('<wa-dropdown>', () => {
   it('should render a component', async () => {
@@ -6,4 +8,112 @@ describe('<wa-dropdown>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should respect the open attribute when included', async () => {
+    const el = await fixture<WaDropdown>(html`
+      <wa-dropdown open>
+        <wa-button slot="trigger">Dropdown</wa-button>
+        <wa-dropdown-item>One</wa-dropdown-item>
+      </wa-dropdown>
+    `);
+
+    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<WaDropdown>(html`
+      <wa-dropdown>
+        <wa-button slot="trigger">Dropdown</wa-button>
+        <wa-dropdown-item>One</wa-dropdown-item>
+        <wa-dropdown-item>Two</wa-dropdown-item>
+      </wa-dropdown>
+    `);
+
+    // 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<HTMLElement>('[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<WaDropdown>(html`
+      <wa-dropdown>
+        <wa-button slot="trigger">Dropdown</wa-button>
+        <wa-dropdown-item>One</wa-dropdown-item>
+        <wa-dropdown-item>Two</wa-dropdown-item>
+      </wa-dropdown>
+    `);
+
+    // 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<HTMLElement>('[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;
+  });
 });

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

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 */

packages/webawesome/src/components/icon/icon.ts

@@ -249,7 +249,7 @@ export default class WaIcon extends WebAwesomeElement {
       return this.svg;
     }
 
-    return html`<svg part="svg" fill="currentColor" width="16" height="16"></svg>`;
+    return html`<svg part="svg" width="16" height="16"></svg>`;
   }
 }
 

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),

packages/webawesome/src/components/select/select.ts

@@ -119,7 +119,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @state() optionValues: Set<string | null> | 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;
 

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;
 }
 

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` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
+                () => html`
+                  <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
+                `,
               )}
-              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>
             <slot class="expand-icon-slot" name="collapse-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>