chore(labs): add helper factories for component directives

asyncliz · copybara-github · commit 92883af72261 · 2026-04-16T13:08:56.000-07:00
PiperOrigin-RevId: 900872331
diff --git a/labs/gb/components/button/button.ts b/labs/gb/components/button/button.ts
@@ -13,14 +13,9 @@ import {
   rippleClasses,
   setupRipple,
 } from '@material/web/labs/gb/components/ripple/ripple.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
 import {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import {
-  AsyncDirective,
-  AttributePart,
-  directive,
-  DirectiveParameters,
-} from 'lit/async-directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Button color configuration types. */
 export type ButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
@@ -168,48 +163,6 @@ export function setupButton(
   );
 }
 
-/** The state provided to the `button()` directive. */
-export interface ButtonDirectiveState extends ButtonClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class ButtonDirective extends AsyncDirective {
-  private element?: HTMLElement;
-  private cleanup?: AbortController;
-
-  render(state: ButtonDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...buttonClasses(state),
-    });
-  }
-
-  override update(
-    {element}: AttributePart,
-    [state]: DirectiveParameters<this>,
-  ) {
-    if (this.isConnected && element !== this.element) {
-      this.element = element as HTMLElement;
-      this.disconnected();
-      this.reconnected();
-    }
-
-    return this.render(state);
-  }
-
-  protected override disconnected() {
-    this.cleanup?.abort();
-  }
-
-  protected override reconnected() {
-    if (this.element) {
-      this.cleanup = new AbortController();
-      setupButton(this.element, {signal: this.cleanup.signal});
-    }
-  }
-}
-
 /**
  * A Lit directive that adds button styling and functionality to its element.
  *
@@ -218,4 +171,7 @@ class ButtonDirective extends AsyncDirective {
  * html`<button class="${button({color: 'filled'})}">Filled</button>`;
  * ```
  */
-export const button = directive(ButtonDirective);
+export const button = createClassMapDirective({
+  getClasses: buttonClasses,
+  setupElement: setupButton,
+});
diff --git a/labs/gb/components/card/card.ts b/labs/gb/components/card/card.ts
@@ -5,9 +5,9 @@
  */
 
 import {FOCUS_RING_CLASSES} from '@material/web/labs/gb/components/focus/focus-ring.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
 import {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import {Directive, directive} from 'lit/directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Card color configuration types. */
 export type CardColor = 'elevated' | 'filled' | 'outlined';
@@ -69,21 +69,6 @@ export function cardClasses({
   };
 }
 
-/** The state provided to the `card()` directive. */
-export interface CardDirectiveState extends CardClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class CardDirective extends Directive {
-  render(state: CardDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...cardClasses(state),
-    });
-  }
-}
-
 /**
  * A Lit directive that adds card styling and functionality to its element.
  *
@@ -96,4 +81,6 @@ class CardDirective extends Directive {
  * `
  * ```
  */
-export const card = directive(CardDirective);
+export const card = createClassMapDirective({
+  getClasses: cardClasses,
+});
diff --git a/labs/gb/components/checkbox/checkbox.ts b/labs/gb/components/checkbox/checkbox.ts
@@ -9,14 +9,9 @@ import {
   rippleClasses,
   setupRipple,
 } from '@material/web/labs/gb/components/ripple/ripple.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
 import {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import {
-  AsyncDirective,
-  AttributePart,
-  directive,
-  DirectiveParameters,
-} from 'lit/async-directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Checkbox classes. */
 export const CHECKBOX_CLASSES = {
@@ -90,48 +85,6 @@ export function setupCheckbox(
   setupRipple(checkbox, opts);
 }
 
-/** The state provided to the `checkbox()` directive. */
-export interface CheckboxDirectiveState extends CheckboxClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class CheckboxDirective extends AsyncDirective {
-  private element?: HTMLElement;
-  private cleanup?: AbortController;
-
-  render(state: CheckboxDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...checkboxClasses(state),
-    });
-  }
-
-  override update(
-    {element}: AttributePart,
-    [state]: DirectiveParameters<this>,
-  ) {
-    if (this.isConnected && element !== this.element) {
-      this.element = element as HTMLElement;
-      this.disconnected();
-      this.reconnected();
-    }
-
-    return this.render(state);
-  }
-
-  protected override disconnected() {
-    this.cleanup?.abort();
-  }
-
-  protected override reconnected() {
-    if (this.element) {
-      this.cleanup = new AbortController();
-      setupCheckbox(this.element, {signal: this.cleanup.signal});
-    }
-  }
-}
-
 /**
  * A Lit directive that adds checkbox styling and functionality to its element.
  *
@@ -140,4 +93,7 @@ class CheckboxDirective extends AsyncDirective {
  * html`<input type="checkbox" class="${checkbox()}">`;
  * ```
  */
-export const checkbox = directive(CheckboxDirective);
+export const checkbox = createClassMapDirective({
+  getClasses: checkboxClasses,
+  setupElement: setupCheckbox,
+});
diff --git a/labs/gb/components/divider/divider.ts b/labs/gb/components/divider/divider.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Directive, directive} from 'lit/directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Divider classes. */
 export const DIVIDER_CLASSES = {
@@ -34,21 +34,6 @@ export function dividerClasses({
   };
 }
 
-/** The state provided to the `divider()` directive. */
-export interface DividerDirectiveState extends DividerClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class DividerDirective extends Directive {
-  render(state: DividerDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...dividerClasses(state),
-    });
-  }
-}
-
 /**
  * A Lit directive that adds divider styling to its element.
  *
@@ -69,4 +54,6 @@ class DividerDirective extends Directive {
  * `;
  * ```
  */
-export const divider = directive(DividerDirective);
+export const divider = createClassMapDirective({
+  getClasses: dividerClasses,
+});
diff --git a/labs/gb/components/fab/fab.ts b/labs/gb/components/fab/fab.ts
@@ -9,14 +9,9 @@ import {
   rippleClasses,
   setupRipple,
 } from '@material/web/labs/gb/components/ripple/ripple.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
 import {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import {
-  AsyncDirective,
-  AttributePart,
-  directive,
-  DirectiveParameters,
-} from 'lit/async-directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Fab color configuration types. */
 export type FabColor =
@@ -118,48 +113,6 @@ export function setupFab(
   setupRipple(fab, opts);
 }
 
-/** The state provided to the `fab()` directive. */
-export interface FabDirectiveState extends FabClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class FabDirective extends AsyncDirective {
-  private element?: HTMLElement;
-  private cleanup?: AbortController;
-
-  render(state: FabDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...fabClasses(state),
-    });
-  }
-
-  override update(
-    {element}: AttributePart,
-    [state]: DirectiveParameters<this>,
-  ) {
-    if (this.isConnected && element !== this.element) {
-      this.element = element as HTMLElement;
-      this.disconnected();
-      this.reconnected();
-    }
-
-    return this.render(state);
-  }
-
-  protected override disconnected() {
-    this.cleanup?.abort();
-  }
-
-  protected override reconnected() {
-    if (this.element) {
-      this.cleanup = new AbortController();
-      setupFab(this.element, {signal: this.cleanup.signal});
-    }
-  }
-}
-
 /**
  * A Lit directive that adds fab styling and functionality to its element.
  *
@@ -177,4 +130,7 @@ class FabDirective extends AsyncDirective {
  * `;
  * ```
  */
-export const fab = directive(FabDirective);
+export const fab = createClassMapDirective({
+  getClasses: fabClasses,
+  setupElement: setupFab,
+});
diff --git a/labs/gb/components/radio/radio.ts b/labs/gb/components/radio/radio.ts
@@ -9,14 +9,9 @@ import {
   rippleClasses,
   setupRipple,
 } from '@material/web/labs/gb/components/ripple/ripple.js';
+import {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';
 import {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import {
-  AttributePart,
-  Directive,
-  directive,
-  DirectiveParameters,
-} from 'lit/async-directive.js';
-import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+import {type ClassInfo} from 'lit/directives/class-map.js';
 
 /** Radio classes. */
 export const RADIO_CLASSES = {
@@ -80,38 +75,6 @@ export function setupRadio(
   setupRipple(radio, opts);
 }
 
-/** The state provided to the `radio()` directive. */
-export interface RadioDirectiveState extends RadioClassesState {
-  /** Additional classes to apply to the element. */
-  classes?: ClassInfo;
-}
-
-class RadioDirective extends Directive {
-  private element?: HTMLElement;
-  private cleanup?: AbortController;
-
-  render(state: RadioDirectiveState = {}) {
-    return classMap({
-      ...(state.classes || {}),
-      ...radioClasses(state),
-    });
-  }
-
-  override update(
-    {element}: AttributePart,
-    [state]: DirectiveParameters<this>,
-  ) {
-    if (element !== this.element) {
-      this.element = element as HTMLElement;
-      this.cleanup?.abort();
-      this.cleanup = new AbortController();
-      setupRadio(this.element, {signal: this.cleanup.signal});
-    }
-
-    return this.render(state);
-  }
-}
-
 /**
  * A Lit directive that adds radio styling and functionality to its element.
  *
@@ -124,4 +87,7 @@ class RadioDirective extends Directive {
  * `;
  * ```
  */
-export const radio = directive(RadioDirective);
+export const radio = createClassMapDirective({
+  getClasses: radioClasses,
+  setupElement: setupRadio,
+});
diff --git a/labs/gb/components/ripple/ripple.ts b/labs/gb/components/ripple/ripple.ts
diff --git a/labs/gb/components/shared/directives.ts b/labs/gb/components/shared/directives.ts
diff --git a/labs/gb/components/shared/directives_test.ts b/labs/gb/components/shared/directives_test.ts
