feat(web-components): enabling setting theme on an individual element and unsetting themes (#31973)

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

Author: marchbox

change/@fluentui-web-components-d74234e0-b903-4c51-af61-599648aee92d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: enabling setting theme on an individual element and unsetting themes",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/.storybook/preview.mjs

@@ -1,15 +1,26 @@
-import { switchTheme } from '../public/theme-switch.js';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
 import webcomponentsTheme from './theme.mjs';
+import { setTheme } from '../src/theme/set-theme.js';
 
 import '../src/index-rollup.js';
 import './docs-root.css';
 
+const themes = {
+  'web-light': webLightTheme,
+  'web-dark': webDarkTheme,
+  'teams-light': teamsLightTheme,
+  'teams-dark': teamsDarkTheme,
+};
+
 function changeTheme(/** @type {Event} */ e) {
-  switchTheme(/** @type {Parameters<typeof switchTheme>[number]} */ (/** @type {HTMLInputElement}*/ (e.target).value));
+  setTheme(themes[/** @type {keyof themes} */ (/** @type {HTMLInputElement}*/ (e.target).value)]);
 }
 
+// This is needed in Playwright.
+Object.defineProperty(window, 'setTheme', { value: setTheme });
+
 document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false);
-switchTheme('web-light');
+setTheme(themes['web-light']);
 
 export const parameters = {
   layout: 'fullscreen',

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

@@ -519,6 +519,62 @@ export class BaseButton extends FASTElement {
     value?: string;
 }
 
+// @public
+export class BaseCheckbox extends FASTElement {
+    autofocus: boolean;
+    get checked(): boolean;
+    set checked(next: boolean);
+    checkValidity(): boolean;
+    // @internal
+    clickHandler(e: MouseEvent): boolean | void;
+    // (undocumented)
+    connectedCallback(): void;
+    disabled?: boolean;
+    disabledAttribute?: boolean;
+    // @internal
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    // @internal
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    // @internal
+    elementInternals: ElementInternals;
+    get form(): HTMLFormElement | null;
+    static formAssociated: boolean;
+    formAttribute?: string;
+    // @internal
+    formResetCallback(): void;
+    initialChecked?: boolean;
+    // @internal
+    protected initialCheckedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    initialValue: string;
+    // @internal
+    protected initialValueChanged(prev: string, next: string): void;
+    // @internal
+    inputHandler(e: InputEvent): boolean | void;
+    // @internal
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    // @internal
+    keyupHandler(e: KeyboardEvent): boolean | void;
+    get labels(): ReadonlyArray<HTMLLabelElement>;
+    name: string;
+    reportValidity(): boolean;
+    required: boolean;
+    // @internal
+    protected requiredChanged(prev: boolean, next: boolean): void;
+    // @internal
+    protected setAriaChecked(value?: boolean): void;
+    setCustomValidity(message: string): void;
+    // @internal
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    // @internal
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    toggleChecked(force?: boolean): void;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get value(): string;
+    set value(value: string);
+    get willValidate(): boolean;
+}
+
 // @public
 export class BaseDivider extends FASTElement {
     // (undocumented)
@@ -883,8 +939,6 @@ export const ButtonType: {
 // @public
 export type ButtonType = ValuesOf<typeof ButtonType>;
 
-// Warning: (ae-forgotten-export) The symbol "BaseCheckbox" needs to be exported by the entry point index.d.ts
-//
 // @public
 export class Checkbox extends BaseCheckbox {
     constructor();
@@ -2234,7 +2288,10 @@ export const DividerDefinition: FASTElementDefinition<typeof Divider>;
 
 // @public
 export const DividerOrientation: {
-    readonly horizontal: "horizontal";
+    readonly horizontal: "horizontal"; /**
+    * Divider roles
+    * @public
+    */
     readonly vertical: "vertical";
 };
 
@@ -2971,7 +3028,10 @@ export const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
 
 // @public
 export const RadioGroupOrientation: {
-    readonly horizontal: "horizontal";
+    readonly horizontal: "horizontal"; /**
+    * Radio Group orientation
+    * @public
+    */
     readonly vertical: "vertical";
 };
 
@@ -3049,12 +3109,12 @@ export const roleForMenuItem: {
 // Warning: (ae-internal-missing-underscore) The name "setTheme" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
-export const setTheme: (theme: Theme) => void;
+export function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 
 // Warning: (ae-internal-missing-underscore) The name "setThemeFor" should be prefixed with an underscore because the declaration is marked as @internal
 //
-// @internal (undocumented)
-export const setThemeFor: (element: HTMLElement, theme: Theme) => void;
+// @internal @deprecated (undocumented)
+export function setThemeFor(element: HTMLElement, theme: Theme | null): void;
 
 // @public
 export const shadow16 = "var(--shadow16)";
@@ -3475,7 +3535,10 @@ export const TablistDefinition: FASTElementDefinition<typeof Tablist>;
 
 // @public
 export const TablistOrientation: {
-    readonly horizontal: "horizontal";
+    readonly horizontal: "horizontal"; /**
+    * The appearance of the component
+    * @public
+    */
     readonly vertical: "vertical";
 };
 

packages/web-components/playwright.config.ts

@@ -1,8 +1,8 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
   reporter: 'list',
-  testMatch: /.*\.spec\.ts$/,
   retries: 3,
   fullyParallel: process.env.CI ? false : true,
   timeout: process.env.CI ? 10000 : 30000,
@@ -13,6 +13,23 @@ const config: PlaywrightTestConfig = {
       width: 1280,
     },
   },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: /.*\.spec\.ts$/,
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+      testMatch: [/set-theme\.spec\.ts$/],
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+      testMatch: [/set-theme\.spec\.ts$/],
+    },
+  ],
   webServer: {
     // double-quotes are required for Windows
     command: `node -e "import('express').then(({ default: e }) => e().use(e.static('./dist/storybook')).listen(6006))"`,

packages/web-components/public/theme-switch.ts

@@ -21,6 +21,9 @@ const tests: Record<string, TestRenderFunction> = {
     setTheme(teamsDarkTheme);
     setTheme(teamsLightTheme);
 
+    // Unset themes
+    setTheme(null);
+
     endMeasure();
 
     onComplete();

packages/web-components/src/theme/set-theme.bench.ts renamed to packages/web-components/src/theme/set-theme.global.bench.ts

@@ -0,0 +1,36 @@
+import { measurePerformance, type TestRenderFunction } from '@tensile-perf/web-components';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+
+import { setTheme } from './set-theme.js';
+
+const tests: Record<string, TestRenderFunction> = {
+  mount: ({ onComplete }) => {
+    const { startMeasure, endMeasure } = measurePerformance();
+
+    const el = document.createElement('div');
+    document.body.append(el);
+
+    startMeasure();
+
+    // Newly set themes
+    setTheme(webLightTheme, el);
+    setTheme(webDarkTheme, el);
+    setTheme(teamsDarkTheme, el);
+    setTheme(teamsLightTheme, el);
+
+    // Cached themes
+    setTheme(webLightTheme, el);
+    setTheme(webDarkTheme, el);
+    setTheme(teamsDarkTheme, el);
+    setTheme(teamsLightTheme, el);
+
+    // Unset themes
+    setTheme(null, el);
+
+    endMeasure();
+
+    onComplete();
+  },
+};
+
+export { tests };

packages/web-components/src/theme/set-theme.local.bench.ts

@@ -0,0 +1,38 @@
+import { measurePerformance, type TestRenderFunction } from '@tensile-perf/web-components';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+
+import { setTheme } from './set-theme.js';
+
+const tests: Record<string, TestRenderFunction> = {
+  mount: ({ onComplete }) => {
+    const { startMeasure, endMeasure } = measurePerformance();
+
+    const el = document.createElement('div');
+    el.attachShadow({ mode: 'open' });
+    el.shadowRoot!.append(document.createElement('span'));
+    document.body.append(el);
+
+    startMeasure();
+
+    // Newly set themes
+    setTheme(webLightTheme, el);
+    setTheme(webDarkTheme, el);
+    setTheme(teamsDarkTheme, el);
+    setTheme(teamsLightTheme, el);
+
+    // Cached themes
+    setTheme(webLightTheme, el);
+    setTheme(webDarkTheme, el);
+    setTheme(teamsDarkTheme, el);
+    setTheme(teamsLightTheme, el);
+
+    // Unset themes
+    setTheme(null, el);
+
+    endMeasure();
+
+    onComplete();
+  },
+};
+
+export { tests };