Skip to content

Commit a9ed607

Browse files
authored
Pre-81: Add a template param to mergeStyles to control the output type (#3995)
* add template params to mergeStyles for stronger result typing * Change files
1 parent c839205 commit a9ed607

30 files changed

Lines changed: 125 additions & 44 deletions

File tree

apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { View } from 'react-native';
2+
import { View, type ViewStyle } from 'react-native';
33

44
import { Text } from '@fluentui/react-native';
55
import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
@@ -42,7 +42,7 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
4242

4343
return (
4444
<Shadow shadowToken={props.shadowToken}>
45-
<View style={mergeStyles(themedStyles.shadowTestBox, backgroundColor)}>
45+
<View style={mergeStyles<ViewStyle>(themedStyles.shadowTestBox, backgroundColor)}>
4646
<Text variant="bodySemibold" color={textColor}>
4747
{props.shadowDepthText}
4848
</Text>
@@ -54,7 +54,7 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
5454

5555
export const ShadowDepthTestSection: React.FunctionComponent = () => {
5656
const theme = useFluentTheme();
57-
const backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor;
57+
const backgroundViewStyle = mergeStyles<ViewStyle>(shadowTestPageStyles(theme).backgroundColor);
5858

5959
return (
6060
<View style={backgroundViewStyle}>

apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { View } from 'react-native';
2+
import { View, type ViewStyle } from 'react-native';
33

44
import { Text } from '@fluentui/react-native';
55
import { Shadow } from '@fluentui-react-native/experimental-shadow';
@@ -66,23 +66,23 @@ export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () =
6666
</View>
6767
</Shadow>
6868
<Shadow shadowToken={theme.shadows.shadow16}>
69-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}>
69+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}>
7070
<Text variant="bodySemibold">padding only</Text>
7171
</View>
7272
</Shadow>
7373
<Shadow shadowToken={theme.shadows.shadow16}>
74-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}>
74+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}>
7575
<Text variant="bodySemibold">margins only</Text>
7676
</View>
7777
</Shadow>
7878
<Shadow shadowToken={theme.shadows.shadow16}>
79-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}>
79+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}>
8080
<Text variant="bodySemibold">borderRadius: 8</Text>
8181
</View>
8282
</Shadow>
8383
<Shadow shadowToken={theme.shadows.shadow16}>
8484
<View
85-
style={mergeStyles(
85+
style={mergeStyles<ViewStyle>(
8686
themedStyles.defaultShadowTestBoxProps,
8787
themedStyles.borderRadiusTestProps,
8888
themedStyles.borderWidthTestProps,
@@ -92,22 +92,22 @@ export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () =
9292
</View>
9393
</Shadow>
9494
<Shadow shadowToken={theme.shadows.shadow16}>
95-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps)}>
95+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps)}>
9696
<Text variant="bodySemibold">start: 10</Text>
9797
</View>
9898
</Shadow>
9999
<Shadow shadowToken={theme.shadows.shadow16}>
100-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps)}>
100+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps)}>
101101
<Text variant="bodySemibold">alignItems: flex-start</Text>
102102
</View>
103103
</Shadow>
104104
<Shadow shadowToken={theme.shadows.shadow16}>
105-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps)}>
105+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps)}>
106106
<Text variant="bodySemibold">flexDirection: row</Text>
107107
</View>
108108
</Shadow>
109109
<Shadow shadowToken={theme.shadows.shadow16}>
110-
<View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps)}>
110+
<View style={mergeStyles<ViewStyle>(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps)}>
111111
<Text variant="bodySemibold">flexWrap: wrap</Text>
112112
</View>
113113
</Shadow>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/divider",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/experimental-shadow",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/framework-base",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/framework",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/icon",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/overflow",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/tablist",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add template params to mergeStyles for stronger result typing",
4+
"packageName": "@fluentui-react-native/tester-core",
5+
"email": "jasonmo@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

0 commit comments

Comments
 (0)