@fluentui-react-native/tester 0.134.24 → 0.134.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.json +253 -1
  2. package/CHANGELOG.md +55 -2
  3. package/lib/fluent-tester/src/FluentTesterApp.d.ts.map +1 -1
  4. package/lib/fluent-tester/src/FluentTesterApp.js +29 -2
  5. package/lib/fluent-tester/src/FluentTesterApp.js.map +1 -1
  6. package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts +3 -0
  7. package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts.map +1 -0
  8. package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js +100 -0
  9. package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js.map +1 -0
  10. package/lib-commonjs/fluent-tester/src/FluentTesterApp.d.ts.map +1 -1
  11. package/lib-commonjs/fluent-tester/src/FluentTesterApp.js +28 -1
  12. package/lib-commonjs/fluent-tester/src/FluentTesterApp.js.map +1 -1
  13. package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts +3 -0
  14. package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts.map +1 -0
  15. package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js +104 -0
  16. package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js.map +1 -0
  17. package/package.json +38 -38
  18. package/src/FluentTesterApp.tsx +37 -2
  19. package/src/TestComponents/Theme/ThemeTest.android.tsx +141 -0
package/CHANGELOG.json CHANGED
@@ -2,7 +2,259 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 02 Mar 2023 19:10:41 GMT",
5
+ "date": "Fri, 03 Mar 2023 15:37:49 GMT",
6
+ "tag": "@fluentui-react-native/tester_v0.134.26",
7
+ "version": "0.134.26",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui-react-native/tester",
13
+ "comment": "Bump @fluentui-react-native/menu to v1.4.17",
14
+ "commit": "1a29b5bc54d319fdfb1104fd6eba77345521b151"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Fri, 03 Mar 2023 06:47:25 GMT",
21
+ "tag": "@fluentui-react-native/tester_v0.134.25",
22
+ "version": "0.134.25",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "email not defined",
27
+ "package": "@fluentui-react-native/tester",
28
+ "commit": "4659b74650377d2f746a81a321346a481816a5af",
29
+ "comment": "Example"
30
+ },
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui-react-native/tester",
34
+ "comment": "Bump @fluentui-react-native/android-theme to v0.16.9",
35
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui-react-native/tester",
40
+ "comment": "Bump @fluentui-react-native/apple-theme to v0.18.15",
41
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui-react-native/tester",
46
+ "comment": "Bump @fluentui-react-native/avatar to v1.7.2",
47
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui-react-native/tester",
52
+ "comment": "Bump @fluentui-react-native/badge to v0.4.33",
53
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui-react-native/tester",
58
+ "comment": "Bump @fluentui-react-native/button to v0.32.38",
59
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui-react-native/tester",
64
+ "comment": "Bump @fluentui-react-native/default-theme to v0.17.4",
65
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui-react-native/tester",
70
+ "comment": "Bump @fluentui-react-native/divider to v0.3.5",
71
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui-react-native/tester",
76
+ "comment": "Bump @fluentui-react-native/dropdown to v0.7.35",
77
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui-react-native/tester",
82
+ "comment": "Bump @fluentui-react-native/experimental-activity-indicator to v0.7.21",
83
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
84
+ },
85
+ {
86
+ "author": "beachball",
87
+ "package": "@fluentui-react-native/tester",
88
+ "comment": "Bump @fluentui-react-native/experimental-appearance-additions to v0.3.5",
89
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui-react-native/tester",
94
+ "comment": "Bump @fluentui-react-native/experimental-avatar to v0.17.19",
95
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui-react-native/tester",
100
+ "comment": "Bump @fluentui-react-native/experimental-button to v0.16.96",
101
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui-react-native/tester",
106
+ "comment": "Bump @fluentui-react-native/experimental-checkbox to v0.13.42",
107
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui-react-native/tester",
112
+ "comment": "Bump @fluentui-react-native/experimental-expander to v0.5.21",
113
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui-react-native/tester",
118
+ "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.6.37",
119
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui-react-native/tester",
124
+ "comment": "Bump @fluentui-react-native/experimental-radio-group to v0.9.23",
125
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
126
+ },
127
+ {
128
+ "author": "beachball",
129
+ "package": "@fluentui-react-native/tester",
130
+ "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.73",
131
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
132
+ },
133
+ {
134
+ "author": "beachball",
135
+ "package": "@fluentui-react-native/tester",
136
+ "comment": "Bump @fluentui-react-native/experimental-shimmer to v0.8.23",
137
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
138
+ },
139
+ {
140
+ "author": "beachball",
141
+ "package": "@fluentui-react-native/tester",
142
+ "comment": "Bump @fluentui-react-native/experimental-tabs to v0.8.37",
143
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
144
+ },
145
+ {
146
+ "author": "beachball",
147
+ "package": "@fluentui-react-native/tester",
148
+ "comment": "Bump @fluentui-react-native/experimental-text to v0.11.55",
149
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
150
+ },
151
+ {
152
+ "author": "beachball",
153
+ "package": "@fluentui-react-native/tester",
154
+ "comment": "Bump @fluentui-react-native/framework to v0.9.4",
155
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
156
+ },
157
+ {
158
+ "author": "beachball",
159
+ "package": "@fluentui-react-native/tester",
160
+ "comment": "Bump @fluentui-react-native/icon to v0.17.17",
161
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
162
+ },
163
+ {
164
+ "author": "beachball",
165
+ "package": "@fluentui-react-native/tester",
166
+ "comment": "Bump @fluentui-react-native/interactive-hooks to v0.22.22",
167
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
168
+ },
169
+ {
170
+ "author": "beachball",
171
+ "package": "@fluentui-react-native/tester",
172
+ "comment": "Bump @fluentui-react-native/menu to v1.4.16",
173
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
174
+ },
175
+ {
176
+ "author": "beachball",
177
+ "package": "@fluentui-react-native/tester",
178
+ "comment": "Bump @fluentui-react-native/notification to v0.21.39",
179
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
180
+ },
181
+ {
182
+ "author": "beachball",
183
+ "package": "@fluentui-react-native/tester",
184
+ "comment": "Bump @fluentui-react-native/separator to v0.14.18",
185
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
186
+ },
187
+ {
188
+ "author": "beachball",
189
+ "package": "@fluentui-react-native/tester",
190
+ "comment": "Bump @fluentui-react-native/stack to v0.7.56",
191
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
192
+ },
193
+ {
194
+ "author": "beachball",
195
+ "package": "@fluentui-react-native/tester",
196
+ "comment": "Bump @fluentui-react-native/switch to v0.8.31",
197
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
198
+ },
199
+ {
200
+ "author": "beachball",
201
+ "package": "@fluentui-react-native/tester",
202
+ "comment": "Bump @fluentui-react-native/text to v0.19.24",
203
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
204
+ },
205
+ {
206
+ "author": "beachball",
207
+ "package": "@fluentui-react-native/tester",
208
+ "comment": "Bump @fluentui-react-native/theme to v0.8.2",
209
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
210
+ },
211
+ {
212
+ "author": "beachball",
213
+ "package": "@fluentui-react-native/tester",
214
+ "comment": "Bump @fluentui-react-native/theme-tokens to v0.24.4",
215
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
216
+ },
217
+ {
218
+ "author": "beachball",
219
+ "package": "@fluentui-react-native/tester",
220
+ "comment": "Bump @fluentui-react-native/theme-types to v0.30.4",
221
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
222
+ },
223
+ {
224
+ "author": "beachball",
225
+ "package": "@fluentui-react-native/tester",
226
+ "comment": "Bump @fluentui-react-native/theming-utils to v0.23.6",
227
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
228
+ },
229
+ {
230
+ "author": "beachball",
231
+ "package": "@fluentui-react-native/tester",
232
+ "comment": "Bump @fluentui-react-native/win32-theme to v0.25.4",
233
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
234
+ },
235
+ {
236
+ "author": "beachball",
237
+ "package": "@fluentui-react-native/tester",
238
+ "comment": "Bump @fluentui/react-native to v0.36.8",
239
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
240
+ },
241
+ {
242
+ "author": "beachball",
243
+ "package": "@fluentui-react-native/tester",
244
+ "comment": "Bump @fluentui-react-native/spinner to v0.2.6",
245
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
246
+ },
247
+ {
248
+ "author": "beachball",
249
+ "package": "@fluentui-react-native/tester",
250
+ "comment": "Bump @fluentui-react-native/focus-zone to v0.11.34",
251
+ "commit": "4659b74650377d2f746a81a321346a481816a5af"
252
+ }
253
+ ]
254
+ }
255
+ },
256
+ {
257
+ "date": "Thu, 02 Mar 2023 19:11:57 GMT",
6
258
  "tag": "@fluentui-react-native/tester_v0.134.24",
7
259
  "version": "0.134.24",
8
260
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,65 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Thu, 02 Mar 2023 19:10:41 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 03 Mar 2023 15:37:49 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.134.26
8
+
9
+ Fri, 03 Mar 2023 15:37:49 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/menu to v1.4.17
14
+
15
+ ## 0.134.25
16
+
17
+ Fri, 03 Mar 2023 06:47:25 GMT
18
+
19
+ ### Patches
20
+
21
+ - Example (email not defined)
22
+ - Bump @fluentui-react-native/android-theme to v0.16.9
23
+ - Bump @fluentui-react-native/apple-theme to v0.18.15
24
+ - Bump @fluentui-react-native/avatar to v1.7.2
25
+ - Bump @fluentui-react-native/badge to v0.4.33
26
+ - Bump @fluentui-react-native/button to v0.32.38
27
+ - Bump @fluentui-react-native/default-theme to v0.17.4
28
+ - Bump @fluentui-react-native/divider to v0.3.5
29
+ - Bump @fluentui-react-native/dropdown to v0.7.35
30
+ - Bump @fluentui-react-native/experimental-activity-indicator to v0.7.21
31
+ - Bump @fluentui-react-native/experimental-appearance-additions to v0.3.5
32
+ - Bump @fluentui-react-native/experimental-avatar to v0.17.19
33
+ - Bump @fluentui-react-native/experimental-button to v0.16.96
34
+ - Bump @fluentui-react-native/experimental-checkbox to v0.13.42
35
+ - Bump @fluentui-react-native/experimental-expander to v0.5.21
36
+ - Bump @fluentui-react-native/experimental-menu-button to v0.6.37
37
+ - Bump @fluentui-react-native/experimental-radio-group to v0.9.23
38
+ - Bump @fluentui-react-native/experimental-shadow to v0.2.73
39
+ - Bump @fluentui-react-native/experimental-shimmer to v0.8.23
40
+ - Bump @fluentui-react-native/experimental-tabs to v0.8.37
41
+ - Bump @fluentui-react-native/experimental-text to v0.11.55
42
+ - Bump @fluentui-react-native/framework to v0.9.4
43
+ - Bump @fluentui-react-native/icon to v0.17.17
44
+ - Bump @fluentui-react-native/interactive-hooks to v0.22.22
45
+ - Bump @fluentui-react-native/menu to v1.4.16
46
+ - Bump @fluentui-react-native/notification to v0.21.39
47
+ - Bump @fluentui-react-native/separator to v0.14.18
48
+ - Bump @fluentui-react-native/stack to v0.7.56
49
+ - Bump @fluentui-react-native/switch to v0.8.31
50
+ - Bump @fluentui-react-native/text to v0.19.24
51
+ - Bump @fluentui-react-native/theme to v0.8.2
52
+ - Bump @fluentui-react-native/theme-tokens to v0.24.4
53
+ - Bump @fluentui-react-native/theme-types to v0.30.4
54
+ - Bump @fluentui-react-native/theming-utils to v0.23.6
55
+ - Bump @fluentui-react-native/win32-theme to v0.25.4
56
+ - Bump @fluentui/react-native to v0.36.8
57
+ - Bump @fluentui-react-native/spinner to v0.2.6
58
+ - Bump @fluentui-react-native/focus-zone to v0.11.34
59
+
7
60
  ## 0.134.24
8
61
 
9
- Thu, 02 Mar 2023 19:10:41 GMT
62
+ Thu, 02 Mar 2023 19:11:57 GMT
10
63
 
11
64
  ### Patches
12
65
 
package/lib/fluent-tester/src/FluentTesterApp.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAYtE,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA8CtE,CAAC"}
package/lib/fluent-tester/src/FluentTesterApp.js CHANGED
@@ -3,7 +3,7 @@ import { __assign } from "tslib";
3
3
  import * as React from 'react';
4
4
  import { Platform } from 'react-native';
5
5
  import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
6
- import { ThemeProvider } from '@fluentui-react-native/theme';
6
+ import { ThemeReference, ThemeProvider } from '@fluentui-react-native/theme';
7
7
  import { FluentTester } from './FluentTester';
8
8
  import { testerTheme } from './theme/index';
9
9
  export var FluentTesterApp = function (props) {
@@ -11,7 +11,34 @@ export var FluentTesterApp = function (props) {
11
11
  var isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
12
12
  // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
13
13
  var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
14
- return (React.createElement(ThemeProvider, { theme: testerTheme },
14
+ var customTheme = new ThemeReference(testerTheme, function () {
15
+ return {
16
+ colors: { brandBackground2: 'red' }, // Overrides the buttonBackground color token, all other colors are kept in-tact.
17
+ };
18
+ }, function (theme) {
19
+ return {
20
+ colors: {
21
+ neutralForeground1: theme.colors.brandBackground2,
22
+ hostColorPink: 'pink',
23
+ hostColorBrandText: 'purple',
24
+ hostColorButtonBackground: 'yellow', // New custom color key.
25
+ },
26
+ spacing: {
27
+ s1: '10px',
28
+ },
29
+ };
30
+ }, function () {
31
+ // Any other recipe.
32
+ return {
33
+ colors: {
34
+ yellowBrandColor: 'yellow',
35
+ hostColorButtonBackground: 'green', // Overrides custom color key 'hostColorButtonBackground' - it is green in theme now.
36
+ },
37
+ };
38
+ });
39
+ // Use the custom colors for Android and iOS.
40
+ var fluentTesterTheme = isMobile ? customTheme : testerTheme;
41
+ return (React.createElement(ThemeProvider, { theme: fluentTesterTheme },
15
42
  React.createElement(FluentTester, __assign({ enableSinglePaneView: shouldShowSinglePane }, props))));
16
43
  };
17
44
  //# sourceMappingURL=FluentTesterApp.js.map
package/lib/fluent-tester/src/FluentTesterApp.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0DAA0D,CAAC;AAClG,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,IAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAElG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,WAAW;QAC/B,oBAAC,YAAY,aAAC,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CACzD,CACjB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0DAA0D,CAAC;AAElG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,IAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAElG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,IAAM,WAAW,GAAG,IAAI,cAAc,CACpC,WAAW,EACX;QACE,OAAO;YACL,MAAM,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,iFAAiF;SACvH,CAAC;IACJ,CAAC,EACD,UAAC,KAAY;QACX,OAAO;YACL,MAAM,EAAE;gBACN,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB;gBACjD,aAAa,EAAE,MAAM;gBACrB,kBAAkB,EAAE,QAAQ;gBAC5B,yBAAyB,EAAE,QAAQ,EAAE,wBAAwB;aAC9D;YACD,OAAO,EAAE;gBACP,EAAE,EAAE,MAAM;aACX;SACF,CAAC;IACJ,CAAC,EACD;QACE,oBAAoB;QACpB,OAAO;YACL,MAAM,EAAE;gBACN,gBAAgB,EAAE,QAAQ;gBAC1B,yBAAyB,EAAE,OAAO,EAAE,qFAAqF;aAC1H;SACF,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,6CAA6C;IAC7C,IAAM,iBAAiB,GAAmB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;IAE/E,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,iBAAiB;QACrC,oBAAC,YAAY,aAAC,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CACzD,CACjB,CAAC;AACJ,CAAC,CAAC"}
package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ export declare const ThemeTest: React.FunctionComponent;
3
+ //# sourceMappingURL=ThemeTest.android.d.ts.map
package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeTest.android.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Theme/ThemeTest.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+H/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAa7B,CAAC"}
package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js ADDED
@@ -0,0 +1,100 @@
1
+ import { __assign } from "tslib";
2
+ import * as React from 'react';
3
+ import { Text as TextRN, View } from 'react-native';
4
+ import { StyleSheet } from 'react-native';
5
+ import { Text } from '@fluentui/react-native';
6
+ import { useFluentTheme } from '@fluentui-react-native/framework';
7
+ import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
8
+ import { THEME_TESTPAGE } from '../../../../E2E/src/Theme/consts';
9
+ import { commonTestStyles } from '../Common/styles';
10
+ import { Test } from '../Test';
11
+ var getThemedStyles = themedStyleSheet(function (theme) {
12
+ return {
13
+ swatch: {
14
+ color: theme.colors.neutralForeground1,
15
+ },
16
+ rootView: {
17
+ backgroundColor: theme.colors.brandBackground,
18
+ },
19
+ };
20
+ });
21
+ var styles = StyleSheet.create({
22
+ swatchItem: {
23
+ flexDirection: 'row',
24
+ alignItems: 'center',
25
+ marginVertical: 5,
26
+ },
27
+ panel: __assign(__assign({}, commonTestStyles.view), { borderWidth: 2, padding: 12, margin: 8 }),
28
+ pickerContainer: {
29
+ flexDirection: 'row',
30
+ justifyContent: 'space-evenly',
31
+ },
32
+ stackStyle: {
33
+ borderWidth: 2,
34
+ padding: 12,
35
+ margin: 8,
36
+ },
37
+ });
38
+ var Panel = function () {
39
+ var theme = useFluentTheme();
40
+ var themedStyles = getThemedStyles(theme);
41
+ return (React.createElement(View, null,
42
+ React.createElement(Text, { style: { color: theme.colors.buttonBackgroundChecked } }, "buttonBackgroundChecked styled text"),
43
+ React.createElement(Text, { style: { color: theme.colors.neutralForeground1 } }, "neutralForeground1 styled text"),
44
+ React.createElement(Text, { style: { color: theme.colors.hostColorPink } }, "hostColorPink styled text"),
45
+ React.createElement(Text, { style: { color: theme.colors.hostColorButtonBackground } }, "hostColorButtonBackground styled text"),
46
+ React.createElement(Text, { style: { color: theme.colors.hostColorBrandText } }, "hostColorBrandText styled text"),
47
+ React.createElement(TextRN, { style: { color: theme.colors.yellowBrandColor } }, "yellowBrandColor styled text"),
48
+ React.createElement(TextRN, { style: themedStyles.swatch }, "Styled RN Text")));
49
+ };
50
+ var getSwatchColorStyle = function (name, color) {
51
+ styles[name] = styles[name] || { backgroundColor: color };
52
+ return styles[name];
53
+ };
54
+ var SemanticColor = function (p) {
55
+ var themedStyles = getThemedStyles(useFluentTheme());
56
+ return (React.createElement(View, { style: styles.swatchItem },
57
+ React.createElement(View, { style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }),
58
+ React.createElement(Text, null, p.name)));
59
+ };
60
+ var SwatchList = function () {
61
+ var theme = useFluentTheme();
62
+ var palette = theme.colors;
63
+ var aggregator = React.useCallback(function (key) {
64
+ return { key: key + ' (' + palette[key] + ')', color: palette[key] };
65
+ }, [palette]);
66
+ var flattenArray = React.useCallback(function () {
67
+ return Object.keys(palette).sort().map(aggregator);
68
+ }, [palette, aggregator]);
69
+ var paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
70
+ var renderSwatch = React.useCallback(function (item) {
71
+ var color = item.color, key = item.key;
72
+ return React.createElement(SemanticColor, { key: key, color: color, name: key });
73
+ }, []);
74
+ return (React.createElement(View, { style: commonTestStyles.view },
75
+ React.createElement(Text, null, "getColorsAndroid(theme: ITheme).palette"),
76
+ React.createElement(View, { style: styles.stackStyle }, paletteAsArray.map(function (item) { return renderSwatch(item); }))));
77
+ };
78
+ var themeSections = [
79
+ {
80
+ name: 'Component Examples',
81
+ testID: THEME_TESTPAGE,
82
+ component: Panel,
83
+ },
84
+ {
85
+ name: 'Theme.colors',
86
+ component: function () { return React.createElement(SwatchList, null); },
87
+ },
88
+ ];
89
+ export var ThemeTest = function () {
90
+ var status = {
91
+ win32Status: 'Beta',
92
+ uwpStatus: 'Experimental',
93
+ iosStatus: 'Experimental',
94
+ macosStatus: 'Experimental',
95
+ androidStatus: 'Beta',
96
+ };
97
+ var description = 'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
98
+ return React.createElement(Test, { name: "Theme Test", description: description, sections: themeSections, status: status });
99
+ };
100
+ //# sourceMappingURL=ThemeTest.android.js.map
package/lib/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeTest.android.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Theme/ThemeTest.android.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/fluent-tester/src/FluentTesterApp.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAYtE,CAAC"}
1
+ {"version":3,"file":"FluentTesterApp.d.ts","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA8CtE,CAAC"}
package/lib-commonjs/fluent-tester/src/FluentTesterApp.js CHANGED
@@ -13,7 +13,34 @@ var FluentTesterApp = function (props) {
13
13
  var isMobile = react_native_1.Platform.OS === 'android' || (react_native_1.Platform.OS === 'ios' && react_native_1.Platform.isPad === false);
14
14
  // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
15
15
  var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
16
- return (React.createElement(theme_1.ThemeProvider, { theme: index_1.testerTheme },
16
+ var customTheme = new theme_1.ThemeReference(index_1.testerTheme, function () {
17
+ return {
18
+ colors: { brandBackground2: 'red' }, // Overrides the buttonBackground color token, all other colors are kept in-tact.
19
+ };
20
+ }, function (theme) {
21
+ return {
22
+ colors: {
23
+ neutralForeground1: theme.colors.brandBackground2,
24
+ hostColorPink: 'pink',
25
+ hostColorBrandText: 'purple',
26
+ hostColorButtonBackground: 'yellow', // New custom color key.
27
+ },
28
+ spacing: {
29
+ s1: '10px',
30
+ },
31
+ };
32
+ }, function () {
33
+ // Any other recipe.
34
+ return {
35
+ colors: {
36
+ yellowBrandColor: 'yellow',
37
+ hostColorButtonBackground: 'green', // Overrides custom color key 'hostColorButtonBackground' - it is green in theme now.
38
+ },
39
+ };
40
+ });
41
+ // Use the custom colors for Android and iOS.
42
+ var fluentTesterTheme = isMobile ? customTheme : index_1.testerTheme;
43
+ return (React.createElement(theme_1.ThemeProvider, { theme: fluentTesterTheme },
17
44
  React.createElement(FluentTester_1.FluentTester, tslib_1.__assign({ enableSinglePaneView: shouldShowSinglePane }, props))));
18
45
  };
19
46
  exports.FluentTesterApp = FluentTesterApp;
package/lib-commonjs/fluent-tester/src/FluentTesterApp.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;AAEb,mDAA+B;AAC/B,6CAAwC;AAExC,8GAAkG;AAClG,sDAA6D;AAG7D,+CAA8C;AAC9C,uCAA4C;AAErC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,IAAA,0DAAsB,GAAE,CAAC;IAC3C,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAAC,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,uBAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAElG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,oBAAC,qBAAa,IAAC,KAAK,EAAE,mBAAW;QAC/B,oBAAC,2BAAY,qBAAC,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CACzD,CACjB,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,eAAe,mBAY1B"}
1
+ {"version":3,"file":"FluentTesterApp.js","sourceRoot":"","sources":["../../../src/FluentTesterApp.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;AAEb,mDAA+B;AAC/B,6CAAwC;AAExC,8GAAkG;AAElG,sDAA6E;AAG7E,+CAA8C;AAC9C,uCAA4C;AAErC,IAAM,eAAe,GAA+C,UAAC,KAAK;IAC/E,IAAM,SAAS,GAAG,IAAA,0DAAsB,GAAE,CAAC;IAC3C,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAAC,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,uBAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAElG,gGAAgG;IAChG,IAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC;IAEhF,IAAM,WAAW,GAAG,IAAI,sBAAc,CACpC,mBAAW,EACX;QACE,OAAO;YACL,MAAM,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,iFAAiF;SACvH,CAAC;IACJ,CAAC,EACD,UAAC,KAAY;QACX,OAAO;YACL,MAAM,EAAE;gBACN,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB;gBACjD,aAAa,EAAE,MAAM;gBACrB,kBAAkB,EAAE,QAAQ;gBAC5B,yBAAyB,EAAE,QAAQ,EAAE,wBAAwB;aAC9D;YACD,OAAO,EAAE;gBACP,EAAE,EAAE,MAAM;aACX;SACF,CAAC;IACJ,CAAC,EACD;QACE,oBAAoB;QACpB,OAAO;YACL,MAAM,EAAE;gBACN,gBAAgB,EAAE,QAAQ;gBAC1B,yBAAyB,EAAE,OAAO,EAAE,qFAAqF;aAC1H;SACF,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,6CAA6C;IAC7C,IAAM,iBAAiB,GAAmB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAW,CAAC;IAE/E,OAAO,CACL,oBAAC,qBAAa,IAAC,KAAK,EAAE,iBAAiB;QACrC,oBAAC,2BAAY,qBAAC,oBAAoB,EAAE,oBAAoB,IAAM,KAAK,EAAI,CACzD,CACjB,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,eAAe,mBA8C1B"}
package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ export declare const ThemeTest: React.FunctionComponent;
3
+ //# sourceMappingURL=ThemeTest.android.d.ts.map
package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeTest.android.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/Theme/ThemeTest.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+H/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAa7B,CAAC"}
package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js ADDED
@@ -0,0 +1,104 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ThemeTest = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var React = tslib_1.__importStar(require("react"));
6
+ var react_native_1 = require("react-native");
7
+ var react_native_2 = require("react-native");
8
+ var react_native_3 = require("@fluentui/react-native");
9
+ var framework_1 = require("@fluentui-react-native/framework");
10
+ var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
11
+ var consts_1 = require("../../../../E2E/src/Theme/consts");
12
+ var styles_1 = require("../Common/styles");
13
+ var Test_1 = require("../Test");
14
+ var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (theme) {
15
+ return {
16
+ swatch: {
17
+ color: theme.colors.neutralForeground1,
18
+ },
19
+ rootView: {
20
+ backgroundColor: theme.colors.brandBackground,
21
+ },
22
+ };
23
+ });
24
+ var styles = react_native_2.StyleSheet.create({
25
+ swatchItem: {
26
+ flexDirection: 'row',
27
+ alignItems: 'center',
28
+ marginVertical: 5,
29
+ },
30
+ panel: tslib_1.__assign(tslib_1.__assign({}, styles_1.commonTestStyles.view), { borderWidth: 2, padding: 12, margin: 8 }),
31
+ pickerContainer: {
32
+ flexDirection: 'row',
33
+ justifyContent: 'space-evenly',
34
+ },
35
+ stackStyle: {
36
+ borderWidth: 2,
37
+ padding: 12,
38
+ margin: 8,
39
+ },
40
+ });
41
+ var Panel = function () {
42
+ var theme = (0, framework_1.useFluentTheme)();
43
+ var themedStyles = getThemedStyles(theme);
44
+ return (React.createElement(react_native_1.View, null,
45
+ React.createElement(react_native_3.Text, { style: { color: theme.colors.buttonBackgroundChecked } }, "buttonBackgroundChecked styled text"),
46
+ React.createElement(react_native_3.Text, { style: { color: theme.colors.neutralForeground1 } }, "neutralForeground1 styled text"),
47
+ React.createElement(react_native_3.Text, { style: { color: theme.colors.hostColorPink } }, "hostColorPink styled text"),
48
+ React.createElement(react_native_3.Text, { style: { color: theme.colors.hostColorButtonBackground } }, "hostColorButtonBackground styled text"),
49
+ React.createElement(react_native_3.Text, { style: { color: theme.colors.hostColorBrandText } }, "hostColorBrandText styled text"),
50
+ React.createElement(react_native_1.Text, { style: { color: theme.colors.yellowBrandColor } }, "yellowBrandColor styled text"),
51
+ React.createElement(react_native_1.Text, { style: themedStyles.swatch }, "Styled RN Text")));
52
+ };
53
+ var getSwatchColorStyle = function (name, color) {
54
+ styles[name] = styles[name] || { backgroundColor: color };
55
+ return styles[name];
56
+ };
57
+ var SemanticColor = function (p) {
58
+ var themedStyles = getThemedStyles((0, framework_1.useFluentTheme)());
59
+ return (React.createElement(react_native_1.View, { style: styles.swatchItem },
60
+ React.createElement(react_native_1.View, { style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }),
61
+ React.createElement(react_native_3.Text, null, p.name)));
62
+ };
63
+ var SwatchList = function () {
64
+ var theme = (0, framework_1.useFluentTheme)();
65
+ var palette = theme.colors;
66
+ var aggregator = React.useCallback(function (key) {
67
+ return { key: key + ' (' + palette[key] + ')', color: palette[key] };
68
+ }, [palette]);
69
+ var flattenArray = React.useCallback(function () {
70
+ return Object.keys(palette).sort().map(aggregator);
71
+ }, [palette, aggregator]);
72
+ var paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
73
+ var renderSwatch = React.useCallback(function (item) {
74
+ var color = item.color, key = item.key;
75
+ return React.createElement(SemanticColor, { key: key, color: color, name: key });
76
+ }, []);
77
+ return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
78
+ React.createElement(react_native_3.Text, null, "getColorsAndroid(theme: ITheme).palette"),
79
+ React.createElement(react_native_1.View, { style: styles.stackStyle }, paletteAsArray.map(function (item) { return renderSwatch(item); }))));
80
+ };
81
+ var themeSections = [
82
+ {
83
+ name: 'Component Examples',
84
+ testID: consts_1.THEME_TESTPAGE,
85
+ component: Panel,
86
+ },
87
+ {
88
+ name: 'Theme.colors',
89
+ component: function () { return React.createElement(SwatchList, null); },
90
+ },
91
+ ];
92
+ var ThemeTest = function () {
93
+ var status = {
94
+ win32Status: 'Beta',
95
+ uwpStatus: 'Experimental',
96
+ iosStatus: 'Experimental',
97
+ macosStatus: 'Experimental',
98
+ androidStatus: 'Beta',
99
+ };
100
+ var description = 'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
101
+ return React.createElement(Test_1.Test, { name: "Theme Test", description: description, sections: themeSections, status: status });
102
+ };
103
+ exports.ThemeTest = ThemeTest;
104
+ //# sourceMappingURL=ThemeTest.android.js.map
package/lib-commonjs/fluent-tester/src/TestComponents/Theme/ThemeTest.android.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeTest.android.js","sourceRoot":"","sources":["../../../../../src/TestComponents/Theme/ThemeTest.android.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/tester",
3
- "version": "0.134.24",
3
+ "version": "0.134.26",
4
4
  "description": "A test app to test FluentUI React Native Components during development",
5
5
  "license": "MIT",
6
6
  "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,51 +33,51 @@
33
33
  "directory": "apps/fluent-tester"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui-react-native/android-theme": ">=0.16.8 <1.0.0",
37
- "@fluentui-react-native/apple-theme": ">=0.18.14 <1.0.0",
38
- "@fluentui-react-native/avatar": "^1.7.1",
39
- "@fluentui-react-native/badge": ">=0.4.32 <1.0.0",
40
- "@fluentui-react-native/button": ">=0.32.37 <1.0.0",
41
- "@fluentui-react-native/default-theme": ">=0.17.3 <1.0.0",
42
- "@fluentui-react-native/divider": "^0.3.4",
43
- "@fluentui-react-native/dropdown": ">=0.7.34 <1.0.0",
44
- "@fluentui-react-native/experimental-activity-indicator": ">=0.7.20 <1.0.0",
45
- "@fluentui-react-native/experimental-appearance-additions": "^0.3.4",
46
- "@fluentui-react-native/experimental-avatar": ">=0.17.18 <1.0.0",
47
- "@fluentui-react-native/experimental-button": "0.16.95",
48
- "@fluentui-react-native/experimental-checkbox": "0.13.41",
49
- "@fluentui-react-native/experimental-expander": "0.5.20",
50
- "@fluentui-react-native/experimental-menu-button": ">=0.6.36 <1.0.0",
36
+ "@fluentui-react-native/android-theme": ">=0.16.9 <1.0.0",
37
+ "@fluentui-react-native/apple-theme": ">=0.18.15 <1.0.0",
38
+ "@fluentui-react-native/avatar": "^1.7.2",
39
+ "@fluentui-react-native/badge": ">=0.4.33 <1.0.0",
40
+ "@fluentui-react-native/button": ">=0.32.38 <1.0.0",
41
+ "@fluentui-react-native/default-theme": ">=0.17.4 <1.0.0",
42
+ "@fluentui-react-native/divider": "^0.3.5",
43
+ "@fluentui-react-native/dropdown": ">=0.7.35 <1.0.0",
44
+ "@fluentui-react-native/experimental-activity-indicator": ">=0.7.21 <1.0.0",
45
+ "@fluentui-react-native/experimental-appearance-additions": "^0.3.5",
46
+ "@fluentui-react-native/experimental-avatar": ">=0.17.19 <1.0.0",
47
+ "@fluentui-react-native/experimental-button": "0.16.96",
48
+ "@fluentui-react-native/experimental-checkbox": "0.13.42",
49
+ "@fluentui-react-native/experimental-expander": "0.5.21",
50
+ "@fluentui-react-native/experimental-menu-button": ">=0.6.37 <1.0.0",
51
51
  "@fluentui-react-native/experimental-native-date-picker": ">=0.7.6 <1.0.0",
52
- "@fluentui-react-native/experimental-radio-group": "^0.9.22",
53
- "@fluentui-react-native/experimental-shadow": "0.2.72",
54
- "@fluentui-react-native/experimental-shimmer": "0.8.22",
55
- "@fluentui-react-native/experimental-tabs": "0.8.36",
56
- "@fluentui-react-native/experimental-text": ">=0.11.54 <1.0.0",
57
- "@fluentui-react-native/framework": ">=0.9.3 <1.0.0",
58
- "@fluentui-react-native/icon": "0.17.16",
59
- "@fluentui-react-native/interactive-hooks": ">=0.22.21 <1.0.0",
60
- "@fluentui-react-native/menu": "^1.4.15",
52
+ "@fluentui-react-native/experimental-radio-group": "^0.9.23",
53
+ "@fluentui-react-native/experimental-shadow": "0.2.73",
54
+ "@fluentui-react-native/experimental-shimmer": "0.8.23",
55
+ "@fluentui-react-native/experimental-tabs": "0.8.37",
56
+ "@fluentui-react-native/experimental-text": ">=0.11.55 <1.0.0",
57
+ "@fluentui-react-native/framework": ">=0.9.4 <1.0.0",
58
+ "@fluentui-react-native/icon": "0.17.17",
59
+ "@fluentui-react-native/interactive-hooks": ">=0.22.22 <1.0.0",
60
+ "@fluentui-react-native/menu": "^1.4.17",
61
61
  "@fluentui-react-native/merge-props": ">=0.5.3 <1.0.0",
62
- "@fluentui-react-native/notification": "0.21.38",
63
- "@fluentui-react-native/separator": "^0.14.17",
64
- "@fluentui-react-native/stack": ">=0.7.55 <1.0.0",
65
- "@fluentui-react-native/switch": "^0.8.30",
66
- "@fluentui-react-native/text": ">=0.19.23 <1.0.0",
67
- "@fluentui-react-native/theme": ">=0.8.1 <1.0.0",
68
- "@fluentui-react-native/theme-tokens": "^0.24.3",
69
- "@fluentui-react-native/theme-types": ">=0.30.3 <1.0.0",
62
+ "@fluentui-react-native/notification": "0.21.39",
63
+ "@fluentui-react-native/separator": "^0.14.18",
64
+ "@fluentui-react-native/stack": ">=0.7.56 <1.0.0",
65
+ "@fluentui-react-native/switch": "^0.8.31",
66
+ "@fluentui-react-native/text": ">=0.19.24 <1.0.0",
67
+ "@fluentui-react-native/theme": ">=0.8.2 <1.0.0",
68
+ "@fluentui-react-native/theme-tokens": "^0.24.4",
69
+ "@fluentui-react-native/theme-types": ">=0.30.4 <1.0.0",
70
70
  "@fluentui-react-native/themed-stylesheet": "^1.4.3",
71
- "@fluentui-react-native/theming-utils": ">=0.23.5 <1.0.0",
72
- "@fluentui-react-native/win32-theme": ">=0.25.3 <1.0.0",
73
- "@fluentui/react-native": ">=0.36.7 <1.0.0",
71
+ "@fluentui-react-native/theming-utils": ">=0.23.6 <1.0.0",
72
+ "@fluentui-react-native/win32-theme": ">=0.25.4 <1.0.0",
73
+ "@fluentui/react-native": ">=0.36.8 <1.0.0",
74
74
  "@fortawesome/fontawesome-svg-core": "^6.2.0",
75
75
  "@fortawesome/free-solid-svg-icons": "^6.2.0",
76
76
  "@fortawesome/react-native-fontawesome": "^0.3.0",
77
77
  "@react-native-community/slider": "^4.2.0",
78
78
  "@react-native-menu/menu": "^0.1.2",
79
79
  "@react-native-picker/picker": "^2.2.1",
80
- "@fluentui-react-native/spinner": "^0.2.5",
80
+ "@fluentui-react-native/spinner": "^0.2.6",
81
81
  "@warren-ms/react-native-icons": "^0.0.13",
82
82
  "react": "17.0.2",
83
83
  "react-native": "^0.68.0",
@@ -90,7 +90,7 @@
90
90
  "@babel/core": "^7.8.0",
91
91
  "@babel/runtime": "^7.8.0",
92
92
  "@fluentui-react-native/eslint-config-rules": "^0.1.1",
93
- "@fluentui-react-native/focus-zone": "^0.11.33",
93
+ "@fluentui-react-native/focus-zone": "^0.11.34",
94
94
  "@fluentui-react-native/scripts": "^0.1.1",
95
95
  "@rnx-kit/cli": "^0.16.2",
96
96
  "@rnx-kit/metro-config": "^1.3.1",
package/src/FluentTesterApp.tsx CHANGED
@@ -4,7 +4,8 @@ import * as React from 'react';
4
4
  import { Platform } from 'react-native';
5
5
 
6
6
  import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
7
- import { ThemeProvider } from '@fluentui-react-native/theme';
7
+ import type { Theme } from '@fluentui-react-native/framework';
8
+ import { ThemeReference, ThemeProvider } from '@fluentui-react-native/theme';
8
9
 
9
10
  import type { FluentTesterProps } from './FluentTester';
10
11
  import { FluentTester } from './FluentTester';
@@ -17,8 +18,42 @@ export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (prop
17
18
  // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
18
19
  const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
19
20
 
21
+ const customTheme = new ThemeReference(
22
+ testerTheme,
23
+ () => {
24
+ return {
25
+ colors: { brandBackground2: 'red' }, // Overrides the buttonBackground color token, all other colors are kept in-tact.
26
+ };
27
+ },
28
+ (theme: Theme) => {
29
+ return {
30
+ colors: {
31
+ neutralForeground1: theme.colors.brandBackground2, // neutralBackground1 is 'red' in theme here because of previous recipe applied.
32
+ hostColorPink: 'pink', // New custom color key.
33
+ hostColorBrandText: 'purple', // New custom color key.
34
+ hostColorButtonBackground: 'yellow', // New custom color key.
35
+ },
36
+ spacing: {
37
+ s1: '10px',
38
+ },
39
+ };
40
+ },
41
+ () => {
42
+ // Any other recipe.
43
+ return {
44
+ colors: {
45
+ yellowBrandColor: 'yellow', // New custom color key.
46
+ hostColorButtonBackground: 'green', // Overrides custom color key 'hostColorButtonBackground' - it is green in theme now.
47
+ },
48
+ };
49
+ },
50
+ );
51
+
52
+ // Use the custom colors for Android and iOS.
53
+ const fluentTesterTheme: ThemeReference = isMobile ? customTheme : testerTheme;
54
+
20
55
  return (
21
- <ThemeProvider theme={testerTheme}>
56
+ <ThemeProvider theme={fluentTesterTheme}>
22
57
  <FluentTester enableSinglePaneView={shouldShowSinglePane} {...props} />
23
58
  </ThemeProvider>
24
59
  );
package/src/TestComponents/Theme/ThemeTest.android.tsx ADDED
@@ -0,0 +1,141 @@
1
+ import * as React from 'react';
2
+ import type { ColorValue, ViewStyle } from 'react-native';
3
+ import { Text as TextRN, View } from 'react-native';
4
+ import { StyleSheet } from 'react-native';
5
+
6
+ import { Text } from '@fluentui/react-native';
7
+ import { useFluentTheme } from '@fluentui-react-native/framework';
8
+ import type { Theme } from '@fluentui-react-native/theme-types';
9
+ import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
10
+
11
+ import { THEME_TESTPAGE } from '../../../../E2E/src/Theme/consts';
12
+ import { commonTestStyles } from '../Common/styles';
13
+ import type { TestSection, PlatformStatus } from '../Test';
14
+ import { Test } from '../Test';
15
+
16
+ const getThemedStyles = themedStyleSheet((theme: Theme) => {
17
+ return {
18
+ swatch: {
19
+ color: theme.colors.neutralForeground1,
20
+ },
21
+ rootView: {
22
+ backgroundColor: theme.colors.brandBackground,
23
+ },
24
+ };
25
+ });
26
+
27
+ const styles = StyleSheet.create({
28
+ swatchItem: {
29
+ flexDirection: 'row',
30
+ alignItems: 'center',
31
+ marginVertical: 5,
32
+ },
33
+ panel: {
34
+ ...commonTestStyles.view,
35
+ borderWidth: 2,
36
+ padding: 12,
37
+ margin: 8,
38
+ },
39
+ pickerContainer: {
40
+ flexDirection: 'row',
41
+ justifyContent: 'space-evenly',
42
+ },
43
+ stackStyle: {
44
+ borderWidth: 2,
45
+ padding: 12,
46
+ margin: 8,
47
+ },
48
+ });
49
+
50
+ const Panel: React.FunctionComponent = () => {
51
+ const theme = useFluentTheme();
52
+ const themedStyles = getThemedStyles(theme);
53
+
54
+ return (
55
+ <View>
56
+ <Text style={{ color: theme.colors.buttonBackgroundChecked }}>buttonBackgroundChecked styled text</Text>
57
+
58
+ <Text style={{ color: theme.colors.neutralForeground1 }}>neutralForeground1 styled text</Text>
59
+
60
+ <Text style={{ color: theme.colors.hostColorPink }}>hostColorPink styled text</Text>
61
+
62
+ <Text style={{ color: theme.colors.hostColorButtonBackground }}>hostColorButtonBackground styled text</Text>
63
+
64
+ <Text style={{ color: theme.colors.hostColorBrandText }}>hostColorBrandText styled text</Text>
65
+
66
+ <TextRN style={{ color: theme.colors.yellowBrandColor }}>yellowBrandColor styled text</TextRN>
67
+
68
+ <TextRN style={themedStyles.swatch}>Styled RN Text</TextRN>
69
+ </View>
70
+ );
71
+ };
72
+
73
+ const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
74
+ styles[name] = styles[name] || { backgroundColor: color };
75
+ return styles[name];
76
+ };
77
+
78
+ type SemanticColorProps = { color: ColorValue; name: string };
79
+ const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticColorProps) => {
80
+ const themedStyles = getThemedStyles(useFluentTheme());
81
+ return (
82
+ <View style={styles.swatchItem}>
83
+ <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
84
+ <Text>{p.name}</Text>
85
+ </View>
86
+ );
87
+ };
88
+
89
+ const SwatchList: React.FunctionComponent = () => {
90
+ const theme = useFluentTheme();
91
+ const palette = theme.colors;
92
+
93
+ const aggregator = React.useCallback(
94
+ (key: string) => {
95
+ return { key: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
96
+ },
97
+ [palette],
98
+ );
99
+
100
+ const flattenArray = React.useCallback(() => {
101
+ return Object.keys(palette).sort().map(aggregator);
102
+ }, [palette, aggregator]);
103
+
104
+ const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
105
+ const renderSwatch = React.useCallback((item) => {
106
+ const { color, key } = item;
107
+ return <SemanticColor key={key} color={color} name={key} />;
108
+ }, []);
109
+ return (
110
+ <View style={commonTestStyles.view}>
111
+ <Text>getColorsAndroid(theme: ITheme).palette</Text>
112
+ <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
113
+ </View>
114
+ );
115
+ };
116
+ const themeSections: TestSection[] = [
117
+ {
118
+ name: 'Component Examples',
119
+ testID: THEME_TESTPAGE,
120
+ component: Panel,
121
+ },
122
+ {
123
+ name: 'Theme.colors',
124
+ component: () => <SwatchList />,
125
+ },
126
+ ];
127
+
128
+ export const ThemeTest: React.FunctionComponent = () => {
129
+ const status: PlatformStatus = {
130
+ win32Status: 'Beta',
131
+ uwpStatus: 'Experimental',
132
+ iosStatus: 'Experimental',
133
+ macosStatus: 'Experimental',
134
+ androidStatus: 'Beta',
135
+ };
136
+
137
+ const description =
138
+ 'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
139
+
140
+ return <Test name="Theme Test" description={description} sections={themeSections} status={status} />;
141
+ };