@fluentui-react-native/tester 0.151.16 → 0.151.18

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 (10) hide show
  1. package/CHANGELOG.json +73 -1
  2. package/CHANGELOG.md +25 -2
  3. package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map +1 -1
  4. package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js +116 -62
  5. package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js.map +1 -1
  6. package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map +1 -1
  7. package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js +115 -61
  8. package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js.map +1 -1
  9. package/package.json +9 -9
  10. package/src/TestComponents/TabList/TabListTest.tsx +151 -72
package/CHANGELOG.json CHANGED
@@ -2,7 +2,79 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 01 Aug 2023 21:14:30 GMT",
5
+ "date": "Thu, 03 Aug 2023 21:18:52 GMT",
6
+ "version": "0.151.18",
7
+ "tag": "@fluentui-react-native/tester_v0.151.18",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "winlarry@microsoft.com",
12
+ "package": "@fluentui-react-native/tester",
13
+ "commit": "e921fe55b5d10f26ea0418c851f6bc04631aa78c",
14
+ "comment": "Add examples to test page"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/tester",
19
+ "comment": "Bump @fluentui-react-native/tablist to v0.3.4",
20
+ "commit": "not available"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 02 Aug 2023 16:51:10 GMT",
27
+ "version": "0.151.17",
28
+ "tag": "@fluentui-react-native/tester_v0.151.17",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui-react-native/tester",
34
+ "comment": "Bump @fluentui-react-native/button to v0.34.8",
35
+ "commit": "not available"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui-react-native/tester",
40
+ "comment": "Bump @fluentui-react-native/dropdown to v0.8.15",
41
+ "commit": "not available"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui-react-native/tester",
46
+ "comment": "Bump @fluentui-react-native/experimental-button to v0.18.8",
47
+ "commit": "not available"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui-react-native/tester",
52
+ "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.7.15",
53
+ "commit": "not available"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui-react-native/tester",
58
+ "comment": "Bump @fluentui-react-native/menu to v1.11.14",
59
+ "commit": "not available"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui-react-native/tester",
64
+ "comment": "Bump @fluentui-react-native/notification to v0.23.8",
65
+ "commit": "not available"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui-react-native/tester",
70
+ "comment": "Bump @fluentui/react-native to v0.37.16",
71
+ "commit": "not available"
72
+ }
73
+ ]
74
+ }
75
+ },
76
+ {
77
+ "date": "Tue, 01 Aug 2023 21:14:56 GMT",
6
78
  "version": "0.151.16",
7
79
  "tag": "@fluentui-react-native/tester_v0.151.16",
8
80
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Tue, 01 Aug 2023 21:14:30 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 03 Aug 2023 21:18:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.151.18
8
+
9
+ Thu, 03 Aug 2023 21:18:52 GMT
10
+
11
+ ### Patches
12
+
13
+ - Add examples to test page (winlarry@microsoft.com)
14
+ - Bump @fluentui-react-native/tablist to v0.3.4
15
+
16
+ ## 0.151.17
17
+
18
+ Wed, 02 Aug 2023 16:51:10 GMT
19
+
20
+ ### Patches
21
+
22
+ - Bump @fluentui-react-native/button to v0.34.8
23
+ - Bump @fluentui-react-native/dropdown to v0.8.15
24
+ - Bump @fluentui-react-native/experimental-button to v0.18.8
25
+ - Bump @fluentui-react-native/experimental-menu-button to v0.7.15
26
+ - Bump @fluentui-react-native/menu to v1.11.14
27
+ - Bump @fluentui-react-native/notification to v0.23.8
28
+ - Bump @fluentui/react-native to v0.37.16
29
+
7
30
  ## 0.151.16
8
31
 
9
- Tue, 01 Aug 2023 21:14:30 GMT
32
+ Tue, 01 Aug 2023 21:14:56 GMT
10
33
 
11
34
  ### Patches
12
35
 
package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
1
+ {"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgN1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js CHANGED
@@ -1,93 +1,147 @@
1
1
  import React from 'react';
2
- import { View, StyleSheet } from 'react-native';
2
+ import { View } from 'react-native';
3
+ import { ButtonV1 as Button } from '@fluentui-react-native/button';
3
4
  import { Divider } from '@fluentui-react-native/divider';
5
+ import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
4
6
  import { TabList, Tab } from '@fluentui-react-native/tablist';
5
7
  import { TextV1 as Text } from '@fluentui-react-native/text';
8
+ import { svgProps, fontProps } from '../Common/iconExamples';
9
+ import { stackStyle } from '../Common/styles';
6
10
  import { Test } from '../Test';
7
- var Header = Text.customize({ variant: 'subheaderStandard' });
11
+ var SubHeader = Text.customize({ variant: 'subheaderStandard' });
12
+ var Header = Text.customize({ variant: 'headerStandard' });
8
13
  var Line = Divider.customize({ paddingVertical: 4 });
9
14
  var PaddedTabList = TabList.customize({
10
15
  paddingVertical: 4,
11
16
  });
12
- var styles = StyleSheet.create({
13
- container: {
14
- paddingVertical: 8,
15
- },
16
- });
17
- var TabListSizeTest = function () {
18
- return (React.createElement(View, { style: styles.container },
19
- React.createElement(Header, null, "Small"),
20
- React.createElement(PaddedTabList, { size: "small" },
21
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
22
- React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
17
+ var TabListDefaultTest = function () {
18
+ var _a = React.useState('tab1'), key = _a[0], setKey = _a[1];
19
+ return (React.createElement(View, { style: stackStyle },
20
+ React.createElement(Header, null, "Uncontrolled Component"),
23
21
  React.createElement(Line, null),
24
- React.createElement(Header, null, "Medium (default)"),
25
- React.createElement(PaddedTabList, { size: "medium" },
26
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
27
- React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
22
+ React.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
23
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
24
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
25
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
26
+ React.createElement(Header, null, "Controlled Component"),
28
27
  React.createElement(Line, null),
29
- React.createElement(Header, null, "Large"),
30
- React.createElement(PaddedTabList, { size: "large" },
31
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
32
- React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
33
- };
34
- var TabListVerticalTest = function () {
35
- return (React.createElement(TabList, { vertical: true },
36
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
37
- React.createElement(Tab, { tabKey: "world" }, "Tab 2")));
38
- };
39
- var TabListAppearanceTest = function () {
40
- return (React.createElement(View, { style: styles.container },
41
- React.createElement(Header, null, "Transparent Appearance"),
42
- React.createElement(PaddedTabList, { appearance: "transparent" },
43
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
44
- React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
45
- React.createElement(Header, null, "Subtle Appearance"),
46
- React.createElement(PaddedTabList, { appearance: "subtle" },
47
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
48
- React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
28
+ React.createElement(Text, null,
29
+ "Selected Key: ",
30
+ key),
31
+ React.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
32
+ console.log('New key:', val);
33
+ setKey(val);
34
+ } },
35
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
36
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
37
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
49
38
  };
50
39
  var TabListDisabledTest = function () {
51
- return (React.createElement(View, null,
52
- React.createElement(PaddedTabList, null,
53
- React.createElement(Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
54
- React.createElement(Tab, { tabKey: "world" }, "Tab 2")),
40
+ return (React.createElement(View, { style: stackStyle },
41
+ React.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
42
+ React.createElement(Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
43
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
44
+ React.createElement(Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
45
+ React.createElement(Tab, { tabKey: "tab4" }, "Tab 4")),
55
46
  React.createElement(PaddedTabList, { disabled: true },
56
- React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
57
- React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
47
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
48
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
49
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
50
+ };
51
+ var TabListVariantsTest = function () {
52
+ return (React.createElement(View, { style: stackStyle },
53
+ React.createElement(Header, null, "Size Variants"),
54
+ React.createElement(Line, null),
55
+ React.createElement(SubHeader, null, "Small"),
56
+ React.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
57
+ React.createElement(Tab, { tabKey: "sm1" }, "Small Tab 1"),
58
+ React.createElement(Tab, { tabKey: "sm2" }, "Small Tab 2"),
59
+ React.createElement(Tab, { tabKey: "sm3" }, "Small Tab 3")),
60
+ React.createElement(SubHeader, null, "Medium (default)"),
61
+ React.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
62
+ React.createElement(Tab, { tabKey: "m1" }, "Medium Tab 1"),
63
+ React.createElement(Tab, { tabKey: "m2" }, "Medium Tab 2"),
64
+ React.createElement(Tab, { tabKey: "m3" }, "Medium Tab 3")),
65
+ React.createElement(SubHeader, null, "Large"),
66
+ React.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
67
+ React.createElement(Tab, { tabKey: "lg1" }, "Large Tab 1"),
68
+ React.createElement(Tab, { tabKey: "lg2" }, "Large Tab 2"),
69
+ React.createElement(Tab, { tabKey: "lg3" }, "Large Tab 3")),
70
+ React.createElement(Header, null, "Appearance"),
71
+ React.createElement(Line, null),
72
+ React.createElement(SubHeader, null, "Transparent Appearance"),
73
+ React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
74
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
75
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
76
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
77
+ React.createElement(SubHeader, null, "Subtle Appearance"),
78
+ React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
79
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
80
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
81
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3")),
82
+ React.createElement(Header, null, "Vertical Orientation"),
83
+ React.createElement(Line, null),
84
+ React.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
85
+ React.createElement(Tab, { tabKey: "tab1" }, "Tab 1"),
86
+ React.createElement(Tab, { tabKey: "tab2" }, "Tab 2"),
87
+ React.createElement(Tab, { tabKey: "tab3" }, "Tab 3"))));
58
88
  };
59
89
  var TabListIconTest = function () {
60
- var iconProp = {
61
- fontSource: {
62
- fontFamily: 'Arial',
63
- codepoint: 0x2663,
64
- },
65
- };
66
- return (React.createElement(TabList, null,
67
- React.createElement(Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
68
- React.createElement(Tab, { icon: iconProp, tabKey: "iconOnly" })));
90
+ return (React.createElement(View, { style: stackStyle },
91
+ React.createElement(TabList, { defaultSelectedKey: "fontIcon" },
92
+ React.createElement(Tab, { icon: { fontSource: fontProps }, tabKey: "fontIcon" }, "Font Icon"),
93
+ React.createElement(Tab, { icon: { fontSource: fontProps }, tabKey: "fontIconOnly" }),
94
+ React.createElement(Tab, { icon: { svgSource: svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
95
+ React.createElement(Tab, { icon: { svgSource: svgProps }, tabKey: "svgIconOnly" }))));
96
+ };
97
+ var TabListViewTest = function () {
98
+ var _a = React.useState('a'), key = _a[0], setKey = _a[1];
99
+ var views = React.useMemo(function () { return ({
100
+ a: (React.createElement(View, null,
101
+ React.createElement(SubHeader, null, "This is View 1"),
102
+ React.createElement(Text, { variant: "body1" }, "Here is some text."))),
103
+ b: (React.createElement(View, null,
104
+ React.createElement(SubHeader, null, "This is View 2"),
105
+ React.createElement(Button, null, "Button 1"))),
106
+ c: (React.createElement(View, null,
107
+ React.createElement(SubHeader, null, "This is View 3"),
108
+ React.createElement(Menu, null,
109
+ React.createElement(MenuTrigger, null,
110
+ React.createElement(Button, null, "Menu")),
111
+ React.createElement(MenuPopover, null,
112
+ React.createElement(MenuList, null,
113
+ React.createElement(MenuItem, null, "Item 1"),
114
+ React.createElement(MenuItem, null, "Item 2"),
115
+ React.createElement(MenuItem, null, "Item 3")))))),
116
+ }); }, []);
117
+ return (React.createElement(View, { style: stackStyle },
118
+ React.createElement(TabList, { selectedKey: key, onTabSelect: setKey },
119
+ React.createElement(Tab, { tabKey: "a" }, "View 1"),
120
+ React.createElement(Tab, { tabKey: "b" }, "View 2"),
121
+ React.createElement(Tab, { tabKey: "c" }, "View 3")),
122
+ views[key]));
69
123
  };
70
124
  var sections = [
71
125
  {
72
- name: 'Size',
73
- component: TabListSizeTest,
74
- },
75
- {
76
- name: 'Vertical',
77
- component: TabListVerticalTest,
78
- },
79
- {
80
- name: 'Appearance',
81
- component: TabListAppearanceTest,
126
+ name: 'TabList Controlled vs Uncontrolled',
127
+ component: TabListDefaultTest,
82
128
  },
83
129
  {
84
130
  name: 'Disabled',
85
131
  component: TabListDisabledTest,
86
132
  },
133
+ {
134
+ name: 'Variants',
135
+ component: TabListVariantsTest,
136
+ },
87
137
  {
88
138
  name: 'Icon',
89
139
  component: TabListIconTest,
90
140
  },
141
+ {
142
+ name: 'Rendering Content Separately',
143
+ component: TabListViewTest,
144
+ },
91
145
  ];
92
146
  export var TabListTest = function () {
93
147
  var status = {
package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
1
+ {"version":3,"file":"TabListTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgN1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js CHANGED
@@ -4,94 +4,148 @@ exports.TabListTest = void 0;
4
4
  var tslib_1 = require("tslib");
5
5
  var react_1 = tslib_1.__importDefault(require("react"));
6
6
  var react_native_1 = require("react-native");
7
+ var button_1 = require("@fluentui-react-native/button");
7
8
  var divider_1 = require("@fluentui-react-native/divider");
9
+ var menu_1 = require("@fluentui-react-native/menu");
8
10
  var tablist_1 = require("@fluentui-react-native/tablist");
9
11
  var text_1 = require("@fluentui-react-native/text");
12
+ var iconExamples_1 = require("../Common/iconExamples");
13
+ var styles_1 = require("../Common/styles");
10
14
  var Test_1 = require("../Test");
11
- var Header = text_1.TextV1.customize({ variant: 'subheaderStandard' });
15
+ var SubHeader = text_1.TextV1.customize({ variant: 'subheaderStandard' });
16
+ var Header = text_1.TextV1.customize({ variant: 'headerStandard' });
12
17
  var Line = divider_1.Divider.customize({ paddingVertical: 4 });
13
18
  var PaddedTabList = tablist_1.TabList.customize({
14
19
  paddingVertical: 4,
15
20
  });
16
- var styles = react_native_1.StyleSheet.create({
17
- container: {
18
- paddingVertical: 8,
19
- },
20
- });
21
- var TabListSizeTest = function () {
22
- return (react_1.default.createElement(react_native_1.View, { style: styles.container },
23
- react_1.default.createElement(Header, null, "Small"),
24
- react_1.default.createElement(PaddedTabList, { size: "small" },
25
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
26
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
21
+ var TabListDefaultTest = function () {
22
+ var _a = react_1.default.useState('tab1'), key = _a[0], setKey = _a[1];
23
+ return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
24
+ react_1.default.createElement(Header, null, "Uncontrolled Component"),
27
25
  react_1.default.createElement(Line, null),
28
- react_1.default.createElement(Header, null, "Medium (default)"),
29
- react_1.default.createElement(PaddedTabList, { size: "medium" },
30
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
31
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
26
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
27
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
28
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
29
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
30
+ react_1.default.createElement(Header, null, "Controlled Component"),
32
31
  react_1.default.createElement(Line, null),
33
- react_1.default.createElement(Header, null, "Large"),
34
- react_1.default.createElement(PaddedTabList, { size: "large" },
35
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
36
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
37
- };
38
- var TabListVerticalTest = function () {
39
- return (react_1.default.createElement(tablist_1.TabList, { vertical: true },
40
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
41
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")));
42
- };
43
- var TabListAppearanceTest = function () {
44
- return (react_1.default.createElement(react_native_1.View, { style: styles.container },
45
- react_1.default.createElement(Header, null, "Transparent Appearance"),
46
- react_1.default.createElement(PaddedTabList, { appearance: "transparent" },
47
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
48
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
49
- react_1.default.createElement(Header, null, "Subtle Appearance"),
50
- react_1.default.createElement(PaddedTabList, { appearance: "subtle" },
51
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
52
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
32
+ react_1.default.createElement(text_1.TextV1, null,
33
+ "Selected Key: ",
34
+ key),
35
+ react_1.default.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
36
+ console.log('New key:', val);
37
+ setKey(val);
38
+ } },
39
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
40
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
41
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
53
42
  };
54
43
  var TabListDisabledTest = function () {
55
- return (react_1.default.createElement(react_native_1.View, null,
56
- react_1.default.createElement(PaddedTabList, null,
57
- react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
58
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
44
+ return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
45
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
46
+ react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
47
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
48
+ react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
49
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab4" }, "Tab 4")),
59
50
  react_1.default.createElement(PaddedTabList, { disabled: true },
60
- react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
61
- react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
51
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
52
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
53
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
54
+ };
55
+ var TabListVariantsTest = function () {
56
+ return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
57
+ react_1.default.createElement(Header, null, "Size Variants"),
58
+ react_1.default.createElement(Line, null),
59
+ react_1.default.createElement(SubHeader, null, "Small"),
60
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
61
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "sm1" }, "Small Tab 1"),
62
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "sm2" }, "Small Tab 2"),
63
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "sm3" }, "Small Tab 3")),
64
+ react_1.default.createElement(SubHeader, null, "Medium (default)"),
65
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
66
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "m1" }, "Medium Tab 1"),
67
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "m2" }, "Medium Tab 2"),
68
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "m3" }, "Medium Tab 3")),
69
+ react_1.default.createElement(SubHeader, null, "Large"),
70
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
71
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "lg1" }, "Large Tab 1"),
72
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "lg2" }, "Large Tab 2"),
73
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "lg3" }, "Large Tab 3")),
74
+ react_1.default.createElement(Header, null, "Appearance"),
75
+ react_1.default.createElement(Line, null),
76
+ react_1.default.createElement(SubHeader, null, "Transparent Appearance"),
77
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
78
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
79
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
80
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
81
+ react_1.default.createElement(SubHeader, null, "Subtle Appearance"),
82
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
83
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
84
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
85
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
86
+ react_1.default.createElement(Header, null, "Vertical Orientation"),
87
+ react_1.default.createElement(Line, null),
88
+ react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
89
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
90
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
91
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
62
92
  };
63
93
  var TabListIconTest = function () {
64
- var iconProp = {
65
- fontSource: {
66
- fontFamily: 'Arial',
67
- codepoint: 0x2663,
68
- },
69
- };
70
- return (react_1.default.createElement(tablist_1.TabList, null,
71
- react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
72
- react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "iconOnly" })));
94
+ return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
95
+ react_1.default.createElement(tablist_1.TabList, { defaultSelectedKey: "fontIcon" },
96
+ react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIcon" }, "Font Icon"),
97
+ react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIconOnly" }),
98
+ react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
99
+ react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIconOnly" }))));
100
+ };
101
+ var TabListViewTest = function () {
102
+ var _a = react_1.default.useState('a'), key = _a[0], setKey = _a[1];
103
+ var views = react_1.default.useMemo(function () { return ({
104
+ a: (react_1.default.createElement(react_native_1.View, null,
105
+ react_1.default.createElement(SubHeader, null, "This is View 1"),
106
+ react_1.default.createElement(text_1.TextV1, { variant: "body1" }, "Here is some text."))),
107
+ b: (react_1.default.createElement(react_native_1.View, null,
108
+ react_1.default.createElement(SubHeader, null, "This is View 2"),
109
+ react_1.default.createElement(button_1.ButtonV1, null, "Button 1"))),
110
+ c: (react_1.default.createElement(react_native_1.View, null,
111
+ react_1.default.createElement(SubHeader, null, "This is View 3"),
112
+ react_1.default.createElement(menu_1.Menu, null,
113
+ react_1.default.createElement(menu_1.MenuTrigger, null,
114
+ react_1.default.createElement(button_1.ButtonV1, null, "Menu")),
115
+ react_1.default.createElement(menu_1.MenuPopover, null,
116
+ react_1.default.createElement(menu_1.MenuList, null,
117
+ react_1.default.createElement(menu_1.MenuItem, null, "Item 1"),
118
+ react_1.default.createElement(menu_1.MenuItem, null, "Item 2"),
119
+ react_1.default.createElement(menu_1.MenuItem, null, "Item 3")))))),
120
+ }); }, []);
121
+ return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
122
+ react_1.default.createElement(tablist_1.TabList, { selectedKey: key, onTabSelect: setKey },
123
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "a" }, "View 1"),
124
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "b" }, "View 2"),
125
+ react_1.default.createElement(tablist_1.Tab, { tabKey: "c" }, "View 3")),
126
+ views[key]));
73
127
  };
74
128
  var sections = [
75
129
  {
76
- name: 'Size',
77
- component: TabListSizeTest,
78
- },
79
- {
80
- name: 'Vertical',
81
- component: TabListVerticalTest,
82
- },
83
- {
84
- name: 'Appearance',
85
- component: TabListAppearanceTest,
130
+ name: 'TabList Controlled vs Uncontrolled',
131
+ component: TabListDefaultTest,
86
132
  },
87
133
  {
88
134
  name: 'Disabled',
89
135
  component: TabListDisabledTest,
90
136
  },
137
+ {
138
+ name: 'Variants',
139
+ component: TabListVariantsTest,
140
+ },
91
141
  {
92
142
  name: 'Icon',
93
143
  component: TabListIconTest,
94
144
  },
145
+ {
146
+ name: 'Rendering Content Separately',
147
+ component: TabListViewTest,
148
+ },
95
149
  ];
96
150
  var TabListTest = function () {
97
151
  var status = {
package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TabListTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TabList/TabListTest.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.151.16",
3
+ "version": "0.151.18",
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>",
@@ -37,18 +37,18 @@
37
37
  "@fluentui-react-native/apple-theme": ">=0.21.5 <1.0.0",
38
38
  "@fluentui-react-native/avatar": "^1.10.7",
39
39
  "@fluentui-react-native/badge": ">=0.7.3 <1.0.0",
40
- "@fluentui-react-native/button": ">=0.34.7 <1.0.0",
40
+ "@fluentui-react-native/button": ">=0.34.8 <1.0.0",
41
41
  "@fluentui-react-native/chip": "^0.1.4",
42
42
  "@fluentui-react-native/default-theme": ">=0.19.4 <1.0.0",
43
43
  "@fluentui-react-native/divider": "^0.5.5",
44
- "@fluentui-react-native/dropdown": ">=0.8.14 <1.0.0",
44
+ "@fluentui-react-native/dropdown": ">=0.8.15 <1.0.0",
45
45
  "@fluentui-react-native/experimental-activity-indicator": ">=0.8.4 <1.0.0",
46
46
  "@fluentui-react-native/experimental-appearance-additions": "^0.5.5",
47
47
  "@fluentui-react-native/experimental-avatar": ">=0.19.4 <1.0.0",
48
- "@fluentui-react-native/experimental-button": "0.18.7",
48
+ "@fluentui-react-native/experimental-button": "0.18.8",
49
49
  "@fluentui-react-native/experimental-checkbox": "0.15.7",
50
50
  "@fluentui-react-native/experimental-expander": "0.6.6",
51
- "@fluentui-react-native/experimental-menu-button": ">=0.7.14 <1.0.0",
51
+ "@fluentui-react-native/experimental-menu-button": ">=0.7.15 <1.0.0",
52
52
  "@fluentui-react-native/experimental-native-date-picker": ">=0.8.0 <1.0.0",
53
53
  "@fluentui-react-native/experimental-shadow": "0.4.5",
54
54
  "@fluentui-react-native/experimental-shimmer": "0.10.6",
@@ -59,15 +59,15 @@
59
59
  "@fluentui-react-native/input": "^0.3.7",
60
60
  "@fluentui-react-native/drawer": "^0.2.6",
61
61
  "@fluentui-react-native/interactive-hooks": ">=0.24.5 <1.0.0",
62
- "@fluentui-react-native/menu": "^1.11.13",
62
+ "@fluentui-react-native/menu": "^1.11.14",
63
63
  "@fluentui-react-native/merge-props": ">=0.7.0 <1.0.0",
64
- "@fluentui-react-native/notification": "0.23.7",
64
+ "@fluentui-react-native/notification": "0.23.8",
65
65
  "@fluentui-react-native/radio-group": ">=0.18.7 <1.0.0",
66
66
  "@fluentui-react-native/separator": "^0.16.3",
67
67
  "@fluentui-react-native/spinner": "^0.7.6",
68
68
  "@fluentui-react-native/stack": ">=0.8.7 <1.0.0",
69
69
  "@fluentui-react-native/switch": "^0.10.5",
70
- "@fluentui-react-native/tablist": "0.3.3",
70
+ "@fluentui-react-native/tablist": "0.3.4",
71
71
  "@fluentui-react-native/text": ">=0.21.5 <1.0.0",
72
72
  "@fluentui-react-native/theme": ">=0.9.0 <1.0.0",
73
73
  "@fluentui-react-native/theme-tokens": "^0.25.0",
@@ -75,7 +75,7 @@
75
75
  "@fluentui-react-native/themed-stylesheet": "^1.5.1",
76
76
  "@fluentui-react-native/theming-utils": ">=0.24.1 <1.0.0",
77
77
  "@fluentui-react-native/win32-theme": ">=0.27.2 <1.0.0",
78
- "@fluentui/react-native": ">=0.37.15 <1.0.0",
78
+ "@fluentui/react-native": ">=0.37.16 <1.0.0",
79
79
  "@fortawesome/fontawesome-svg-core": "^6.2.0",
80
80
  "@fortawesome/free-solid-svg-icons": "^6.2.0",
81
81
  "@fortawesome/react-native-fontawesome": "^0.3.0",
package/src/TestComponents/TabList/TabListTest.tsx CHANGED
@@ -1,130 +1,209 @@
1
1
  import React from 'react';
2
- import { View, StyleSheet } from 'react-native';
2
+ import { View } from 'react-native';
3
3
 
4
+ import { ButtonV1 as Button } from '@fluentui-react-native/button';
4
5
  import { Divider } from '@fluentui-react-native/divider';
6
+ import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
5
7
  import { TabList, Tab } from '@fluentui-react-native/tablist';
6
8
  import { TextV1 as Text } from '@fluentui-react-native/text';
7
9
 
10
+ import { svgProps, fontProps } from '../Common/iconExamples';
11
+ import { stackStyle } from '../Common/styles';
8
12
  import type { PlatformStatus, TestSection } from '../Test';
9
13
  import { Test } from '../Test';
10
14
 
11
- const Header = Text.customize({ variant: 'subheaderStandard' });
15
+ const SubHeader = Text.customize({ variant: 'subheaderStandard' });
16
+ const Header = Text.customize({ variant: 'headerStandard' });
12
17
  const Line = Divider.customize({ paddingVertical: 4 });
13
18
  const PaddedTabList = TabList.customize({
14
19
  paddingVertical: 4,
15
20
  });
16
21
 
17
- const styles = StyleSheet.create({
18
- container: {
19
- paddingVertical: 8,
20
- },
21
- });
22
-
23
- const TabListSizeTest: React.FunctionComponent = () => {
22
+ const TabListDefaultTest: React.FunctionComponent = () => {
23
+ const [key, setKey] = React.useState('tab1');
24
24
  return (
25
- <View style={styles.container}>
26
- <Header>Small</Header>
27
- <PaddedTabList size="small">
28
- <Tab tabKey="hello">Tab 1</Tab>
29
- <Tab tabKey="world">Tab 2</Tab>
30
- </PaddedTabList>
25
+ <View style={stackStyle}>
26
+ <Header>Uncontrolled Component</Header>
31
27
  <Line />
32
- <Header>Medium (default)</Header>
33
- <PaddedTabList size="medium">
34
- <Tab tabKey="hello">Tab 1</Tab>
35
- <Tab tabKey="world">Tab 2</Tab>
28
+ <PaddedTabList defaultSelectedKey={'tab1'}>
29
+ <Tab tabKey="tab1">Tab 1</Tab>
30
+ <Tab tabKey="tab2">Tab 2</Tab>
31
+ <Tab tabKey="tab3">Tab 3</Tab>
36
32
  </PaddedTabList>
33
+ <Header>Controlled Component</Header>
37
34
  <Line />
38
- <Header>Large</Header>
39
- <PaddedTabList size="large">
40
- <Tab tabKey="hello">Tab 1</Tab>
41
- <Tab tabKey="world">Tab 2</Tab>
35
+ <Text>Selected Key: {key}</Text>
36
+ <PaddedTabList
37
+ selectedKey={key}
38
+ onTabSelect={(val) => {
39
+ console.log('New key:', val);
40
+ setKey(val);
41
+ }}
42
+ >
43
+ <Tab tabKey="tab1">Tab 1</Tab>
44
+ <Tab tabKey="tab2">Tab 2</Tab>
45
+ <Tab tabKey="tab3">Tab 3</Tab>
42
46
  </PaddedTabList>
43
47
  </View>
44
48
  );
45
49
  };
46
50
 
47
- const TabListVerticalTest: React.FunctionComponent = () => {
51
+ const TabListDisabledTest: React.FunctionComponent = () => {
48
52
  return (
49
- <TabList vertical>
50
- <Tab tabKey="hello">Tab 1</Tab>
51
- <Tab tabKey="world">Tab 2</Tab>
52
- </TabList>
53
+ <View style={stackStyle}>
54
+ <PaddedTabList defaultSelectedKey="tab2">
55
+ <Tab disabled tabKey="tab1">
56
+ Tab 1
57
+ </Tab>
58
+ <Tab tabKey="tab2">Tab 2</Tab>
59
+ <Tab disabled tabKey="tab3">
60
+ Tab 3
61
+ </Tab>
62
+ <Tab tabKey="tab4">Tab 4</Tab>
63
+ </PaddedTabList>
64
+ <PaddedTabList disabled>
65
+ <Tab tabKey="tab1">Tab 1</Tab>
66
+ <Tab tabKey="tab2">Tab 2</Tab>
67
+ <Tab tabKey="tab3">Tab 3</Tab>
68
+ </PaddedTabList>
69
+ </View>
53
70
  );
54
71
  };
55
72
 
56
- const TabListAppearanceTest: React.FunctionComponent = () => {
73
+ const TabListVariantsTest: React.FunctionComponent = () => {
57
74
  return (
58
- <View style={styles.container}>
59
- <Header>Transparent Appearance</Header>
60
- <PaddedTabList appearance="transparent">
61
- <Tab tabKey="hello">Tab 1</Tab>
62
- <Tab tabKey="world">Tab 2</Tab>
75
+ <View style={stackStyle}>
76
+ <Header>Size Variants</Header>
77
+ <Line />
78
+ <SubHeader>Small</SubHeader>
79
+ <PaddedTabList defaultSelectedKey="sm1" size="small">
80
+ <Tab tabKey="sm1">Small Tab 1</Tab>
81
+ <Tab tabKey="sm2">Small Tab 2</Tab>
82
+ <Tab tabKey="sm3">Small Tab 3</Tab>
83
+ </PaddedTabList>
84
+ <SubHeader>Medium (default)</SubHeader>
85
+ <PaddedTabList defaultSelectedKey="m1" size="medium">
86
+ <Tab tabKey="m1">Medium Tab 1</Tab>
87
+ <Tab tabKey="m2">Medium Tab 2</Tab>
88
+ <Tab tabKey="m3">Medium Tab 3</Tab>
89
+ </PaddedTabList>
90
+ <SubHeader>Large</SubHeader>
91
+ <PaddedTabList defaultSelectedKey="lg1" size="large">
92
+ <Tab tabKey="lg1">Large Tab 1</Tab>
93
+ <Tab tabKey="lg2">Large Tab 2</Tab>
94
+ <Tab tabKey="lg3">Large Tab 3</Tab>
63
95
  </PaddedTabList>
64
- <Header>Subtle Appearance</Header>
65
- <PaddedTabList appearance="subtle">
66
- <Tab tabKey="hello">Tab 1</Tab>
67
- <Tab tabKey="world">Tab 2</Tab>
96
+ <Header>Appearance</Header>
97
+ <Line />
98
+ <SubHeader>Transparent Appearance</SubHeader>
99
+ <PaddedTabList defaultSelectedKey="tab1" appearance="transparent">
100
+ <Tab tabKey="tab1">Tab 1</Tab>
101
+ <Tab tabKey="tab2">Tab 2</Tab>
102
+ <Tab tabKey="tab3">Tab 3</Tab>
103
+ </PaddedTabList>
104
+ <SubHeader>Subtle Appearance</SubHeader>
105
+ <PaddedTabList defaultSelectedKey="tab1" appearance="subtle">
106
+ <Tab tabKey="tab1">Tab 1</Tab>
107
+ <Tab tabKey="tab2">Tab 2</Tab>
108
+ <Tab tabKey="tab3">Tab 3</Tab>
109
+ </PaddedTabList>
110
+ <Header>Vertical Orientation</Header>
111
+ <Line />
112
+ <PaddedTabList defaultSelectedKey="tab1" vertical>
113
+ <Tab tabKey="tab1">Tab 1</Tab>
114
+ <Tab tabKey="tab2">Tab 2</Tab>
115
+ <Tab tabKey="tab3">Tab 3</Tab>
68
116
  </PaddedTabList>
69
117
  </View>
70
118
  );
71
119
  };
72
120
 
73
- const TabListDisabledTest: React.FunctionComponent = () => {
121
+ const TabListIconTest: React.FunctionComponent = () => {
74
122
  return (
75
- <View>
76
- <PaddedTabList>
77
- <Tab disabled tabKey="hello">
78
- Tab 1
123
+ <View style={stackStyle}>
124
+ <TabList defaultSelectedKey="fontIcon">
125
+ <Tab icon={{ fontSource: fontProps }} tabKey="fontIcon">
126
+ Font Icon
79
127
  </Tab>
80
- <Tab tabKey="world">Tab 2</Tab>
81
- </PaddedTabList>
82
- <PaddedTabList disabled>
83
- <Tab tabKey="hello">Tab 1</Tab>
84
- <Tab tabKey="world">Tab 2</Tab>
85
- </PaddedTabList>
128
+ <Tab icon={{ fontSource: fontProps }} tabKey="fontIconOnly" />
129
+ <Tab icon={{ svgSource: svgProps }} tabKey="svgIcon">
130
+ SVG Icon
131
+ </Tab>
132
+ <Tab icon={{ svgSource: svgProps }} tabKey="svgIconOnly" />
133
+ </TabList>
86
134
  </View>
87
135
  );
88
136
  };
89
137
 
90
- const TabListIconTest: React.FunctionComponent = () => {
91
- const iconProp = {
92
- fontSource: {
93
- fontFamily: 'Arial',
94
- codepoint: 0x2663,
95
- },
96
- };
138
+ const TabListViewTest: React.FunctionComponent = () => {
139
+ const [key, setKey] = React.useState('a');
140
+ const views = React.useMemo(
141
+ () => ({
142
+ a: (
143
+ <View>
144
+ <SubHeader>This is View 1</SubHeader>
145
+ <Text variant="body1">Here is some text.</Text>
146
+ </View>
147
+ ),
148
+ b: (
149
+ <View>
150
+ <SubHeader>This is View 2</SubHeader>
151
+ <Button>Button 1</Button>
152
+ </View>
153
+ ),
154
+ c: (
155
+ <View>
156
+ <SubHeader>This is View 3</SubHeader>
157
+ <Menu>
158
+ <MenuTrigger>
159
+ <Button>Menu</Button>
160
+ </MenuTrigger>
161
+ <MenuPopover>
162
+ <MenuList>
163
+ <MenuItem>Item 1</MenuItem>
164
+ <MenuItem>Item 2</MenuItem>
165
+ <MenuItem>Item 3</MenuItem>
166
+ </MenuList>
167
+ </MenuPopover>
168
+ </Menu>
169
+ </View>
170
+ ),
171
+ }),
172
+ [],
173
+ );
97
174
  return (
98
- <TabList>
99
- <Tab icon={iconProp} tabKey="withIcon">
100
- Tab Item
101
- </Tab>
102
- <Tab icon={iconProp} tabKey="iconOnly" />
103
- </TabList>
175
+ <View style={stackStyle}>
176
+ <TabList selectedKey={key} onTabSelect={setKey}>
177
+ <Tab tabKey="a">View 1</Tab>
178
+ <Tab tabKey="b">View 2</Tab>
179
+ <Tab tabKey="c">View 3</Tab>
180
+ </TabList>
181
+ {views[key]}
182
+ </View>
104
183
  );
105
184
  };
106
185
 
107
186
  const sections: TestSection[] = [
108
187
  {
109
- name: 'Size',
110
- component: TabListSizeTest,
111
- },
112
- {
113
- name: 'Vertical',
114
- component: TabListVerticalTest,
115
- },
116
- {
117
- name: 'Appearance',
118
- component: TabListAppearanceTest,
188
+ name: 'TabList Controlled vs Uncontrolled',
189
+ component: TabListDefaultTest,
119
190
  },
120
191
  {
121
192
  name: 'Disabled',
122
193
  component: TabListDisabledTest,
123
194
  },
195
+ {
196
+ name: 'Variants',
197
+ component: TabListVariantsTest,
198
+ },
124
199
  {
125
200
  name: 'Icon',
126
201
  component: TabListIconTest,
127
202
  },
203
+ {
204
+ name: 'Rendering Content Separately',
205
+ component: TabListViewTest,
206
+ },
128
207
  ];
129
208
 
130
209
  export const TabListTest: React.FunctionComponent = () => {