@workday/canvas-kit-docs 7.3.10 → 7.3.12
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.
|
@@ -2763,6 +2763,36 @@ module.exports = {specifications: [
|
|
|
2763
2763
|
]
|
|
2764
2764
|
}
|
|
2765
2765
|
]
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
"type": "describe",
|
|
2769
|
+
"name": "given the [Testing/React/Popups/Popup, TooltipReturnFocus] example is rendered",
|
|
2770
|
+
"children": [
|
|
2771
|
+
{
|
|
2772
|
+
"type": "describe",
|
|
2773
|
+
"name": "when the icon button is clicked",
|
|
2774
|
+
"children": [
|
|
2775
|
+
{
|
|
2776
|
+
"type": "it",
|
|
2777
|
+
"name": "should show the popup"
|
|
2778
|
+
},
|
|
2779
|
+
{
|
|
2780
|
+
"type": "describe",
|
|
2781
|
+
"name": "when the \"Close\" icon button is clicked",
|
|
2782
|
+
"children": [
|
|
2783
|
+
{
|
|
2784
|
+
"type": "it",
|
|
2785
|
+
"name": "should focus on the icon button"
|
|
2786
|
+
},
|
|
2787
|
+
{
|
|
2788
|
+
"type": "it",
|
|
2789
|
+
"name": "should show the tooltip"
|
|
2790
|
+
}
|
|
2791
|
+
]
|
|
2792
|
+
}
|
|
2793
|
+
]
|
|
2794
|
+
}
|
|
2795
|
+
]
|
|
2766
2796
|
}
|
|
2767
2797
|
]
|
|
2768
2798
|
}
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -2763,6 +2763,36 @@ module.exports = {specifications: [
|
|
|
2763
2763
|
]
|
|
2764
2764
|
}
|
|
2765
2765
|
]
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
"type": "describe",
|
|
2769
|
+
"name": "given the [Testing/React/Popups/Popup, TooltipReturnFocus] example is rendered",
|
|
2770
|
+
"children": [
|
|
2771
|
+
{
|
|
2772
|
+
"type": "describe",
|
|
2773
|
+
"name": "when the icon button is clicked",
|
|
2774
|
+
"children": [
|
|
2775
|
+
{
|
|
2776
|
+
"type": "it",
|
|
2777
|
+
"name": "should show the popup"
|
|
2778
|
+
},
|
|
2779
|
+
{
|
|
2780
|
+
"type": "describe",
|
|
2781
|
+
"name": "when the \"Close\" icon button is clicked",
|
|
2782
|
+
"children": [
|
|
2783
|
+
{
|
|
2784
|
+
"type": "it",
|
|
2785
|
+
"name": "should focus on the icon button"
|
|
2786
|
+
},
|
|
2787
|
+
{
|
|
2788
|
+
"type": "it",
|
|
2789
|
+
"name": "should show the tooltip"
|
|
2790
|
+
}
|
|
2791
|
+
]
|
|
2792
|
+
}
|
|
2793
|
+
]
|
|
2794
|
+
}
|
|
2795
|
+
]
|
|
2766
2796
|
}
|
|
2767
2797
|
]
|
|
2768
2798
|
}
|
|
@@ -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.12",
|
|
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.12"
|
|
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": "b9c928b833e0e0e56493c9329dca77191645ab3d"
|
|
54
54
|
}
|