diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx index 2434ce0d3ad..78fba881a80 100644 --- a/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx +++ b/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { View } from 'react-native'; +import { View, type ViewStyle } from 'react-native'; import { Text } from '@fluentui/react-native'; import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow'; @@ -42,7 +42,7 @@ const ShadowTestBox: React.FunctionComponent = (props: Shado return ( - + (themedStyles.shadowTestBox, backgroundColor)}> {props.shadowDepthText} @@ -54,7 +54,7 @@ const ShadowTestBox: React.FunctionComponent = (props: Shado export const ShadowDepthTestSection: React.FunctionComponent = () => { const theme = useFluentTheme(); - const backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor; + const backgroundViewStyle = mergeStyles(shadowTestPageStyles(theme).backgroundColor); return ( diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx index 3db85caa14a..abbe58fa252 100644 --- a/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx +++ b/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { View } from 'react-native'; +import { View, type ViewStyle } from 'react-native'; import { Text } from '@fluentui/react-native'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; @@ -66,23 +66,23 @@ export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () = - + (themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}> padding only - + (themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}> margins only - + (themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}> borderRadius: 8 ( themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps, themedStyles.borderWidthTestProps, @@ -92,22 +92,22 @@ export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () = - + (themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps)}> start: 10 - + (themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps)}> alignItems: flex-start - + (themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps)}> flexDirection: row - + (themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps)}> flexWrap: wrap diff --git a/change/@fluentui-react-native-divider-b899659d-b97c-4276-af83-073ce5a1103c.json b/change/@fluentui-react-native-divider-b899659d-b97c-4276-af83-073ce5a1103c.json new file mode 100644 index 00000000000..fe118bdc464 --- /dev/null +++ b/change/@fluentui-react-native-divider-b899659d-b97c-4276-af83-073ce5a1103c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/divider", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-shadow-6a98115e-9a9d-4117-a9d5-734597151fd4.json b/change/@fluentui-react-native-experimental-shadow-6a98115e-9a9d-4117-a9d5-734597151fd4.json new file mode 100644 index 00000000000..e771af91d9a --- /dev/null +++ b/change/@fluentui-react-native-experimental-shadow-6a98115e-9a9d-4117-a9d5-734597151fd4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/experimental-shadow", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-framework-base-ca080a6c-3ba3-4111-9f50-0096e9f0cdc8.json b/change/@fluentui-react-native-framework-base-ca080a6c-3ba3-4111-9f50-0096e9f0cdc8.json new file mode 100644 index 00000000000..92aa7fb0469 --- /dev/null +++ b/change/@fluentui-react-native-framework-base-ca080a6c-3ba3-4111-9f50-0096e9f0cdc8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/framework-base", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-framework-e432b092-ed07-4692-89a0-c81f14970f41.json b/change/@fluentui-react-native-framework-e432b092-ed07-4692-89a0-c81f14970f41.json new file mode 100644 index 00000000000..b1428cc6753 --- /dev/null +++ b/change/@fluentui-react-native-framework-e432b092-ed07-4692-89a0-c81f14970f41.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/framework", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-icon-c9d1c21a-e7fc-4863-b151-aa7fa172abfc.json b/change/@fluentui-react-native-icon-c9d1c21a-e7fc-4863-b151-aa7fa172abfc.json new file mode 100644 index 00000000000..a8f98804416 --- /dev/null +++ b/change/@fluentui-react-native-icon-c9d1c21a-e7fc-4863-b151-aa7fa172abfc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/icon", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-overflow-fa6d8c57-5e6a-4eb3-807b-c4c9e6924201.json b/change/@fluentui-react-native-overflow-fa6d8c57-5e6a-4eb3-807b-c4c9e6924201.json new file mode 100644 index 00000000000..99d0137afc8 --- /dev/null +++ b/change/@fluentui-react-native-overflow-fa6d8c57-5e6a-4eb3-807b-c4c9e6924201.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/overflow", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tablist-57f8429e-bf71-4ce3-a8c8-cc80aeeb71df.json b/change/@fluentui-react-native-tablist-57f8429e-bf71-4ce3-a8c8-cc80aeeb71df.json new file mode 100644 index 00000000000..bd8e6efc42d --- /dev/null +++ b/change/@fluentui-react-native-tablist-57f8429e-bf71-4ce3-a8c8-cc80aeeb71df.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/tablist", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-core-14da059e-2851-4e44-bc6d-7b73e2db24d3.json b/change/@fluentui-react-native-tester-core-14da059e-2851-4e44-bc6d-7b73e2db24d3.json new file mode 100644 index 00000000000..d99587f303d --- /dev/null +++ b/change/@fluentui-react-native-tester-core-14da059e-2851-4e44-bc6d-7b73e2db24d3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/tester-core", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-text-70e0d7c6-967f-46a3-87c1-a53351eb617f.json b/change/@fluentui-react-native-text-70e0d7c6-967f-46a3-87c1-a53351eb617f.json new file mode 100644 index 00000000000..d2450ff8593 --- /dev/null +++ b/change/@fluentui-react-native-text-70e0d7c6-967f-46a3-87c1-a53351eb617f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/text", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-slot-7bbfbc61-b74b-48b0-869e-6b9db1b2a603.json b/change/@fluentui-react-native-use-slot-7bbfbc61-b74b-48b0-869e-6b9db1b2a603.json new file mode 100644 index 00000000000..4831577141f --- /dev/null +++ b/change/@fluentui-react-native-use-slot-7bbfbc61-b74b-48b0-869e-6b9db1b2a603.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/use-slot", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-tokens-c70c74b0-7a88-4a2b-b717-c7c179739d93.json b/change/@fluentui-react-native-use-tokens-c70c74b0-7a88-4a2b-b717-c7c179739d93.json new file mode 100644 index 00000000000..349ee3a38e9 --- /dev/null +++ b/change/@fluentui-react-native-use-tokens-c70c74b0-7a88-4a2b-b717-c7c179739d93.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add template params to mergeStyles for stronger result typing", + "packageName": "@fluentui-react-native/use-tokens", + "email": "jasonmo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/docs/pages/Theming/Tokens/UsageWithComponentTokens.md b/docs/pages/Theming/Tokens/UsageWithComponentTokens.md index 8a6a82b17d6..bf829250a06 100644 --- a/docs/pages/Theming/Tokens/UsageWithComponentTokens.md +++ b/docs/pages/Theming/Tokens/UsageWithComponentTokens.md @@ -66,7 +66,7 @@ export const Component = (props: TProps) => { const theme = useFluentTheme(); const [tokens, cache] = useTokens(theme); const [tokenStyle] = cache(() => ({ ...tokens }), []); - const mergedStyles = mergeStyles(tokenStyle, style); + const mergedStyles = mergeStyles(tokenStyle, style); return ( diff --git a/packages/components/Divider/src/Divider.styling.ts b/packages/components/Divider/src/Divider.styling.ts index 0aa99048ffb..ec1dc181eea 100644 --- a/packages/components/Divider/src/Divider.styling.ts +++ b/packages/components/Divider/src/Divider.styling.ts @@ -180,7 +180,7 @@ function getRootStyleWorker(rootStyle: StyleProp, isVertical: boolean if (isVertical) { minHeight = hasContent ? 84 : globalTokens.size200; } - return mergeStyles(rootStyle, { minHeight }); + return mergeStyles(rootStyle, { minHeight }); } /** @@ -190,7 +190,7 @@ function getRootStyleWorker(rootStyle: StyleProp, isVertical: boolean export const getBeforeLineStyle = memoize(getBeforeLineStyleWorker); function getBeforeLineStyleWorker(beforeLineStyle: StyleProp, hasContent: boolean): StyleProp { if (!hasContent) { - return mergeStyles(beforeLineStyle, { flex: 1 }); + return mergeStyles(beforeLineStyle, { flex: 1 }); } return beforeLineStyle; } diff --git a/packages/components/Icon/src/FontIcon/useFontIcon.ts b/packages/components/Icon/src/FontIcon/useFontIcon.ts index baac23f4358..3ce7c1ef4ec 100644 --- a/packages/components/Icon/src/FontIcon/useFontIcon.ts +++ b/packages/components/Icon/src/FontIcon/useFontIcon.ts @@ -13,7 +13,7 @@ export const useFontIcon = (props: FontIconProps): FontIconProps => { [color, fontSize, fontFamily], )[0]; - const mergedStyle = mergeStyles(style, styleOrig); + const mergedStyle = mergeStyles(style, styleOrig); return { accessible: accessible ?? true, diff --git a/packages/components/Icon/src/SvgIcon/useSvgIcon.ts b/packages/components/Icon/src/SvgIcon/useSvgIcon.ts index dd6a8b89a7c..aa23677b63e 100644 --- a/packages/components/Icon/src/SvgIcon/useSvgIcon.ts +++ b/packages/components/Icon/src/SvgIcon/useSvgIcon.ts @@ -1,6 +1,7 @@ import { getMemoCache, mergeStyles } from '@fluentui-react-native/framework'; import type { SvgIconProps } from './SvgIcon.types'; +import type { ImageStyle } from 'react-native'; const rasterImageStyleCache = getMemoCache(); @@ -9,7 +10,7 @@ export const useSvgIcon = (props: SvgIconProps): SvgIconProps => { return { accessible: accessible ?? true, height, - style: mergeStyles(style, rasterImageStyleCache({ width, height }, [width, height])[0]), + style: mergeStyles(style, rasterImageStyleCache({ width, height }, [width, height])[0]), width, ...rest, }; diff --git a/packages/components/Icon/src/legacy/Icon.tsx b/packages/components/Icon/src/legacy/Icon.tsx index ee160fefe6f..7eaf492a7fc 100644 --- a/packages/components/Icon/src/legacy/Icon.tsx +++ b/packages/components/Icon/src/legacy/Icon.tsx @@ -1,5 +1,5 @@ import { Image, Platform, View } from 'react-native'; -import type { ImageStyle, TextStyle } from 'react-native'; +import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'; import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; import { stagedComponent, mergeProps, getMemoCache, getTypedMemoCache } from '@fluentui-react-native/framework'; @@ -13,7 +13,7 @@ const rasterImageStyleCache = getTypedMemoCache(); function renderRasterImage(iconProps: IconProps) { const { width, height, color } = iconProps; - const style = mergeStyles( + const style = mergeStyles( iconProps.style, rasterImageStyleCache({ width: width, height: height, tintColor: color }, [width, height, color])[0], ); @@ -68,7 +68,7 @@ function renderFontIcon(iconProps: IconProps) { function renderSvg(iconProps: IconProps) { const svgIconProps: SvgIconProps = iconProps.svgSource; const { accessible, accessibilityLabel, width, height, color } = iconProps; - const style = mergeStyles(iconProps.style, rasterImageStyleCache({ width, height }, [width, height])[0]); + const style = mergeStyles(iconProps.style, rasterImageStyleCache({ width, height }, [width, height])[0]); const svgProps: SvgProps = { width, height, color }; if (svgIconProps.viewBox) { diff --git a/packages/components/TabList/src/TabList/useTabList.ts b/packages/components/TabList/src/TabList/useTabList.ts index f367425c47c..32fdca740f5 100644 --- a/packages/components/TabList/src/TabList/useTabList.ts +++ b/packages/components/TabList/src/TabList/useTabList.ts @@ -123,7 +123,7 @@ export const useTabList = (props: TabListProps): TabListInfo => { const updateStyles = React.useCallback( (update: AnimatedIndicatorStyles) => { - setUserDefinedAnimatedIndicatorStyles((prev) => mergeStyles(prev, update)); + setUserDefinedAnimatedIndicatorStyles((prev) => mergeStyles(prev, update)); }, [setUserDefinedAnimatedIndicatorStyles], ); diff --git a/packages/components/Text/src/Text.tsx b/packages/components/Text/src/Text.tsx index fa9070b98c8..02bd31f62af 100644 --- a/packages/components/Text/src/Text.tsx +++ b/packages/components/Text/src/Text.tsx @@ -1,6 +1,6 @@ /** @jsxImportSource @fluentui-react-native/framework-base */ import React from 'react'; -import { I18nManager, Platform, Text as RNText } from 'react-native'; +import { I18nManager, Platform, Text as RNText, type TextStyle } from 'react-native'; import type { UseTokens, FontWeightValue } from '@fluentui-react-native/framework'; import { fontStyles, useFluentTheme, mergeStyles, compressible, patchTokens } from '@fluentui-react-native/framework'; @@ -137,7 +137,7 @@ export const Text = compressible((props: TextProps, useTo ...maxFontSizeScaleAdjustment, onPress, numberOfLines: numberOfLines ?? (truncate || !wrap ? 1 : 0), - style: mergeStyles(tokenStyle, props.style, extra?.style), + style: mergeStyles(tokenStyle, props.style, extra?.style), }; // RN TextStyle doesn't recognize these properties. diff --git a/packages/experimental/Overflow/src/OverflowItem/OverflowItem.tsx b/packages/experimental/Overflow/src/OverflowItem/OverflowItem.tsx index 8ce16638f9b..db0e6513e52 100644 --- a/packages/experimental/Overflow/src/OverflowItem/OverflowItem.tsx +++ b/packages/experimental/Overflow/src/OverflowItem/OverflowItem.tsx @@ -35,7 +35,7 @@ export const OverflowItem = stagedComponent((userProps: Overf } // Assume that the child can accept ViewProps. - const viewStyles = mergeStyles(child.props.style, mergedProps.style); + const viewStyles = mergeStyles(child.props.style, mergedProps.style); const viewProps = getOverflowItemProps(mergedProps, viewStyles); const clone = React.cloneElement(child, viewProps); diff --git a/packages/experimental/Overflow/src/OverflowItem/useOverflowItem.ts b/packages/experimental/Overflow/src/OverflowItem/useOverflowItem.ts index e695dbc1eb0..d57610b720d 100644 --- a/packages/experimental/Overflow/src/OverflowItem/useOverflowItem.ts +++ b/packages/experimental/Overflow/src/OverflowItem/useOverflowItem.ts @@ -85,7 +85,7 @@ export function useOverflowItem(props: OverflowItemProps): OverflowItemInfo { if (!dontHideBeforeReady && !layoutDone) { stylesToMerge.push({ opacity: 0 }); } - return mergeStyles(...stylesToMerge); + return mergeStyles(...stylesToMerge); }, [controlledSize, dontHideBeforeReady, layoutDone, props.style]); // Visibility being set extends past the general itemVisibility controlled by the Overflow state. diff --git a/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx b/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx index dec04e15ba1..6b82ed79d61 100644 --- a/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx +++ b/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Text, View } from 'react-native'; +import { Text, View, type ViewStyle } from 'react-native'; import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; import { Pressable } from '@fluentui-react-native/pressable'; @@ -46,7 +46,7 @@ const TestShadowOnChildViewWithProps: React.FunctionComponent - + (props.childViewStyleProps, backgroundColor)}> {JSON.stringify(props.childViewStyleProps)} diff --git a/packages/framework-base/src/memo-cache/README.md b/packages/framework-base/src/memo-cache/README.md index 0a2b727aace..9c527bee970 100644 --- a/packages/framework-base/src/memo-cache/README.md +++ b/packages/framework-base/src/memo-cache/README.md @@ -134,7 +134,7 @@ export const MyComponent = (props: IMyComponentProps) => { }, [theme]); // merge the styles if a style is passed in via props, caching the union to ensure consistent object identity - newProps.style = newProps.style ? themeLocalCache(() => mergeStyles(style, newProps.style), [newProps.style])[0] : style; + newProps.style = newProps.style ? themeLocalCache(() => mergeStyles(style, newProps.style), [newProps.style])[0] : style; return ; }; diff --git a/packages/framework-base/src/merge-props/mergeStyles.ts b/packages/framework-base/src/merge-props/mergeStyles.ts index bcb45f61526..8001efd8cef 100644 --- a/packages/framework-base/src/merge-props/mergeStyles.ts +++ b/packages/framework-base/src/merge-props/mergeStyles.ts @@ -9,8 +9,8 @@ import type { StyleProp } from './mergeStyles.types'; * * @param style - StyleProp to flatten, this can be a TStyle or an array */ -export function flattenStyle(style: StyleProp): object { - return Array.isArray(style) ? immutableMerge(...style.map((v) => flattenStyle(v))) : style || {}; +export function flattenStyle(style: StyleProp): T { + return Array.isArray(style) ? immutableMerge(...style.map((v) => flattenStyle(v))) : ((style || {}) as T); } /** @@ -18,23 +18,26 @@ export function flattenStyle(style: StyleProp): object { * * @param styles - array of styles to merge together. The styles will be flattened as part of the process */ -export function mergeAndFlattenStyles(...styles: StyleProp[]): object | undefined { +export function mergeAndFlattenStyles(...styles: StyleProp[]): T | undefined { // baseline merge and flatten the objects return immutableMerge( ...styles.map((styleProp: StyleProp) => { return flattenStyle(styleProp); }), - ); + ) as T; } const _styleCache = getMemoCache(); -export function mergeStyles(...styles: StyleProp[]): object | undefined { +/** + * Function overloads to allow merging of styles of different types + */ +export function mergeStyles(...styles: StyleProp[]): T | undefined { // filter the style set to just objects (which might be arrays or plain style objects) const inputs = styles.filter((s) => typeof s === 'object') as object[]; // now memo the results if there is more than one element or if the one element is an array return inputs.length > 1 || (inputs.length === 1 && Array.isArray(inputs[0])) - ? _styleCache(() => mergeAndFlattenStyles(undefined, ...inputs), inputs)[0] - : inputs[0] || {}; + ? _styleCache(() => mergeAndFlattenStyles(undefined, ...inputs), inputs)[0] + : ((inputs[0] || {}) as T); } diff --git a/packages/framework/framework/src/compressible.test.tsx b/packages/framework/framework/src/compressible.test.tsx index 776efadba5e..a68f826ebcb 100644 --- a/packages/framework/framework/src/compressible.test.tsx +++ b/packages/framework/framework/src/compressible.test.tsx @@ -52,7 +52,7 @@ const VariantText = compressible( // now apply the alternate layer tokens as appropriate [tokens, cache] = applyTokenLayers(tokens, ['normal', 'header', 'caption'], cache, (layer) => layer === variant); // merge styles together with what is passed in - const mergedStyle = mergeStyles({ color: tokens.color, fontSize: tokens.fontSize, fontWeight: tokens.fontWeight }, style); + const mergedStyle = mergeStyles({ color: tokens.color, fontSize: tokens.fontSize, fontWeight: tokens.fontWeight }, style); // now get the slot const InnerText = useSlot(Text, { ...rest, style: mergedStyle }); diff --git a/packages/framework/use-slot/README.md b/packages/framework/use-slot/README.md index 3ff6910be6a..38e0a66770e 100644 --- a/packages/framework/use-slot/README.md +++ b/packages/framework/use-slot/README.md @@ -66,7 +66,7 @@ const StyledText = (props: React.PropsWithChildren) => { const { children, override, ...rest } = props; // create a merged set of props. The mergeStyle utility here will avoid creating unnecessary permutations of styles - const mergedProps = { ...rest, style: mergeStyles(baseStyle, rest.style) }; + const mergedProps = { ...rest, style: mergeStyles(baseStyle, rest.style) }; // create a slot that can be used to render, props passed in here will be remembered in render. If override is set the slot will be changed, otherwise Text will be used const InnerText = useSlot(override || Text, mergedProps); diff --git a/packages/framework/use-slot/src/useSlot.test.tsx b/packages/framework/use-slot/src/useSlot.test.tsx index f05d40778b3..561ed093c6c 100644 --- a/packages/framework/use-slot/src/useSlot.test.tsx +++ b/packages/framework/use-slot/src/useSlot.test.tsx @@ -1,6 +1,6 @@ /** @jsxImportSource @fluentui-react-native/framework-base */ import * as React from 'react'; -import type { TextProps } from 'react-native'; +import type { TextProps, TextStyle } from 'react-native'; import { Text, View } from 'react-native'; import { mergeStyles } from '@fluentui-react-native/framework-base'; @@ -37,7 +37,7 @@ const useStyledStagedText = ( const { style, ...rest } = props; // create merged props to pass in to the inner slot - const mergedProps = { ...rest, style: mergeStyles(baseStyle, style), ...(inner && { inner }) }; + const mergedProps = { ...rest, style: mergeStyles(baseStyle, style), ...(inner && { inner }) }; // create a slot based on the pluggable text const InnerText = useSlot(PluggableText, mergedProps); @@ -66,7 +66,7 @@ const CaptionText = stagedComponent((props: PluggableTextProps) => { const HeaderCaptionText1 = (props: React.PropsWithChildren) => { const { children, ...rest } = props; const baseStyle = React.useMemo(() => ({ fontSize: 24, fontWeight: 'bold' }), []); - const mergedProps = { ...rest, style: mergeStyles(baseStyle, props.style) }; + const mergedProps = { ...rest, style: mergeStyles(baseStyle, props.style) }; const InnerText = useSlot(CaptionText, mergedProps); return {children}; }; diff --git a/packages/framework/use-tokens/README.md b/packages/framework/use-tokens/README.md index 18a0a5f6a94..82b596e94cc 100644 --- a/packages/framework/use-tokens/README.md +++ b/packages/framework/use-tokens/README.md @@ -56,7 +56,7 @@ const StyledText: React.FunctionComponent = (props) => { const [tokenStyle] = cache(() => ({ ...tokens }), []); // now merge any styles coming from the props in on top as they should override - const mergedStyles = mergeStyles(tokenStyle, style); + const mergedStyles = mergeStyles(tokenStyle, style); // now just render the text element return ( diff --git a/packages/framework/use-tokens/src/useTokens.samples.test.tsx b/packages/framework/use-tokens/src/useTokens.samples.test.tsx index 44776f41f18..ff42009b652 100644 --- a/packages/framework/use-tokens/src/useTokens.samples.test.tsx +++ b/packages/framework/use-tokens/src/useTokens.samples.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { TextProps } from 'react-native'; +import type { TextProps, TextStyle } from 'react-native'; import { Text, View } from 'react-native'; import { immutableMerge } from '@fluentui-react-native/framework-base'; @@ -115,7 +115,7 @@ describe('useTokens samples', () => { // merge the props from the tokens with anything passed in via style. This is internally cached via object identity // so the merged style object won't change identity unless one of the two inputs changes identity. - const mergedStyle = mergeStyles(styleFromTokens, style); + const mergedStyle = mergeStyles(styleFromTokens, style); // now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate return ( @@ -176,7 +176,7 @@ describe('useTokens samples', () => { // now just render, this time merging styles inline to make it a bit shorter return ( - + (styleFromTokens, style)}> {children} );