feat: update checkbox to use Element Internals custom states for pres…

…entational styles (#31756)

change/@fluentui-web-components-76101ff6-e6ee-43b5-8c67-f75bd0466480.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: update checkbox to use Element Internals custom states for presentational attributes",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -590,8 +590,10 @@ export type ButtonType = ValuesOf<typeof ButtonType>;
 //
 // @public (undocumented)
 export class Checkbox extends BaseCheckbox {
-    shape: CheckboxShape;
+    shape?: CheckboxShape;
+    shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     size?: CheckboxSize;
+    sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
 }
 
 // @public

packages/web-components/src/checkbox/checkbox.spec.ts

@@ -27,14 +27,36 @@ test.describe('Checkbox', () => {
     await expect(element).toHaveAttribute('shape', 'square');
   });
 
-  test('should set and retrieve the `size` property correctly', async ({ page }) => {
+  test('should add a custom state matching the `shape` attribute when provided', async ({ page }) => {
     const element = page.locator('fluent-checkbox');
 
     await page.setContent(/* html */ `
-        <fluent-checkbox size="small"></fluent-checkbox>
-    `);
+      <fluent-checkbox></fluent-checkbox>
+  `);
+
+    await element.evaluate((node: Checkbox) => {
+      node.shape = 'circular';
+    });
+
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(true);
+
+    await element.evaluate((node: Checkbox) => {
+      node.shape = 'square';
+    });
+
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false);
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(true);
+
+    await element.evaluate((node: Checkbox) => {
+      node.shape = undefined;
+    });
 
-    await expect(element).toHaveJSProperty('size', 'small');
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false);
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(false);
+  });
+
+  test('should set and retrieve the `size` property correctly', async ({ page }) => {
+    const element = page.locator('fluent-checkbox');
 
     await element.evaluate((node: Checkbox) => {
       node.size = 'medium';
@@ -49,6 +71,34 @@ test.describe('Checkbox', () => {
     await expect(element).toHaveJSProperty('size', 'large');
   });
 
+  test('should add a custom state matching the `size` attribute when provided', async ({ page }) => {
+    const element = page.locator('fluent-checkbox');
+
+    await page.setContent(/* html */ `
+      <fluent-checkbox></fluent-checkbox>
+  `);
+
+    await element.evaluate((node: Checkbox) => {
+      node.size = 'medium';
+    });
+
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(true);
+
+    await element.evaluate((node: Checkbox) => {
+      node.size = 'large';
+    });
+
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false);
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(true);
+
+    await element.evaluate((node: Checkbox) => {
+      node.size = undefined;
+    });
+
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false);
+    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(false);
+  });
+
   test('should have a role of `checkbox`', async ({ page }) => {
     const element = page.locator('fluent-checkbox');
 

packages/web-components/src/checkbox/checkbox.styles.ts

@@ -23,6 +23,7 @@ import {
 } from '../theme/design-tokens.js';
 import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
+import { circularState, largeState } from '../styles/states/index.js';
 
 /**
  * Selector for the `checked` state.
@@ -133,17 +134,17 @@ export const styles = css`
     inset: 0;
   }
 
-  :host([size='large']) {
+  :host(${largeState}) {
     --size: 20px;
   }
 
-  :host([size='large']) ::slotted([slot='checked-indicator']),
-  :host([size='large']) .checked-indicator {
+  :host(${largeState}) ::slotted([slot='checked-indicator']),
+  :host(${largeState}) .checked-indicator {
     width: 16px;
   }
 
-  :host([shape='circular']),
-  :host([shape='circular']) .indeterminate-indicator {
+  :host(${circularState}),
+  :host(${circularState}) .indeterminate-indicator {
     border-radius: ${borderRadiusCircular};
   }
 

packages/web-components/src/checkbox/checkbox.ts

@@ -467,7 +467,21 @@ export class Checkbox extends BaseCheckbox {
    * HTML Attribute: `shape`
    */
   @attr
-  public shape!: CheckboxShape;
+  public shape?: CheckboxShape;
+
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
 
   /**
    * Indicates the size of the checkbox.
@@ -478,4 +492,18 @@ export class Checkbox extends BaseCheckbox {
    */
   @attr
   public size?: CheckboxSize;
+
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
 }