@workday/canvas-kit-docs 16.1.10 → 16.1.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.
- package/dist/es6/lib/docs.js +16 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/react/button/button/Button.mdx +62 -91
- package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx +7 -2
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -169456,6 +169456,22 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
169456
169456
|
}
|
|
169457
169457
|
}
|
|
169458
169458
|
},
|
|
169459
|
+
{
|
|
169460
|
+
"name": "listBoxContainerPartSelector",
|
|
169461
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
169462
|
+
"description": "Selector for `listBoxContainerStencil.parts.listBoxContainer` for use in other stencils' `base` rules.",
|
|
169463
|
+
"declarations": [
|
|
169464
|
+
{
|
|
169465
|
+
"name": "listBoxContainerPartSelector",
|
|
169466
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
|
|
169467
|
+
}
|
|
169468
|
+
],
|
|
169469
|
+
"tags": {},
|
|
169470
|
+
"type": {
|
|
169471
|
+
"kind": "string",
|
|
169472
|
+
"value": "[data-part=\"list-box-container\"]"
|
|
169473
|
+
}
|
|
169474
|
+
},
|
|
169459
169475
|
{
|
|
169460
169476
|
"name": "listBoxContainerStencil",
|
|
169461
169477
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "16.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
23
|
-
"@workday/canvas-kit-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.1.12",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.1.12",
|
|
23
|
+
"@workday/canvas-kit-react": "16.1.12",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.1.12",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.1.12",
|
|
26
26
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "16.1.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react": "16.1.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.1.12",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.1.12",
|
|
24
|
+
"@workday/canvas-kit-react": "16.1.12",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.1.12",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.1.12",
|
|
27
27
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -113,25 +113,20 @@ tokens with the fallback being `brand.primary.**`.
|
|
|
113
113
|
|
|
114
114
|
## Accessibility
|
|
115
115
|
|
|
116
|
-
The primary accessibility goal is a visible, programmatically determinable name on a native control
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
control
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
[
|
|
126
|
-
**`SegmentedControl.Item`** components)—not a lone variant button.
|
|
127
|
-
|
|
128
|
-
See the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit
|
|
129
|
-
[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).
|
|
116
|
+
The primary accessibility goal is a visible, programmatically determinable name on a native control that performs an in-page action (submit, open, dismiss, and similar). This page covers **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
117
|
+
|
|
118
|
+
Use [Hyperlink](/components/hyperlink/) when the control navigates to another URL or in-page location.
|
|
119
|
+
|
|
120
|
+
For [Toolbar](/components/buttons/toolbar/) icon and dropdown controls, see that component’s documentation. For a control that opens a menu, dialog, or expandable, see [Menu accessibility](/components/popups/menu/#accessibility), [Dialog accessibility](/components/popups/dialog/#accessibility), and [Expandable accessibility](/components/containers/expandable/#accessibility).
|
|
121
|
+
|
|
122
|
+
When users choose one value from **two or more** mutually exclusive options, use
|
|
123
|
+
[Segmented Control](/components/buttons/segmented-control/)—not a lone variant button. Use [Radio](/preview/inputs/radio/) when the selection needs radio semantics or native form submission.
|
|
124
|
+
|
|
125
|
+
See the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit [Accessibility overview](/guides/accessibility/overview/).
|
|
130
126
|
|
|
131
127
|
### Minimum Accessible Structure
|
|
132
128
|
|
|
133
|
-
The following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case,
|
|
134
|
-
text plus a decorative icon, and an icon-only control with an accessible name.
|
|
129
|
+
The following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case, text plus a decorative icon, and an icon-only control with an accessible name.
|
|
135
130
|
|
|
136
131
|
```tsx
|
|
137
132
|
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
@@ -147,111 +142,87 @@ import {plusIcon, relatedActionsVerticalIcon} from '@workday/canvas-system-icons
|
|
|
147
142
|
</Tooltip>;
|
|
148
143
|
```
|
|
149
144
|
|
|
150
|
-
For icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type="label"` (which sets
|
|
151
|
-
**`aria-label`** from **`title`** so sighted users also see the label). If the spec explicitly says
|
|
152
|
-
not to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to
|
|
153
|
-
**`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
145
|
+
For icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type="label"` (which sets **`aria-label`** from **`title`** so sighted users also see the label). **`Tooltip`** with `type="label"` overwrites the wrapped control’s accessible name—use it on icon-only buttons only; visible button text already supplies the name. If the spec explicitly says not to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
154
146
|
|
|
155
147
|
### Built-in Behaviors
|
|
156
148
|
|
|
157
|
-
Canvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**,
|
|
158
|
-
**`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.
|
|
149
|
+
Canvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.
|
|
159
150
|
|
|
160
151
|
**ARIA and DOM** (_applied by button components_):
|
|
161
152
|
|
|
162
|
-
- **Variant buttons**: Render a native `<button type="button"
|
|
163
|
-
|
|
164
|
-
-
|
|
165
|
-
|
|
166
|
-
-
|
|
167
|
-
`role="presentation"` and `focusable="false"`, so icons beside visible text are not announced
|
|
168
|
-
separately.
|
|
169
|
-
- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab
|
|
170
|
-
order.
|
|
171
|
-
- **Focus**: Visible focus styling uses `:focus-visible` (and a `.focus` class twin for visual
|
|
172
|
-
testing).
|
|
153
|
+
- **Variant buttons**: Render a native `<button>` (via **`BaseButton`**) with default **`type="button"`**. A passed **`type`** prop overrides that default—use **`type="submit"`** only when the button submits its form.
|
|
154
|
+
- **Visible label**: Button text is rendered in **`BaseButton.Label`** (`<span>`) inside the `<button>` so its text contributes to the accessible name.
|
|
155
|
+
- **`icon`**: Renders **`BaseButton.Icon`** (`SystemIcon`). Canvas Kit icon SVG markup uses `role="presentation"` and `focusable="false"`, so icons beside visible text are not announced separately.
|
|
156
|
+
- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab order.
|
|
157
|
+
- **Focus**: Visible focus styling uses `:focus-visible`.
|
|
173
158
|
- **`ref`**: Forwards to the underlying `<button>`.
|
|
174
|
-
- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`,
|
|
175
|
-
|
|
176
|
-
**`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle
|
|
177
|
-
design.
|
|
178
|
-
- **Menus**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`.
|
|
179
|
-
**`Menu.Target`** (and related Menu APIs) apply those when a menu is attached.
|
|
159
|
+
- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`, `aria-expanded`, `id`, `onClick`) pass through to the `<button>` unless you change the element with **`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle design.
|
|
160
|
+
- **Popup triggers**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`. `Menu.Target`, `Expandable.Target`, and `Dialog.Target` own those per their docs.
|
|
180
161
|
|
|
181
162
|
**Keyboard** (_native `<button>` behavior_):
|
|
182
163
|
|
|
183
|
-
Variant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>
|
|
184
|
-
for focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate. Do not replace the
|
|
185
|
-
`<button>` with a non-focusable element or suppress activation keys.
|
|
164
|
+
Variant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> for focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate.
|
|
186
165
|
|
|
187
166
|
**Screen reader expectations** (_when built-in behaviors are used as intended_):
|
|
188
167
|
|
|
189
|
-
- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and
|
|
190
|
-
role (for example, "Save, button").
|
|
168
|
+
- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and role (for example, "Save, button").
|
|
191
169
|
- Icons rendered with **`icon`** next to visible text are not announced as separate images.
|
|
192
170
|
- Disabled buttons are announced as unavailable and are not in the tab order.
|
|
193
|
-
- When
|
|
194
|
-
|
|
171
|
+
- When a variant button has `aria-pressed` and a stable visible label, assistive technology announces the name, “toggle button,” and pressed or not pressed (for example, “Bold, toggle button, pressed”).
|
|
172
|
+
- When a variant button is a popup **`*.Target`**, assistive technology follows that component’s documented popup and expanded behavior.
|
|
195
173
|
|
|
196
174
|
### Accessibility Requirements
|
|
197
175
|
|
|
198
|
-
Required in application code for an accessible button. Rows marked _(conditional)_ apply only when the
|
|
199
|
-
situation matches—otherwise omit.
|
|
176
|
+
Required in application code for an accessible button. Rows marked _(conditional)_ apply only when the situation matches—otherwise omit.
|
|
200
177
|
|
|
201
|
-
**If no design spec is provided:** use
|
|
202
|
-
with non-empty visible text. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom
|
|
203
|
-
**`id`**, **`as`**, and a **`ref`** unless the spec requires them.
|
|
178
|
+
**If no design spec is provided:** use **`PrimaryButton`** with non-empty visible text and default **`type="button"`**. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom **`id`**, **`as`**, **`type="submit"`**, and a **`ref`** unless the spec requires them.
|
|
204
179
|
|
|
205
|
-
| Requirement
|
|
180
|
+
| Requirement | How to satisfy |
|
|
206
181
|
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
207
|
-
| Accessible name
|
|
208
|
-
| Icon-only name _(conditional)_ | **`Tooltip`** with `type="label"` and **`title`** (
|
|
209
|
-
| Variant choice | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions
|
|
210
|
-
| Decorative icon _(conditional)_ | **`icon`** with visible text—
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
182
|
+
| Accessible name | Non-empty visible text inside the variant button |
|
|
183
|
+
| Icon-only name _(conditional)_ | **`Tooltip`** with `type="label"` and **`title`** on icon-only buttons (see [PrimaryButton](#primarybutton)), or **`aria-label`** when the spec explicitly says not to use a tooltip |
|
|
184
|
+
| Variant choice | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions |
|
|
185
|
+
| Decorative icon _(conditional)_ | **`icon`** with visible text—meaning comes from button text |
|
|
186
|
+
| Form submit _(conditional)_ | **`type="submit"`** on the variant button inside a form that should submit when activated; omit **`type="submit"`** otherwise (default **`type="button"`**) |
|
|
187
|
+
| Mutually exclusive group _(conditional)_ | [Segmented Control](/components/buttons/segmented-control/) for two or more in-page mutually exclusive options—not a single variant button or lone on/off control; use [Radio](/preview/inputs/radio/) when the selection is a form value |
|
|
188
|
+
| Toggle pressed state _(conditional)_ | On/off controls: use **`aria-pressed`** only when the visible label stays stable while state changes (not Mute/Unmute-style labels); set **`aria-pressed`** in both states and include or ask the user for visual styling for pressed state—variant buttons do not provide default pressed visuals. Omit for one-shot actions (Save, Delete, Open). For a toolbar toggle, use **`ToolbarIconButton`**—see [Toolbar](/components/buttons/toolbar/) |
|
|
189
|
+
| Menu trigger _(conditional)_ | Compose **`Menu`** with **`Menu.Target as={PrimaryButton}`** (**`Menu.Target`** defaults to **`SecondaryButton`**). Context menus: **`Menu.ContextTarget`**. See [Menu accessibility](/components/popups/menu/#accessibility) and **Menu trigger composition** below |
|
|
190
|
+
| Related button groups _(conditional)_ | Semantic grouping (`<ul>` / `<li>` or `<fieldset>` / `<legend>`) when several buttons share one question or legend; each control still needs its own accessible name |
|
|
191
|
+
| Disabled _(conditional)_ | Native **`disabled`** on the variant button when the spec marks the action unavailable |
|
|
192
|
+
| Navigation _(conditional)_ | [Hyperlink](/components/hyperlink/) instead of a variant button when the action is navigation |
|
|
193
|
+
| Programmatic focus _(conditional)_ | `ref` on the variant button and `focus()` only when the product must move focus after an action—omit by default |
|
|
194
|
+
|
|
195
|
+
**Menu trigger composition** _(conditional)_:
|
|
196
|
+
|
|
197
|
+
**`Menu.Target`** renders the trigger—do not nest a variant button inside it. Use **`as`** for a different variant. Add **`Menu.Popper`**, **`Menu.Card`**, and **`Menu.List`** per [Menu accessibility](/components/popups/menu/#accessibility).
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
201
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
202
|
+
|
|
203
|
+
<Menu>
|
|
204
|
+
<Menu.Target as={PrimaryButton}>Open</Menu.Target>
|
|
205
|
+
{/* Menu.Popper, Menu.Card, Menu.List — see Menu accessibility */}
|
|
206
|
+
</Menu>;
|
|
207
|
+
```
|
|
218
208
|
|
|
219
209
|
**Summary for code generation:**
|
|
220
210
|
|
|
221
|
-
- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for
|
|
222
|
-
|
|
223
|
-
to use a tooltip)
|
|
224
|
-
- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`aria-pressed`** for toggle
|
|
225
|
-
specs; **`Menu`** for menus; **`Hyperlink`** for navigation; grouping markup; programmatic focus
|
|
226
|
-
via `ref`
|
|
211
|
+
- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for icon-only, **`Tooltip`** with `type="label"` preferred, or **`aria-label`** when the spec says not to use a tooltip)
|
|
212
|
+
- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`type="submit"`**; **`Menu`** composition with **`Menu.Target as={…}`**; **`ToolbarIconButton`** / **`aria-pressed`** per toggle row; **`Hyperlink`** for navigation; grouping markup; programmatic focus via `ref`
|
|
227
213
|
|
|
228
214
|
### Anti-Patterns
|
|
229
215
|
|
|
230
216
|
Do **not** generate code that does the following (see **Accessibility Requirements** above for what
|
|
231
217
|
to supply instead):
|
|
232
218
|
|
|
233
|
-
- Use a `<div
|
|
234
|
-
-
|
|
235
|
-
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
- Use **`Tooltip`** with `type="muted"` on icon-only buttons—muted tooltips do not set an accessible
|
|
241
|
-
name
|
|
242
|
-
- Use **`aria-label`** on icon-only buttons when the spec allows tooltips—prefer **`Tooltip`** with
|
|
243
|
-
`type="label"` unless the spec explicitly says not to use a tooltip
|
|
244
|
-
- Set `aria-haspopup` or `aria-expanded` on a variant button without **`Menu`**—use
|
|
245
|
-
**`Menu.Target`** so open state stays in sync with the menu model
|
|
246
|
-
- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open)—see **Toggle pressed state** in the
|
|
247
|
-
requirements table
|
|
248
|
-
- Use **`SegmentedControl`** for a single option or a lone on/off control—see **Mutually exclusive
|
|
249
|
-
group** in the requirements table
|
|
250
|
-
- Add `aria-hidden` or change the **`role`** on **`icon`** when visible button text already conveys
|
|
251
|
-
meaning—Canvas Kit icons are presentational.
|
|
252
|
-
- Use **`aria-disabled`** instead of **`disabled`**—variant buttons map unavailability to the
|
|
253
|
-
native **`disabled`** attribute
|
|
254
|
-
- Duplicate menu ARIA that **`Menu.Target`** already applies
|
|
219
|
+
- Use a `<div>`, `<span>`, `role="button"`, or other non-`<button>` with `onClick`, or suppress <kbd>Enter</kbd> / <kbd>Space</kbd> on a control that should act as a button—use **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** for native keyboard and assistive technology behavior
|
|
220
|
+
- Use a variant button when the action is URL navigation—use [Hyperlink](/components/hyperlink/)
|
|
221
|
+
- Leave icon-only buttons unnamed, rely on the icon alone, use **`Tooltip`** with `type="muted"`, or use **`aria-label`** when the spec allows **`Tooltip`** with `type="label"`—see **Icon-only name**
|
|
222
|
+
- Nest a variant button inside **`Menu.Target`**, or hand-set **`aria-haspopup`** or **`aria-expanded`** when **`Menu.Target`**, **`Expandable.Target`**, or **`Dialog.Target`** owns that state—use **`Menu.Target as={…}`** (and the matching popup docs) instead
|
|
223
|
+
- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open) or on buttons whose visible label changes with state (for example Mute/Unmute)—see **Toggle pressed state**
|
|
224
|
+
- Use **`SegmentedControl`** for a single option or a lone on/off control—see **Mutually exclusive group**
|
|
225
|
+
- Use **`aria-disabled`** instead of native **`disabled`** on variant buttons
|
|
255
226
|
|
|
256
227
|
## Component API
|
|
257
228
|
|
|
@@ -4,6 +4,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
|
4
4
|
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import {Heading} from '@workday/canvas-kit-react/text';
|
|
7
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
7
8
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
8
9
|
import {
|
|
9
10
|
caretDownIcon,
|
|
@@ -48,7 +49,9 @@ export default () => (
|
|
|
48
49
|
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
49
50
|
Primary
|
|
50
51
|
</PrimaryButton>
|
|
51
|
-
<
|
|
52
|
+
<Tooltip title="Related Actions">
|
|
53
|
+
<PrimaryButton icon={relatedActionsVerticalIcon} />
|
|
54
|
+
</Tooltip>
|
|
52
55
|
</Flex>
|
|
53
56
|
</CanvasProvider>
|
|
54
57
|
<Heading size="medium" as="h3">
|
|
@@ -63,7 +66,9 @@ export default () => (
|
|
|
63
66
|
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
64
67
|
Primary
|
|
65
68
|
</PrimaryButton>
|
|
66
|
-
<
|
|
69
|
+
<Tooltip title="Related Actions">
|
|
70
|
+
<PrimaryButton icon={relatedActionsVerticalIcon} />
|
|
71
|
+
</Tooltip>
|
|
67
72
|
</Flex>
|
|
68
73
|
</div>
|
|
69
74
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.1.
|
|
3
|
+
"version": "16.1.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",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.1.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.1.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.1.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.1.12",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.1.12",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.1.12",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.1.12",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
55
55
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "553ebb99330ad006372e205b2e7cddff1c60b56b"
|
|
67
67
|
}
|