@fluentui-react-native/tester 0.128.3 → 0.129.0

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 (14) hide show
  1. package/CHANGELOG.json +46 -1
  2. package/CHANGELOG.md +10 -2
  3. package/docs/android.md +7 -16
  4. package/docs/ios.md +7 -16
  5. package/docs/macos.md +7 -16
  6. package/docs/windows.md +7 -16
  7. package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.d.ts.map +1 -1
  8. package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js +111 -23
  9. package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js.map +1 -1
  10. package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.d.ts.map +1 -1
  11. package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js +109 -21
  12. package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js.map +1 -1
  13. package/package.json +41 -28
  14. package/src/TestComponents/ColorTokens/ColorTokenTest.tsx +147 -24
package/CHANGELOG.json CHANGED
@@ -2,7 +2,52 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 30 Jan 2023 07:10:00 GMT",
5
+ "date": "Mon, 30 Jan 2023 20:48:37 GMT",
6
+ "tag": "@fluentui-react-native/tester_v0.129.0",
7
+ "version": "0.129.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "78454019+lyzhan7@users.noreply.github.com",
12
+ "package": "@fluentui-react-native/tester",
13
+ "commit": "8122cfed9aaaca2d7f9a76b30691584ffe38c359",
14
+ "comment": "Add global colors to tester"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 30 Jan 2023 16:05:07 GMT",
21
+ "tag": "@fluentui-react-native/tester_v0.128.3",
22
+ "version": "0.128.3",
23
+ "comments": {
24
+ "none": [
25
+ {
26
+ "author": "4123478+tido64@users.noreply.github.com",
27
+ "package": "@fluentui-react-native/tester",
28
+ "commit": "607343e29ed8ceaea88fb7658f3aba46fb47a018",
29
+ "comment": "Bump `@rnx-kit/cli` to 0.16"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Mon, 30 Jan 2023 15:17:32 GMT",
36
+ "tag": "@fluentui-react-native/tester_v0.128.3",
37
+ "version": "0.128.3",
38
+ "comments": {
39
+ "none": [
40
+ {
41
+ "author": "4123478+tido64@users.noreply.github.com",
42
+ "package": "@fluentui-react-native/tester",
43
+ "commit": "4de4c2b37c835ebd9af015ff767f9dd68452f786",
44
+ "comment": "Migrate to align-deps"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 30 Jan 2023 07:12:38 GMT",
6
51
  "tag": "@fluentui-react-native/tester_v0.128.3",
7
52
  "version": "0.128.3",
8
53
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,20 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Mon, 30 Jan 2023 07:10:00 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 30 Jan 2023 20:48:37 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.129.0
8
+
9
+ Mon, 30 Jan 2023 20:48:37 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - Add global colors to tester (78454019+lyzhan7@users.noreply.github.com)
14
+
7
15
  ## 0.128.3
8
16
 
9
- Mon, 30 Jan 2023 07:10:00 GMT
17
+ Mon, 30 Jan 2023 07:12:38 GMT
10
18
 
11
19
  ### Patches
12
20
 
package/docs/android.md CHANGED
@@ -53,26 +53,17 @@ yarn start
53
53
  ## Dependencies
54
54
 
55
55
  Dependencies are managed by
56
- [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
57
- If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
58
- `/apps/android/package.json`:
59
-
60
- ```json
61
- {
62
- ...
63
- "rnx-kit": {
64
- "reactNativeVersion": "^0.68",
65
- "kitType": "app",
66
- "bundle": {
67
- ...
68
- }
56
+ [`@rnx-kit/align-deps`](https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps).
57
+ If you're looking to upgrade `react-native`, use the interactive upgrade command:
58
+
59
+ ```sh
60
+ yarn rnx-align-deps --set-version
69
61
  ```
70
62
 
71
- Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
72
- will ensure that all relevant packages are bumped correctly.
63
+ This command will ensure that all relevant packages are bumped correctly.
73
64
 
74
65
  You can read more about this tool here:
75
- [`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
66
+ [`@rnx-kit/align-deps` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
76
67
 
77
68
  ## Debugging
78
69
 
package/docs/ios.md CHANGED
@@ -32,26 +32,17 @@ yarn ios
32
32
  ## Dependencies
33
33
 
34
34
  Dependencies are managed by
35
- [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
36
- If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
37
- `/apps/fluent-tester/package.json`:
38
-
39
- ```json
40
- {
41
- ...
42
- "rnx-kit": {
43
- "reactNativeVersion": "^0.68",
44
- "kitType": "app",
45
- "bundle": {
46
- ...
47
- }
35
+ [`@rnx-kit/align-deps`](https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps).
36
+ If you're looking to upgrade `react-native`, use the interactive upgrade command:
37
+
38
+ ```sh
39
+ yarn rnx-align-deps --set-version
48
40
  ```
49
41
 
50
- Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
51
- will ensure that all relevant packages are bumped correctly.
42
+ This command will ensure that all relevant packages are bumped correctly.
52
43
 
53
44
  You can read more about this tool here:
54
- [`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
45
+ [`@rnx-kit/align-deps` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
55
46
 
56
47
  ## Debugging
57
48
 
package/docs/macos.md CHANGED
@@ -41,26 +41,17 @@ You can debug native code in Xcode. To debug javascript code, you can either use
41
41
  ## Dependencies
42
42
 
43
43
  Dependencies are managed by
44
- [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
45
- If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
46
- `/apps/fluent-tester/package.json`:
47
-
48
- ```json
49
- {
50
- ...
51
- "rnx-kit": {
52
- "reactNativeVersion": "^0.68",
53
- "kitType": "app",
54
- "bundle": {
55
- ...
56
- }
44
+ [`@rnx-kit/align-deps`](https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps).
45
+ If you're looking to upgrade `react-native`, use the interactive upgrade command:
46
+
47
+ ```sh
48
+ yarn rnx-align-deps --set-version
57
49
  ```
58
50
 
59
- Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
60
- will ensure that all relevant packages are bumped correctly.
51
+ This command will ensure that all relevant packages are bumped correctly.
61
52
 
62
53
  You can read more about this tool here:
63
- [`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
54
+ [`@rnx-kit/align-deps` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
64
55
 
65
56
  ## Troubleshooting
66
57
 
package/docs/windows.md CHANGED
@@ -30,26 +30,17 @@ You can debug native code in Visual Studio. To debug javascript code, you can ei
30
30
  ## Dependencies
31
31
 
32
32
  Dependencies are managed by
33
- [`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
34
- If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
35
- `/apps/windows/package.json`:
36
-
37
- ```json
38
- {
39
- ...
40
- "rnx-kit": {
41
- "reactNativeVersion": "^0.68",
42
- "kitType": "app",
43
- "bundle": {
44
- ...
45
- }
33
+ [`@rnx-kit/align-deps`](https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps).
34
+ If you're looking to upgrade `react-native`, use the interactive upgrade command:
35
+
36
+ ```sh
37
+ yarn rnx-align-deps --set-version
46
38
  ```
47
39
 
48
- Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
49
- will ensure that all relevant packages are bumped correctly.
40
+ This command will ensure that all relevant packages are bumped correctly.
50
41
 
51
42
  You can read more about this tool here:
52
- [`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
43
+ [`@rnx-kit/align-deps` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
53
44
 
54
45
  ## Troubleshooting
55
46
 
package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorTokenTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0G/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAYnC,CAAC"}
1
+ {"version":3,"file":"ColorTokenTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqO/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAYnC,CAAC"}
package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js CHANGED
@@ -1,16 +1,18 @@
1
1
  import { __assign } from "tslib";
2
2
  import * as React from 'react';
3
- import { View, StyleSheet } from 'react-native';
3
+ import { View, StyleSheet, Platform } from 'react-native';
4
4
  import { useTheme } from '@fluentui-react-native/theme-types';
5
5
  import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
6
6
  import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
7
7
  import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
8
8
  import { createAliasTokens } from '@fluentui-react-native/default-theme';
9
9
  import { commonTestStyles } from '../Common/styles';
10
- import { Text } from '@fluentui/react-native';
10
+ import { Text, ToggleButton } from '@fluentui/react-native';
11
11
  import { Test } from '../Test';
12
12
  import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
13
13
  import { testProps } from '../Common/TestProps';
14
+ import { globalTokens } from '@fluentui-react-native/theme-tokens';
15
+ import Svg, { G, Path } from 'react-native-svg';
14
16
  var getThemedStyles = themedStyleSheet(function (theme) {
15
17
  return {
16
18
  swatch: {
@@ -28,27 +30,43 @@ var styles = StyleSheet.create({
28
30
  alignItems: 'center',
29
31
  marginVertical: 5,
30
32
  },
31
- pickerContainer: {
32
- flexDirection: 'row',
33
- justifyContent: 'space-evenly',
34
- },
35
33
  stackStyle: {
36
34
  borderWidth: 2,
37
35
  padding: 12,
38
36
  margin: 8,
39
37
  },
38
+ statusView: {
39
+ flexDirection: 'row',
40
+ alignItems: 'center',
41
+ justifyContent: 'space-between',
42
+ margin: 8,
43
+ },
44
+ // Needed to ensure that with the button is toggled on, the top of the newly shown
45
+ // content is visible so the user knows to scroll down
46
+ toggleButtonAreaPadding: {
47
+ paddingBottom: 10,
48
+ },
40
49
  });
41
- var getSwatchColorStyle = function (name, color) {
42
- styles[name] = styles[name] || { backgroundColor: color };
43
- return styles[name];
50
+ var getSwatchColorStyle = function (colorName, colorValue) {
51
+ styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
52
+ return styles[colorName];
44
53
  };
45
54
  var ColorToken = function (p) {
55
+ var _a;
56
+ if (p.colorValue === undefined) {
57
+ console.warn('Color token ' + p.colorName + ' is undefined');
58
+ }
46
59
  var themedStyles = getThemedStyles(useTheme());
47
60
  return (React.createElement(View, { style: styles.swatchItem },
48
- React.createElement(View, __assign({ style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }, testProps(COLORTOKENS_TEST_COMPONENT))),
49
- React.createElement(Text, null, p.name)));
61
+ React.createElement(View, __assign({ style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch] }, testProps(COLORTOKENS_TEST_COMPONENT))),
62
+ React.createElement(Text, null, p.colorName + ' (' + ((_a = p.colorValue) === null || _a === void 0 ? void 0 : _a.toString()) + ')')));
63
+ };
64
+ var getSwatch = function (item) {
65
+ var colorValue = item.colorValue, colorName = item.colorName;
66
+ return React.createElement(ColorToken, { key: colorName, colorValue: colorValue, colorName: colorName });
50
67
  };
51
- var AliasTokensSwatchList = function () {
68
+ /// Alias color tokens
69
+ var AliasColorTokensSwatchList = function () {
52
70
  var theme = useTheme();
53
71
  var isOfficeTheme = theme.name === 'White' ||
54
72
  theme.name === 'Colorful' ||
@@ -58,26 +76,96 @@ var AliasTokensSwatchList = function () {
58
76
  var aliasColorTokens = isOfficeTheme
59
77
  ? createOfficeAliasTokens(theme.name)
60
78
  : createAliasTokens(getCurrentAppearance(theme.host.appearance, 'light'));
61
- var aggregator = React.useCallback(function (key) {
62
- return { key: key + ' (' + aliasColorTokens[key] + ')', color: aliasColorTokens[key] };
79
+ var aggregator = React.useCallback(function (colorName) {
80
+ return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
63
81
  }, [aliasColorTokens]);
64
82
  var flattenArray = React.useCallback(function () {
65
83
  return Object.keys(aliasColorTokens).map(aggregator);
66
84
  }, [aliasColorTokens, aggregator]);
67
- var aliasTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
68
- var renderSwatch = React.useCallback(function (item) {
69
- var color = item.color, key = item.key;
70
- return React.createElement(ColorToken, { key: key, color: color, name: key });
71
- }, []);
85
+ var aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
86
+ var renderSwatch = React.useCallback(getSwatch, []);
87
+ return (React.createElement(View, { style: commonTestStyles.view },
88
+ React.createElement(View, { style: styles.stackStyle }, aliasColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
89
+ };
90
+ /// Global color tokens - neutral
91
+ var globalNeutralColorNamesSortedDarkToLight = Object.keys(globalTokens.color)
92
+ .filter(function (globalColorName) { return globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white'; })
93
+ .sort(function (color1, color2) {
94
+ var color1hex = globalTokens.color[color1];
95
+ var color2hex = globalTokens.color[color2];
96
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
97
+ // will order the colors from dark to light
98
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
99
+ });
100
+ var globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map(function (colorName) {
101
+ return {
102
+ colorName: colorName,
103
+ colorValue: globalTokens.color[colorName],
104
+ };
105
+ });
106
+ var GlobalNeutralColorTokensSwatchList = function () {
107
+ var renderSwatch = React.useCallback(getSwatch, []);
72
108
  return (React.createElement(View, { style: commonTestStyles.view },
73
- React.createElement(Text, null, "Alias Color Tokens from Token Pipeline"),
74
- React.createElement(View, { style: styles.stackStyle }, aliasTokensAsArray.map(function (item) { return renderSwatch(item); }))));
109
+ React.createElement(View, { style: styles.stackStyle }, globalNeutralColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
110
+ };
111
+ /// Global color tokens - shared
112
+ var globalSharedColorNames = Object.keys(globalTokens.color).filter(function (key) { return globalTokens.color[key].primary !== undefined; });
113
+ var globalSharedColorVariantsSortedDarkToLight = Object.keys(globalTokens.color.red).sort(function (color1, color2) {
114
+ var color1hex = globalTokens.color.red[color1];
115
+ var color2hex = globalTokens.color.red[color2];
116
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
117
+ // will order the colors from dark to light
118
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
119
+ });
120
+ var globalSharedColorTokensAsArray = globalSharedColorNames
121
+ .map(function (sharedColorName) {
122
+ return globalSharedColorVariantsSortedDarkToLight.map(function (variant) {
123
+ return {
124
+ colorName: sharedColorName + '.' + variant,
125
+ colorValue: globalTokens.color[sharedColorName][variant],
126
+ };
127
+ });
128
+ })
129
+ .reduce(function (accumulator, sharedColor) { return accumulator.concat(sharedColor); });
130
+ var GlobalSharedColorTokensSwatchList = function () {
131
+ var renderSwatch = React.useCallback(getSwatch, []);
132
+ var _a = React.useState(false), showGlobalSharedColors = _a[0], setShowGlobalSharedColors = _a[1];
133
+ var toggleSvg = function () {
134
+ var plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
135
+ var minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
136
+ var path = showGlobalSharedColors ? minusPath : plusPath;
137
+ return (React.createElement(Svg, null,
138
+ React.createElement(G, null,
139
+ React.createElement(Path, { d: path, fill: "black" }))));
140
+ };
141
+ var svgProps = { src: toggleSvg };
142
+ var plusCodepoint = 0x2795;
143
+ var minusCodepoint = 0x2796;
144
+ var fontIconProps = {
145
+ codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
146
+ fontSize: 10,
147
+ };
148
+ var toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
149
+ return (React.createElement(View, { style: styles.toggleButtonAreaPadding },
150
+ React.createElement(View, { style: styles.statusView },
151
+ React.createElement(Text, { variant: "subheaderStandard" }, "Show color tokens"),
152
+ React.createElement(ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowGlobalSharedColors(!showGlobalSharedColors); } })),
153
+ showGlobalSharedColors && (React.createElement(View, { style: commonTestStyles.view },
154
+ React.createElement(View, { style: styles.stackStyle }, globalSharedColorTokensAsArray.map(function (item) { return renderSwatch(item); }))))));
75
155
  };
76
156
  var themeSections = [
77
157
  {
78
158
  name: 'Alias Color Tokens',
79
159
  testID: COLORTOKEN_TESTPAGE,
80
- component: function () { return React.createElement(AliasTokensSwatchList, null); },
160
+ component: function () { return React.createElement(AliasColorTokensSwatchList, null); },
161
+ },
162
+ {
163
+ name: 'Global Color Tokens - Neutral Colors',
164
+ component: function () { return React.createElement(GlobalNeutralColorTokensSwatchList, null); },
165
+ },
166
+ {
167
+ name: 'Global Color Tokens - Shared Colors',
168
+ component: function () { return React.createElement(GlobalSharedColorTokensSwatchList, null); },
81
169
  },
82
170
  ];
83
171
  export var ColorTokensTest = function () {
@@ -88,7 +176,7 @@ export var ColorTokensTest = function () {
88
176
  macosStatus: 'Backlog',
89
177
  androidStatus: 'Experimental',
90
178
  };
91
- var description = 'Alias tokens given from token pipeline. Currently values are pulled from web. Will be used to style components.';
179
+ var description = 'Alias and global tokens given from token pipeline. Used to style components.';
92
180
  return React.createElement(Test, { name: "Color Tokens Test", description: description, sections: themeSections, status: status });
93
181
  };
94
182
  //# sourceMappingURL=ColorTokenTest.js.map
package/lib/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorTokenTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ColorTokenTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorTokenTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0G/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAYnC,CAAC"}
1
+ {"version":3,"file":"ColorTokenTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqO/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAYnC,CAAC"}
package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js CHANGED
@@ -14,6 +14,8 @@ var react_native_2 = require("@fluentui/react-native");
14
14
  var Test_1 = require("../Test");
15
15
  var consts_1 = require("../../../../E2E/src/ColorTokens/consts");
16
16
  var TestProps_1 = require("../Common/TestProps");
17
+ var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
18
+ var react_native_svg_1 = (0, tslib_1.__importStar)(require("react-native-svg"));
17
19
  var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (theme) {
18
20
  return {
19
21
  swatch: {
@@ -31,27 +33,43 @@ var styles = react_native_1.StyleSheet.create({
31
33
  alignItems: 'center',
32
34
  marginVertical: 5,
33
35
  },
34
- pickerContainer: {
35
- flexDirection: 'row',
36
- justifyContent: 'space-evenly',
37
- },
38
36
  stackStyle: {
39
37
  borderWidth: 2,
40
38
  padding: 12,
41
39
  margin: 8,
42
40
  },
41
+ statusView: {
42
+ flexDirection: 'row',
43
+ alignItems: 'center',
44
+ justifyContent: 'space-between',
45
+ margin: 8,
46
+ },
47
+ // Needed to ensure that with the button is toggled on, the top of the newly shown
48
+ // content is visible so the user knows to scroll down
49
+ toggleButtonAreaPadding: {
50
+ paddingBottom: 10,
51
+ },
43
52
  });
44
- var getSwatchColorStyle = function (name, color) {
45
- styles[name] = styles[name] || { backgroundColor: color };
46
- return styles[name];
53
+ var getSwatchColorStyle = function (colorName, colorValue) {
54
+ styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
55
+ return styles[colorName];
47
56
  };
48
57
  var ColorToken = function (p) {
58
+ var _a;
59
+ if (p.colorValue === undefined) {
60
+ console.warn('Color token ' + p.colorName + ' is undefined');
61
+ }
49
62
  var themedStyles = getThemedStyles((0, theme_types_1.useTheme)());
50
63
  return (React.createElement(react_native_1.View, { style: styles.swatchItem },
51
- React.createElement(react_native_1.View, (0, tslib_1.__assign)({ style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }, (0, TestProps_1.testProps)(consts_1.COLORTOKENS_TEST_COMPONENT))),
52
- React.createElement(react_native_2.Text, null, p.name)));
64
+ React.createElement(react_native_1.View, (0, tslib_1.__assign)({ style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch] }, (0, TestProps_1.testProps)(consts_1.COLORTOKENS_TEST_COMPONENT))),
65
+ React.createElement(react_native_2.Text, null, p.colorName + ' (' + ((_a = p.colorValue) === null || _a === void 0 ? void 0 : _a.toString()) + ')')));
66
+ };
67
+ var getSwatch = function (item) {
68
+ var colorValue = item.colorValue, colorName = item.colorName;
69
+ return React.createElement(ColorToken, { key: colorName, colorValue: colorValue, colorName: colorName });
53
70
  };
54
- var AliasTokensSwatchList = function () {
71
+ /// Alias color tokens
72
+ var AliasColorTokensSwatchList = function () {
55
73
  var theme = (0, theme_types_1.useTheme)();
56
74
  var isOfficeTheme = theme.name === 'White' ||
57
75
  theme.name === 'Colorful' ||
@@ -61,26 +79,96 @@ var AliasTokensSwatchList = function () {
61
79
  var aliasColorTokens = isOfficeTheme
62
80
  ? (0, win32_theme_1.createOfficeAliasTokens)(theme.name)
63
81
  : (0, default_theme_1.createAliasTokens)((0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light'));
64
- var aggregator = React.useCallback(function (key) {
65
- return { key: key + ' (' + aliasColorTokens[key] + ')', color: aliasColorTokens[key] };
82
+ var aggregator = React.useCallback(function (colorName) {
83
+ return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
66
84
  }, [aliasColorTokens]);
67
85
  var flattenArray = React.useCallback(function () {
68
86
  return Object.keys(aliasColorTokens).map(aggregator);
69
87
  }, [aliasColorTokens, aggregator]);
70
- var aliasTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
71
- var renderSwatch = React.useCallback(function (item) {
72
- var color = item.color, key = item.key;
73
- return React.createElement(ColorToken, { key: key, color: color, name: key });
74
- }, []);
88
+ var aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
89
+ var renderSwatch = React.useCallback(getSwatch, []);
90
+ return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
91
+ React.createElement(react_native_1.View, { style: styles.stackStyle }, aliasColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
92
+ };
93
+ /// Global color tokens - neutral
94
+ var globalNeutralColorNamesSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color)
95
+ .filter(function (globalColorName) { return globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white'; })
96
+ .sort(function (color1, color2) {
97
+ var color1hex = theme_tokens_1.globalTokens.color[color1];
98
+ var color2hex = theme_tokens_1.globalTokens.color[color2];
99
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
100
+ // will order the colors from dark to light
101
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
102
+ });
103
+ var globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map(function (colorName) {
104
+ return {
105
+ colorName: colorName,
106
+ colorValue: theme_tokens_1.globalTokens.color[colorName],
107
+ };
108
+ });
109
+ var GlobalNeutralColorTokensSwatchList = function () {
110
+ var renderSwatch = React.useCallback(getSwatch, []);
75
111
  return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
76
- React.createElement(react_native_2.Text, null, "Alias Color Tokens from Token Pipeline"),
77
- React.createElement(react_native_1.View, { style: styles.stackStyle }, aliasTokensAsArray.map(function (item) { return renderSwatch(item); }))));
112
+ React.createElement(react_native_1.View, { style: styles.stackStyle }, globalNeutralColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
113
+ };
114
+ /// Global color tokens - shared
115
+ var globalSharedColorNames = Object.keys(theme_tokens_1.globalTokens.color).filter(function (key) { return theme_tokens_1.globalTokens.color[key].primary !== undefined; });
116
+ var globalSharedColorVariantsSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color.red).sort(function (color1, color2) {
117
+ var color1hex = theme_tokens_1.globalTokens.color.red[color1];
118
+ var color2hex = theme_tokens_1.globalTokens.color.red[color2];
119
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
120
+ // will order the colors from dark to light
121
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
122
+ });
123
+ var globalSharedColorTokensAsArray = globalSharedColorNames
124
+ .map(function (sharedColorName) {
125
+ return globalSharedColorVariantsSortedDarkToLight.map(function (variant) {
126
+ return {
127
+ colorName: sharedColorName + '.' + variant,
128
+ colorValue: theme_tokens_1.globalTokens.color[sharedColorName][variant],
129
+ };
130
+ });
131
+ })
132
+ .reduce(function (accumulator, sharedColor) { return accumulator.concat(sharedColor); });
133
+ var GlobalSharedColorTokensSwatchList = function () {
134
+ var renderSwatch = React.useCallback(getSwatch, []);
135
+ var _a = React.useState(false), showGlobalSharedColors = _a[0], setShowGlobalSharedColors = _a[1];
136
+ var toggleSvg = function () {
137
+ var plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
138
+ var minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
139
+ var path = showGlobalSharedColors ? minusPath : plusPath;
140
+ return (React.createElement(react_native_svg_1.default, null,
141
+ React.createElement(react_native_svg_1.G, null,
142
+ React.createElement(react_native_svg_1.Path, { d: path, fill: "black" }))));
143
+ };
144
+ var svgProps = { src: toggleSvg };
145
+ var plusCodepoint = 0x2795;
146
+ var minusCodepoint = 0x2796;
147
+ var fontIconProps = {
148
+ codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
149
+ fontSize: 10,
150
+ };
151
+ var toggleIconProps = react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
152
+ return (React.createElement(react_native_1.View, { style: styles.toggleButtonAreaPadding },
153
+ React.createElement(react_native_1.View, { style: styles.statusView },
154
+ React.createElement(react_native_2.Text, { variant: "subheaderStandard" }, "Show color tokens"),
155
+ React.createElement(react_native_2.ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowGlobalSharedColors(!showGlobalSharedColors); } })),
156
+ showGlobalSharedColors && (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
157
+ React.createElement(react_native_1.View, { style: styles.stackStyle }, globalSharedColorTokensAsArray.map(function (item) { return renderSwatch(item); }))))));
78
158
  };
79
159
  var themeSections = [
80
160
  {
81
161
  name: 'Alias Color Tokens',
82
162
  testID: consts_1.COLORTOKEN_TESTPAGE,
83
- component: function () { return React.createElement(AliasTokensSwatchList, null); },
163
+ component: function () { return React.createElement(AliasColorTokensSwatchList, null); },
164
+ },
165
+ {
166
+ name: 'Global Color Tokens - Neutral Colors',
167
+ component: function () { return React.createElement(GlobalNeutralColorTokensSwatchList, null); },
168
+ },
169
+ {
170
+ name: 'Global Color Tokens - Shared Colors',
171
+ component: function () { return React.createElement(GlobalSharedColorTokensSwatchList, null); },
84
172
  },
85
173
  ];
86
174
  var ColorTokensTest = function () {
@@ -91,7 +179,7 @@ var ColorTokensTest = function () {
91
179
  macosStatus: 'Backlog',
92
180
  androidStatus: 'Experimental',
93
181
  };
94
- var description = 'Alias tokens given from token pipeline. Currently values are pulled from web. Will be used to style components.';
182
+ var description = 'Alias and global tokens given from token pipeline. Used to style components.';
95
183
  return React.createElement(Test_1.Test, { name: "Color Tokens Test", description: description, sections: themeSections, status: status });
96
184
  };
97
185
  exports.ColorTokensTest = ColorTokensTest;
package/lib-commonjs/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorTokenTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAuE;AACvE,kEAAqE;AACrE,8EAA4E;AAC5E,sEAA4E;AAC5E,kEAA6E;AAC7E,sEAAyE;AACzE,2CAAoD;AACpD,uDAA8C;AAC9C,gCAA4D;AAC5D,iEAAyG;AACzG,iDAAgD;AAEhD,IAAM,eAAe,GAAG,IAAA,oCAAgB,EAAC,UAAC,KAAY;IACpD,OAAO;QACL,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;SACnC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,CAAC;KAClB;IACD,eAAe,EAAE;QACf,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,cAAc;KAC/B;IACD,UAAU,EAAE;QACV,WAAW,EAAE,CAAC;QACd,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC;AAEH,IAAM,mBAAmB,GAAG,UAAC,IAAY,EAAE,KAAiB;IAC1D,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC;IAC1D,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC,CAAC;AAGF,IAAM,UAAU,GAA6C,UAAC,CAAkB;IAC9E,IAAM,YAAY,GAAG,eAAe,CAAC,IAAA,sBAAQ,GAAE,CAAC,CAAC;IACjD,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU;QAC5B,oBAAC,mBAAI,0BACH,KAAK,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,IAE9D,IAAA,qBAAS,EAAC,mCAA0B,CAAC,EACzC;QACF,oBAAC,mBAAI,QAAE,CAAC,CAAC,IAAI,CAAQ,CAChB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,qBAAqB,GAA4B;IACrD,IAAM,KAAK,GAAG,IAAA,sBAAQ,GAAE,CAAC;IACzB,IAAM,aAAa,GACjB,KAAK,CAAC,IAAI,KAAK,OAAO;QACtB,KAAK,CAAC,IAAI,KAAK,UAAU;QACzB,KAAK,CAAC,IAAI,KAAK,UAAU;QACzB,KAAK,CAAC,IAAI,KAAK,OAAO;QACtB,KAAK,CAAC,IAAI,KAAK,cAAc,CAAC;IAChC,IAAM,gBAAgB,GAAG,aAAa;QACpC,CAAC,CAAC,IAAA,qCAAuB,EAAC,KAAK,CAAC,IAAI,CAAC;QACrC,CAAC,CAAC,IAAA,iCAAiB,EAAC,IAAA,oCAAoB,EAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5E,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,UAAC,GAAW;QACV,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,GAAI,gBAAgB,CAAC,GAAG,CAAY,GAAG,GAAG,EAAE,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;IACrG,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,IAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,IAAI;QAClC,IAAA,KAAK,GAAU,IAAI,MAAd,EAAE,GAAG,GAAK,IAAI,IAAT,CAAU;QAC5B,OAAO,oBAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAI,CAAC;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAgB,CAAC,IAAI;QAChC,oBAAC,mBAAI,iDAA8C;QACnD,oBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,IAAG,kBAAkB,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,CAAC,CAAQ,CACxF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,aAAa,GAAkB;IACnC;QACE,IAAI,EAAE,oBAAoB;QAC1B,MAAM,EAAE,4BAAmB;QAC3B,SAAS,EAAE,cAAM,OAAA,oBAAC,qBAAqB,OAAG,EAAzB,CAAyB;KAC3C;CACF,CAAC;AAEK,IAAM,eAAe,GAA4B;IACtD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,cAAc;KAC9B,CAAC;IAEF,IAAM,WAAW,GAAG,iHAAiH,CAAC;IAEtI,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC9G,CAAC,CAAC;AAZW,QAAA,eAAe,mBAY1B"}
1
+ {"version":3,"file":"ColorTokenTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/ColorTokens/ColorTokenTest.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.128.3",
3
+ "version": "0.129.0",
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>",
@@ -58,8 +58,8 @@
58
58
  "@fluentui-react-native/interactive-hooks": ">=0.22.14 <1.0.0",
59
59
  "@fluentui-react-native/menu": "^1.2.24",
60
60
  "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
61
- "@fluentui-react-native/separator": "^0.14.11",
62
61
  "@fluentui-react-native/notification": "0.21.22",
62
+ "@fluentui-react-native/separator": "^0.14.11",
63
63
  "@fluentui-react-native/stack": ">=0.7.48 <1.0.0",
64
64
  "@fluentui-react-native/switch": "^0.8.20",
65
65
  "@fluentui-react-native/text": ">=0.19.16 <1.0.0",
@@ -76,29 +76,28 @@
76
76
  "@react-native-community/slider": "^4.2.0",
77
77
  "@react-native-menu/menu": "^0.1.2",
78
78
  "@react-native-picker/picker": "^2.2.1",
79
+ "@warren-ms/react-native-icons": "^0.0.13",
79
80
  "react": "17.0.2",
80
- "react-dom": "17.0.2",
81
81
  "react-native": "^0.68.0",
82
82
  "react-native-macos": "^0.68.0",
83
- "react-native-svg": "12.5.0",
83
+ "react-native-svg": "^12.3.0",
84
84
  "react-native-windows": "^0.68.0",
85
- "tslib": "^2.3.1",
86
- "@warren-ms/react-native-icons": "^0.0.13"
85
+ "tslib": "^2.3.1"
87
86
  },
88
87
  "devDependencies": {
89
88
  "@babel/core": "^7.8.0",
90
89
  "@babel/runtime": "^7.8.0",
91
90
  "@fluentui-react-native/eslint-config-rules": "^0.1.1",
91
+ "@fluentui-react-native/focus-zone": "^0.11.26",
92
92
  "@fluentui-react-native/scripts": "^0.1.1",
93
- "@rnx-kit/cli": "^0.14.8",
93
+ "@rnx-kit/cli": "^0.16.2",
94
94
  "@rnx-kit/metro-config": "^1.3.1",
95
95
  "flow-bin": "^0.113.0",
96
96
  "metro-config": "^0.67.0",
97
97
  "metro-react-native-babel-preset": "^0.67.0",
98
98
  "react-native-svg-transformer": "^1.0.0",
99
99
  "react-native-test-app": "^2.0.2",
100
- "react-test-renderer": "17.0.2",
101
- "@fluentui-react-native/focus-zone": "^0.11.26"
100
+ "react-test-renderer": "17.0.2"
102
101
  },
103
102
  "peerDependencies": {
104
103
  "@office-iss/react-native-win32": "^0.68.0"
@@ -107,7 +106,6 @@
107
106
  "preset": "react-native"
108
107
  },
109
108
  "rnx-kit": {
110
- "reactNativeVersion": "^0.68",
111
109
  "kitType": "app",
112
110
  "bundle": [
113
111
  {
@@ -120,13 +118,20 @@
120
118
  "macos",
121
119
  "windows"
122
120
  ],
123
- "detectCyclicDependencies": {
124
- "throwOnError": true
125
- },
126
- "detectDuplicateDependencies": {
127
- "throwOnError": false
128
- },
129
- "typescriptValidation": false,
121
+ "plugins": [
122
+ [
123
+ "@rnx-kit/metro-plugin-cyclic-dependencies-detector",
124
+ {
125
+ "throwOnError": true
126
+ }
127
+ ],
128
+ [
129
+ "@rnx-kit/metro-plugin-duplicates-checker",
130
+ {
131
+ "throwOnError": false
132
+ }
133
+ ]
134
+ ],
130
135
  "platforms": {
131
136
  "android": {
132
137
  "bundleOutput": "dist/index.android.bundle",
@@ -148,17 +153,25 @@
148
153
  }
149
154
  }
150
155
  ],
151
- "capabilities": [
152
- "core-android",
153
- "core-ios",
154
- "core-macos",
155
- "core-windows",
156
- "babel-preset-react-native",
157
- "metro-config",
158
- "react",
159
- "react-dom",
160
- "svg"
161
- ]
156
+ "alignDeps": {
157
+ "presets": [
158
+ "microsoft/react-native",
159
+ "@fluentui-react-native/scripts/align-deps-preset.js"
160
+ ],
161
+ "requirements": [
162
+ "react-native@0.68"
163
+ ],
164
+ "capabilities": [
165
+ "core-android",
166
+ "core-ios",
167
+ "core-macos",
168
+ "core-windows",
169
+ "babel-preset-react-native",
170
+ "metro-config",
171
+ "react",
172
+ "svg"
173
+ ]
174
+ }
162
175
  },
163
176
  "depcheck": {
164
177
  "ignoreMatches": [
package/src/TestComponents/ColorTokens/ColorTokenTest.tsx CHANGED
@@ -1,15 +1,18 @@
1
1
  import * as React from 'react';
2
- import { View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
2
+ import { View, ViewStyle, StyleSheet, ColorValue, Platform } from 'react-native';
3
3
  import { useTheme, Theme } from '@fluentui-react-native/theme-types';
4
4
  import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
5
5
  import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
6
6
  import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
7
7
  import { createAliasTokens } from '@fluentui-react-native/default-theme';
8
8
  import { commonTestStyles } from '../Common/styles';
9
- import { Text } from '@fluentui/react-native';
9
+ import { Text, ToggleButton } from '@fluentui/react-native';
10
10
  import { Test, TestSection, PlatformStatus } from '../Test';
11
11
  import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
12
12
  import { testProps } from '../Common/TestProps';
13
+ import { globalTokens } from '@fluentui-react-native/theme-tokens';
14
+ import Svg, { G, Path, SvgProps } from 'react-native-svg';
15
+ import { SvgIconProps } from '@fluentui-react-native/icon';
13
16
 
14
17
  const getThemedStyles = themedStyleSheet((theme: Theme) => {
15
18
  return {
@@ -29,52 +32,72 @@ const styles = StyleSheet.create({
29
32
  alignItems: 'center',
30
33
  marginVertical: 5,
31
34
  },
32
- pickerContainer: {
33
- flexDirection: 'row',
34
- justifyContent: 'space-evenly',
35
- },
36
35
  stackStyle: {
37
36
  borderWidth: 2,
38
37
  padding: 12,
39
38
  margin: 8,
40
39
  },
40
+ statusView: {
41
+ flexDirection: 'row',
42
+ alignItems: 'center',
43
+ justifyContent: 'space-between',
44
+ margin: 8,
45
+ },
46
+ // Needed to ensure that with the button is toggled on, the top of the newly shown
47
+ // content is visible so the user knows to scroll down
48
+ toggleButtonAreaPadding: {
49
+ paddingBottom: 10,
50
+ },
41
51
  });
42
52
 
43
- const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
44
- styles[name] = styles[name] || { backgroundColor: color };
45
- return styles[name];
53
+ const getSwatchColorStyle = (colorName: string, colorValue: ColorValue): ViewStyle => {
54
+ styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
55
+ return styles[colorName];
46
56
  };
47
57
 
48
- type ColorTokenProps = { color: ColorValue; name: string };
58
+ type ColorTokenProps = { colorValue: ColorValue; colorName: string };
49
59
  const ColorToken: React.FunctionComponent<ColorTokenProps> = (p: ColorTokenProps) => {
60
+ if (p.colorValue === undefined) {
61
+ console.warn('Color token ' + p.colorName + ' is undefined');
62
+ }
63
+
50
64
  const themedStyles = getThemedStyles(useTheme());
51
65
  return (
52
66
  <View style={styles.swatchItem}>
53
67
  <View
54
- style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]}
68
+ style={[getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch]}
55
69
  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
56
70
  {...testProps(COLORTOKENS_TEST_COMPONENT)}
57
71
  />
58
- <Text>{p.name}</Text>
72
+ <Text>{p.colorName + ' (' + p.colorValue?.toString() + ')'}</Text>
59
73
  </View>
60
74
  );
61
75
  };
62
76
 
63
- const AliasTokensSwatchList: React.FunctionComponent = () => {
77
+ const getSwatch = (item) => {
78
+ const { colorValue, colorName } = item;
79
+ return <ColorToken key={colorName} colorValue={colorValue} colorName={colorName} />;
80
+ };
81
+
82
+ /// Alias color tokens
83
+
84
+ const AliasColorTokensSwatchList: React.FunctionComponent = () => {
64
85
  const theme = useTheme();
86
+
65
87
  const isOfficeTheme =
66
88
  theme.name === 'White' ||
67
89
  theme.name === 'Colorful' ||
68
90
  theme.name === 'DarkGray' ||
69
91
  theme.name === 'Black' ||
70
92
  theme.name === 'HighContrast';
93
+
71
94
  const aliasColorTokens = isOfficeTheme
72
95
  ? createOfficeAliasTokens(theme.name)
73
96
  : createAliasTokens(getCurrentAppearance(theme.host.appearance, 'light'));
74
97
 
75
98
  const aggregator = React.useCallback(
76
- (key: string) => {
77
- return { key: key + ' (' + (aliasColorTokens[key] as string) + ')', color: aliasColorTokens[key] };
99
+ (colorName: string) => {
100
+ return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
78
101
  },
79
102
  [aliasColorTokens],
80
103
  );
@@ -83,15 +106,107 @@ const AliasTokensSwatchList: React.FunctionComponent = () => {
83
106
  return Object.keys(aliasColorTokens).map(aggregator);
84
107
  }, [aliasColorTokens, aggregator]);
85
108
 
86
- const aliasTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
87
- const renderSwatch = React.useCallback((item) => {
88
- const { color, key } = item;
89
- return <ColorToken key={key} color={color} name={key} />;
90
- }, []);
109
+ const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
110
+
111
+ const renderSwatch = React.useCallback(getSwatch, []);
112
+
91
113
  return (
92
114
  <View style={commonTestStyles.view}>
93
- <Text>Alias Color Tokens from Token Pipeline</Text>
94
- <View style={styles.stackStyle}>{aliasTokensAsArray.map((item) => renderSwatch(item))}</View>
115
+ <View style={styles.stackStyle}>{aliasColorTokensAsArray.map((item) => renderSwatch(item))}</View>
116
+ </View>
117
+ );
118
+ };
119
+
120
+ /// Global color tokens - neutral
121
+
122
+ const globalNeutralColorNamesSortedDarkToLight = Object.keys(globalTokens.color)
123
+ .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
124
+ .sort((color1, color2) => {
125
+ const color1hex = globalTokens.color[color1];
126
+ const color2hex = globalTokens.color[color2];
127
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
128
+ // will order the colors from dark to light
129
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
130
+ });
131
+
132
+ const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName: string) => {
133
+ return {
134
+ colorName: colorName,
135
+ colorValue: globalTokens.color[colorName],
136
+ };
137
+ });
138
+
139
+ const GlobalNeutralColorTokensSwatchList: React.FunctionComponent = () => {
140
+ const renderSwatch = React.useCallback(getSwatch, []);
141
+
142
+ return (
143
+ <View style={commonTestStyles.view}>
144
+ <View style={styles.stackStyle}>{globalNeutralColorTokensAsArray.map((item) => renderSwatch(item))}</View>
145
+ </View>
146
+ );
147
+ };
148
+
149
+ /// Global color tokens - shared
150
+
151
+ const globalSharedColorNames = Object.keys(globalTokens.color).filter((key) => globalTokens.color[key].primary !== undefined);
152
+ const globalSharedColorVariantsSortedDarkToLight = Object.keys(globalTokens.color.red).sort((color1, color2) => {
153
+ const color1hex = globalTokens.color.red[color1];
154
+ const color2hex = globalTokens.color.red[color2];
155
+ // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
156
+ // will order the colors from dark to light
157
+ return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
158
+ });
159
+ const globalSharedColorTokensAsArray = globalSharedColorNames
160
+ .map((sharedColorName) => {
161
+ return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
162
+ return {
163
+ colorName: sharedColorName + '.' + variant,
164
+ colorValue: globalTokens.color[sharedColorName][variant],
165
+ };
166
+ });
167
+ })
168
+ .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
169
+
170
+ const GlobalSharedColorTokensSwatchList: React.FunctionComponent = () => {
171
+ const renderSwatch = React.useCallback(getSwatch, []);
172
+
173
+ const [showGlobalSharedColors, setShowGlobalSharedColors] = React.useState(false);
174
+
175
+ const toggleSvg: React.FunctionComponent<SvgProps> = () => {
176
+ const plusPath =
177
+ 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
178
+ const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
179
+
180
+ const path = showGlobalSharedColors ? minusPath : plusPath;
181
+ return (
182
+ <Svg>
183
+ <G>
184
+ <Path d={path} fill="black" />
185
+ </G>
186
+ </Svg>
187
+ );
188
+ };
189
+
190
+ const svgProps: SvgIconProps = { src: toggleSvg };
191
+ const plusCodepoint = 0x2795;
192
+ const minusCodepoint = 0x2796;
193
+ const fontIconProps = {
194
+ codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
195
+ fontSize: 10,
196
+ };
197
+ const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
198
+
199
+ return (
200
+ <View style={styles.toggleButtonAreaPadding}>
201
+ <View style={styles.statusView}>
202
+ <Text variant="subheaderStandard">Show color tokens</Text>
203
+ <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowGlobalSharedColors(!showGlobalSharedColors)} />
204
+ </View>
205
+ {showGlobalSharedColors && (
206
+ <View style={commonTestStyles.view}>
207
+ <View style={styles.stackStyle}>{globalSharedColorTokensAsArray.map((item) => renderSwatch(item))}</View>
208
+ </View>
209
+ )}
95
210
  </View>
96
211
  );
97
212
  };
@@ -100,7 +215,15 @@ const themeSections: TestSection[] = [
100
215
  {
101
216
  name: 'Alias Color Tokens',
102
217
  testID: COLORTOKEN_TESTPAGE,
103
- component: () => <AliasTokensSwatchList />,
218
+ component: () => <AliasColorTokensSwatchList />,
219
+ },
220
+ {
221
+ name: 'Global Color Tokens - Neutral Colors',
222
+ component: () => <GlobalNeutralColorTokensSwatchList />,
223
+ },
224
+ {
225
+ name: 'Global Color Tokens - Shared Colors',
226
+ component: () => <GlobalSharedColorTokensSwatchList />,
104
227
  },
105
228
  ];
106
229
 
@@ -113,7 +236,7 @@ export const ColorTokensTest: React.FunctionComponent = () => {
113
236
  androidStatus: 'Experimental',
114
237
  };
115
238
 
116
- const description = 'Alias tokens given from token pipeline. Currently values are pulled from web. Will be used to style components.';
239
+ const description = 'Alias and global tokens given from token pipeline. Used to style components.';
117
240
 
118
241
  return <Test name="Color Tokens Test" description={description} sections={themeSections} status={status} />;
119
242
  };