Skip to content

Commit 540dad5

Browse files
ayush547ayush547
authored
[FAB] Tokenize for iOS (#2944)
* Add tokens for iOS FAB * Change files * Complete FAB changes * Change files * Update snapshots
1 parent 368538f commit 540dad5

File tree

6 files changed

+133
-37
lines changed

6 files changed

+133
-37
lines changed

‎apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,9 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
8080
<Button size="large" appearance="primary" icon={iconProps} style={commonTestStyles.vmargin}>
8181
Large Button with icon
8282
</Button>
83-
{Platform.OS == 'android' && (
84-
<FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
85-
Small FAB
86-
</FAB>
87-
)}
83+
<FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
84+
Small FAB
85+
</FAB>
8886
<FAB size="large" icon={iconProps} style={commonTestStyles.vmargin}>
8987
Large FAB
9088
</FAB>

‎change/@fluentui-react-native-button-89298f58-7367-4905-8b26-884d58e3ed4f.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Add tokens for iOS FAB",
4+
"packageName": "@fluentui-react-native/button",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-native-tester-96572a28-5639-4a1a-b360-dc5d706c5a88.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Complete FAB changes",
4+
"packageName": "@fluentui-react-native/tester",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/components/Button/src/FAB/FABColorTokens.ios.ts

+37-17
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,47 @@ import type { TokenSettings } from '@fluentui-react-native/use-styling';
44
import type { FABTokens } from './FAB.types';
55

66
export const defaultFABColorTokens: TokenSettings<FABTokens, Theme> = (t: Theme): FABTokens => ({
7-
// Coloring same as primary
8-
backgroundColor: t.colors.brandedBackground,
9-
color: t.colors.brandedContent,
10-
borderColor: t.colors.brandedBorder,
11-
iconColor: t.colors.brandedIcon,
7+
// Default coloring same as 'primary' or 'accent'
8+
backgroundColor: t.colors.brandBackground,
9+
color: t.colors.neutralForegroundOnColor,
10+
iconColor: t.colors.neutralForegroundOnColor,
1211
disabled: {
13-
backgroundColor: t.colors.brandedDisabledBackground,
14-
color: t.colors.brandedDisabledContent,
15-
borderColor: t.colors.brandedDisabledBorder,
16-
iconColor: t.colors.brandedDisabledIcon,
12+
backgroundColor: t.colors.neutralBackground5,
13+
color: t.colors.neutralForegroundDisabled,
14+
iconColor: t.colors.neutralForegroundDisabled,
1715
},
1816
pressed: {
19-
backgroundColor: t.colors.brandedPressedBackground,
20-
color: t.colors.brandedPressedContent,
21-
borderColor: t.colors.brandedPressedBorder,
22-
iconColor: t.colors.brandedPressedIcon,
17+
backgroundColor: t.colors.brandBackgroundPressed,
18+
color: t.colors.neutralForegroundOnColor,
19+
iconColor: t.colors.neutralForegroundOnColor,
2320
},
2421
focused: {
25-
backgroundColor: t.colors.brandedFocusedBackground,
26-
color: t.colors.brandedFocusedContent,
27-
borderColor: t.colors.brandedFocusedBorder,
28-
iconColor: t.colors.brandedFocusedIcon,
22+
backgroundColor: t.colors.brandBackground,
23+
color: t.colors.neutralForegroundOnColor,
24+
borderColor: t.colors.strokeFocus2,
25+
borderInnerColor: t.colors.strokeFocus1,
26+
iconColor: t.colors.neutralForegroundOnColor,
27+
},
28+
subtle: {
29+
backgroundColor: t.colors.neutralBackground1,
30+
color: t.colors.neutralForeground2,
31+
iconColor: t.colors.neutralForeground2,
32+
disabled: {
33+
backgroundColor: t.colors.neutralBackground5,
34+
color: t.colors.neutralForegroundDisabled,
35+
iconColor: t.colors.neutralForegroundDisabled,
36+
},
37+
pressed: {
38+
backgroundColor: t.colors.neutralBackground1Pressed,
39+
color: t.colors.neutralForeground2,
40+
iconColor: t.colors.neutralForeground2,
41+
},
42+
focused: {
43+
backgroundColor: t.colors.neutralBackground1,
44+
color: t.colors.neutralForeground2,
45+
borderColor: t.colors.strokeFocus2,
46+
borderInnerColor: t.colors.strokeFocus1,
47+
iconColor: t.colors.neutralForeground2,
48+
},
2949
},
3050
});

‎packages/components/Button/src/FAB/FABTokens.ios.ts

+69-8
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,74 @@ import type { FABTokens } from './FAB.types';
66

77
export const defaultFABTokens: TokenSettings<FABTokens, Theme> = (t: Theme) =>
88
({
9-
borderRadius: globalTokens.corner.radiusCircular,
10-
iconSize: 24,
11-
minHeight: 56,
12-
minWidth: 56,
13-
padding: globalTokens.size200,
14-
hasContent: {
15-
spacingIconContentBefore: globalTokens.size80,
16-
},
179
shadowToken: t.shadows.shadow8,
10+
disabled: {
11+
shadowToken: t.shadows.shadow2,
12+
},
13+
pressed: {
14+
shadowToken: t.shadows.shadow2,
15+
},
16+
focused: {
17+
shadowToken: t.shadows.shadow2,
18+
borderWidth: globalTokens.stroke.width20,
19+
borderInnerWidth: globalTokens.stroke.width10,
20+
},
21+
subtle: {
22+
shadowToken: t.shadows.shadow8,
23+
disabled: {
24+
shadowToken: t.shadows.shadow2,
25+
},
26+
pressed: {
27+
shadowToken: t.shadows.shadow2,
28+
},
29+
focused: {
30+
shadowToken: t.shadows.shadow2,
31+
borderWidth: globalTokens.stroke.width20,
32+
borderInnerWidth: globalTokens.stroke.width10,
33+
},
34+
},
35+
large: {
36+
borderRadius: globalTokens.corner.radiusCircular,
37+
iconSize: 24,
38+
minHeight: 56,
39+
minWidth: 56,
40+
paddingHorizontal: globalTokens.size160,
41+
paddingVertical: globalTokens.size160,
42+
spacingIconContentBefore: 0,
43+
hasContent: {
44+
borderRadius: globalTokens.corner.radiusCircular,
45+
iconSize: 24,
46+
fontSize: t.typography.variants.body1Strong.size,
47+
fontFamily: t.typography.variants.body1Strong.face,
48+
fontWeight: t.typography.variants.body1Strong.weight,
49+
minHeight: 56,
50+
minWidth: 56,
51+
paddingStart: globalTokens.size160,
52+
paddingEnd: globalTokens.size200,
53+
paddingVertical: globalTokens.size160,
54+
spacingIconContentBefore: globalTokens.size80,
55+
},
56+
},
57+
small: {
58+
borderRadius: globalTokens.corner.radiusCircular,
59+
iconSize: 20,
60+
minHeight: 44,
61+
minWidth: 44,
62+
paddingHorizontal: globalTokens.size120,
63+
paddingVertical: globalTokens.size120,
64+
spacingIconContentBefore: 0,
65+
hasContent: {
66+
borderRadius: globalTokens.corner.radiusCircular,
67+
iconSize: 20,
68+
fontSize: t.typography.variants.body2Strong.size,
69+
fontFamily: t.typography.variants.body2Strong.face,
70+
fontWeight: t.typography.variants.body2Strong.weight,
71+
minHeight: 48,
72+
minWidth: 48,
73+
paddingHorizontal: globalTokens.size120,
74+
paddingStart: globalTokens.size120,
75+
paddingEnd: globalTokens.size160,
76+
spacingIconContentBefore: globalTokens.size80,
77+
},
78+
},
1879
} as FABTokens);

‎packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap

+10-7
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,16 @@ exports[`Custom FAB with no shadow(iOS) 1`] = `
4141
"alignItems": "center",
4242
"alignSelf": "flex-start",
4343
"backgroundColor": "#0f6cbd",
44-
"borderColor": "#0f548c",
4544
"borderRadius": 9999,
4645
"display": "flex",
4746
"flexDirection": "row",
4847
"justifyContent": "center",
4948
"minHeight": 56,
5049
"minWidth": 56,
51-
"padding": 20,
50+
"paddingEnd": 20,
51+
"paddingHorizontal": 16,
52+
"paddingStart": 16,
53+
"paddingVertical": 16,
5254
"width": undefined,
5355
}
5456
}
@@ -76,7 +78,7 @@ exports[`Custom FAB with no shadow(iOS) 1`] = `
7678
"color": "#ffffff",
7779
"fontFamily": "System",
7880
"fontSize": 13,
79-
"fontWeight": "400",
81+
"fontWeight": "600",
8082
"margin": 0,
8183
"marginBottom": 0,
8284
"marginEnd": 0,
@@ -96,7 +98,6 @@ exports[`Default FAB (iOS) 1`] = `
9698
{
9799
"alignSelf": "flex-start",
98100
"backgroundColor": "#0f6cbd",
99-
"borderColor": "#0f548c",
100101
"borderRadius": 9999,
101102
"display": "flex",
102103
"justifyContent": "center",
@@ -152,14 +153,16 @@ exports[`Default FAB (iOS) 1`] = `
152153
"alignItems": "center",
153154
"alignSelf": "flex-start",
154155
"backgroundColor": "#0f6cbd",
155-
"borderColor": "#0f548c",
156156
"borderRadius": 9999,
157157
"display": "flex",
158158
"flexDirection": "row",
159159
"justifyContent": "center",
160160
"minHeight": 56,
161161
"minWidth": 56,
162-
"padding": 20,
162+
"paddingEnd": 20,
163+
"paddingHorizontal": 16,
164+
"paddingStart": 16,
165+
"paddingVertical": 16,
163166
"shadowColor": "#000000",
164167
"shadowOffset": {
165168
"height": 4,
@@ -193,7 +196,7 @@ exports[`Default FAB (iOS) 1`] = `
193196
"color": "#ffffff",
194197
"fontFamily": "System",
195198
"fontSize": 13,
196-
"fontWeight": "400",
199+
"fontWeight": "600",
197200
"margin": 0,
198201
"marginBottom": 0,
199202
"marginEnd": 0,

0 commit comments

Comments
 (0)