backport 2015

docs/docs/components/breadcrumb.md

@@ -98,7 +98,29 @@ Use the `suffix` slot to add content after any breadcrumb item.
 
 ### With Dropdowns
 
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
+Dropdown menus can be placed in the default slot to provide additional options.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
+    <wa-dropdown>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
+        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
+      </wa-button>
+      <wa-menu>
+        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+      </wa-menu>
+    </wa-dropdown>
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+Alternatively, you can place dropdown menus in a prefix or suffix slot.
 
 ```html {.example}
 <wa-breadcrumb>

src/components/breadcrumb-item/breadcrumb-item.test.ts

@@ -145,4 +145,28 @@ describe('<wa-breadcrumb-item>', () => {
       expect(childNodes.length).to.eq(1);
     });
   });
+
+  describe('when rendering a wa-dropdown in the default slot', () => {
+    it('should not render a link or button tag, but a div wrapper', async () => {
+      el = await fixture<WaBreadcrumbItem>(html`
+        <wa-breadcrumb-item>
+          <wa-dropdown>
+            <wa-button slot="trigger" size="small" circle>
+              <wa-icon label="More options" name="ellipsis"></wa-icon>
+            </wa-button>
+            <wa-menu>
+              <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+              <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+              <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
+        </wa-breadcrumb-item>
+      `);
+
+      await expect(el).to.be.accessible();
+      expect(el.shadowRoot!.querySelector('a')).to.be.null;
+      expect(el.shadowRoot!.querySelector('button')).to.be.null;
+      expect(el.shadowRoot!.querySelector('div.breadcrumb-item__label--drop-down')).not.to.be.null;
+    });
+  });
 });

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -1,6 +1,7 @@
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './breadcrumb-item.styles.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -28,6 +29,10 @@ import type { CSSResultGroup } from 'lit';
 export default class WaBreadcrumbItem extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';
+
   /**
    * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
    * internally. When unset, a button will be rendered instead.
@@ -40,16 +45,41 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
   /** The `rel` attribute to use on the link. Only used when `href` is set. */
   @property() rel = 'noreferrer noopener';
 
-  render() {
-    const isLink = this.href ? true : false;
+  private setRenderType() {
+    const hasDropdown =
+      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'sl-dropdown')
+        .length > 0;
 
+    if (this.href) {
+      this.renderType = 'link';
+      return;
+    }
+
+    if (hasDropdown) {
+      this.renderType = 'dropdown';
+      return;
+    }
+
+    this.renderType = 'button';
+  }
+
+  @watch('href', { waitUntilFirstUpdate: true })
+  hrefChanged() {
+    this.setRenderType();
+  }
+
+  handleSlotChange() {
+    this.setRenderType();
+  }
+
+  render() {
     return html`
       <div part="base" class="breadcrumb-item">
         <span part="prefix" class="breadcrumb-item__prefix">
           <slot name="prefix"></slot>
         </span>
 
-        ${isLink
+        ${this.renderType === 'link'
           ? html`
               <a
                 part="label"
@@ -61,11 +91,21 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
                 <slot></slot>
               </a>
             `
-          : html`
+          : ''}
+        ${this.renderType === 'button'
+          ? html`
               <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
-                <slot></slot>
+                <slot @slotchange=${this.handleSlotChange}></slot>
               </button>
-            `}
+            `
+          : ''}
+        ${this.renderType === 'dropdown'
+          ? html`
+              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            `
+          : ''}
 
         <span part="suffix" class="breadcrumb-item__suffix">
           <slot name="suffix"></slot>

src/components/menu/menu.styles.ts

@@ -4,6 +4,7 @@ export default css`
   :host {
     display: block;
     position: relative;
+    text-align: start;
     background-color: var(--wa-color-surface-raised);
     border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
     border-radius: var(--wa-border-radius-s);