@fluentui-react-native/tester 0.151.11 → 0.151.13

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 +43 -1
  2. package/CHANGELOG.md +20 -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 +81 -4
  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 +81 -4
  8. package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js.map +1 -1
  9. package/package.json +2 -2
  10. package/src/TestComponents/TabList/TabListTest.tsx +110 -4
package/CHANGELOG.json CHANGED
@@ -2,7 +2,49 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 18 Jul 2023 19:04:56 GMT",
5
+ "date": "Thu, 27 Jul 2023 18:42:55 GMT",
6
+ "version": "0.151.13",
7
+ "tag": "@fluentui-react-native/tester_v0.151.13",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "winlarry@microsoft.com",
12
+ "package": "@fluentui-react-native/tester",
13
+ "commit": "a821985bb93f52185950c9b04db3f9c157331007",
14
+ "comment": "Add Icon examples for TabList"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/tester",
19
+ "comment": "Bump @fluentui-react-native/tablist to v0.3.1",
20
+ "commit": "not available"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Mon, 24 Jul 2023 19:01:40 GMT",
27
+ "tag": "@fluentui-react-native/tester_v0.151.12",
28
+ "version": "0.151.12",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "winlarry@microsoft.com",
33
+ "package": "@fluentui-react-native/tester",
34
+ "commit": "d04cb29b97e922c1c42f402bb22573c8176928c1",
35
+ "comment": "Add examples of new TabList variants"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui-react-native/tester",
40
+ "comment": "Bump @fluentui-react-native/tablist to v0.3.0",
41
+ "commit": "d04cb29b97e922c1c42f402bb22573c8176928c1"
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Tue, 18 Jul 2023 19:09:32 GMT",
6
48
  "tag": "@fluentui-react-native/tester_v0.151.11",
7
49
  "version": "0.151.11",
8
50
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Tue, 18 Jul 2023 19:04:56 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 27 Jul 2023 18:42:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.151.13
8
+
9
+ Thu, 27 Jul 2023 18:42:55 GMT
10
+
11
+ ### Patches
12
+
13
+ - Add Icon examples for TabList (winlarry@microsoft.com)
14
+ - Bump @fluentui-react-native/tablist to v0.3.1
15
+
16
+ ## 0.151.12
17
+
18
+ Mon, 24 Jul 2023 19:01:40 GMT
19
+
20
+ ### Patches
21
+
22
+ - Add examples of new TabList variants (winlarry@microsoft.com)
23
+ - Bump @fluentui-react-native/tablist to v0.3.0
24
+
7
25
  ## 0.151.11
8
26
 
9
- Tue, 18 Jul 2023 19:04:56 GMT
27
+ Tue, 18 Jul 2023 19:09:32 GMT
10
28
 
11
29
  ### Patches
12
30
 
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;AAuB1B,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;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
package/lib/fluent-tester/src/TestComponents/TabList/TabListTest.js CHANGED
@@ -1,15 +1,92 @@
1
1
  import React from 'react';
2
+ import { View, StyleSheet } from 'react-native';
3
+ import { Divider } from '@fluentui-react-native/divider';
2
4
  import { TabList, Tab } from '@fluentui-react-native/tablist';
5
+ import { TextV1 as Text } from '@fluentui-react-native/text';
3
6
  import { Test } from '../Test';
4
- var TabListMainTest = function () {
5
- return (React.createElement(TabList, null,
7
+ var Header = Text.customize({ variant: 'subheaderStandard' });
8
+ var Line = Divider.customize({ paddingVertical: 4 });
9
+ var PaddedTabList = TabList.customize({
10
+ paddingVertical: 4,
11
+ });
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")),
23
+ 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")),
28
+ 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 },
6
36
  React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
7
37
  React.createElement(Tab, { tabKey: "world" }, "Tab 2")));
8
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"))));
49
+ };
50
+ 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")),
55
+ React.createElement(PaddedTabList, { disabled: true },
56
+ React.createElement(Tab, { tabKey: "hello" }, "Tab 1"),
57
+ React.createElement(Tab, { tabKey: "world" }, "Tab 2"))));
58
+ };
59
+ 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" })));
69
+ };
9
70
  var sections = [
10
71
  {
11
- name: 'Main Test',
12
- component: TabListMainTest,
72
+ name: 'Size',
73
+ component: TabListSizeTest,
74
+ },
75
+ {
76
+ name: 'Vertical',
77
+ component: TabListVerticalTest,
78
+ },
79
+ {
80
+ name: 'Appearance',
81
+ component: TabListAppearanceTest,
82
+ },
83
+ {
84
+ name: 'Disabled',
85
+ component: TabListDisabledTest,
86
+ },
87
+ {
88
+ name: 'Icon',
89
+ component: TabListIconTest,
13
90
  },
14
91
  ];
15
92
  export var TabListTest = function () {
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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,IAAM,eAAe,GAA4B;IAC/C,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO,YAAY;QAC/B,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO,YAAY,CACvB,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,QAAQ,GAAkB;IAC9B;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAe;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAA4B;IAClD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GAAG,gDAAgD,CAAC;IAErE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACnG,CAAC,CAAC"}
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;AAuB1B,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;AAiI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAC"}
package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js CHANGED
@@ -3,17 +3,94 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TabListTest = void 0;
4
4
  var tslib_1 = require("tslib");
5
5
  var react_1 = tslib_1.__importDefault(require("react"));
6
+ var react_native_1 = require("react-native");
7
+ var divider_1 = require("@fluentui-react-native/divider");
6
8
  var tablist_1 = require("@fluentui-react-native/tablist");
9
+ var text_1 = require("@fluentui-react-native/text");
7
10
  var Test_1 = require("../Test");
8
- var TabListMainTest = function () {
9
- return (react_1.default.createElement(tablist_1.TabList, null,
11
+ var Header = text_1.TextV1.customize({ variant: 'subheaderStandard' });
12
+ var Line = divider_1.Divider.customize({ paddingVertical: 4 });
13
+ var PaddedTabList = tablist_1.TabList.customize({
14
+ paddingVertical: 4,
15
+ });
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")),
27
+ 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")),
32
+ 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 },
10
40
  react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
11
41
  react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")));
12
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"))));
53
+ };
54
+ 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")),
59
+ 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"))));
62
+ };
63
+ 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" })));
73
+ };
13
74
  var sections = [
14
75
  {
15
- name: 'Main Test',
16
- component: TabListMainTest,
76
+ name: 'Size',
77
+ component: TabListSizeTest,
78
+ },
79
+ {
80
+ name: 'Vertical',
81
+ component: TabListVerticalTest,
82
+ },
83
+ {
84
+ name: 'Appearance',
85
+ component: TabListAppearanceTest,
86
+ },
87
+ {
88
+ name: 'Disabled',
89
+ component: TabListDisabledTest,
90
+ },
91
+ {
92
+ name: 'Icon',
93
+ component: TabListIconTest,
17
94
  },
18
95
  ];
19
96
  var TabListTest = function () {
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":";;;;AAAA,wDAA0B;AAE1B,0DAA8D;AAG9D,gCAA+B;AAE/B,IAAM,eAAe,GAA4B;IAC/C,OAAO,CACL,8BAAC,iBAAO;QACN,8BAAC,aAAG,IAAC,MAAM,EAAC,OAAO,YAAY;QAC/B,8BAAC,aAAG,IAAC,MAAM,EAAC,OAAO,YAAY,CACvB,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,QAAQ,GAAkB;IAC9B;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAe;KAC3B;CACF,CAAC;AAEK,IAAM,WAAW,GAA4B;IAClD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GAAG,gDAAgD,CAAC;IAErE,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACnG,CAAC,CAAC;AAZW,QAAA,WAAW,eAYtB"}
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.11",
3
+ "version": "0.151.13",
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>",
@@ -67,7 +67,7 @@
67
67
  "@fluentui-react-native/spinner": "^0.7.5",
68
68
  "@fluentui-react-native/stack": ">=0.8.6 <1.0.0",
69
69
  "@fluentui-react-native/switch": "^0.10.4",
70
- "@fluentui-react-native/tablist": "0.2.1",
70
+ "@fluentui-react-native/tablist": "0.3.1",
71
71
  "@fluentui-react-native/text": ">=0.21.4 <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",
package/src/TestComponents/TabList/TabListTest.tsx CHANGED
@@ -1,23 +1,129 @@
1
1
  import React from 'react';
2
+ import { View, StyleSheet } from 'react-native';
2
3
 
4
+ import { Divider } from '@fluentui-react-native/divider';
3
5
  import { TabList, Tab } from '@fluentui-react-native/tablist';
6
+ import { TextV1 as Text } from '@fluentui-react-native/text';
4
7
 
5
8
  import type { PlatformStatus, TestSection } from '../Test';
6
9
  import { Test } from '../Test';
7
10
 
8
- const TabListMainTest: React.FunctionComponent = () => {
11
+ const Header = Text.customize({ variant: 'subheaderStandard' });
12
+ const Line = Divider.customize({ paddingVertical: 4 });
13
+ const PaddedTabList = TabList.customize({
14
+ paddingVertical: 4,
15
+ });
16
+
17
+ const styles = StyleSheet.create({
18
+ container: {
19
+ paddingVertical: 8,
20
+ },
21
+ });
22
+
23
+ const TabListSizeTest: React.FunctionComponent = () => {
9
24
  return (
10
- <TabList>
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>
31
+ <Line />
32
+ <Header>Medium (default)</Header>
33
+ <PaddedTabList size="medium">
34
+ <Tab tabKey="hello">Tab 1</Tab>
35
+ <Tab tabKey="world">Tab 2</Tab>
36
+ </PaddedTabList>
37
+ <Line />
38
+ <Header>Large</Header>
39
+ <PaddedTabList size="large">
40
+ <Tab tabKey="hello">Tab 1</Tab>
41
+ <Tab tabKey="world">Tab 2</Tab>
42
+ </PaddedTabList>
43
+ </View>
44
+ );
45
+ };
46
+
47
+ const TabListVerticalTest: React.FunctionComponent = () => {
48
+ return (
49
+ <TabList vertical>
11
50
  <Tab tabKey="hello">Tab 1</Tab>
12
51
  <Tab tabKey="world">Tab 2</Tab>
13
52
  </TabList>
14
53
  );
15
54
  };
16
55
 
56
+ const TabListAppearanceTest: React.FunctionComponent = () => {
57
+ 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>
63
+ </PaddedTabList>
64
+ <Header>Subtle Appearance</Header>
65
+ <PaddedTabList appearance="subtle">
66
+ <Tab tabKey="hello">Tab 1</Tab>
67
+ <Tab tabKey="world">Tab 2</Tab>
68
+ </PaddedTabList>
69
+ </View>
70
+ );
71
+ };
72
+
73
+ const TabListDisabledTest: React.FunctionComponent = () => {
74
+ return (
75
+ <View>
76
+ <PaddedTabList>
77
+ <Tab disabled tabKey="hello">
78
+ Tab 1
79
+ </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>
86
+ </View>
87
+ );
88
+ };
89
+
90
+ const TabListIconTest: React.FunctionComponent = () => {
91
+ const iconProp = {
92
+ fontSource: {
93
+ fontFamily: 'Arial',
94
+ codepoint: 0x2663,
95
+ },
96
+ };
97
+ return (
98
+ <TabList>
99
+ <Tab icon={iconProp} tabKey="withIcon">
100
+ Tab Item
101
+ </Tab>
102
+ <Tab icon={iconProp} tabKey="iconOnly" />
103
+ </TabList>
104
+ );
105
+ };
106
+
17
107
  const sections: TestSection[] = [
18
108
  {
19
- name: 'Main Test',
20
- component: TabListMainTest,
109
+ name: 'Size',
110
+ component: TabListSizeTest,
111
+ },
112
+ {
113
+ name: 'Vertical',
114
+ component: TabListVerticalTest,
115
+ },
116
+ {
117
+ name: 'Appearance',
118
+ component: TabListAppearanceTest,
119
+ },
120
+ {
121
+ name: 'Disabled',
122
+ component: TabListDisabledTest,
123
+ },
124
+ {
125
+ name: 'Icon',
126
+ component: TabListIconTest,
21
127
  },
22
128
  ];
23
129