From 4d3502a452c432b5a2f838a2f257204795f39c32 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 15 Mar 2024 12:48:55 -0700 Subject: [PATCH 1/2] fix(xplat): XPlatProvider correctly formats variable names for strict dom ThemeProvider --- .../src/XPlatProvider/XPlatProvider.native.tsx | 6 ++---- .../createCustomVariablesFromTheme.ts | 14 -------------- 2 files changed, 2 insertions(+), 18 deletions(-) delete mode 100644 packages/react-components/react-platform-adapter/src/XPlatProvider/createCustomVariablesFromTheme.ts diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx index efa2ab4a0d89d6..dbf72cc078d0b4 100644 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx +++ b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; import { contexts } from 'react-strict-dom'; import { type XPlatProviderProps } from './XPlatProvider.types'; -import { createCustomVariablesFromTheme } from './createCustomVariablesFromTheme'; // css variables insertion should be suppressed in native export const suppressCssVariableInsertion = true; export const XPlatProvider: React.FunctionComponent = props => { const { theme, children } = props; - const customProps = React.useMemo(() => createCustomVariablesFromTheme(theme), [theme]); - // customProperties should be in the form of { '--camelCasedVariable': 'value' } - return ; + // customProperties should be in the form of { 'camelCasedVariable': 'value' } + return ; }; diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/createCustomVariablesFromTheme.ts b/packages/react-components/react-platform-adapter/src/XPlatProvider/createCustomVariablesFromTheme.ts deleted file mode 100644 index 93bc1cdbdd6fcf..00000000000000 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/createCustomVariablesFromTheme.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { PartialTheme } from '@fluentui/react-theme'; - -/** - * Formats the theme tokens into the right form to be inserted into the react-strict-dom ThemeProvider. - */ -export function createCustomVariablesFromTheme(theme: PartialTheme | undefined): { [key: string]: string } { - if (theme) { - return (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVars, cssVar) => { - return { ...cssVars, [`--${cssVar}`]: theme[cssVar] }; - }, {}); - } - - return {}; -} From 426ae0a9b032b0bc9ef22d733520431b1d05827b Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 15 Mar 2024 23:45:52 -0700 Subject: [PATCH 2/2] Make sure `theme` is not undefined --- .../src/XPlatProvider/XPlatProvider.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx index dbf72cc078d0b4..83c91c32e7bf29 100644 --- a/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx +++ b/packages/react-components/react-platform-adapter/src/XPlatProvider/XPlatProvider.native.tsx @@ -6,7 +6,7 @@ import { type XPlatProviderProps } from './XPlatProvider.types'; export const suppressCssVariableInsertion = true; export const XPlatProvider: React.FunctionComponent = props => { - const { theme, children } = props; + const { theme = {}, children } = props; // customProperties should be in the form of { 'camelCasedVariable': 'value' } return ;