chore(web-components): add hasMatchingState and swapStates functions (#…

…33156)
microsoft · Oct 30, 2024 · 36474e5 · 36474e5
1 parent 8614d04
commit 36474e5
Show file tree

Hide file tree

Showing 29 changed files with 199 additions and 375 deletions.
diff --git a/change/@fluentui-web-components-7bba75e2-576b-4e9f-821b-9501f016a3a6.json b/change/@fluentui-web-components-7bba75e2-576b-4e9f-821b-9501f016a3a6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add swapStates function for attribute-driven internal states",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -55,9 +55,9 @@ export class AccordionItem extends BaseAccordionItem {
     block: boolean;
     blockChanged(prev: boolean, next: boolean): void;
     markerPosition?: AccordionItemMarkerPosition;
-    markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
+    markerPositionChanged(prev: AccordionItemMarkerPosition | undefined, next: AccordionItemMarkerPosition | undefined): void;
     size?: AccordionItemSize;
-    sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
+    sizeChanged(prev: AccordionItemSize | undefined, next: AccordionItemSize | undefined): void;
 }
 
 // @internal
@@ -583,7 +583,7 @@ export class BaseDivider extends FASTElement {
     elementInternals: ElementInternals;
     orientation?: DividerOrientation;
     // @internal
-    orientationChanged(previous: string | null, next: string | null): void;
+    orientationChanged(previous: DividerRole | undefined, next: DividerRole | undefined): void;
     role: DividerRole;
     // @internal
     roleChanged(previous: string | null, next: string | null): void;
@@ -3268,7 +3268,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     mode: SliderMode;
     orientation?: Orientation;
     // (undocumented)
-    protected orientationChanged(prev: string | undefined, next: string | undefined): void;
+    protected orientationChanged(prev: Orientation | undefined, next: Orientation | undefined): void;
     // @internal (undocumented)
     position: string;
     reportValidity(): boolean;
@@ -3279,7 +3279,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     size?: SliderSize;
     // (undocumented)
-    protected sizeChanged(prev: string, next: string): void;
+    protected sizeChanged(prev: SliderSize | undefined, next: SliderSize | undefined): void;
     step: string;
     // (undocumented)
     protected stepChanged(): void;

diff --git a/packages/web-components/src/accordion-item/accordion-item.ts b/packages/web-components/src/accordion-item/accordion-item.ts
@@ -4,8 +4,8 @@ import type { StaticallyComposableHTML } from '../utils/index.js';
 import { StartEnd } from '../patterns/index.js';
 import type { StartEndOptions } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { toggleState } from '../utils/element-internals.js';
-import type { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
+import { swapStates, toggleState } from '../utils/element-internals.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 
 /**
  * Accordion Item configuration options
@@ -128,13 +128,8 @@ export class AccordionItem extends BaseAccordionItem {
    * @param prev - previous value
    * @param next - next value
    */
-  public sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+  public sizeChanged(prev: AccordionItemSize | undefined, next: AccordionItemSize | undefined) {
+    swapStates(this.elementInternals, prev, next, AccordionItemSize);
   }
 
   /**
@@ -152,13 +147,11 @@ export class AccordionItem extends BaseAccordionItem {
    * @param prev - previous value
    * @param next - next value
    */
-  public markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void {
-    if (prev) {
-      toggleState(this.elementInternals, `align-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `align-${next}`, true);
-    }
+  public markerPositionChanged(
+    prev: AccordionItemMarkerPosition | undefined,
+    next: AccordionItemMarkerPosition | undefined,
+  ) {
+    swapStates(this.elementInternals, prev, next, AccordionItemMarkerPosition, 'align-');
   }
 
   /**

diff --git a/packages/web-components/src/anchor-button/anchor-button.ts b/packages/web-components/src/anchor-button/anchor-button.ts
@@ -1,14 +1,14 @@
 import { attr, FASTElement, Observable } from '@microsoft/fast-element';
 import { keyEnter } from '@microsoft/fast-web-utilities';
-import { StartEnd } from '../patterns/index.js';
 import type { StartEndOptions } from '../patterns/index.js';
+import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { toggleState } from '../utils/element-internals.js';
+import { swapStates, toggleState } from '../utils/element-internals.js';
 import {
   AnchorAttributes,
-  type AnchorButtonAppearance,
-  type AnchorButtonShape,
-  type AnchorButtonSize,
+  AnchorButtonAppearance,
+  AnchorButtonShape,
+  AnchorButtonSize,
   type AnchorTarget,
 } from './anchor-button.options.js';
 
@@ -265,12 +265,7 @@ export class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   public appearanceChanged(prev: AnchorButtonAppearance | undefined, next: AnchorButtonAppearance | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonAppearance);
   }
 
   /**
@@ -289,12 +284,7 @@ export class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   public shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonShape);
   }
 
   /**
@@ -313,12 +303,7 @@ export class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   public sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonSize);
   }
 
   /**

diff --git a/packages/web-components/src/avatar/avatar.ts b/packages/web-components/src/avatar/avatar.ts
@@ -1,6 +1,6 @@
 import { attr, FASTElement, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { getInitials } from '../utils/get-initials.js';
-import { toggleState } from '../utils/element-internals.js';
+import { swapStates } from '../utils/element-internals.js';
 import {
   type AvatarActive,
   type AvatarAppearance,
@@ -130,7 +130,7 @@ export class Avatar extends BaseAvatar {
   /**
    * Holds the current color state
    */
-  private currentColor: string | undefined;
+  private currentColor: AvatarColor | undefined;
 
   /**
    * Handles changes to observable properties
@@ -177,16 +177,14 @@ export class Avatar extends BaseAvatar {
     const colorful: boolean = this.color === AvatarColor.colorful;
     const prev = this.currentColor;
 
-    toggleState(this.elementInternals, `${prev}`, false);
-
     this.currentColor =
       colorful && this.colorId
         ? this.colorId
         : colorful
         ? (Avatar.colors[getHashCode(this.name ?? '') % Avatar.colors.length] as AvatarColor)
         : this.color ?? AvatarColor.neutral;
 
-    toggleState(this.elementInternals, `${this.currentColor}`, true);
+    swapStates(this.elementInternals, prev, this.currentColor);
   }
 
   /**

diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
@@ -1,9 +1,8 @@
 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, type BadgeShape, type BadgeSize } from './badge.options.js';
+import { swapStates } 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
@@ -33,12 +32,7 @@ export class Badge extends FASTElement {
    * @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);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeAppearance);
   }
 
   /**
@@ -57,12 +51,7 @@ export class Badge extends FASTElement {
    * @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);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeColor);
   }
 
   /**
@@ -81,12 +70,7 @@ export class Badge extends FASTElement {
    * @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);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeShape);
   }
 
   /**
@@ -105,12 +89,7 @@ export class Badge extends FASTElement {
    * @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);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeSize);
   }
 }
 

diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
@@ -2,9 +2,8 @@ import { attr, FASTElement, nullableNumberConverter, observable } from '@microso
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { toggleState } from '../utils/element-internals.js';
-import type { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize } from './button.options.js';
-import { ButtonType } from './button.options.js';
+import { swapStates, toggleState } from '../utils/element-internals.js';
+import { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 
 /**
  * A Button Custom HTML Element.
@@ -447,12 +446,7 @@ export class Button extends BaseButton {
    * @param next - the next state
    */
   public appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonAppearance);
   }
 
   /**
@@ -471,12 +465,7 @@ export class Button extends BaseButton {
    * @param next - the next state
    */
   public shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonShape);
   }
 
   /**
@@ -495,12 +484,7 @@ export class Button extends BaseButton {
    * @param next - the next state
    */
   public sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonSize);
   }
 
   /**

diff --git a/packages/web-components/src/checkbox/checkbox.ts b/packages/web-components/src/checkbox/checkbox.ts
@@ -1,6 +1,6 @@
 import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
-import { toggleState } from '../utils/element-internals.js';
-import type { CheckboxShape, CheckboxSize } from './checkbox.options.js';
+import { swapStates, toggleState } from '../utils/element-internals.js';
+import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 
 /**
  * The base class for a component with a toggleable checked state.
@@ -515,12 +515,7 @@ export class Checkbox extends BaseCheckbox {
    * @internal
    */
   protected shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, CheckboxShape);
   }
 
   /**
@@ -541,12 +536,7 @@ export class Checkbox extends BaseCheckbox {
    * @internal
    */
   protected sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, CheckboxSize);
   }
 
   constructor() {

diff --git a/packages/web-components/src/counter-badge/counter-badge.spec.ts b/packages/web-components/src/counter-badge/counter-badge.spec.ts
@@ -174,7 +174,7 @@ test.describe('CounterBadge component', () => {
     await expect(element).toHaveJSProperty('dot', false);
   });
 
-  for (const shape in CounterBadgeShape) {
+  for (const shape of Object.values(CounterBadgeShape)) {
     test(`should set the \`shape\` property to "${shape}" when the attribute is set to "${shape}"`, async ({
       page,
     }) => {
@@ -192,7 +192,7 @@ test.describe('CounterBadge component', () => {
     });
   }
 
-  for (const color in CounterBadgeColor) {
+  for (const color of Object.values(CounterBadgeColor)) {
     test(`should set the \`color\` property to "${color}" when the attribute is set to "${color}"`, async ({
       page,
     }) => {
@@ -210,7 +210,7 @@ test.describe('CounterBadge component', () => {
     });
   }
 
-  for (const size in CounterBadgeSize) {
+  for (const size of Object.values(CounterBadgeSize)) {
     test(`should set the \`size\` property to "${size}" when the attribute is set to "${size}"`, async ({ page }) => {
       const element = page.locator('fluent-counter-badge');
 
@@ -226,7 +226,7 @@ test.describe('CounterBadge component', () => {
     });
   }
 
-  for (const appearance in CounterBadgeAppearance) {
+  for (const appearance of Object.values(CounterBadgeAppearance)) {
     test(`should set the \`appearance\` property to "${appearance}" when the attribute is set to "${appearance}"`, async ({
       page,
     }) => {