diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx index 2434ce0d3a..78fba881a8 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 3db85caa14..abbe58fa25 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 0000000000..fe118bdc46 --- /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 0000000000..e771af91d9 --- /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 0000000000..92aa7fb046 --- /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 0000000000..b1428cc675 --- /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 0000000000..a8f9880441 --- /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 0000000000..99d0137afc --- /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 0000000000..bd8e6efc42 --- /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 0000000000..d99587f303 --- /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 0000000000..d2450ff859 --- /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 0000000000..4831577141 --- /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 0000000000..349ee3a38e --- /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 8a6a82b17d..bf829250a0 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 0aa99048ff..ec1dc181ee 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 baac23f435..3ce7c1ef4e 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 dd6a8b89a7..aa23677b63 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 ee160fefe6..7eaf492a7f 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 f367425c47..32fdca740f 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 fa9070b98c..02bd31f62a 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 8ce16638f9..db0e6513e5 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 e695dbc1eb..d57610b720 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 dec04e15ba..6b82ed79d6 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 0a2b727aac..9c527bee97 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 bcb45f6152..8001efd8ce 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 776efadba5..a68f826ebc 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 3ff6910be6..38e0a66770 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 f05d40778b..561ed093c6 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 18a0a5f6a9..82b596e94c 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 44776f41f1..ff42009b65 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} );