@workday/canvas-kit-docs 14.0.0-alpha.1257-next.0 → 14.0.0-alpha.1259-next.0
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.
|
@@ -41,5 +41,5 @@ export const DownloadLLMFile = ({ rawFileLink, filename }) => {
|
|
|
41
41
|
console.error('Failed to download file:', error);
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
|
-
return (_jsx(Card, { className: "sb-unstyled", cs: { boxShadow: 'none', borderStyle: 'dashed' }, children: _jsxs(Card.Body, { cs: { display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center' }, children: [_jsxs("div", { ...flexBlock(), children: [_jsx(SystemIcon, { icon: fileIcon }), _jsx("code", { children: filename })] }), _jsxs("div", { ...flexBlock({ gap: system.space.x4 }), children: [_jsx(ExternalHyperlink, { href: rawFileLink, children: "
|
|
44
|
+
return (_jsx(Card, { className: "sb-unstyled", cs: { boxShadow: 'none', borderStyle: 'dashed' }, children: _jsxs(Card.Body, { cs: { display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center' }, children: [_jsxs("div", { ...flexBlock(), children: [_jsx(SystemIcon, { icon: fileIcon }), _jsx("code", { children: filename })] }), _jsxs("div", { ...flexBlock({ gap: system.space.x4 }), children: [_jsx(ExternalHyperlink, { href: rawFileLink, children: "View raw file" }), _jsx(SecondaryButton, { icon: downloadIcon, size: "small", onClick: handleDownload, children: "Download LLM File" })] })] }) }));
|
|
45
45
|
};
|
|
@@ -12,14 +12,16 @@ any questions.
|
|
|
12
12
|
v14.0 Introduces Workday's new brand direction which includes a new color palette and with it, some
|
|
13
13
|
styling updates to our components.
|
|
14
14
|
|
|
15
|
-
**Please consult our
|
|
15
|
+
**Please consult our
|
|
16
|
+
[v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) page for a
|
|
17
|
+
visual reference of what's changed.**
|
|
16
18
|
|
|
17
19
|
> **Note:** While v14 does not require an upgrade to our v3 tokens, we strongly advise to upgrade to
|
|
18
20
|
> the latest to ensure proper branding.
|
|
19
21
|
|
|
20
|
-
## Table of
|
|
22
|
+
## Table of Contents
|
|
21
23
|
|
|
22
|
-
- [LLM Assisted Migration](#llm)
|
|
24
|
+
- [LLM Assisted Migration](#llm-assisted-migration)
|
|
23
25
|
- [Codemod](#codemod)
|
|
24
26
|
- [Instructions](#instructions)
|
|
25
27
|
- [Tokens](#tokens)
|
|
@@ -34,10 +36,10 @@ styling updates to our components.
|
|
|
34
36
|
- [Card](#card-)
|
|
35
37
|
- [Count Badge](#count-badge)
|
|
36
38
|
- [Expandable](#expandable)
|
|
37
|
-
- [Hyperlink and
|
|
39
|
+
- [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
|
|
38
40
|
- [Loading Dots](#loading-dots)
|
|
39
41
|
- [Pill (Preview)](#pill-preview)
|
|
40
|
-
- [Search Form (Labs)](#
|
|
42
|
+
- [Search Form (Labs)](#search-form-labs-)
|
|
41
43
|
- [Status Indicator (Preview)](#status-indicator-preview-)
|
|
42
44
|
- [Icons](#icons)
|
|
43
45
|
- [Deprecations](#deprecations)
|
|
@@ -64,26 +66,24 @@ styling updates to our components.
|
|
|
64
66
|
|
|
65
67
|
## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
|
|
66
68
|
|
|
67
|
-
We
|
|
68
|
-
use with LLM-based code assistants
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
We've provided an **LLM migration mapping file** (`llm-canvas-kit-upgrade-guide-v14.txt`)
|
|
70
|
+
specifically designed for use with LLM-based code assistants such as
|
|
71
|
+
[Cursor](https://www.cursor.so/). It contains a compiled LLM consumption version of this v14 Upgrade
|
|
72
|
+
Guide. It is not intended for direct human reference or team documentation, but rather as structured
|
|
73
|
+
input for LLMs to automate and assist with your migration process.
|
|
71
74
|
|
|
72
|
-
> **Important:** LLMs can make mistakes. Please
|
|
73
|
-
> docs and upgrade guides.
|
|
74
|
-
|
|
75
|
-
This file contains a compiled LLM consumption version of this v14 Upgrade Guide.
|
|
75
|
+
> **Important:** LLMs can make mistakes. Please verify changes using this Upgrade Guide.
|
|
76
76
|
|
|
77
77
|
**How to use:**
|
|
78
78
|
|
|
79
79
|
- **View raw file**: Open the file in a new tab to see the complete migration mapping
|
|
80
|
-
- **Download
|
|
80
|
+
- **Download LLM File**: Save the file locally to upload or paste into your LLM/code assistant
|
|
81
81
|
- **Use with LLM**: Provide the raw content to your LLM/code assistant as context for automated
|
|
82
82
|
migration
|
|
83
83
|
|
|
84
84
|
<DownloadLLMFile
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
|
|
86
|
+
filename="llm-canvas-kit-upgrade-guide-v14.txt"
|
|
87
87
|
/>
|
|
88
88
|
|
|
89
89
|
## Codemod
|
|
@@ -93,16 +93,15 @@ automatically update your code to work with most of the breaking changes in v14.
|
|
|
93
93
|
handled by the codemod are marked with 🤖 in the Upgrade Guide.**
|
|
94
94
|
|
|
95
95
|
A codemod is a script that makes programmatic transformations on your codebase by traversing the
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
use the codemod for these reasons.**
|
|
96
|
+
AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for
|
|
97
|
+
error and reduces the number of manual updates, which allows you to focus on changes that need your
|
|
98
|
+
attention. **We highly recommend you use the codemod for these reasons.**
|
|
100
99
|
|
|
101
100
|
If you're new to running codemods or if it's been a minute since you've used one, there are a few
|
|
102
101
|
things you'll want to keep in mind.
|
|
103
102
|
|
|
104
|
-
- Our codemods are meant to be run sequentially. For example, if you're using
|
|
105
|
-
you'll need to run the
|
|
103
|
+
- Our codemods are meant to be run sequentially. For example, if you're using v12 of Canvas Kit,
|
|
104
|
+
you'll need to run the v13 codemod before you run v14.
|
|
106
105
|
- The codemod will update your code to be compatible with the specified version, but it will **not**
|
|
107
106
|
remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
|
|
108
107
|
dependencies on your own.
|
|
@@ -150,23 +149,24 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
150
149
|
## Tokens
|
|
151
150
|
|
|
152
151
|
Canvas Kit v14 uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
|
|
153
|
-
deprecates the old "fruity" color names
|
|
154
|
-
|
|
152
|
+
deprecates the old "fruity" color names. For example, `red` replaces `cinnamon`, `blue` replaces
|
|
153
|
+
`blueberry`, and `green` replaces `greenApple`. We strongly recommend upgrading to
|
|
155
154
|
`@workday/canvas-tokens-web` v3, as using older versions will not match the new brand guidelines or
|
|
156
155
|
color system. Although this dependency upgrade is not required, we've offered migration guides and
|
|
157
|
-
codemods separately from the v14 upgrade so
|
|
156
|
+
codemods separately from the v14 upgrade so teams can upgrade when they can.
|
|
158
157
|
|
|
159
158
|
For more information and changes, please view our
|
|
160
159
|
[Tokens v3 Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/guides-upgrade-guides-v3-overview--docs).
|
|
161
160
|
|
|
162
|
-
> **Note:** v3 Tokens
|
|
161
|
+
> **Note:** v3 Tokens are backwards compatible with older versions of Canvas Kit.
|
|
163
162
|
|
|
164
163
|
Follow these guides to migrate:
|
|
165
164
|
|
|
166
|
-
- If you
|
|
167
|
-
`@workday/canvas-
|
|
168
|
-
[Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs)
|
|
169
|
-
-
|
|
165
|
+
- If you're still using our old tokens from `@workday/canvas-kit-react/tokens`, migrate to
|
|
166
|
+
`@workday/canvas-tokens-web` v3 using our
|
|
167
|
+
[Canvas Kit Token Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs).
|
|
168
|
+
- Otherwise, use our
|
|
169
|
+
[v2 to v3 Migration Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs).
|
|
170
170
|
|
|
171
171
|
> 🤖 The `v14-tokens` codemod will automatically migrate your tokens, whether you're upgrading from
|
|
172
172
|
> old tokens or from v2 to v3. Read
|
|
@@ -206,8 +206,8 @@ input components should be used with our `FormField` component to ensure correct
|
|
|
206
206
|
</FormField>
|
|
207
207
|
```
|
|
208
208
|
|
|
209
|
-
If you
|
|
210
|
-
component, the naming has also changed.
|
|
209
|
+
If you're using the error type from `@workday/canvas-kit-react/common` or an error type exposed from
|
|
210
|
+
a component, the naming has also changed.
|
|
211
211
|
|
|
212
212
|
**Before in v13**
|
|
213
213
|
|
|
@@ -246,12 +246,13 @@ someFunction(ErrorType.Caution);
|
|
|
246
246
|
|
|
247
247
|
### New Documentation
|
|
248
248
|
|
|
249
|
-
We've **significantly** improved our theming documentation. Please consult our new
|
|
249
|
+
We've **significantly** improved our theming documentation. Please consult our new
|
|
250
|
+
[Canvas Kit Theming Guide](/get-started/for-developers/theming/overview/).
|
|
250
251
|
|
|
251
252
|
### Canvas Provider 🚨
|
|
252
253
|
|
|
253
254
|
**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407),
|
|
254
|
-
[#
|
|
255
|
+
[#3429](https://github.com/Workday/canvas-kit/pull/3429)
|
|
255
256
|
|
|
256
257
|
- `CanvasThemePalette` and `CanvasTheme` type have been updated to include a `lighter` property.
|
|
257
258
|
- `CanvasProvider` `theme` prop has been updated to include a `lighter` color for each palette.
|
|
@@ -262,10 +263,15 @@ Canvas Provider has been updated to **remove** default branding colors to ensure
|
|
|
262
263
|
our CSS variables. Instead of generating a palette and shifting the brightness and darkness with
|
|
263
264
|
`chroma.js`, we use `oklch` to generate the palette colors.
|
|
264
265
|
|
|
265
|
-
Prior to v14, `CanvasProvider` created a
|
|
266
|
+
Prior to v14, `CanvasProvider` created a
|
|
267
|
+
[cascade barrier](/get-started/for-developers/theming/overview/#what-is-a-cascade-barrier), which
|
|
268
|
+
redefined brand CSS variables under a class and created a higher specificity. This made it difficult
|
|
269
|
+
to override brand tokens in certain scenarios. v14 removes that barrier.
|
|
270
|
+
|
|
271
|
+
**Before in v13**
|
|
266
272
|
|
|
267
|
-
|
|
268
|
-
|
|
273
|
+
In v13, the `useTheme` hook would call `createCanvasTheme` which generated a palette given a `main`
|
|
274
|
+
color via `chroma.js`.
|
|
269
275
|
|
|
270
276
|
```tsx
|
|
271
277
|
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
|
|
@@ -273,8 +279,10 @@ palette given a `main` color via `chroma.js`.
|
|
|
273
279
|
</CanvasProvider>
|
|
274
280
|
```
|
|
275
281
|
|
|
276
|
-
**After in v14**
|
|
277
|
-
|
|
282
|
+
**After in v14**
|
|
283
|
+
|
|
284
|
+
We use `oklch` to generate the palette colors. The color shifting will be different. If you want
|
|
285
|
+
more control over the colors, we suggest providing the full palette object.
|
|
278
286
|
|
|
279
287
|
```tsx
|
|
280
288
|
<CanvasProvider
|
|
@@ -322,7 +330,6 @@ The reason for this change is to ensure that the CSS variables properly cascade
|
|
|
322
330
|
Before in v13, the `CanvasProvider` would add the brand tokens under a class name, creating a higher
|
|
323
331
|
specificity.
|
|
324
332
|
|
|
325
|
-
|
|
326
333
|
### useIsRTL
|
|
327
334
|
|
|
328
335
|
**PR:** [#3480](https://github.com/Workday/canvas-kit/pull/3477)
|
|
@@ -342,29 +349,28 @@ details on the new `shouldMirrorInRTL` prop.
|
|
|
342
349
|
A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that
|
|
343
350
|
matches our brand refresh.
|
|
344
351
|
|
|
345
|
-
#### API Changes from Avatar
|
|
352
|
+
#### API Changes from Avatar (Main)
|
|
346
353
|
|
|
347
354
|
- `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The
|
|
348
355
|
`name` prop also determines the initials and the `alt` text for the image if a `url` is provided.
|
|
349
|
-
- `url`
|
|
350
|
-
- `variant` defines the color of the `Avatar`.
|
|
351
|
-
|
|
356
|
+
- `url` is unchanged. This prop is optional and will be used to display an image `Avatar`.
|
|
357
|
+
- `variant` defines the color of the `Avatar`. It accepts the following values:
|
|
358
|
+
- `blue` (default)
|
|
359
|
+
- `amber`
|
|
352
360
|
- `teal`
|
|
353
361
|
- `purple`
|
|
354
|
-
- `amber`
|
|
355
|
-
- `blue`
|
|
356
362
|
- By default, the `Avatar` will render a `div` element. If you need to render a `button` element use
|
|
357
363
|
the `BaseAvatar` component.
|
|
358
364
|
- `size` accepts the following values:
|
|
359
365
|
- `extraExtraLarge`
|
|
360
366
|
- `extraLarge`
|
|
361
367
|
- `large`
|
|
362
|
-
- `medium`
|
|
368
|
+
- `medium` (default)
|
|
363
369
|
- `small`
|
|
364
370
|
- `extraSmall`
|
|
365
371
|
- `extraExtraSmall`
|
|
366
372
|
|
|
367
|
-
**Avatar
|
|
373
|
+
**Avatar (Main)**
|
|
368
374
|
|
|
369
375
|
```tsx
|
|
370
376
|
import { Avatar } from '@workday/canvas-kit-react/avatar';
|
|
@@ -375,7 +381,7 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
|
|
|
375
381
|
<Avatar altText="John Doe" size="extraExtraLarge" variant="dark" url={yourImageUrl} />
|
|
376
382
|
```
|
|
377
383
|
|
|
378
|
-
**Avatar
|
|
384
|
+
**Avatar (Preview)**
|
|
379
385
|
|
|
380
386
|
```tsx
|
|
381
387
|
import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
|
|
@@ -393,12 +399,12 @@ revolve around the use of our new brand colors. For a better guide on what has c
|
|
|
393
399
|
tokens, please view the Tokens v3.0.0
|
|
394
400
|
[Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs).
|
|
395
401
|
|
|
402
|
+
The following components have been updated (**see
|
|
403
|
+
[v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) for a visual
|
|
404
|
+
reference of the updates**):
|
|
396
405
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
- `Breadcrumbs`
|
|
401
|
-
[#3270](https://github.com/Workday/canvas-kit/pull/3270),[#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
406
|
+
- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),
|
|
407
|
+
[#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
402
408
|
- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
403
409
|
- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
404
410
|
- `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
@@ -414,7 +420,9 @@ The following components have been updated (**see [v14 Visual Changes](/help/upg
|
|
|
414
420
|
|
|
415
421
|
### Buttons
|
|
416
422
|
|
|
417
|
-
####
|
|
423
|
+
#### Tertiary Button 🚨
|
|
424
|
+
|
|
425
|
+
**PR:** [3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
418
426
|
|
|
419
427
|
**Breaking Changes**
|
|
420
428
|
|
|
@@ -438,17 +446,17 @@ The following components have been updated (**see [v14 Visual Changes](/help/upg
|
|
|
438
446
|
<TertiaryButton colors={{/* palette colors */}}>Custom Button</TertiaryButton>
|
|
439
447
|
```
|
|
440
448
|
|
|
441
|
-
If you need to override default styles,
|
|
442
|
-
[
|
|
449
|
+
If you need to override default styles, refer to this
|
|
450
|
+
[example](/components/buttons/button/#custom-styles).
|
|
443
451
|
|
|
444
452
|
### Card 🚨
|
|
445
453
|
|
|
446
454
|
**PR:** [#3350](https://github.com/Workday/canvas-kit/pull/3350)
|
|
447
455
|
|
|
448
|
-
We've rebranded the `Card` component to align with our new brand
|
|
449
|
-
|
|
456
|
+
We've rebranded the `Card` component to align with our new brand direction and provide better visual
|
|
457
|
+
hierarchy and more flexible styling options.
|
|
450
458
|
|
|
451
|
-
####
|
|
459
|
+
#### Removed Box Shadow
|
|
452
460
|
|
|
453
461
|
The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance
|
|
454
462
|
that aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
|
|
@@ -464,7 +472,9 @@ add it through the `cs` prop.
|
|
|
464
472
|
</Card>
|
|
465
473
|
```
|
|
466
474
|
|
|
467
|
-
**After in v14**
|
|
475
|
+
**After in v14**
|
|
476
|
+
|
|
477
|
+
Only do this if you need a shadow. Otherwise, adhere to the default styling.
|
|
468
478
|
|
|
469
479
|
```tsx
|
|
470
480
|
import {system} from '@workday/canvas-tokens-web';
|
|
@@ -479,12 +489,12 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
479
489
|
|
|
480
490
|
We've added two new variants to provide more styling flexibility:
|
|
481
491
|
|
|
482
|
-
- **`borderless`**: Use this variant when placing cards on colored backgrounds where
|
|
483
|
-
|
|
492
|
+
- **`borderless`**: Use this variant when placing cards on colored backgrounds where it needs to
|
|
493
|
+
blend seamlessly without borders or shadows.
|
|
484
494
|
- **`filled`**: Use this variant when you need a card with a grayish background to create visual
|
|
485
495
|
separation from the page background.
|
|
486
496
|
|
|
487
|
-
The `variant` prop is optional
|
|
497
|
+
The `variant` prop is optional. If no variant is specified, the card will use the default styling.
|
|
488
498
|
|
|
489
499
|
```tsx
|
|
490
500
|
// Default card (no variant prop needed) with a border and no box shadow
|
|
@@ -506,7 +516,7 @@ The `variant` prop is optional - if no variant is specified, the card will use t
|
|
|
506
516
|
</Card>
|
|
507
517
|
```
|
|
508
518
|
|
|
509
|
-
####
|
|
519
|
+
#### Replaced Margins with Gap
|
|
510
520
|
|
|
511
521
|
We've replaced the individual margins on `Card.Heading` and `Card.Body` with `gap`. The card now
|
|
512
522
|
uses `display: flex` with `flex-direction: column` by default, and the `gap` prop provides
|
|
@@ -546,6 +556,7 @@ emphasis for the badge.
|
|
|
546
556
|
```tsx
|
|
547
557
|
<CountBadge /> // Default count badge with high emphasis
|
|
548
558
|
<CountBadge variant="inverse" /> // Inverse default count badge
|
|
559
|
+
|
|
549
560
|
// New emphasis prop
|
|
550
561
|
<CountBadge emphasis="low" /> // Default count badge with low emphasis
|
|
551
562
|
<CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
|
|
@@ -556,23 +567,25 @@ emphasis for the badge.
|
|
|
556
567
|
**PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389),
|
|
557
568
|
[#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
558
569
|
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
570
|
+
The hover state of `Expandable.Target` has been updated to use `system.color.bg.alt.soft` instead of
|
|
571
|
+
`system.color.bg.alt.default` to match our new brand direction.
|
|
572
|
+
|
|
573
|
+
The `focus` state has been updated to use `system.color.border.primary.default` to ensure the same
|
|
574
|
+
focus state color across all components.
|
|
575
|
+
|
|
576
|
+
`Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change
|
|
577
|
+
requires that you update the `altText` prop to `name`.
|
|
565
578
|
|
|
566
579
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
|
|
567
580
|
|
|
568
581
|
These changes are only **visual** and should not affect the functionality of the component.
|
|
569
582
|
|
|
570
|
-
### Hyperlink and
|
|
583
|
+
### Hyperlink and External Hyperlink
|
|
571
584
|
|
|
572
585
|
**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
|
|
573
586
|
|
|
574
|
-
|
|
575
|
-
|
|
587
|
+
`Hyperlink` and `ExternalHyperlink` now have `standalone` and `standaloneInverse` variants. This
|
|
588
|
+
removes the underline text decoration for use outside the context of body text.
|
|
576
589
|
|
|
577
590
|
**Hyperlink and ExternalHyperlink in v14**
|
|
578
591
|
|
|
@@ -583,17 +596,18 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
583
596
|
<ExternalHyperlink variant="standaloneInverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
|
|
584
597
|
```
|
|
585
598
|
|
|
586
|
-
> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where
|
|
587
|
-
>
|
|
599
|
+
> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where `HyperLink` and
|
|
600
|
+
> `ExternalHyperlink` are used outside the context of body text.
|
|
588
601
|
|
|
589
602
|
### Loading Dots
|
|
590
603
|
|
|
591
604
|
**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
|
|
592
605
|
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
606
|
+
We've updated the colors to match our brand refresh. We've changed the default color from
|
|
607
|
+
`system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
|
|
608
|
+
|
|
609
|
+
`LoadingDots` now has an `inverse` variant. Use this variant when the Loading Dots are on a dark
|
|
610
|
+
background or image.
|
|
597
611
|
|
|
598
612
|
**After in v14**
|
|
599
613
|
|
|
@@ -607,16 +621,16 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
607
621
|
**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430),
|
|
608
622
|
[#3446](https://github.com/Workday/canvas-kit/pull/3446)
|
|
609
623
|
|
|
610
|
-
|
|
611
|
-
|
|
624
|
+
`Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
|
|
625
|
+
provide a value for the `name` prop.
|
|
612
626
|
|
|
613
627
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Pill.Avatar`.
|
|
614
628
|
|
|
615
|
-
|
|
616
|
-
|
|
629
|
+
The `Pill` component no longer supports `default` as a value for the `variant` prop. If the
|
|
630
|
+
`variant` prop is not provided, the component will use its default styling.
|
|
617
631
|
|
|
618
|
-
|
|
619
|
-
|
|
632
|
+
`readyOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
|
|
633
|
+
instead.
|
|
620
634
|
|
|
621
635
|
**Before in v13**
|
|
622
636
|
|
|
@@ -636,12 +650,12 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
636
650
|
</Pill>
|
|
637
651
|
```
|
|
638
652
|
|
|
639
|
-
###
|
|
653
|
+
### Search Form (Labs) 🚨
|
|
640
654
|
|
|
641
655
|
**PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
642
656
|
|
|
643
|
-
|
|
644
|
-
|
|
657
|
+
`SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only accept
|
|
658
|
+
a `string` instead of `string | string[]`.
|
|
645
659
|
|
|
646
660
|
**Before in v13**
|
|
647
661
|
|
|
@@ -683,17 +697,17 @@ const customTheme = {
|
|
|
683
697
|
/>;
|
|
684
698
|
```
|
|
685
699
|
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
700
|
+
`SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`.
|
|
701
|
+
This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1` or
|
|
702
|
+
`2` to the `searchTheme` prop.
|
|
689
703
|
|
|
690
704
|
### Status Indicator (Preview) 🚨
|
|
691
705
|
|
|
692
|
-
**PR:** [#
|
|
706
|
+
**PR:** [#3354](https://github.com/Workday/canvas-kit/pull/3354)
|
|
693
707
|
|
|
694
708
|
Preview `StatusIndicator` is rounder and more vibrant with base emphasis (`low`).
|
|
695
709
|
|
|
696
|
-
Variant names of the preview `StatusIndicator` have been updated
|
|
710
|
+
Variant names of the preview `StatusIndicator` have been updated:
|
|
697
711
|
|
|
698
712
|
- `blue` → `primary`
|
|
699
713
|
- `green` → `success`
|
|
@@ -734,8 +748,8 @@ you use the old variant values, update to use the new ones mapped above. Use
|
|
|
734
748
|
`ToolbarDropdownButton`, `ToolbarIconButton`, `ButtonLabelIcon`, `PrimaryButton`, `SecondaryButton`,
|
|
735
749
|
and `TertiaryButton`). This is used to mirror the icon when the content direction is `rtl`. This is
|
|
736
750
|
meant to replace `useIsRTL` combined with the `shouldMirror` prop. Instead of getting the content
|
|
737
|
-
direction from JavaScript and passing to components, you can now pass `shouldMirrorInRTL={true}`
|
|
738
|
-
the component which will mirror the icon only when the content direction is `rtl`.
|
|
751
|
+
direction from JavaScript and passing it to components, you can now pass `shouldMirrorInRTL={true}`
|
|
752
|
+
to the component which will mirror the icon only when the content direction is `rtl`.
|
|
739
753
|
|
|
740
754
|
**Before in v13**
|
|
741
755
|
|
|
@@ -805,43 +819,38 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
|
|
|
805
819
|
|
|
806
820
|
### Combobox (Labs)
|
|
807
821
|
|
|
808
|
-
The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated
|
|
809
|
-
|
|
810
|
-
[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) in
|
|
822
|
+
The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated. Please
|
|
823
|
+
migrate to the [Combobox](/get-started/for-developers/resources/combobox/) in
|
|
811
824
|
`@workday/canvas-kit-react`.
|
|
812
825
|
|
|
813
826
|
### Radio (Main)
|
|
814
827
|
|
|
815
|
-
The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Please
|
|
816
|
-
[Radio](
|
|
817
|
-
|
|
828
|
+
The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Please migrate to the
|
|
829
|
+
[Radio](/components/inputs/radio/) in `@workday/canvas-kit-preview-react` for improved accessibility
|
|
830
|
+
and API consistency.
|
|
818
831
|
|
|
819
832
|
### SearchForm (Labs)
|
|
820
833
|
|
|
821
834
|
**PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
|
|
822
835
|
|
|
823
|
-
The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated
|
|
824
|
-
|
|
825
|
-
[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in
|
|
826
|
-
`@workday/canvas-kit-react`.
|
|
836
|
+
The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated. Please migrate
|
|
837
|
+
to the [Combobox](/get-started/for-developers/resources/combobox/) in `@workday/canvas-kit-react`.
|
|
827
838
|
|
|
828
839
|
### Segmented Control (Main)
|
|
829
840
|
|
|
830
841
|
The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
|
|
831
|
-
deprecated. Please migrate to the
|
|
832
|
-
|
|
833
|
-
for improved features and support.
|
|
842
|
+
deprecated. Please migrate to the [Segmented Control](/components/buttons/segmented-control/) in
|
|
843
|
+
`@workday/canvas-kit-preview-react` for improved features and support.
|
|
834
844
|
|
|
835
845
|
### Side Panel (Main)
|
|
836
846
|
|
|
837
|
-
The Side Panel component in `@workday/canvas-kit-react/side-panel`
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
functionality.
|
|
847
|
+
The Side Panel component in `@workday/canvas-kit-react/side-panel` has been deprecated. Please
|
|
848
|
+
migrate to the [Side Panel](/components/containers/side-panel/) in
|
|
849
|
+
`@workday/canvas-kit-preview-react/side-panel` for enhanced functionality.
|
|
841
850
|
|
|
842
851
|
### Tokens
|
|
843
852
|
|
|
844
|
-
The legacy tokens from `@workday/canvas-kit-react/tokens`
|
|
853
|
+
The legacy tokens from `@workday/canvas-kit-react/tokens` have been deprecated. Please use the new
|
|
845
854
|
[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
|
|
846
855
|
package (`@workday/canvas-tokens-web`) for all token usage. Follow the
|
|
847
856
|
[migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
|
|
@@ -849,17 +858,17 @@ for a smoother upgrade.
|
|
|
849
858
|
|
|
850
859
|
## Removals
|
|
851
860
|
|
|
852
|
-
Removals
|
|
853
|
-
|
|
861
|
+
Removals have been deleted from our codebase and may no longer be consumed. We've either promoted or
|
|
862
|
+
replaced the removed component or utility.
|
|
854
863
|
|
|
855
864
|
### Deprecated Buttons
|
|
856
865
|
|
|
857
866
|
**PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
|
|
858
867
|
|
|
859
|
-
Long overdue, but a sign of moving forward, we
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
868
|
+
Long overdue, but a sign of moving forward, we've removed our `DeprecatedButton`. Our design system
|
|
869
|
+
supported this for quite some time, but with the advancement in theming, our components API and our
|
|
870
|
+
flexibility, it is time for us to finally remove this component. This component has served as a
|
|
871
|
+
reminder of how far we've come and we're thankful for this change.
|
|
863
872
|
|
|
864
873
|
Although unlikely, if you were using `DeprecatedButton` please use our flexible and themable buttons
|
|
865
874
|
like `PrimaryButton`, `SecondaryButton` or `TertiaryButton`.
|
|
@@ -896,9 +905,8 @@ const buttonStyles = createStyles({
|
|
|
896
905
|
|
|
897
906
|
**PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
|
|
898
907
|
|
|
899
|
-
We've removed `Menu` from `@workday/canvas-kit-preview-react
|
|
900
|
-
[Menu](
|
|
901
|
-
`@workday/canvas-kit-react` instead.
|
|
908
|
+
We've removed `Menu` from `@workday/canvas-kit-preview-react`. Please use
|
|
909
|
+
[Menu](/components/popups/menu/) from `@workday/canvas-kit-react` instead.
|
|
902
910
|
|
|
903
911
|
### readyOnlyPillStencil and removeablePillStencil
|
|
904
912
|
|
|
@@ -909,9 +917,8 @@ package. Please use `pillStencil` instead.
|
|
|
909
917
|
|
|
910
918
|
**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
|
|
911
919
|
|
|
912
|
-
We've removed `TextArea` from `@workday/canvas-kit-preview-react
|
|
913
|
-
[TextArea](
|
|
914
|
-
`@workday/canvas-kit-react` instead.
|
|
920
|
+
We've removed `TextArea` from `@workday/canvas-kit-preview-react`. Please use
|
|
921
|
+
[TextArea](/components/inputs/text-area/) from `@workday/canvas-kit-react` instead.
|
|
915
922
|
|
|
916
923
|
**Before in v13**
|
|
917
924
|
|
|
@@ -927,7 +934,7 @@ import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
|
927
934
|
**After in v14**
|
|
928
935
|
|
|
929
936
|
```tsx
|
|
930
|
-
import {TextArea} from '@workday/canvas-kit-
|
|
937
|
+
import {TextArea} from '@workday/canvas-kit-react/text-area';
|
|
931
938
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
932
939
|
|
|
933
940
|
<FormField>
|
|
@@ -938,13 +945,12 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
938
945
|
</FormField>;
|
|
939
946
|
```
|
|
940
947
|
|
|
941
|
-
### Text Input (
|
|
948
|
+
### Text Input (Preview)
|
|
942
949
|
|
|
943
950
|
**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
|
|
944
951
|
|
|
945
|
-
We've removed `TextInput` from `@workday/canvas-kit-preview-react
|
|
946
|
-
[TextInput](
|
|
947
|
-
from `@workday/canvas-kit-react` instead.
|
|
952
|
+
We've removed `TextInput` from `@workday/canvas-kit-preview-react`. Please use
|
|
953
|
+
[TextInput](/components/inputs/text-input/) from `@workday/canvas-kit-react` instead.
|
|
948
954
|
|
|
949
955
|
**Before in v13**
|
|
950
956
|
|
|
@@ -960,7 +966,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
|
960
966
|
**After in v14**
|
|
961
967
|
|
|
962
968
|
```tsx
|
|
963
|
-
import {TextArea} from '@workday/canvas-kit-
|
|
969
|
+
import {TextArea} from '@workday/canvas-kit-react/text-input';
|
|
964
970
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
965
971
|
|
|
966
972
|
<FormField>
|
|
@@ -41,8 +41,8 @@ LLM consumption.
|
|
|
41
41
|
migration
|
|
42
42
|
|
|
43
43
|
<DownloadLLMFile
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.txt"
|
|
45
|
+
filename="llm-token-migration-14.0.0.txt"
|
|
46
46
|
/>
|
|
47
47
|
|
|
48
48
|
## Core Principles
|
package/lib/DownloadLLMFile.tsx
CHANGED
|
@@ -58,7 +58,7 @@ export const DownloadLLMFile = ({rawFileLink, filename}: DownloadLLMFileProps) =
|
|
|
58
58
|
<code>{filename}</code>
|
|
59
59
|
</div>
|
|
60
60
|
<div {...flexBlock({gap: system.space.x4})}>
|
|
61
|
-
<ExternalHyperlink href={rawFileLink}>
|
|
61
|
+
<ExternalHyperlink href={rawFileLink}>View raw file</ExternalHyperlink>
|
|
62
62
|
<SecondaryButton icon={downloadIcon} size="small" onClick={handleDownload}>
|
|
63
63
|
Download LLM File
|
|
64
64
|
</SecondaryButton>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1259-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1259-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1259-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1259-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1259-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "d7bffdf36b9f6deb90a87731fcb4a67ba3a532da"
|
|
65
65
|
}
|