@workday/canvas-kit-docs 8.0.0-alpha.232-next.3 → 8.0.0-alpha.234-next.5
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.
|
@@ -186,7 +186,76 @@ const Example = styled('div')(
|
|
|
186
186
|
|
|
187
187
|
### Responsive Styles
|
|
188
188
|
|
|
189
|
-
|
|
189
|
+
We've added a set of
|
|
190
|
+
[responsive utilities](/getting-started/for-developers/resources/responsive-styling/) to facilitate
|
|
191
|
+
container-based and viewport-based responsive styling:
|
|
192
|
+
|
|
193
|
+
- **ResponsiveContextProvider**: This is a React context provider that will take a `width` and an
|
|
194
|
+
optional `theme` prop and allow components to subscribe to context changes via the
|
|
195
|
+
`useResponsiveContext` hook.
|
|
196
|
+
|
|
197
|
+
- **useResponsiveContext**: This hook subscribes to the `ResponsiveContextProvider` and provides
|
|
198
|
+
helpful utilities to determine whether the current width is within a particular
|
|
199
|
+
[theme breakpoint](/getting-started/for-developers/resources/responsive-styling/#canvas-kit-breakpoint-sizes).
|
|
200
|
+
Developers can use these utilities when creating container-based responsive styles.
|
|
201
|
+
|
|
202
|
+
- **useResponsiveContainerStyles**: A hook that allows developers to create container-based
|
|
203
|
+
responsive styles using style objects.
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import {Flex, Box} from '@workday/canvas-kit-react/layout';
|
|
207
|
+
import {
|
|
208
|
+
useResizeObserver,
|
|
209
|
+
ResponsiveContextProvider,
|
|
210
|
+
useResponsiveContainerStyles,
|
|
211
|
+
} from '@workday/canvas-kit-react/common';
|
|
212
|
+
const ref = React.useRef(null);
|
|
213
|
+
const [width, setWidth] = React.useState(0);
|
|
214
|
+
useResizeObserver({
|
|
215
|
+
ref: ref,
|
|
216
|
+
onResize: data => {
|
|
217
|
+
setWidth(data.width || 0);
|
|
218
|
+
},
|
|
219
|
+
});
|
|
220
|
+
const containerResponsiveStyles = useResponsiveContainerStyles(
|
|
221
|
+
{
|
|
222
|
+
flex: {
|
|
223
|
+
flexDirection: 'column',
|
|
224
|
+
padding: 'm',
|
|
225
|
+
depth: 1,
|
|
226
|
+
borderRadius: 'l',
|
|
227
|
+
zero: {
|
|
228
|
+
backgroundColor: 'Red',
|
|
229
|
+
},
|
|
230
|
+
s: {
|
|
231
|
+
backgroundColor: 'Orange',
|
|
232
|
+
},
|
|
233
|
+
m: {
|
|
234
|
+
backgroundColor: 'Yellow',
|
|
235
|
+
},
|
|
236
|
+
l: {
|
|
237
|
+
backgroundColor: 'Green',
|
|
238
|
+
},
|
|
239
|
+
xl: {
|
|
240
|
+
backgroundColor: 'Blue',
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
box: {
|
|
244
|
+
padding: 's',
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
width
|
|
248
|
+
);
|
|
249
|
+
return (
|
|
250
|
+
<ResponsiveContextProvider width={width}>
|
|
251
|
+
<Box ref={ref}>
|
|
252
|
+
<Flex {...containerResponsiveStyles.flex}>
|
|
253
|
+
<Box {...containerResponsiveStyles.box}>Hello World</Box>
|
|
254
|
+
</Flex>
|
|
255
|
+
</Box>
|
|
256
|
+
</ResponsiveContextProvider>
|
|
257
|
+
);
|
|
258
|
+
```
|
|
190
259
|
|
|
191
260
|
---
|
|
192
261
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
4
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
4
5
|
|
|
5
6
|
export default () => {
|
|
6
7
|
const [selected, setSelected] = React.useState('');
|
|
@@ -18,9 +19,9 @@ export default () => {
|
|
|
18
19
|
</Menu.List>
|
|
19
20
|
</Menu.Card>
|
|
20
21
|
</Menu.Popper>
|
|
21
|
-
<
|
|
22
|
+
<BodyText size="small" marginTop="s">
|
|
22
23
|
Selected: <span data-testid="output">{selected}</span>
|
|
23
|
-
</
|
|
24
|
+
</BodyText>
|
|
24
25
|
</Menu>
|
|
25
26
|
);
|
|
26
27
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
4
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
4
5
|
|
|
5
6
|
export default () => {
|
|
6
7
|
const [selected, setSelected] = React.useState('');
|
|
7
8
|
return (
|
|
8
9
|
<Menu onSelect={data => setSelected(data.id)}>
|
|
9
|
-
<Menu.TargetContext>Open Menu</Menu.TargetContext>
|
|
10
|
+
<Menu.TargetContext>Right-click to Open Menu</Menu.TargetContext>
|
|
10
11
|
<Menu.Popper>
|
|
11
12
|
<Menu.Card>
|
|
12
13
|
<Menu.List>
|
|
@@ -17,9 +18,9 @@ export default () => {
|
|
|
17
18
|
</Menu.List>
|
|
18
19
|
</Menu.Card>
|
|
19
20
|
</Menu.Popper>
|
|
20
|
-
<
|
|
21
|
+
<BodyText size="small" marginTop="s">
|
|
21
22
|
Selected: <span data-testid="output">{selected}</span>
|
|
22
|
-
</
|
|
23
|
+
</BodyText>
|
|
23
24
|
</Menu>
|
|
24
25
|
);
|
|
25
26
|
};
|
|
@@ -6,36 +6,44 @@ import {
|
|
|
6
6
|
taskContactIcon,
|
|
7
7
|
} from '@workday/canvas-system-icons-web';
|
|
8
8
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
9
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
9
10
|
|
|
10
11
|
export default () => {
|
|
12
|
+
const [selected, setSelected] = React.useState('');
|
|
11
13
|
return (
|
|
12
|
-
<Menu>
|
|
13
|
-
<Menu.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<Menu.Item
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<Menu.Item
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<Menu.Item
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<Menu.Item
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<Menu.
|
|
35
|
-
<Menu.Item
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
14
|
+
<Menu onSelect={data => setSelected(data.id)}>
|
|
15
|
+
<Menu.Target>Open Menu</Menu.Target>
|
|
16
|
+
<Menu.Popper>
|
|
17
|
+
<Menu.Card>
|
|
18
|
+
<Menu.List>
|
|
19
|
+
<Menu.Item>
|
|
20
|
+
<Menu.Item.Icon icon={uploadCloudIcon} />
|
|
21
|
+
<Menu.Item.Text>First Item</Menu.Item.Text>
|
|
22
|
+
</Menu.Item>
|
|
23
|
+
<Menu.Item>
|
|
24
|
+
<Menu.Item.Icon icon={setupIcon} />
|
|
25
|
+
<Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>
|
|
26
|
+
</Menu.Item>
|
|
27
|
+
<Menu.Item aria-disabled>
|
|
28
|
+
<Menu.Item.Icon icon={uploadCloudIcon} />
|
|
29
|
+
<Menu.Item.Text>Third Item</Menu.Item.Text>
|
|
30
|
+
<Menu.Item.Icon icon={taskContactIcon} />
|
|
31
|
+
</Menu.Item>
|
|
32
|
+
<Menu.Item>
|
|
33
|
+
<Menu.Item.Icon icon={userIcon} />
|
|
34
|
+
<Menu.Item.Text></Menu.Item.Text>
|
|
35
|
+
</Menu.Item>
|
|
36
|
+
<Menu.Divider />
|
|
37
|
+
<Menu.Item>
|
|
38
|
+
<Menu.Item.Icon icon={taskContactIcon} />
|
|
39
|
+
<Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>
|
|
40
|
+
</Menu.Item>
|
|
41
|
+
</Menu.List>
|
|
42
|
+
</Menu.Card>
|
|
43
|
+
</Menu.Popper>
|
|
44
|
+
<BodyText size="small" marginTop="s">
|
|
45
|
+
Selected: <span data-testid="output">{selected}</span>
|
|
46
|
+
</BodyText>
|
|
39
47
|
</Menu>
|
|
40
48
|
);
|
|
41
49
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.234-next.5+8c3c0042",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@storybook/csf": "0.0.1",
|
|
45
|
-
"@workday/canvas-kit-react": "^8.0.0-alpha.
|
|
45
|
+
"@workday/canvas-kit-react": "^8.0.0-alpha.234-next.5+8c3c0042"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"fs-extra": "^10.0.0",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"mkdirp": "^1.0.3",
|
|
51
51
|
"typescript": "4.1"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "8c3c004259a5d02e637ef3bc66a4b0d2e07eaad5"
|
|
54
54
|
}
|