Merge branch 'master' into docs/react-color-picker-stories

microsoft · Dec 16, 2024 · e5b1fb4 · e5b1fb4
2 parents b83db51 + 7b75871
commit e5b1fb4
Show file tree

Hide file tree

Showing 639 changed files with 7,463 additions and 1,407 deletions.
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx
@@ -21,7 +21,7 @@ Beyond consistency with the latest Fluent Design system, this change provides si
 
 #### Portals
 
-To be use v9 components inside v8 components like `Panel` & `Callout`, please enable [portal compatibility](?path=/docs/concepts-migration-from-v8-troubleshooting--page).
+To be use v9 components inside v8 components like `Panel` & `Callout`, please enable [portal compatibility](?path=/docs/concepts-migration-from-v8-troubleshooting--docs#portal-compatibility).
 
 ### Theme (v8) => Theme (v9)
 

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx
@@ -43,7 +43,7 @@ function App() {
 }
 ```
 
-## "I tried uing a layered v8 component like Callout in a layered v9 component like Dialog and my Callout appears beneath my Dialog. What's going on?"
+## <a id="portal-compatibility"></a> "I tried using a layered v8 component like Callout in a layered v9 component like Dialog and my Callout appears beneath my Dialog. What's going on?"
 
 Both v9 and v8 layers set the same `z-index` value by default, which means the document order will resolve their z-positioning.
 This can lead to inconsistent behavior because z-positioning depends on the order in which elements appear in the DOM.

diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx
@@ -0,0 +1,227 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Concepts/Developer/Server-Side Rendering/React Router 7 and Remix setup" />
+
+# React Router 7/Remix setup
+
+## Installation
+
+1. Create a new React Router 7/Remix project or skip this step if you already have one:
+
+```bash
+npx create-remix@latest fluentui-remix
+
+# or
+npx create-react-router@latest fluentui-react-router
+```
+
+2. Install dependencies:
+
+```bash
+# Install Fluent UI core packages
+npm i @fluentui/react-components @fluentui/react-icons
+
+# Install required Vite plugins
+npm i vite-plugin-cjs-interop @griffel/vite-plugin -D
+```
+
+## Configuration
+
+1. Update `vite.config.ts`:
+
+```ts
+// Import Vite plugins
+import { cjsInterop } from 'vite-plugin-cjs-interop';
+import griffel from '@griffel/vite-plugin';
+
+export default defineConfig(({ command }) => ({
+  plugins: [
+    reactRouter(), // or remix(),
+    tsconfigPaths(),
+
+    // Add CJS interop plugin for Fluent UI packages until they are ESM compatible
+    cjsInterop({
+      dependencies: ['@fluentui/react-components'],
+    }),
+    // Add Griffel plugin for production optimization
+    command === 'build' && griffel(),
+  ],
+  // Required for Fluent UI icons in SSR
+  ssr: {
+    noExternal: ['@fluentui/react-icons'],
+  },
+}));
+```
+
+2. Modify `app/root.tsx` to add Fluent UI providers:
+
+```tsx
+// 1. Import Fluent UI dependencies
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+        {/* 2. Add insertion point for Fluent UI styles before the </head>. */}
+        <meta name="fluentui-insertion-point" content="fluentui-insertion-point" />
+      </head>
+      <body>
+        {/* 3. Wrap app content with FluentProvider */}
+        <FluentProvider theme={webLightTheme}>{children}</FluentProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+3. Set up SSR:
+
+- Reveal `app/entry.client.tsx` and `app/entry.server.tsx` files if not already present:
+
+```bash
+npx react-router reveal
+
+# or
+
+npx remix reveal
+```
+
+- and then update the `entry.server.tsx`:
+
+```tsx
+// 1. Import required Fluent UI SSR utilities
+import { createDOMRenderer, RendererProvider, renderToStyleElements, SSRProvider } from '@fluentui/react-components';
+
+// 2. Define constants for style injection
+const FLUENT_UI_INSERTION_POINT_TAG = `<meta name="fluentui-insertion-point" content="fluentui-insertion-point"/>`;
+const FLUENT_UI_INSERTION_TAG_REGEX = new RegExp(FLUENT_UI_INSERTION_POINT_TAG.replaceAll(' ', '(\\s)*'));
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  // 3. Create Fluent UI renderer
+  const renderer = createDOMRenderer();
+
+  // ...
+
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    // 4. Track style extraction state
+    let isStyleExtracted = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      // 5. Wrap RemixServer with Fluent UI providers
+      <RendererProvider renderer={renderer}>
+        <SSRProvider>
+          <ServerRouter context={routerContext} url={request.url} abortDelay={ABORT_DELAY} />
+          {/* or <RemixServer context={remixContext} url={request.url} /> */}
+        </SSRProvider>
+      </RendererProvider>,
+      {
+        [callbackName]: () => {
+          shellRendered = true;
+          const body = new PassThrough({
+            // 6. Transform stream to inject Fluent UI styles
+            transform(chunk, _, callback) {
+              const str = chunk.toString();
+              const style = renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>);
+
+              if (!isStyleExtracted && FLUENT_UI_INSERTION_TAG_REGEX.test(str)) {
+                chunk = str.replace(FLUENT_UI_INSERTION_TAG_REGEX, `${FLUENT_UI_INSERTION_POINT_TAG}${style}`);
+                isStyleExtracted = true;
+              }
+
+              callback(null, chunk);
+            },
+          });
+          // ...
+        }
+      }
+  });
+}
+```
+
+## Usage Example
+
+Create or update `app/routes/_index.tsx`:
+
+```tsx
+import { Button, Card, Title1, Body1 } from '@fluentui/react-components';
+import { BookmarkRegular } from '@fluentui/react-icons';
+
+export default function Index() {
+  return (
+    <Card style={{ maxWidth: '400px', margin: '20px' }}>
+      <Title1>Fluent UI + Remix</Title1>
+      <Body1>Welcome to your new app!</Body1>
+      <Button appearance="primary" icon={<BookmarkRegular />}>
+        Click me
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **SSR Hydration Mismatch**
+
+```
+Text content does not match server-rendered HTML
+```
+
+Fix: Check style injection in `entry.server.tsx`.
+
+2. **Icons Not Rendering in SSR**
+
+```
+Error: No "exports" main defined in node_modules/@fluentui/react-icons/package.json
+```
+
+Fix: Add to `vite.config.ts`:
+
+```ts
+ssr: {
+  noExternal: ["@fluentui/react-icons"],
+}
+```
+
+3. **Module Resolution Errors**
+
+```
+Cannot use import statement outside a module
+```
+
+Fix: Add to `vite.config.ts`:
+
+```ts
+cjsInterop({
+  dependencies: ["@fluentui/react-components"],
+}),
+```
+
+4. **Development Mode Warning**
+
+```
+@fluentui/react-provider: There are conflicting ids in your DOM.
+Please make sure that you configured your application properly.
+Configuration guide: https://aka.ms/fluentui-conflicting-ids
+```
+
+This warning occurs in development due to [React's StrictMode double rendering](https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development). It can be safely ignored as it doesn't affect production builds.
+
+### Production Build Optimization
+
+For production builds, install and configure [`@griffel/vite-plugin`](https://griffel.js.org/react/ahead-of-time-compilation/with-vite) to enable build time pre-computing and transforming styles.
diff --git a/change/@fluentui-react-button-cdab055e-9e74-4594-aafd-73566539af03.json b/change/@fluentui-react-button-cdab055e-9e74-4594-aafd-73566539af03.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-carousel-6c54eead-adb1-472f-9bdd-51f424e2c9db.json b/change/@fluentui-react-carousel-6c54eead-adb1-472f-9bdd-51f424e2c9db.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Set totalSlides on CarouselNav to controlled state",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-carousel-8b1310b9-dfe7-479e-9786-5ddde5732c93.json b/change/@fluentui-react-carousel-8b1310b9-dfe7-479e-9786-5ddde5732c93.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-carousel-b0491798-cc10-487f-a3c0-98bcd6016f7f.json b/change/@fluentui-react-carousel-b0491798-cc10-487f-a3c0-98bcd6016f7f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Set tabster default on carousel initialization",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-carousel-d45f8c82-f098-4820-9e34-31862a08f3d3.json b/change/@fluentui-react-carousel-d45f8c82-f098-4820-9e34-31862a08f3d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Ensure a viable background color for nav items in high contrast windows",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...b2076988-12cf-4ef9-9ee6-8ef16ea4a242.json → ...f8073f84-d26a-4b28-992e-379202a63f5d.json b/...b2076988-12cf-4ef9-9ee6-8ef16ea4a242.json → ...f8073f84-d26a-4b28-992e-379202a63f5d.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "enable negativeData prop in declarative charts",
+  "comment": "Enable Controlled Legends working in declarative HBC",
   "packageName": "@fluentui/react-charting",
   "email": "[email protected]",
   "dependentChangeType": "patch"

diff --git a/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json b/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-color-picker): active axis for ColorPicker",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-57be4cfa-c216-4c45-b33b-68d0a0b60ad6.json b/change/@fluentui-react-migration-v0-v9-57be4cfa-c216-4c45-b33b-68d0a0b60ad6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-motion-components-preview-19d4910b-6f0a-4f0f-a0c4-d668280c25c9.json b/change/@fluentui-react-motion-components-preview-19d4910b-6f0a-4f0f-a0c4-d668280c25c9.json
diff --git a/change/@fluentui-react-motion-components-preview-e2694b39-2078-4d73-ae64-e1515473b8e0.json b/change/@fluentui-react-motion-components-preview-e2694b39-2078-4d73-ae64-e1515473b8e0.json
diff --git a/change/@fluentui-react-nav-preview-202a0647-ecd3-4f94-a362-35eefbe9ae53.json b/change/@fluentui-react-nav-preview-202a0647-ecd3-4f94-a362-35eefbe9ae53.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-b23e58f1-e6c5-4ac4-963e-63d248181363.json b/change/@fluentui-react-radio-b23e58f1-e6c5-4ac4-963e-63d248181363.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-radio",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-7a95002f-25eb-47c0-9f9b-a77ffdef753a.json b/change/@fluentui-react-tabs-7a95002f-25eb-47c0-9f9b-a77ffdef753a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: adjust styles for circular tabs",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-teaching-popover-9ed5ff29-ec65-4d90-84c5-e9abdf034b46.json b/change/@fluentui-react-teaching-popover-9ed5ff29-ec65-4d90-84c5-e9abdf034b46.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-d5b54519-be81-485d-af06-6b728958fd45.json b/change/@fluentui-react-toast-d5b54519-be81-485d-af06-6b728958fd45.json
diff --git a/change/@fluentui-react-virtualizer-9dd1cff8-e778-499b-a0c7-489feb87bca8.json b/change/@fluentui-react-virtualizer-9dd1cff8-e778-499b-a0c7-489feb87bca8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-tokens-a1396b99-e2b7-4ab3-8c89-7d58c5b4ba8b.json b/change/@fluentui-tokens-a1396b99-e2b7-4ab3-8c89-7d58c5b4ba8b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bugfix: ensure teams tokens follow teams overrides for fonts",
+  "packageName": "@fluentui/tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}