[pull] master from microsoft:master

apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Decorator, StoryFn } from '@storybook/react-webpack5';
 import { FASTElement, customElement, html, attr } from '@microsoft/fast-element';
 import { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens';
-import { setThemeFor } from '@fluentui/web-components';
+import { setTheme } from '@fluentui/web-components';
 
 const themes = [
   { id: 'web-light', label: 'Web Light', theme: webLightTheme },
@@ -36,7 +36,7 @@ export class FASTThemeDecorator extends FASTElement {
   connectedCallback() {
     super.connectedCallback();
     const theme = themes.find(value => value.id === this.fluentTheme)?.theme ?? defaultTheme.theme;
-    setThemeFor(this, theme);
+    setTheme(theme);
   }
 }
 

change/@fluentui-web-components-753b509c-f103-4d8f-8b15-4a88a784dd81.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: migrate to esbuild for CDN bundle, enable setTheme on globalThis",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx

@@ -37,8 +37,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 

packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx

@@ -24,8 +24,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '480px',
-    maxWidth: '100%',
+    maxWidth: '480px',
+    width: '100%',
     height: 'fit-content',
   },
 

packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx

@@ -23,8 +23,8 @@ const resolveAsset = (asset: string) => {
 const useStyles = makeStyles({
   card: {
     margin: 'auto',
-    width: '720px',
-    maxWidth: '100%',
+    maxWidth: '720px',
+    width: '100%',
   },
 });
 

packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx

@@ -12,8 +12,9 @@ const useStyles = makeStyles({
     gap: '16px',
   },
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    minWidth: '230px',
+    width: '100%',
   },
 });
 
@@ -60,7 +61,7 @@ export const Disabled = (): JSXElement => {
     <div className={styles.container}>
       <div>
         <h3>Default Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card}>
             <CardContentExample />
           </Card>
@@ -73,7 +74,7 @@ export const Disabled = (): JSXElement => {
 
       <div>
         <h3>Interactive Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card} onClick={() => alert('Card clicked')}>
             <CardContentExample />
           </Card>
@@ -87,7 +88,7 @@ export const Disabled = (): JSXElement => {
       <div>
         <h3>Selectable Card</h3>
         <div style={{ display: 'flex', flexDirection: 'column', rowGap: '16px' }}>
-          <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
             <Card
               className={styles.card}
               selected={isSelected1}
@@ -100,7 +101,7 @@ export const Disabled = (): JSXElement => {
             </Card>
           </div>
 
-          <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
             <Card
               className={styles.card}
               selected={isSelected2}
@@ -118,7 +119,7 @@ export const Disabled = (): JSXElement => {
 
       <div>
         <h3>Outline Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card} appearance="outline">
             <CardContentExample />
           </Card>

packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx

@@ -25,8 +25,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 

packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx

@@ -20,13 +20,13 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '360px',
-    maxWidth: '100%',
+    width: '100%',
     height: 'fit-content',
   },
 
   section: {
-    width: 'fit-content',
+    maxWidth: '360px',
+    width: '100%',
   },
 
   title: { margin: '0 0 12px' },

packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx

@@ -19,8 +19,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 

packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx

@@ -28,8 +28,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 

packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx

@@ -22,8 +22,8 @@ const useStyles = makeStyles({
   title: { margin: '0 0 12px' },
 
   card: {
-    width: '300px',
-    maxWidth: '100%',
+    maxWidth: '300px',
+    width: '100%',
     height: 'fit-content',
   },
 
@@ -112,8 +112,9 @@ export const Size = (): JSXElement => {
 Size.parameters = {
   docs: {
     description: {
-      story: `Size options are mainly to provide variety, and consistency when using cards for different usages. It
-      relates to padding and border-radius and not so much the actual dimensions of the card.`,
+      story:
+        'Size options are mainly to provide variety, and consistency when using cards for different usages.' +
+        'It relates to padding and border-radius and not so much the actual dimensions of the card.',
     },
   },
 };

packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx

@@ -29,7 +29,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '280px',
+    maxWidth: '280px',
+    width: '100%',
     height: 'fit-content',
   },
 
@@ -57,6 +58,7 @@ const useStyles = makeStyles({
     gap: '16px',
     display: 'flex',
     flexDirection: 'column',
+    width: '100%',
   },
 });
 

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

@@ -1,7 +1,6 @@
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
 import * as prettier from 'prettier';
 import prettierPluginHTML from 'prettier/parser-html.js';
-import { setTheme } from '../src/theme/set-theme.js';
 import webcomponentsTheme from './theme.mjs';
 
 import '../src/index-rollup.js';
@@ -17,9 +16,11 @@ const themes = {
 };
 
 // This is needed in Playwright.
-Object.defineProperty(window, 'setTheme', { value: setTheme });
+// @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+Object.defineProperty(window, 'Fluent', { value: globalThis.Fluent });
 
-setTheme(themes['web-light']);
+// @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+Fluent.setTheme(themes['web-light']);
 
 export const globalTypes = {
   theme: {
@@ -63,7 +64,8 @@ export const decorators = [
      * @type {keyof typeof themes}
      */
     const theme = context.globals.theme || 'web-light';
-    setTheme(themes[theme]);
+    // @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+    Fluent.setTheme(themes[theme]);
 
     // Set direction on the document body
     const dir = context.globals.dir || 'ltr';

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

@@ -3586,11 +3586,6 @@ export const roleForMenuItem: {
 // @public
 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 @deprecated (undocumented)
-export function setThemeFor(element: HTMLElement, theme: Theme | null): void;
-
 // @public
 export const shadow16 = "var(--shadow16)";
 

packages/web-components/package.json

@@ -30,6 +30,16 @@
   ],
   "exports": {
     ".": "./dist/esm/index.js",
+    "./web-components.js": "./dist/web-components.js",
+    "./web-components.min.js": "./dist/web-components.min.js",
+    "./web-components-all.js": {
+      "types": "./dist/web-components.d.ts",
+      "default": "./dist/web-components-all.js"
+    },
+    "./web-components-all.min.js": {
+      "types": "./dist/web-components.d.ts",
+      "default": "./dist/web-components-all.min.js"
+    },
     "./utils/behaviors/*.js": "./dist/esm/utils/behaviors/*.js",
     "./utils/*.js": "./dist/esm/utils/*.js",
     "./utilities.js": "./dist/esm/utils/index.js",
@@ -47,10 +57,14 @@
   },
   "sideEffects": [
     "define.*",
+    "define-all.*",
     "index-rollup.*",
+    "index-all-rollup.*",
     "./dist/esm/**/define.js",
     "./dist/web-components.js",
-    "./dist/web-components.min.js"
+    "./dist/web-components.min.js",
+    "./dist/web-components-all.js",
+    "./dist/web-components-all.min.js"
   ],
   "scripts": {
     "analyze": "cem analyze",
@@ -85,7 +99,8 @@
     "@wc-toolkit/cem-inheritance": "1.2.2",
     "@wc-toolkit/module-path-resolver": "1.0.0",
     "@wc-toolkit/type-parser": "1.0.3",
-    "chromedriver": "^125.0.0"
+    "chromedriver": "^125.0.0",
+    "rollup-plugin-fast-tagged-templates": "^1.0.2"
   },
   "dependencies": {
     "@fluentui/tokens": "1.0.0-alpha.23",

packages/web-components/rollup.config.js

@@ -1,12 +1,16 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonJS from 'rollup-plugin-commonjs';
 import esbuild, { minify } from 'rollup-plugin-esbuild';
-import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
-import { transformCSSFragment, transformHTMLFragment } from './scripts/transform-fragments';
+import fastTaggedTemplates from 'rollup-plugin-fast-tagged-templates';
 
-const parserOptions = {
-  sourceType: 'module',
-};
+const plugins = [
+  nodeResolve({ browser: true }),
+  commonJS(),
+  esbuild({
+    tsconfig: './tsconfig.lib.json',
+  }),
+  fastTaggedTemplates(),
+];
 
 export default [
   {
@@ -22,22 +26,21 @@ export default [
         plugins: [minify()],
       },
     ],
-    plugins: [
-      nodeResolve({ browser: true }),
-      commonJS(),
-      esbuild({
-        tsconfig: './tsconfig.lib.json',
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['css'],
-        transformer: transformCSSFragment,
-        parserOptions,
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['html'],
-        transformer: transformHTMLFragment,
-        parserOptions,
-      }),
+    plugins,
+  },
+  {
+    input: 'src/index-all-rollup.ts',
+    output: [
+      {
+        file: 'dist/web-components-all.js',
+        format: 'esm',
+      },
+      {
+        file: 'dist/web-components-all.min.js',
+        format: 'esm',
+        plugins: [minify()],
+      },
     ],
+    plugins,
   },
 ];