From 5c34e9c0da6471746aa15cb542a3e8d526b515fb Mon Sep 17 00:00:00 2001 From: Jason Morse <35609178+JasonVMo@users.noreply.github.com> Date: Wed, 13 Mar 2024 17:01:31 -0700 Subject: [PATCH 1/3] Start consuming fluent provider in test app (#30773) --- apps/xplat-v9/StrictDomDemo.tsx | 14 +++-- apps/xplat-v9/macos/Podfile.lock | 8 +-- apps/xplat-v9/package.json | 8 +-- ...-511fd237-f87b-4ac9-bd19-c845dc1518c5.json | 7 +++ .../etc/react-platform-adapter.api.md | 12 ++++- .../react-platform-adapter/package.json | 1 + .../src/XPlatProvider/XPlatProvider.types.ts | 4 +- .../react-platform-adapter/src/index.ts | 11 +++- .../src/styling/index.ts | 3 ++ .../react-provider/etc/react-provider.api.md | 2 +- .../react-provider/package.json | 3 +- .../FluentProvider/renderFluentProvider.tsx | 53 ++++++++++--------- .../FluentProvider/useFluentProvider.ts | 2 +- .../useFluentProviderStyles.styles.ts | 5 +- .../useFluentProviderThemeStyleTag.native.ts | 9 ++++ 15 files changed, 94 insertions(+), 48 deletions(-) create mode 100644 change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json create mode 100644 packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.native.ts diff --git a/apps/xplat-v9/StrictDomDemo.tsx b/apps/xplat-v9/StrictDomDemo.tsx index fea77d44421bea..701a4cf4203764 100644 --- a/apps/xplat-v9/StrictDomDemo.tsx +++ b/apps/xplat-v9/StrictDomDemo.tsx @@ -9,6 +9,8 @@ import { shorthands, } from '@fluentui/react-platform-adapter'; import { html } from 'react-strict-dom'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; const useBaseClassName = makeResetStyles({ marginBlock: '1rem', @@ -36,10 +38,12 @@ export const StrictDomDemo = (props: { cond?: boolean }) => { const classNames = useClassNames(); return ( - - - + + + + + ); }; diff --git a/apps/xplat-v9/macos/Podfile.lock b/apps/xplat-v9/macos/Podfile.lock index 4747a1ef213829..410488130ab4da 100644 --- a/apps/xplat-v9/macos/Podfile.lock +++ b/apps/xplat-v9/macos/Podfile.lock @@ -1019,7 +1019,7 @@ PODS: - React-Core - React-cxxreact - ReactCommon/turbomodule/core - - ReactTestApp-DevSupport (3.2.7): + - ReactTestApp-DevSupport (3.2.15): - React-Core - React-jsi - ReactTestApp-Resources (1.0.0-dev) @@ -1237,11 +1237,11 @@ SPEC CHECKSUMS: React-utils: b360b43f6554167a3d030d18d439e62872ee7eb1 ReactCommon: 4a9c46cbe8803df27da190b48f5c64cee33a483a ReactNativeHost: 59d4565eee4fb44efb46d3bff7adbaf2cf29fa5f - ReactTestApp-DevSupport: c8cfb17ad2c1ae1f179f91eb2b5c99ae3ac567a6 + ReactTestApp-DevSupport: 8a69118a4beadc5c4426e35d4d38c3dc7357cb3d ReactTestApp-Resources: 8539dac0f8d2ef3821827a537e37812104c6ff78 SocketRocket: f6c6249082c011e6de2de60ed641ef8bbe0cfac9 Yoga: 3725908fb0d6c8d45b7e133940f5d603e588b7ce -PODFILE CHECKSUM: 46a625250ee05f1423e150ad0885f5fe7be9c090 +PODFILE CHECKSUM: b33f0b7a7f695ecaa04ef3bb721e1a1a3f780ad6 -COCOAPODS: 1.14.2 +COCOAPODS: 1.13.0 diff --git a/apps/xplat-v9/package.json b/apps/xplat-v9/package.json index e35578d1391c86..ec89b803f5467b 100644 --- a/apps/xplat-v9/package.json +++ b/apps/xplat-v9/package.json @@ -18,9 +18,11 @@ "windows": "react-native run-windows --sln windows/xplat-v9.sln" }, "dependencies": { - "@fluentui/react-button": "^9.3.61", - "@fluentui/react-label": "^9.1.64", - "@fluentui/react-platform-adapter": "^0.0.0", + "@fluentui/react-button": "*", + "@fluentui/react-label": "*", + "@fluentui/react-platform-adapter": "*", + "@fluentui/react-provider": "*", + "@fluentui/react-theme": "*", "@stylexjs/babel-plugin": "^0.5.1", "@stylexjs/stylex": "^0.5.1", "react": "18.2.0", diff --git a/change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json b/change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json new file mode 100644 index 00000000000000..4ffea052197d2a --- /dev/null +++ b/change/@fluentui-react-provider-511fd237-f87b-4ac9-bd19-c845dc1518c5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "update provider to use adapter instead of griffel", + "packageName": "@fluentui/react-provider", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md b/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md index e3d3b085beb310..17a3bbb5b84b03 100644 --- a/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md +++ b/packages/react-components/react-platform-adapter/etc/react-platform-adapter.api.md @@ -6,10 +6,14 @@ import { makeResetStyles } from '@griffel/react'; import { makeStyles } from '@griffel/react'; +import { makeStyles as makeStylesCore } from '@griffel/core'; import { mergeClasses } from '@griffel/react'; import type { PartialTheme } from '@fluentui/react-theme'; import * as React_2 from 'react'; import { shorthands } from '@griffel/react'; +import { TextDirectionProvider } from '@griffel/react'; +import type { Theme } from '@fluentui/react-theme'; +import { useRenderer_unstable } from '@griffel/react'; // @public (undocumented) export const getStylesFromClassName: (className: string) => undefined; @@ -21,6 +25,8 @@ export { makeResetStyles } export { makeStyles } +export { makeStylesCore } + export { mergeClasses } export { shorthands } @@ -28,12 +34,16 @@ export { shorthands } // @public (undocumented) export const suppressCssVariableInsertion = false; +export { TextDirectionProvider } + +export { useRenderer_unstable } + // @public export const XPlatProvider: React_2.FunctionComponent; // @public (undocumented) export type XPlatProviderProps = { - theme: PartialTheme; + theme: Theme | PartialTheme | undefined; children: JSX.Element; }; diff --git a/packages/react-components/react-platform-adapter/package.json b/packages/react-components/react-platform-adapter/package.json index c656958f2765ab..182535c98c3f42 100644 --- a/packages/react-components/react-platform-adapter/package.json +++ b/packages/react-components/react-platform-adapter/package.json @@ -36,6 +36,7 @@ "@fluentui/react-shared-contexts": "^9.15.0", "@fluentui/react-theme": "^9.1.17", "@fluentui/react-utilities": "^9.18.3", + "@griffel/core": "^1.14.1", "@griffel/react": "^1.5.14", "@swc/helpers": "^0.5.1", "react-strict-dom": "0.0.3" diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts index f2e4551d2dcb76..283c2b7287a36c 100644 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts +++ b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.types.ts @@ -1,6 +1,6 @@ -import type { PartialTheme } from '@fluentui/react-theme'; +import type { Theme, PartialTheme } from '@fluentui/react-theme'; export type XPlatProviderProps = { - theme: PartialTheme; + theme: Theme | PartialTheme | undefined; children: JSX.Element; }; diff --git a/packages/react-components/react-platform-adapter/src/index.ts b/packages/react-components/react-platform-adapter/src/index.ts index a3d275b92e3df9..6a150c72b6b6d3 100644 --- a/packages/react-components/react-platform-adapter/src/index.ts +++ b/packages/react-components/react-platform-adapter/src/index.ts @@ -1,3 +1,12 @@ export { XPlatProvider, suppressCssVariableInsertion, type XPlatProviderProps } from './XPlatProvider'; export { jsxPlatformAdapter } from './jsx'; -export { getStylesFromClassName, makeResetStyles, makeStyles, mergeClasses, shorthands } from './styling'; +export { + getStylesFromClassName, + makeStyles, + makeStylesCore, + makeResetStyles, + mergeClasses, + shorthands, + TextDirectionProvider, + useRenderer_unstable, +} from './styling/index'; diff --git a/packages/react-components/react-platform-adapter/src/styling/index.ts b/packages/react-components/react-platform-adapter/src/styling/index.ts index 71476305f82092..5d23c3366482e1 100644 --- a/packages/react-components/react-platform-adapter/src/styling/index.ts +++ b/packages/react-components/react-platform-adapter/src/styling/index.ts @@ -3,3 +3,6 @@ export * from './makeResetStyles'; export * from './makeStyles'; export * from './mergeClasses'; export * from './shorthands'; +// re-export some griffel types to have fluent use the griffel adapter instead of griffel directly +export { useRenderer_unstable, TextDirectionProvider } from '@griffel/react'; +export { makeStyles as makeStylesCore } from '@griffel/core'; diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index 801ce9f7169177..819e5e52ad057d 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/packages/react-components/react-provider/etc/react-provider.api.md @@ -25,7 +25,7 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha export function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string; // @public (undocumented) -export const FluentProvider: React_2.ForwardRefExoticComponent, "dir"> & { +export const FluentProvider: React_2.ForwardRefExoticComponent, "dir"> & { applyStylesToPortals?: boolean | undefined; customStyleHooks_unstable?: Partial<{ useAccordionHeaderStyles_unstable: (state: unknown) => void; diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json index 9a33d4b736690e..aa35e83ea0293e 100644 --- a/packages/react-components/react-provider/package.json +++ b/packages/react-components/react-provider/package.json @@ -34,13 +34,12 @@ }, "dependencies": { "@fluentui/react-icons": "^2.0.224", + "@fluentui/react-platform-adapter": "^0.0.0", "@fluentui/react-shared-contexts": "^9.15.0", "@fluentui/react-tabster": "^9.19.3", "@fluentui/react-theme": "^9.1.17", "@fluentui/react-utilities": "^9.18.3", "@fluentui/react-jsx-runtime": "^9.0.32", - "@griffel/core": "^1.14.1", - "@griffel/react": "^1.5.14", "@swc/helpers": "^0.5.1" }, "peerDependencies": { diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx index b5a5a037137850..c16b6661603e85 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx +++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx @@ -1,7 +1,7 @@ /** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { canUseDOM, assertSlots } from '@fluentui/react-utilities'; -import { TextDirectionProvider } from '@griffel/react'; +import { TextDirectionProvider } from '@fluentui/react-platform-adapter'; import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, @@ -13,6 +13,7 @@ import { } from '@fluentui/react-shared-contexts'; import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types'; import { IconDirectionContextProvider } from '@fluentui/react-icons'; +import { XPlatProvider } from '@fluentui/react-platform-adapter'; /** * Render the final JSX of FluentProvider @@ -31,31 +32,33 @@ export const renderFluentProvider_unstable = ( - } - > - - - - - - {canUseDOM() ? null : ( -