@workday/canvas-kit-docs 12.1.0-943-next.0 → 12.1.0-945-next.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.
|
@@ -13,6 +13,7 @@ import Selection from './examples/Selection';
|
|
|
13
13
|
import MultiSelection from './examples/MultiSelection';
|
|
14
14
|
import BasicGrid from './examples/BasicGrid';
|
|
15
15
|
import WrappingGrid from './examples/WrappingGrid';
|
|
16
|
+
import OverflowVerticalList from './examples/OverflowVerticalList';
|
|
16
17
|
|
|
17
18
|
|
|
18
19
|
# Canvas Kit Collection API
|
|
@@ -167,6 +168,16 @@ cursor wraps around columns and rows when an edge of a column or row is encounte
|
|
|
167
168
|
|
|
168
169
|
<ExampleCodeBlock code={WrappingGrid} />
|
|
169
170
|
|
|
171
|
+
### Overflow Vertical List
|
|
172
|
+
|
|
173
|
+
A List can overflow vertically or horizontally to account for responsive resizing or an overflow of
|
|
174
|
+
items. Using multiple hooks from the Collection system like `useOverflowListModel` and ensuring that
|
|
175
|
+
`orientation`is set to`vertical`, you can achieve vertical overflow lists. In the example below,
|
|
176
|
+
when the window is resized vertically, items in the Sidebar will overflow into the "More Actions"
|
|
177
|
+
button.
|
|
178
|
+
|
|
179
|
+
<ExampleCodeBlock code={OverflowVerticalList} />
|
|
180
|
+
|
|
170
181
|
## Component API
|
|
171
182
|
|
|
172
183
|
### ListBox
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
|
|
3
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
4
|
+
import {Box} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import styled from '@emotion/styled';
|
|
6
|
+
import {StyledType} from '@workday/canvas-kit-react/common';
|
|
7
|
+
|
|
8
|
+
type MyActionItem = {
|
|
9
|
+
id: string;
|
|
10
|
+
text: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const StyledActionbarList = styled(ActionBar.List)<StyledType>({
|
|
14
|
+
'> *': {
|
|
15
|
+
flex: '0 0 auto',
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export default () => {
|
|
20
|
+
const [items] = React.useState<MyActionItem[]>([
|
|
21
|
+
{id: 'first', text: 'First Action'},
|
|
22
|
+
{id: 'second', text: 'Second Action'},
|
|
23
|
+
{id: 'third', text: 'Third Action'},
|
|
24
|
+
{id: 'fourth', text: 'Fourth Action'},
|
|
25
|
+
{id: 'fifth', text: 'Fifth Action'},
|
|
26
|
+
{id: 'sixth', text: 'Sixth Action'},
|
|
27
|
+
{id: 'seventh', text: 'Seventh Action'},
|
|
28
|
+
]);
|
|
29
|
+
|
|
30
|
+
const model = useActionBarModel({items, orientation: 'vertical', maximumVisible: 4});
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Box marginBottom="xl" height="50vh">
|
|
35
|
+
<ActionBar model={model}>
|
|
36
|
+
<StyledActionbarList
|
|
37
|
+
position="relative"
|
|
38
|
+
as="section"
|
|
39
|
+
aria-label="Overflow example actions"
|
|
40
|
+
flexDirection="column"
|
|
41
|
+
height="100%"
|
|
42
|
+
overflowButton={
|
|
43
|
+
<ActionBar.OverflowButton
|
|
44
|
+
cs={{overflow: 'visible', flex: 0}}
|
|
45
|
+
aria-label="More actions"
|
|
46
|
+
/>
|
|
47
|
+
}
|
|
48
|
+
>
|
|
49
|
+
{(item: MyActionItem, index) => (
|
|
50
|
+
<ActionBar.Item
|
|
51
|
+
as={index === 0 ? PrimaryButton : undefined}
|
|
52
|
+
onClick={() => console.log(item.id)}
|
|
53
|
+
>
|
|
54
|
+
{item.text}
|
|
55
|
+
</ActionBar.Item>
|
|
56
|
+
)}
|
|
57
|
+
</StyledActionbarList>
|
|
58
|
+
<ActionBar.Menu.Popper>
|
|
59
|
+
<ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
|
|
60
|
+
<ActionBar.Menu.List>
|
|
61
|
+
{(item: MyActionItem) => (
|
|
62
|
+
<ActionBar.Menu.Item onClick={() => console.log(item.id)}>
|
|
63
|
+
{item.text}
|
|
64
|
+
</ActionBar.Menu.Item>
|
|
65
|
+
)}
|
|
66
|
+
</ActionBar.Menu.List>
|
|
67
|
+
</ActionBar.Menu.Card>
|
|
68
|
+
</ActionBar.Menu.Popper>
|
|
69
|
+
</ActionBar>
|
|
70
|
+
</Box>
|
|
71
|
+
</>
|
|
72
|
+
);
|
|
73
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.1.0-
|
|
3
|
+
"version": "12.1.0-945-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.1.0-
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.1.0-
|
|
49
|
-
"@workday/canvas-kit-react": "^12.1.0-
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.1.0-
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.1.0-945-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.1.0-945-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.1.0-945-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.1.0-945-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.0.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "b0122ce4912dbd26971c9fdeaa71ef307bed60c3"
|
|
64
64
|
}
|