@workday/canvas-kit-react 5.2.3 → 5.2.7
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.
- package/package.json +5 -5
- package/tabs/README.md +5 -133
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.7",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@popperjs/core": "^2.5.4",
|
|
58
58
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
59
59
|
"@workday/canvas-depth-web": "^0.16.4",
|
|
60
|
-
"@workday/canvas-kit-labs-react": "^5.2.
|
|
61
|
-
"@workday/canvas-kit-popup-stack": "^5.2.
|
|
62
|
-
"@workday/canvas-kit-preview-react": "^5.2.
|
|
60
|
+
"@workday/canvas-kit-labs-react": "^5.2.7",
|
|
61
|
+
"@workday/canvas-kit-popup-stack": "^5.2.7",
|
|
62
|
+
"@workday/canvas-kit-preview-react": "^5.2.7",
|
|
63
63
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
64
64
|
"@workday/design-assets-types": "^0.2.4",
|
|
65
65
|
"chroma-js": "^2.1.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
76
76
|
"@workday/canvas-applet-icons-web": "^0.17.50"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "def0edbf49b84470fd7b57254dc09ef9dd23d99a"
|
|
79
79
|
}
|
package/tabs/README.md
CHANGED
|
@@ -1,135 +1,7 @@
|
|
|
1
|
-
# Canvas Kit
|
|
1
|
+
# Canvas Kit Tabs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
View the
|
|
4
|
+
[documentation for Tabs](https://workday.github.io/canvas-kit/?path=/docs/components-containers-tabs-react--basic)
|
|
5
|
+
on Storybook.
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
```sh
|
|
8
|
-
yarn add @workday/canvas-kit-react
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
import * as React from 'react';
|
|
15
|
-
import {Tabs} from '@workday/canvas-kit-react/tabs';
|
|
16
|
-
import {space} from '@workday/canvas-kit-react/tokens';
|
|
17
|
-
|
|
18
|
-
export default () => (
|
|
19
|
-
<Tabs>
|
|
20
|
-
<Tabs.List>
|
|
21
|
-
<Tabs.Item>First Tab</Tabs.Item>
|
|
22
|
-
<Tabs.Item>Second Tab</Tabs.Item>
|
|
23
|
-
</Tabs.List>
|
|
24
|
-
<div css={{marginTop: space.m}}>
|
|
25
|
-
<Tabs.Panel>Contents of First Tab</Tabs.Panel>
|
|
26
|
-
<Tabs.Panel>Contents of Second Tab</Tabs.Panel>
|
|
27
|
-
</div>
|
|
28
|
-
</Tabs>
|
|
29
|
-
);
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
---
|
|
33
|
-
|
|
34
|
-
## Table of Contents
|
|
35
|
-
|
|
36
|
-
- [Tabs](#tabs)
|
|
37
|
-
- [Tabs.List](#tabslist)
|
|
38
|
-
- [Tabs.Item](#tabsitem)
|
|
39
|
-
- [Tabs.Panel](#tabspanel)
|
|
40
|
-
|
|
41
|
-
---
|
|
42
|
-
|
|
43
|
-
## Tabs
|
|
44
|
-
|
|
45
|
-
### Static Properties
|
|
46
|
-
|
|
47
|
-
> None
|
|
48
|
-
|
|
49
|
-
## Component Props
|
|
50
|
-
|
|
51
|
-
### Required
|
|
52
|
-
|
|
53
|
-
#### `children: React.ReactElement<TabListProps> | React.ReactElement<TabPanelsProps>`
|
|
54
|
-
|
|
55
|
-
> Tabs cannot be empty
|
|
56
|
-
|
|
57
|
-
### Optional
|
|
58
|
-
|
|
59
|
-
#### `initialTab: string`
|
|
60
|
-
|
|
61
|
-
> The `name` of the tab that should be active first. If not provided, the first tab will be active.
|
|
62
|
-
|
|
63
|
-
#### `onTabChange: (name: string) => void`
|
|
64
|
-
|
|
65
|
-
> Callback when a tab changes. The `name` will be the `name` prop passed into the `Tabs.Item` and
|
|
66
|
-
> `Tabs.Panel` component. If a `name` isn't provided, the value will be a string of the index of the
|
|
67
|
-
> tab.
|
|
68
|
-
|
|
69
|
-
---
|
|
70
|
-
|
|
71
|
-
## Tabs.List
|
|
72
|
-
|
|
73
|
-
## Static Properties
|
|
74
|
-
|
|
75
|
-
> None
|
|
76
|
-
|
|
77
|
-
## Component Props
|
|
78
|
-
|
|
79
|
-
### Required
|
|
80
|
-
|
|
81
|
-
#### `children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[]`
|
|
82
|
-
|
|
83
|
-
> TabList cannot be empty
|
|
84
|
-
|
|
85
|
-
### Optional
|
|
86
|
-
|
|
87
|
-
> None
|
|
88
|
-
|
|
89
|
-
---
|
|
90
|
-
|
|
91
|
-
# Tabs.Item
|
|
92
|
-
|
|
93
|
-
## Static Properties
|
|
94
|
-
|
|
95
|
-
> None
|
|
96
|
-
|
|
97
|
-
## Component Props
|
|
98
|
-
|
|
99
|
-
### Required
|
|
100
|
-
|
|
101
|
-
#### `children: React.ReactNode`
|
|
102
|
-
|
|
103
|
-
> The label text of the Tab
|
|
104
|
-
|
|
105
|
-
### Optional
|
|
106
|
-
|
|
107
|
-
#### `name: string`
|
|
108
|
-
|
|
109
|
-
> The name of the tab. This name will be used in change events and for `initialTab`. Must match the
|
|
110
|
-
> `name` of the associated tab panel. If this property is not provided, it will default to a string
|
|
111
|
-
> representation of the the zero-based index of the Tab when it was initialized.
|
|
112
|
-
|
|
113
|
-
---
|
|
114
|
-
|
|
115
|
-
# Tabs.Panel
|
|
116
|
-
|
|
117
|
-
## Static Properties
|
|
118
|
-
|
|
119
|
-
> None
|
|
120
|
-
|
|
121
|
-
## Component Props
|
|
122
|
-
|
|
123
|
-
### Required
|
|
124
|
-
|
|
125
|
-
#### `children: React.ReactNode`
|
|
126
|
-
|
|
127
|
-
> The contents of the TabPanel
|
|
128
|
-
|
|
129
|
-
### Optional
|
|
130
|
-
|
|
131
|
-
#### `name: string`
|
|
132
|
-
|
|
133
|
-
> The name of the tab. This name will be used in change events and for `initialTab`. Must match the
|
|
134
|
-
> `name` of the associated tab panel. If this property is not provided, it will default to a string
|
|
135
|
-
> representation of the the zero-based index of the Tab when it was initialized.
|
|
7
|
+
[> Workday Design Reference](https://design.workday.com/components/navigation/tabs)
|