@workday/canvas-kit-docs 7.3.11 → 7.3.13
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.
|
@@ -1509,6 +1509,20 @@ module.exports = {specifications: [
|
|
|
1509
1509
|
}
|
|
1510
1510
|
]
|
|
1511
1511
|
},
|
|
1512
|
+
{
|
|
1513
|
+
"type": "describe",
|
|
1514
|
+
"name": "when the tab key is pressed",
|
|
1515
|
+
"children": [
|
|
1516
|
+
{
|
|
1517
|
+
"type": "it",
|
|
1518
|
+
"name": "should have aria-expanded set to false"
|
|
1519
|
+
},
|
|
1520
|
+
{
|
|
1521
|
+
"type": "it",
|
|
1522
|
+
"name": "should not show a menu"
|
|
1523
|
+
}
|
|
1524
|
+
]
|
|
1525
|
+
},
|
|
1512
1526
|
{
|
|
1513
1527
|
"type": "describe",
|
|
1514
1528
|
"name": "when the user types a printable character \"t\"",
|
|
@@ -2763,6 +2777,36 @@ module.exports = {specifications: [
|
|
|
2763
2777
|
]
|
|
2764
2778
|
}
|
|
2765
2779
|
]
|
|
2780
|
+
},
|
|
2781
|
+
{
|
|
2782
|
+
"type": "describe",
|
|
2783
|
+
"name": "given the [Testing/React/Popups/Popup, TooltipReturnFocus] example is rendered",
|
|
2784
|
+
"children": [
|
|
2785
|
+
{
|
|
2786
|
+
"type": "describe",
|
|
2787
|
+
"name": "when the icon button is clicked",
|
|
2788
|
+
"children": [
|
|
2789
|
+
{
|
|
2790
|
+
"type": "it",
|
|
2791
|
+
"name": "should show the popup"
|
|
2792
|
+
},
|
|
2793
|
+
{
|
|
2794
|
+
"type": "describe",
|
|
2795
|
+
"name": "when the \"Close\" icon button is clicked",
|
|
2796
|
+
"children": [
|
|
2797
|
+
{
|
|
2798
|
+
"type": "it",
|
|
2799
|
+
"name": "should focus on the icon button"
|
|
2800
|
+
},
|
|
2801
|
+
{
|
|
2802
|
+
"type": "it",
|
|
2803
|
+
"name": "should show the tooltip"
|
|
2804
|
+
}
|
|
2805
|
+
]
|
|
2806
|
+
}
|
|
2807
|
+
]
|
|
2808
|
+
}
|
|
2809
|
+
]
|
|
2766
2810
|
}
|
|
2767
2811
|
]
|
|
2768
2812
|
}
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -1509,6 +1509,20 @@ module.exports = {specifications: [
|
|
|
1509
1509
|
}
|
|
1510
1510
|
]
|
|
1511
1511
|
},
|
|
1512
|
+
{
|
|
1513
|
+
"type": "describe",
|
|
1514
|
+
"name": "when the tab key is pressed",
|
|
1515
|
+
"children": [
|
|
1516
|
+
{
|
|
1517
|
+
"type": "it",
|
|
1518
|
+
"name": "should have aria-expanded set to false"
|
|
1519
|
+
},
|
|
1520
|
+
{
|
|
1521
|
+
"type": "it",
|
|
1522
|
+
"name": "should not show a menu"
|
|
1523
|
+
}
|
|
1524
|
+
]
|
|
1525
|
+
},
|
|
1512
1526
|
{
|
|
1513
1527
|
"type": "describe",
|
|
1514
1528
|
"name": "when the user types a printable character \"t\"",
|
|
@@ -2763,6 +2777,36 @@ module.exports = {specifications: [
|
|
|
2763
2777
|
]
|
|
2764
2778
|
}
|
|
2765
2779
|
]
|
|
2780
|
+
},
|
|
2781
|
+
{
|
|
2782
|
+
"type": "describe",
|
|
2783
|
+
"name": "given the [Testing/React/Popups/Popup, TooltipReturnFocus] example is rendered",
|
|
2784
|
+
"children": [
|
|
2785
|
+
{
|
|
2786
|
+
"type": "describe",
|
|
2787
|
+
"name": "when the icon button is clicked",
|
|
2788
|
+
"children": [
|
|
2789
|
+
{
|
|
2790
|
+
"type": "it",
|
|
2791
|
+
"name": "should show the popup"
|
|
2792
|
+
},
|
|
2793
|
+
{
|
|
2794
|
+
"type": "describe",
|
|
2795
|
+
"name": "when the \"Close\" icon button is clicked",
|
|
2796
|
+
"children": [
|
|
2797
|
+
{
|
|
2798
|
+
"type": "it",
|
|
2799
|
+
"name": "should focus on the icon button"
|
|
2800
|
+
},
|
|
2801
|
+
{
|
|
2802
|
+
"type": "it",
|
|
2803
|
+
"name": "should show the tooltip"
|
|
2804
|
+
}
|
|
2805
|
+
]
|
|
2806
|
+
}
|
|
2807
|
+
]
|
|
2808
|
+
}
|
|
2809
|
+
]
|
|
2766
2810
|
}
|
|
2767
2811
|
]
|
|
2768
2812
|
}
|
|
@@ -80,10 +80,10 @@ Undocumented props are spread to the underlying `<button>` element.
|
|
|
80
80
|
|
|
81
81
|
### TertiaryButton
|
|
82
82
|
|
|
83
|
-
Tertiary Buttons have the lowest emphasis
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
More
|
|
83
|
+
Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
|
|
84
|
+
often be looking to do. Tertiary Buttons have lower prominence as its container is not visible until
|
|
85
|
+
it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”, “Read
|
|
86
|
+
More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
|
|
87
87
|
|
|
88
88
|
Tertiary Buttons have three sizes: `extraSmall`, `small`, `medium` and `large`. Icons are supported
|
|
89
89
|
for every size and can be positioned at the `start` or `end` with the `iconPosition` prop.
|
|
@@ -16,7 +16,8 @@ import UseTooltip from './examples/UseTooltip';
|
|
|
16
16
|
|
|
17
17
|
A Tooltip component that renders information/text when the user hovers over an element. A tooltip is
|
|
18
18
|
used to label or describe an element. By default, a tooltip will label an element. This is useful
|
|
19
|
-
for
|
|
19
|
+
for buttons with icons. A tooltip can also be used to describe additional information about an
|
|
20
|
+
element
|
|
20
21
|
|
|
21
22
|
[> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
|
|
22
23
|
|
|
@@ -30,7 +31,7 @@ yarn add @workday/canvas-kit-react
|
|
|
30
31
|
|
|
31
32
|
This component follows the
|
|
32
33
|
[W3 Tooltip specification](https://www.w3.org/TR/wai-aria-practices/#tooltip). Tooltips are used to
|
|
33
|
-
label
|
|
34
|
+
label buttons with icons and provide additional context to elements.
|
|
34
35
|
|
|
35
36
|
### When to use tooltips
|
|
36
37
|
|
|
@@ -55,10 +56,10 @@ tooltip being visible
|
|
|
55
56
|
|
|
56
57
|
### Basic Example
|
|
57
58
|
|
|
58
|
-
Here is a basic example of
|
|
59
|
-
button for both sighted users and
|
|
60
|
-
child elements for the accessibility tree and a visual tooltip during mouse hover
|
|
61
|
-
|
|
59
|
+
Here is a basic example of a `TertiaryButton` that renders an icon using a tooltip to label the
|
|
60
|
+
icon. This labels the button for both sighted users and screen readers. A tooltip provides an
|
|
61
|
+
`aria-label` to child elements for the accessibility tree and a visual tooltip during mouse hover
|
|
62
|
+
and focus events.
|
|
62
63
|
|
|
63
64
|
<ExampleCodeBlock code={Default} />
|
|
64
65
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "7.3.
|
|
3
|
+
"version": "7.3.13",
|
|
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": "^7.3.
|
|
45
|
+
"@workday/canvas-kit-react": "^7.3.13"
|
|
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": "d3eafc129b9c67c38c3eb46a7ecf23521e40e4c3"
|
|
54
54
|
}
|