feat(labs): add container slot support for expressive button

PiperOrigin-RevId: 930091976

Author: material-web-copybara

labs/gb/components/button/md-button.ts

@@ -4,8 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {
+  css,
+  CSSResultOrNative,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../../../internal/events/redispatch-event.js';
@@ -17,6 +24,9 @@ import focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // git
 // import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
 import rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only
 // import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+
+import {hasSlotted} from '../shared/has-slotted.js';
+
 import buttonStyles from './button.css' with {type: 'css'}; // github-only
 // import buttonStyles from './button.cssresult.js'; // google3-only
 
@@ -52,13 +62,37 @@ export class Button extends baseClass {
     css`
       :host {
         display: inline-flex;
+        isolation: isolate;
       }
       .btn {
         flex: 1;
+        position: relative;
+      }
+      .btn:has([name='container'].has-slotted) {
+        background-color: transparent;
+      }
+      .btn.btn-hide-outline {
+        --outline-color: transparent;
+      }
+      slot[name='container'] {
+        display: block;
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        --color: var(--container-color);
+        z-index: -1;
+        transition: inherit;
+      }
+      slot[name='container']::slotted(*) {
+        width: 100%;
+        height: 100%;
       }
     `,
   ];
 
+  @state() private hideOutline = false;
+
   /**
    * The color of the button.
    */
@@ -129,13 +163,66 @@ export class Button extends baseClass {
    */
   @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
+  private lastFiredEnabledState?: boolean;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      'md-gb:set-show-outline',
+      this.handleSetShowOutline,
+    );
+  }
+
+  private readonly handleSetShowOutline = (event: Event) => {
+    const customEvent = event as CustomEvent<{shown: boolean}>;
+    this.hideOutline = !customEvent.detail.shown;
+  };
+
+  protected override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('softDisabled')
+    ) {
+      this.dispatchSetEnabledEvent();
+    }
+  }
+
+  private dispatchSetEnabledEvent() {
+    const enabled = !(this.disabled || this.softDisabled);
+
+    if (this.lastFiredEnabledState === enabled) return;
+
+    const slot = this.shadowRoot?.querySelector(
+      'slot[name="container"]',
+    ) as HTMLSlotElement;
+    if (slot) {
+      for (const element of slot.assignedElements({flatten: true})) {
+        element.dispatchEvent(
+          new CustomEvent('md-gb:set-enabled', {
+            detail: {enabled},
+          }),
+        );
+      }
+    }
+    this.lastFiredEnabledState = enabled;
+  }
+
   protected override render() {
     const classes = button({
       color: this.color,
       size: this.size,
       square: this.square,
       // Emulate `:disabled` when soft-disabled
       disabled: this.softDisabled,
+      classes: {
+        'btn-hide-outline': this.hideOutline,
+      },
     });
 
     // Needed for closure conformance
@@ -153,6 +240,10 @@ export class Button extends baseClass {
         aria-disabled=${this.disabled || this.softDisabled || nothing}
         tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
         <slot></slot>
+        <slot
+          name="container"
+          ${hasSlotted()}
+          @slotchange=${this.handleContainerSlotChange}></slot>
       </a>`;
     }
 
@@ -167,9 +258,28 @@ export class Button extends baseClass {
       aria-expanded=${ariaExpanded || nothing}
       @change=${this.handleChange}>
       <slot></slot>
+      <slot
+        name="container"
+        ${hasSlotted()}
+        @slotchange=${this.handleContainerSlotChange}></slot>
     </button>`;
   }
 
+  private handleContainerSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+
+    const enabled = !(this.disabled || this.softDisabled);
+
+    for (const element of slot.assignedElements({flatten: true})) {
+      element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));
+      element.dispatchEvent(
+        new CustomEvent('md-gb:set-enabled', {
+          detail: {enabled},
+        }),
+      );
+    }
+  }
+
   private handleChange(event: Event) {
     this.selected = (event.target as HTMLElement).ariaPressed === 'true';
     redispatchEvent(this, event);