@workday/canvas-kit-docs 12.1.6 → 12.1.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/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx +1 -1
- package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx +13 -4
- package/dist/mdx/react/modal/examples/IframeTest.tsx +4 -1
- package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx +102 -53
- package/package.json +6 -6
|
@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
|
|
|
7
7
|
|
|
8
8
|
export default () => {
|
|
9
9
|
return (
|
|
10
|
-
<FormField id="select-alert" error="
|
|
10
|
+
<FormField id="select-alert" error="alert">
|
|
11
11
|
<FormField.Label>Label</FormField.Label>
|
|
12
12
|
<FormField.Field>
|
|
13
13
|
{controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
|
|
@@ -9,7 +9,7 @@ export interface Breadcrumb {
|
|
|
9
9
|
text: string;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export default () => {
|
|
12
|
+
export default ({width = '100%'}) => {
|
|
13
13
|
const [items] = React.useState<Breadcrumb[]>([
|
|
14
14
|
{id: '1', text: 'Home', link: '/'},
|
|
15
15
|
{id: '2', text: 'Second Link', link: '#'},
|
|
@@ -21,11 +21,15 @@ export default () => {
|
|
|
21
21
|
]);
|
|
22
22
|
|
|
23
23
|
const model = useBreadcrumbsModel({items});
|
|
24
|
-
const [containerWidth, setContainerWidth] = React.useState(
|
|
25
|
-
|
|
24
|
+
const [containerWidth, setContainerWidth] = React.useState(width);
|
|
26
25
|
return (
|
|
27
26
|
<div>
|
|
28
27
|
<Box width={containerWidth} marginBottom="xl">
|
|
28
|
+
<div style={{display: 'flex', flexDirection: 'column'}}>
|
|
29
|
+
<span>Current Container Width: {containerWidth}</span>
|
|
30
|
+
<span>Overflow visibility: {model.menu.state.visibility}</span>
|
|
31
|
+
</div>
|
|
32
|
+
<hr />
|
|
29
33
|
<Breadcrumbs model={model} aria-label="Breadcrumbs">
|
|
30
34
|
<Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
|
|
31
35
|
{item =>
|
|
@@ -51,7 +55,12 @@ export default () => {
|
|
|
51
55
|
</Box>
|
|
52
56
|
<hr />
|
|
53
57
|
<h4>Change Breadcrumbs container size</h4>
|
|
54
|
-
<SegmentedControl
|
|
58
|
+
<SegmentedControl
|
|
59
|
+
initialValue={width}
|
|
60
|
+
onSelect={data => {
|
|
61
|
+
setContainerWidth(data.id);
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
55
64
|
<SegmentedControl.List aria-label="container width control" marginBottom="m">
|
|
56
65
|
<SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
|
|
57
66
|
<SegmentedControl.Item data-id="480px">480px</SegmentedControl.Item>
|
|
@@ -17,7 +17,10 @@ export default () => {
|
|
|
17
17
|
<Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
|
|
18
18
|
<Modal.CloseButton>Cancel</Modal.CloseButton>
|
|
19
19
|
</Flex>
|
|
20
|
-
<iframe
|
|
20
|
+
<iframe
|
|
21
|
+
role="iframe"
|
|
22
|
+
srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button data-testid='button2'>iframe button 2</button></body></html>"
|
|
23
|
+
/>
|
|
21
24
|
</Modal.Body>
|
|
22
25
|
</Modal.Card>
|
|
23
26
|
</Modal.Overlay>
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {PopperController} from '../../../../../utils/storybook';
|
|
3
2
|
import {DeleteButton} from '@workday/canvas-kit-react/button';
|
|
4
3
|
import {
|
|
5
4
|
Popup,
|
|
@@ -8,14 +7,12 @@ import {
|
|
|
8
7
|
useCloseOnOutsideClick,
|
|
9
8
|
useInitialFocus,
|
|
10
9
|
useReturnFocus,
|
|
11
|
-
Placement,
|
|
12
10
|
} from '@workday/canvas-kit-react/popup';
|
|
13
|
-
import {
|
|
11
|
+
import {Flex, Grid} from '@workday/canvas-kit-react/layout';
|
|
12
|
+
import {createStyles, calc} from '@workday/canvas-kit-styling';
|
|
13
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
14
14
|
|
|
15
15
|
export default () => {
|
|
16
|
-
const [placement, setPlacement] = React.useState<Placement>('top');
|
|
17
|
-
const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
|
|
18
|
-
const [marginRightBtn, setMarginRightBtn] = React.useState(0);
|
|
19
16
|
const model = usePopupModel();
|
|
20
17
|
|
|
21
18
|
useCloseOnOutsideClick(model);
|
|
@@ -27,56 +24,108 @@ export default () => {
|
|
|
27
24
|
console.log('Delete Item');
|
|
28
25
|
};
|
|
29
26
|
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
setMarginLeftBtn(marginLeftBtn);
|
|
36
|
-
};
|
|
27
|
+
const grid = createStyles({
|
|
28
|
+
gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
|
|
29
|
+
height: calc.subtract('100vh', system.space.x16),
|
|
30
|
+
width: calc.subtract('100vw', system.space.x20),
|
|
31
|
+
});
|
|
37
32
|
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
const topButton = createStyles({
|
|
34
|
+
gridArea: 'topButton',
|
|
35
|
+
justifySelf: 'center',
|
|
36
|
+
});
|
|
37
|
+
const rightButton = createStyles({
|
|
38
|
+
gridArea: 'rightButton',
|
|
39
|
+
justifySelf: 'right',
|
|
40
|
+
alignSelf: 'center',
|
|
41
|
+
});
|
|
42
|
+
const bottomButton = createStyles({
|
|
43
|
+
gridArea: 'bottomButton',
|
|
44
|
+
justifySelf: 'center',
|
|
45
|
+
alignSelf: 'end',
|
|
46
|
+
});
|
|
47
|
+
const leftButton = createStyles({
|
|
48
|
+
gridArea: 'leftButton',
|
|
49
|
+
justifySelf: 'left',
|
|
50
|
+
alignSelf: 'center',
|
|
51
|
+
});
|
|
41
52
|
|
|
42
53
|
return (
|
|
43
|
-
<div
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
54
|
+
<div data-testid="scroll-area-fallback-placement">
|
|
55
|
+
<Grid cs={grid}>
|
|
56
|
+
<Popup>
|
|
57
|
+
<Popup.Target cs={topButton} as={DeleteButton}>
|
|
58
|
+
Placement Top
|
|
59
|
+
</Popup.Target>
|
|
60
|
+
<Popup.Popper placement="top">
|
|
61
|
+
<Popup.Card width={400}>
|
|
62
|
+
<Popup.CloseIcon aria-label="Close" />
|
|
63
|
+
<Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
|
|
64
|
+
<Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
|
|
65
|
+
<Flex gap="s" padding="xxs" marginTop="xxs">
|
|
66
|
+
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
|
|
67
|
+
Delete
|
|
68
|
+
</Popup.CloseButton>
|
|
69
|
+
<Popup.CloseButton>Cancel</Popup.CloseButton>
|
|
70
|
+
</Flex>
|
|
71
|
+
</Popup.Card>
|
|
72
|
+
</Popup.Popper>
|
|
73
|
+
</Popup>
|
|
74
|
+
<Popup>
|
|
75
|
+
<Popup.Target cs={leftButton} as={DeleteButton}>
|
|
76
|
+
Placement Left
|
|
77
|
+
</Popup.Target>
|
|
78
|
+
<Popup.Popper placement="left">
|
|
79
|
+
<Popup.Card width={400}>
|
|
80
|
+
<Popup.CloseIcon aria-label="Close" />
|
|
81
|
+
<Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
|
|
82
|
+
<Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
|
|
83
|
+
<Flex gap="s" padding="xxs" marginTop="xxs">
|
|
84
|
+
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
|
|
85
|
+
Delete
|
|
86
|
+
</Popup.CloseButton>
|
|
87
|
+
<Popup.CloseButton>Cancel</Popup.CloseButton>
|
|
88
|
+
</Flex>
|
|
89
|
+
</Popup.Card>
|
|
90
|
+
</Popup.Popper>
|
|
91
|
+
</Popup>
|
|
92
|
+
<Popup>
|
|
93
|
+
<Popup.Target cs={rightButton} as={DeleteButton}>
|
|
94
|
+
Placement Right
|
|
95
|
+
</Popup.Target>
|
|
96
|
+
<Popup.Popper placement="right">
|
|
97
|
+
<Popup.Card width={400}>
|
|
98
|
+
<Popup.CloseIcon aria-label="Close" />
|
|
99
|
+
<Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
|
|
100
|
+
<Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
|
|
101
|
+
<Flex gap="s" padding="xxs" marginTop="xxs">
|
|
102
|
+
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
|
|
103
|
+
Delete
|
|
104
|
+
</Popup.CloseButton>
|
|
105
|
+
<Popup.CloseButton>Cancel</Popup.CloseButton>
|
|
106
|
+
</Flex>
|
|
107
|
+
</Popup.Card>
|
|
108
|
+
</Popup.Popper>
|
|
109
|
+
</Popup>
|
|
110
|
+
<Popup>
|
|
111
|
+
<Popup.Target cs={bottomButton} as={DeleteButton}>
|
|
112
|
+
Placement Bottom
|
|
113
|
+
</Popup.Target>
|
|
114
|
+
<Popup.Popper placement="bottom">
|
|
115
|
+
<Popup.Card width={400}>
|
|
116
|
+
<Popup.CloseIcon aria-label="Close" />
|
|
117
|
+
<Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
|
|
118
|
+
<Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
|
|
119
|
+
<Flex gap="s" padding="xxs" marginTop="xxs">
|
|
120
|
+
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
|
|
121
|
+
Delete
|
|
122
|
+
</Popup.CloseButton>
|
|
123
|
+
<Popup.CloseButton>Cancel</Popup.CloseButton>
|
|
124
|
+
</Flex>
|
|
125
|
+
</Popup.Card>
|
|
126
|
+
</Popup.Popper>
|
|
127
|
+
</Popup>
|
|
128
|
+
</Grid>
|
|
80
129
|
</div>
|
|
81
130
|
);
|
|
82
131
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.7",
|
|
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.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.1.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.1.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.1.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.1.7",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.1.7",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.1.7",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.1.7",
|
|
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": "46580ea04f2a1c7d86182c8577c6b579a7863647"
|
|
64
64
|
}
|