feat: update badge to use custom states (#31733)

microsoft · Jun 17, 2024 · 5f1feb5 · 5f1feb5
1 parent 41835e7
commit 5f1feb5
Show file tree

Hide file tree

Showing 7 changed files with 296 additions and 53 deletions.
diff --git a/change/@fluentui-web-components-ff673af3-b066-47c9-aea7-37e4558d7ace.json b/change/@fluentui-web-components-ff673af3-b066-47c9-aea7-37e4558d7ace.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update badge to use element internals custom states",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
@@ -9,22 +9,23 @@ import {
   badgeTintStyles,
 } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
+import { extraSmallState, roundedState, smallState, squareState, tinyState } from '../styles/states/index.js';
 // why is the border not showing up?
 /** Badge styles
  * @public
  */
 export const styles = css`
-  :host([shape='square']) {
+  :host(${squareState}) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host([shape='rounded']) {
+  :host(${roundedState}) {
     border-radius: ${borderRadiusMedium};
   }
 
-  :host([shape='rounded'][size='tiny']),
-  :host([shape='rounded'][size='extra-small']),
-  :host([shape='rounded'][size='small']) {
+  :host(${roundedState}${tinyState}),
+  :host(${roundedState}${extraSmallState}),
+  :host(${roundedState}${smallState}) {
     border-radius: ${borderRadiusSmall};
   }
 

diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
@@ -2,13 +2,21 @@ import { attr, FASTElement } from '@microsoft/fast-element';
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
+import { toggleState } from '../utils/element-internals.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
  */
 export class Badge extends FASTElement {
+  /**
+   * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  public elementInternals: ElementInternals = this.attachInternals();
+
   /**
    * The appearance the badge should have.
    *
@@ -19,6 +27,20 @@ export class Badge extends FASTElement {
   @attr
   public appearance: BadgeAppearance = BadgeAppearance.filled;
 
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public appearanceChanged(prev: BadgeAppearance | undefined, next: BadgeAppearance | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The color the badge should have.
    *
@@ -28,6 +50,21 @@ export class Badge extends FASTElement {
    */
   @attr
   public color: BadgeColor = BadgeColor.brand;
+
+  /**
+   * Handles changes to color attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public colorChanged(prev: BadgeColor | undefined, next: BadgeColor | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The shape the badge should have.
    *
@@ -38,6 +75,20 @@ export class Badge extends FASTElement {
   @attr
   public shape?: BadgeShape;
 
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public shapeChanged(prev: BadgeShape | undefined, next: BadgeShape | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The size the badge should have.
    *
@@ -47,6 +98,20 @@ export class Badge extends FASTElement {
    */
   @attr
   public size?: BadgeSize;
+
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public sizeChanged(prev: BadgeSize | undefined, next: BadgeSize | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
 }
 
 /**

diff --git a/packages/web-components/src/counter-badge/counter-badge.styles.ts b/packages/web-components/src/counter-badge/counter-badge.styles.ts
@@ -1,18 +1,25 @@
 import { css } from '@microsoft/fast-element';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
+import { extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
+
+/**
+ * Selector for the `dot` state.
+ * @public
+ */
+const dotState = css.partial`:is([state--dot], :state(dot))`;
 
 /** Badge styles
  * @public
  */
 export const styles = css`
-  :host([shape='rounded']) {
+  :host(${roundedState}) {
     border-radius: ${borderRadiusMedium};
   }
 
-  :host([shape='rounded'][size='tiny']),
-  :host([shape='rounded'][size='extra-small']),
-  :host([shape='rounded'][size='small']) {
+  :host(${roundedState}${tinyState}),
+  :host(${roundedState}${extraSmallState}),
+  :host(${roundedState}${smallState}) {
     border-radius: ${borderRadiusSmall};
   }
 
@@ -21,8 +28,8 @@ export const styles = css`
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host([dot]),
-  :host([dot][appearance][size]) {
+  :host(${dotState}),
+  :host(${dotState}[appearance][size]) {
     min-width: auto;
     width: 6px;
     height: 6px;

diff --git a/packages/web-components/src/counter-badge/counter-badge.ts b/packages/web-components/src/counter-badge/counter-badge.ts
@@ -2,6 +2,7 @@ import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-elem
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
+import { toggleState } from '../utils/element-internals.js';
 import {
   CounterBadgeAppearance,
   CounterBadgeColor,
@@ -14,6 +15,13 @@ import {
  * @public
  */
 export class CounterBadge extends FASTElement {
+  /**
+   * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  public elementInternals: ElementInternals = this.attachInternals();
+
   /**
    * The appearance the badge should have.
    *
@@ -24,6 +32,20 @@ export class CounterBadge extends FASTElement {
   @attr
   public appearance?: CounterBadgeAppearance;
 
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public appearanceChanged(prev: CounterBadgeAppearance | undefined, next: CounterBadgeAppearance | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The color the badge should have.
    *
@@ -33,6 +55,21 @@ export class CounterBadge extends FASTElement {
    */
   @attr
   public color?: CounterBadgeColor;
+
+  /**
+   * Handles changes to color attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public colorChanged(prev: CounterBadgeColor | undefined, next: CounterBadgeColor | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The shape the badge should have.
    *
@@ -43,6 +80,20 @@ export class CounterBadge extends FASTElement {
   @attr
   public shape?: CounterBadgeShape;
 
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public shapeChanged(prev: CounterBadgeShape | undefined, next: CounterBadgeShape | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The size the badge should have.
    *
@@ -53,6 +104,20 @@ export class CounterBadge extends FASTElement {
   @attr
   public size?: CounterBadgeSize;
 
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public sizeChanged(prev: CounterBadgeSize | undefined, next: CounterBadgeSize | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * The count the badge should have.
    *
@@ -99,6 +164,15 @@ export class CounterBadge extends FASTElement {
   @attr({ mode: 'boolean' })
   public dot: boolean = false;
 
+  /**
+   * Handles changes to dot attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public dotChanged(prev: boolean | undefined, next: boolean | undefined) {
+    toggleState(this.elementInternals, 'dot', !!next);
+  }
+
   /**
    * @internal
    * Function to set the count