@workday/canvas-kit-docs 8.2.4 → 8.3.1
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.
|
@@ -422,7 +422,7 @@ we'll continue to support `@workday/canvas-kit-css` with bug fixes and significa
|
|
|
422
422
|
it most likely won't be receiving new components or additional features. This will allow us to
|
|
423
423
|
provide more focused support and to dedicate our efforts to making bigger and better improvements to
|
|
424
424
|
our most used components: Canvas Kit React. If you have questions or concerns, please
|
|
425
|
-
[let us know](https://github.com/Workday/canvas-kit/
|
|
425
|
+
[let us know](https://github.com/Workday/canvas-kit/discussions/new).
|
|
426
426
|
|
|
427
427
|
### Prop Interfaces
|
|
428
428
|
|
|
@@ -8,6 +8,7 @@ import Avatar from './examples/Avatar';
|
|
|
8
8
|
import Depth from './examples/Depth';
|
|
9
9
|
import RTL from './examples/RTL';
|
|
10
10
|
import LongTitle from './examples/LongTitle';
|
|
11
|
+
import HoistedModel from './examples/HoistedModel';
|
|
11
12
|
|
|
12
13
|
|
|
13
14
|
# Canvas Kit Expandable
|
|
@@ -24,35 +25,35 @@ yarn add @workday/canvas-kit-labs-react
|
|
|
24
25
|
|
|
25
26
|
### Start Icon
|
|
26
27
|
|
|
27
|
-
For a basic expandable container with a chevron icon before the title, place`Expandable.Icon`
|
|
28
|
-
|
|
29
|
-
`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon
|
|
30
|
-
|
|
28
|
+
For a basic expandable container with a chevron icon before the title, place`Expandable.Icon` before
|
|
29
|
+
`Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to
|
|
30
|
+
`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon when
|
|
31
|
+
collapsed and a down chevron icon when expanded.
|
|
31
32
|
|
|
32
33
|
<ExampleCodeBlock code={StartIcon} />
|
|
33
34
|
|
|
34
35
|
### End Icon
|
|
35
36
|
|
|
36
|
-
For an expandable container with a chevron icon after the title, place `Expandable.Title`
|
|
37
|
-
|
|
38
|
-
`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon
|
|
39
|
-
|
|
37
|
+
For an expandable container with a chevron icon after the title, place `Expandable.Title` before
|
|
38
|
+
`Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to
|
|
39
|
+
`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon when
|
|
40
|
+
collapsed and an up chevron icon when expanded.
|
|
40
41
|
|
|
41
42
|
<ExampleCodeBlock code={EndIcon} />
|
|
42
43
|
|
|
43
44
|
### With Avatar
|
|
44
45
|
|
|
45
46
|
To include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and
|
|
46
|
-
`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be
|
|
47
|
-
|
|
47
|
+
`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be passed
|
|
48
|
+
to `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after
|
|
48
49
|
`Expandable.Title`.
|
|
49
50
|
|
|
50
51
|
<ExampleCodeBlock code={Avatar} />
|
|
51
52
|
|
|
52
53
|
### Right to Left (RTL)
|
|
53
54
|
|
|
54
|
-
Expandable container has bidirectional support and should function as expected with RTL languages
|
|
55
|
-
|
|
55
|
+
Expandable container has bidirectional support and should function as expected with RTL languages as
|
|
56
|
+
long as the content direction is set in your Canvas theme.
|
|
56
57
|
|
|
57
58
|
<ExampleCodeBlock code={RTL} />
|
|
58
59
|
|
|
@@ -69,6 +70,15 @@ Long titles will wrap to the next line and increase the height of the container.
|
|
|
69
70
|
|
|
70
71
|
<ExampleCodeBlock code={LongTitle} />
|
|
71
72
|
|
|
73
|
+
You can also have direct access to the model if
|
|
74
|
+
|
|
75
|
+
### Hoisted Model
|
|
76
|
+
|
|
77
|
+
If you you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In
|
|
78
|
+
the example below, we're hoisting the models to expand and collapse all three containers at once.
|
|
79
|
+
|
|
80
|
+
<ExampleCodeBlock code={HoistedModel} />
|
|
81
|
+
|
|
72
82
|
## Components
|
|
73
83
|
|
|
74
84
|
### Expandable
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Expandable, useExpandableModel} from '@workday/canvas-kit-labs-react/expandable';
|
|
4
|
+
import {Flex, HStack, VStack} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {SecondaryButton} from '@workday/canvas-kit-react/button';
|
|
6
|
+
|
|
7
|
+
export default () => {
|
|
8
|
+
const modelOne = useExpandableModel();
|
|
9
|
+
const modelTwo = useExpandableModel();
|
|
10
|
+
const modelThree = useExpandableModel();
|
|
11
|
+
|
|
12
|
+
const handleExpandAll = () => {
|
|
13
|
+
modelOne.events.show();
|
|
14
|
+
modelTwo.events.show();
|
|
15
|
+
modelThree.events.show();
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const handleCollapseAll = () => {
|
|
19
|
+
modelOne.events.hide();
|
|
20
|
+
modelTwo.events.hide();
|
|
21
|
+
modelThree.events.hide();
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<VStack spacing="m">
|
|
26
|
+
<HStack spacing="s">
|
|
27
|
+
<SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>
|
|
28
|
+
<SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>
|
|
29
|
+
</HStack>
|
|
30
|
+
<Flex flexDirection="column">
|
|
31
|
+
<Expandable model={modelOne}>
|
|
32
|
+
<Expandable.Target headingLevel="h4">
|
|
33
|
+
<Expandable.Title>Usage Guidance</Expandable.Title>
|
|
34
|
+
<Expandable.Icon iconPosition="end" />
|
|
35
|
+
</Expandable.Target>
|
|
36
|
+
|
|
37
|
+
<Expandable.Content>
|
|
38
|
+
This component highlights the most important details of a section and reveals more when
|
|
39
|
+
a user taps or clicks on the header part of the container. Enabling users to hide and
|
|
40
|
+
show information ensures the design remains focused and relevant to their expectations.
|
|
41
|
+
Scanning through the most critical information first makes processing more efficient
|
|
42
|
+
without compromising the ability to access additional information.
|
|
43
|
+
</Expandable.Content>
|
|
44
|
+
</Expandable>
|
|
45
|
+
<Expandable model={modelTwo}>
|
|
46
|
+
<Expandable.Target headingLevel="h4">
|
|
47
|
+
<Expandable.Title>Accessibility Guidelines</Expandable.Title>
|
|
48
|
+
<Expandable.Icon iconPosition="end" />
|
|
49
|
+
</Expandable.Target>
|
|
50
|
+
|
|
51
|
+
<Expandable.Content>
|
|
52
|
+
<VStack as="ul" spacing="xxs" maxWidth="60ch" padding="zero" marginX="s" marginY="zero">
|
|
53
|
+
<li>
|
|
54
|
+
The state of a component being open or closed must be conveyed to assistive
|
|
55
|
+
technologies.
|
|
56
|
+
</li>
|
|
57
|
+
<li>A Button must be used as the control to toggle the display of any content.</li>
|
|
58
|
+
<li>
|
|
59
|
+
If there are multiple toggle Buttons on the same page, provide additional
|
|
60
|
+
information in their labels to make them uniquely distinguishable to a screen
|
|
61
|
+
reader.
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
Do not change the toggle Button label to convey state. An exception to this would be
|
|
65
|
+
a scenario where a visual hint text is decoupled from both the state and the label
|
|
66
|
+
for a control so the hint text is not announced by assistive technologies.
|
|
67
|
+
</li>
|
|
68
|
+
<li>
|
|
69
|
+
Avoid keyboard traps when adding components to the accordion panel. For example, the
|
|
70
|
+
user expands an accordion, but is unable to tab to the next focusable element.
|
|
71
|
+
</li>
|
|
72
|
+
<li>
|
|
73
|
+
Hidden content must be hidden correctly from keyboard, screen reader, and touch
|
|
74
|
+
interaction.
|
|
75
|
+
</li>
|
|
76
|
+
<li>
|
|
77
|
+
Changing the label of something to indicate its state will not always be accounted
|
|
78
|
+
for in live time for a screen reader user. For example, a play button should have a
|
|
79
|
+
non-changing, persistent label and the state (pressed or unpressed) is conveyed
|
|
80
|
+
visually as well as to assistive technology once the state is changed.
|
|
81
|
+
</li>
|
|
82
|
+
</VStack>
|
|
83
|
+
</Expandable.Content>
|
|
84
|
+
</Expandable>
|
|
85
|
+
<Expandable model={modelThree}>
|
|
86
|
+
<Expandable.Target headingLevel="h4">
|
|
87
|
+
<Expandable.Title>Content Guidelines</Expandable.Title>
|
|
88
|
+
<Expandable.Icon iconPosition="end" />
|
|
89
|
+
</Expandable.Target>
|
|
90
|
+
<Expandable.Content>
|
|
91
|
+
Titles should be short and concise, yet long enough to explain what the user would
|
|
92
|
+
expect to see when the content is expanded. If titles must be long, make sure it doesn't
|
|
93
|
+
wrap more than two lines.
|
|
94
|
+
</Expandable.Content>
|
|
95
|
+
</Expandable>
|
|
96
|
+
</Flex>
|
|
97
|
+
</VStack>
|
|
98
|
+
);
|
|
99
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.1",
|
|
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.
|
|
45
|
+
"@workday/canvas-kit-react": "^8.3.1"
|
|
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": "3f4b9c5a6126ca28372a01670df3ccc899584243"
|
|
54
54
|
}
|