@workday/canvas-kit-docs 14.0.0-alpha.1258-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
|
};
|
|
@@ -19,7 +19,7 @@ visual reference of what's changed.**
|
|
|
19
19
|
> **Note:** While v14 does not require an upgrade to our v3 tokens, we strongly advise to upgrade to
|
|
20
20
|
> the latest to ensure proper branding.
|
|
21
21
|
|
|
22
|
-
## Table of
|
|
22
|
+
## Table of Contents
|
|
23
23
|
|
|
24
24
|
- [LLM Assisted Migration](#llm-assisted-migration)
|
|
25
25
|
- [Codemod](#codemod)
|
|
@@ -36,10 +36,10 @@ visual reference of what's changed.**
|
|
|
36
36
|
- [Card](#card-)
|
|
37
37
|
- [Count Badge](#count-badge)
|
|
38
38
|
- [Expandable](#expandable)
|
|
39
|
-
- [Hyperlink and
|
|
39
|
+
- [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
|
|
40
40
|
- [Loading Dots](#loading-dots)
|
|
41
41
|
- [Pill (Preview)](#pill-preview)
|
|
42
|
-
- [Search Form (Labs)](#
|
|
42
|
+
- [Search Form (Labs)](#search-form-labs-)
|
|
43
43
|
- [Status Indicator (Preview)](#status-indicator-preview-)
|
|
44
44
|
- [Icons](#icons)
|
|
45
45
|
- [Deprecations](#deprecations)
|
|
@@ -66,20 +66,18 @@ visual reference of what's changed.**
|
|
|
66
66
|
|
|
67
67
|
## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
|
|
68
68
|
|
|
69
|
-
We
|
|
70
|
-
designed for use with LLM-based code assistants
|
|
71
|
-
|
|
72
|
-
|
|
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.
|
|
73
74
|
|
|
74
|
-
> **Important:** LLMs can make mistakes. Please
|
|
75
|
-
> docs and upgrade guides.
|
|
76
|
-
|
|
77
|
-
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.
|
|
78
76
|
|
|
79
77
|
**How to use:**
|
|
80
78
|
|
|
81
79
|
- **View raw file**: Open the file in a new tab to see the complete migration mapping
|
|
82
|
-
- **Download
|
|
80
|
+
- **Download LLM File**: Save the file locally to upload or paste into your LLM/code assistant
|
|
83
81
|
- **Use with LLM**: Provide the raw content to your LLM/code assistant as context for automated
|
|
84
82
|
migration
|
|
85
83
|
|
|
@@ -95,16 +93,15 @@ automatically update your code to work with most of the breaking changes in v14.
|
|
|
95
93
|
handled by the codemod are marked with 🤖 in the Upgrade Guide.**
|
|
96
94
|
|
|
97
95
|
A codemod is a script that makes programmatic transformations on your codebase by traversing the
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
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.**
|
|
102
99
|
|
|
103
100
|
If you're new to running codemods or if it's been a minute since you've used one, there are a few
|
|
104
101
|
things you'll want to keep in mind.
|
|
105
102
|
|
|
106
|
-
- Our codemods are meant to be run sequentially. For example, if you're using
|
|
107
|
-
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.
|
|
108
105
|
- The codemod will update your code to be compatible with the specified version, but it will **not**
|
|
109
106
|
remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
|
|
110
107
|
dependencies on your own.
|
|
@@ -152,23 +149,24 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
152
149
|
## Tokens
|
|
153
150
|
|
|
154
151
|
Canvas Kit v14 uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
|
|
155
|
-
deprecates the old "fruity" color names
|
|
156
|
-
|
|
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
|
|
157
154
|
`@workday/canvas-tokens-web` v3, as using older versions will not match the new brand guidelines or
|
|
158
155
|
color system. Although this dependency upgrade is not required, we've offered migration guides and
|
|
159
|
-
codemods separately from the v14 upgrade so
|
|
156
|
+
codemods separately from the v14 upgrade so teams can upgrade when they can.
|
|
160
157
|
|
|
161
158
|
For more information and changes, please view our
|
|
162
159
|
[Tokens v3 Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/guides-upgrade-guides-v3-overview--docs).
|
|
163
160
|
|
|
164
|
-
> **Note:** v3 Tokens
|
|
161
|
+
> **Note:** v3 Tokens are backwards compatible with older versions of Canvas Kit.
|
|
165
162
|
|
|
166
163
|
Follow these guides to migrate:
|
|
167
164
|
|
|
168
|
-
- If you
|
|
169
|
-
`@workday/canvas-
|
|
170
|
-
[Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs)
|
|
171
|
-
-
|
|
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).
|
|
172
170
|
|
|
173
171
|
> 🤖 The `v14-tokens` codemod will automatically migrate your tokens, whether you're upgrading from
|
|
174
172
|
> old tokens or from v2 to v3. Read
|
|
@@ -208,8 +206,8 @@ input components should be used with our `FormField` component to ensure correct
|
|
|
208
206
|
</FormField>
|
|
209
207
|
```
|
|
210
208
|
|
|
211
|
-
If you
|
|
212
|
-
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.
|
|
213
211
|
|
|
214
212
|
**Before in v13**
|
|
215
213
|
|
|
@@ -254,7 +252,7 @@ We've **significantly** improved our theming documentation. Please consult our n
|
|
|
254
252
|
### Canvas Provider 🚨
|
|
255
253
|
|
|
256
254
|
**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407),
|
|
257
|
-
[#
|
|
255
|
+
[#3429](https://github.com/Workday/canvas-kit/pull/3429)
|
|
258
256
|
|
|
259
257
|
- `CanvasThemePalette` and `CanvasTheme` type have been updated to include a `lighter` property.
|
|
260
258
|
- `CanvasProvider` `theme` prop has been updated to include a `lighter` color for each palette.
|
|
@@ -270,8 +268,10 @@ Prior to v14, `CanvasProvider` created a
|
|
|
270
268
|
redefined brand CSS variables under a class and created a higher specificity. This made it difficult
|
|
271
269
|
to override brand tokens in certain scenarios. v14 removes that barrier.
|
|
272
270
|
|
|
273
|
-
**Before in v13**
|
|
274
|
-
|
|
271
|
+
**Before in v13**
|
|
272
|
+
|
|
273
|
+
In v13, the `useTheme` hook would call `createCanvasTheme` which generated a palette given a `main`
|
|
274
|
+
color via `chroma.js`.
|
|
275
275
|
|
|
276
276
|
```tsx
|
|
277
277
|
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
|
|
@@ -279,8 +279,10 @@ palette given a `main` color via `chroma.js`.
|
|
|
279
279
|
</CanvasProvider>
|
|
280
280
|
```
|
|
281
281
|
|
|
282
|
-
**After in v14**
|
|
283
|
-
|
|
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.
|
|
284
286
|
|
|
285
287
|
```tsx
|
|
286
288
|
<CanvasProvider
|
|
@@ -347,29 +349,28 @@ details on the new `shouldMirrorInRTL` prop.
|
|
|
347
349
|
A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that
|
|
348
350
|
matches our brand refresh.
|
|
349
351
|
|
|
350
|
-
#### API Changes from Avatar
|
|
352
|
+
#### API Changes from Avatar (Main)
|
|
351
353
|
|
|
352
354
|
- `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The
|
|
353
355
|
`name` prop also determines the initials and the `alt` text for the image if a `url` is provided.
|
|
354
|
-
- `url`
|
|
355
|
-
- `variant` defines the color of the `Avatar`.
|
|
356
|
-
|
|
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`
|
|
357
360
|
- `teal`
|
|
358
361
|
- `purple`
|
|
359
|
-
- `amber`
|
|
360
|
-
- `blue`
|
|
361
362
|
- By default, the `Avatar` will render a `div` element. If you need to render a `button` element use
|
|
362
363
|
the `BaseAvatar` component.
|
|
363
364
|
- `size` accepts the following values:
|
|
364
365
|
- `extraExtraLarge`
|
|
365
366
|
- `extraLarge`
|
|
366
367
|
- `large`
|
|
367
|
-
- `medium`
|
|
368
|
+
- `medium` (default)
|
|
368
369
|
- `small`
|
|
369
370
|
- `extraSmall`
|
|
370
371
|
- `extraExtraSmall`
|
|
371
372
|
|
|
372
|
-
**Avatar
|
|
373
|
+
**Avatar (Main)**
|
|
373
374
|
|
|
374
375
|
```tsx
|
|
375
376
|
import { Avatar } from '@workday/canvas-kit-react/avatar';
|
|
@@ -380,7 +381,7 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
|
|
|
380
381
|
<Avatar altText="John Doe" size="extraExtraLarge" variant="dark" url={yourImageUrl} />
|
|
381
382
|
```
|
|
382
383
|
|
|
383
|
-
**Avatar
|
|
384
|
+
**Avatar (Preview)**
|
|
384
385
|
|
|
385
386
|
```tsx
|
|
386
387
|
import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
|
|
@@ -402,8 +403,8 @@ The following components have been updated (**see
|
|
|
402
403
|
[v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) for a visual
|
|
403
404
|
reference of the updates**):
|
|
404
405
|
|
|
405
|
-
- `Breadcrumbs`
|
|
406
|
-
[#
|
|
406
|
+
- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),
|
|
407
|
+
[#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
407
408
|
- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
408
409
|
- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
409
410
|
- `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
@@ -419,7 +420,9 @@ reference of the updates**):
|
|
|
419
420
|
|
|
420
421
|
### Buttons
|
|
421
422
|
|
|
422
|
-
####
|
|
423
|
+
#### Tertiary Button 🚨
|
|
424
|
+
|
|
425
|
+
**PR:** [3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
423
426
|
|
|
424
427
|
**Breaking Changes**
|
|
425
428
|
|
|
@@ -443,17 +446,17 @@ reference of the updates**):
|
|
|
443
446
|
<TertiaryButton colors={{/* palette colors */}}>Custom Button</TertiaryButton>
|
|
444
447
|
```
|
|
445
448
|
|
|
446
|
-
If you need to override default styles,
|
|
447
|
-
[
|
|
449
|
+
If you need to override default styles, refer to this
|
|
450
|
+
[example](/components/buttons/button/#custom-styles).
|
|
448
451
|
|
|
449
452
|
### Card 🚨
|
|
450
453
|
|
|
451
454
|
**PR:** [#3350](https://github.com/Workday/canvas-kit/pull/3350)
|
|
452
455
|
|
|
453
|
-
We've rebranded the `Card` component to align with our new brand
|
|
454
|
-
|
|
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.
|
|
455
458
|
|
|
456
|
-
####
|
|
459
|
+
#### Removed Box Shadow
|
|
457
460
|
|
|
458
461
|
The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance
|
|
459
462
|
that aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
|
|
@@ -469,7 +472,9 @@ add it through the `cs` prop.
|
|
|
469
472
|
</Card>
|
|
470
473
|
```
|
|
471
474
|
|
|
472
|
-
**After in v14**
|
|
475
|
+
**After in v14**
|
|
476
|
+
|
|
477
|
+
Only do this if you need a shadow. Otherwise, adhere to the default styling.
|
|
473
478
|
|
|
474
479
|
```tsx
|
|
475
480
|
import {system} from '@workday/canvas-tokens-web';
|
|
@@ -484,12 +489,12 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
484
489
|
|
|
485
490
|
We've added two new variants to provide more styling flexibility:
|
|
486
491
|
|
|
487
|
-
- **`borderless`**: Use this variant when placing cards on colored backgrounds where
|
|
488
|
-
|
|
492
|
+
- **`borderless`**: Use this variant when placing cards on colored backgrounds where it needs to
|
|
493
|
+
blend seamlessly without borders or shadows.
|
|
489
494
|
- **`filled`**: Use this variant when you need a card with a grayish background to create visual
|
|
490
495
|
separation from the page background.
|
|
491
496
|
|
|
492
|
-
The `variant` prop is optional
|
|
497
|
+
The `variant` prop is optional. If no variant is specified, the card will use the default styling.
|
|
493
498
|
|
|
494
499
|
```tsx
|
|
495
500
|
// Default card (no variant prop needed) with a border and no box shadow
|
|
@@ -511,7 +516,7 @@ The `variant` prop is optional - if no variant is specified, the card will use t
|
|
|
511
516
|
</Card>
|
|
512
517
|
```
|
|
513
518
|
|
|
514
|
-
####
|
|
519
|
+
#### Replaced Margins with Gap
|
|
515
520
|
|
|
516
521
|
We've replaced the individual margins on `Card.Heading` and `Card.Body` with `gap`. The card now
|
|
517
522
|
uses `display: flex` with `flex-direction: column` by default, and the `gap` prop provides
|
|
@@ -551,6 +556,7 @@ emphasis for the badge.
|
|
|
551
556
|
```tsx
|
|
552
557
|
<CountBadge /> // Default count badge with high emphasis
|
|
553
558
|
<CountBadge variant="inverse" /> // Inverse default count badge
|
|
559
|
+
|
|
554
560
|
// New emphasis prop
|
|
555
561
|
<CountBadge emphasis="low" /> // Default count badge with low emphasis
|
|
556
562
|
<CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
|
|
@@ -561,23 +567,25 @@ emphasis for the badge.
|
|
|
561
567
|
**PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389),
|
|
562
568
|
[#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
563
569
|
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
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`.
|
|
570
578
|
|
|
571
579
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
|
|
572
580
|
|
|
573
581
|
These changes are only **visual** and should not affect the functionality of the component.
|
|
574
582
|
|
|
575
|
-
### Hyperlink and
|
|
583
|
+
### Hyperlink and External Hyperlink
|
|
576
584
|
|
|
577
585
|
**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
|
|
578
586
|
|
|
579
|
-
|
|
580
|
-
|
|
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.
|
|
581
589
|
|
|
582
590
|
**Hyperlink and ExternalHyperlink in v14**
|
|
583
591
|
|
|
@@ -588,17 +596,18 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
588
596
|
<ExternalHyperlink variant="standaloneInverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
|
|
589
597
|
```
|
|
590
598
|
|
|
591
|
-
> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where
|
|
592
|
-
>
|
|
599
|
+
> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where `HyperLink` and
|
|
600
|
+
> `ExternalHyperlink` are used outside the context of body text.
|
|
593
601
|
|
|
594
602
|
### Loading Dots
|
|
595
603
|
|
|
596
604
|
**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
|
|
597
605
|
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
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.
|
|
602
611
|
|
|
603
612
|
**After in v14**
|
|
604
613
|
|
|
@@ -612,16 +621,16 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
612
621
|
**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430),
|
|
613
622
|
[#3446](https://github.com/Workday/canvas-kit/pull/3446)
|
|
614
623
|
|
|
615
|
-
|
|
616
|
-
|
|
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.
|
|
617
626
|
|
|
618
627
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Pill.Avatar`.
|
|
619
628
|
|
|
620
|
-
|
|
621
|
-
|
|
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.
|
|
622
631
|
|
|
623
|
-
|
|
624
|
-
|
|
632
|
+
`readyOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
|
|
633
|
+
instead.
|
|
625
634
|
|
|
626
635
|
**Before in v13**
|
|
627
636
|
|
|
@@ -641,12 +650,12 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
641
650
|
</Pill>
|
|
642
651
|
```
|
|
643
652
|
|
|
644
|
-
###
|
|
653
|
+
### Search Form (Labs) 🚨
|
|
645
654
|
|
|
646
655
|
**PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
647
656
|
|
|
648
|
-
|
|
649
|
-
|
|
657
|
+
`SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only accept
|
|
658
|
+
a `string` instead of `string | string[]`.
|
|
650
659
|
|
|
651
660
|
**Before in v13**
|
|
652
661
|
|
|
@@ -688,17 +697,17 @@ const customTheme = {
|
|
|
688
697
|
/>;
|
|
689
698
|
```
|
|
690
699
|
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
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.
|
|
694
703
|
|
|
695
704
|
### Status Indicator (Preview) 🚨
|
|
696
705
|
|
|
697
|
-
**PR:** [#
|
|
706
|
+
**PR:** [#3354](https://github.com/Workday/canvas-kit/pull/3354)
|
|
698
707
|
|
|
699
708
|
Preview `StatusIndicator` is rounder and more vibrant with base emphasis (`low`).
|
|
700
709
|
|
|
701
|
-
Variant names of the preview `StatusIndicator` have been updated
|
|
710
|
+
Variant names of the preview `StatusIndicator` have been updated:
|
|
702
711
|
|
|
703
712
|
- `blue` → `primary`
|
|
704
713
|
- `green` → `success`
|
|
@@ -739,8 +748,8 @@ you use the old variant values, update to use the new ones mapped above. Use
|
|
|
739
748
|
`ToolbarDropdownButton`, `ToolbarIconButton`, `ButtonLabelIcon`, `PrimaryButton`, `SecondaryButton`,
|
|
740
749
|
and `TertiaryButton`). This is used to mirror the icon when the content direction is `rtl`. This is
|
|
741
750
|
meant to replace `useIsRTL` combined with the `shouldMirror` prop. Instead of getting the content
|
|
742
|
-
direction from JavaScript and passing to components, you can now pass `shouldMirrorInRTL={true}`
|
|
743
|
-
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`.
|
|
744
753
|
|
|
745
754
|
**Before in v13**
|
|
746
755
|
|
|
@@ -810,43 +819,38 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
|
|
|
810
819
|
|
|
811
820
|
### Combobox (Labs)
|
|
812
821
|
|
|
813
|
-
The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated
|
|
814
|
-
|
|
815
|
-
[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
|
|
816
824
|
`@workday/canvas-kit-react`.
|
|
817
825
|
|
|
818
826
|
### Radio (Main)
|
|
819
827
|
|
|
820
|
-
The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Please
|
|
821
|
-
[Radio](
|
|
822
|
-
|
|
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.
|
|
823
831
|
|
|
824
832
|
### SearchForm (Labs)
|
|
825
833
|
|
|
826
834
|
**PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
|
|
827
835
|
|
|
828
|
-
The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated
|
|
829
|
-
|
|
830
|
-
[Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in
|
|
831
|
-
`@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`.
|
|
832
838
|
|
|
833
839
|
### Segmented Control (Main)
|
|
834
840
|
|
|
835
841
|
The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
|
|
836
|
-
deprecated. Please migrate to the
|
|
837
|
-
|
|
838
|
-
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.
|
|
839
844
|
|
|
840
845
|
### Side Panel (Main)
|
|
841
846
|
|
|
842
|
-
The Side Panel component in `@workday/canvas-kit-react/side-panel`
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
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.
|
|
846
850
|
|
|
847
851
|
### Tokens
|
|
848
852
|
|
|
849
|
-
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
|
|
850
854
|
[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
|
|
851
855
|
package (`@workday/canvas-tokens-web`) for all token usage. Follow the
|
|
852
856
|
[migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
|
|
@@ -854,17 +858,17 @@ for a smoother upgrade.
|
|
|
854
858
|
|
|
855
859
|
## Removals
|
|
856
860
|
|
|
857
|
-
Removals
|
|
858
|
-
|
|
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.
|
|
859
863
|
|
|
860
864
|
### Deprecated Buttons
|
|
861
865
|
|
|
862
866
|
**PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
|
|
863
867
|
|
|
864
|
-
Long overdue, but a sign of moving forward, we
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
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.
|
|
868
872
|
|
|
869
873
|
Although unlikely, if you were using `DeprecatedButton` please use our flexible and themable buttons
|
|
870
874
|
like `PrimaryButton`, `SecondaryButton` or `TertiaryButton`.
|
|
@@ -901,9 +905,8 @@ const buttonStyles = createStyles({
|
|
|
901
905
|
|
|
902
906
|
**PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
|
|
903
907
|
|
|
904
|
-
We've removed `Menu` from `@workday/canvas-kit-preview-react
|
|
905
|
-
[Menu](
|
|
906
|
-
`@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.
|
|
907
910
|
|
|
908
911
|
### readyOnlyPillStencil and removeablePillStencil
|
|
909
912
|
|
|
@@ -914,9 +917,8 @@ package. Please use `pillStencil` instead.
|
|
|
914
917
|
|
|
915
918
|
**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
|
|
916
919
|
|
|
917
|
-
We've removed `TextArea` from `@workday/canvas-kit-preview-react
|
|
918
|
-
[TextArea](
|
|
919
|
-
`@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.
|
|
920
922
|
|
|
921
923
|
**Before in v13**
|
|
922
924
|
|
|
@@ -932,7 +934,7 @@ import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
|
932
934
|
**After in v14**
|
|
933
935
|
|
|
934
936
|
```tsx
|
|
935
|
-
import {TextArea} from '@workday/canvas-kit-
|
|
937
|
+
import {TextArea} from '@workday/canvas-kit-react/text-area';
|
|
936
938
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
937
939
|
|
|
938
940
|
<FormField>
|
|
@@ -943,13 +945,12 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
943
945
|
</FormField>;
|
|
944
946
|
```
|
|
945
947
|
|
|
946
|
-
### Text Input (
|
|
948
|
+
### Text Input (Preview)
|
|
947
949
|
|
|
948
950
|
**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
|
|
949
951
|
|
|
950
|
-
We've removed `TextInput` from `@workday/canvas-kit-preview-react
|
|
951
|
-
[TextInput](
|
|
952
|
-
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.
|
|
953
954
|
|
|
954
955
|
**Before in v13**
|
|
955
956
|
|
|
@@ -965,7 +966,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
|
965
966
|
**After in v14**
|
|
966
967
|
|
|
967
968
|
```tsx
|
|
968
|
-
import {TextArea} from '@workday/canvas-kit-
|
|
969
|
+
import {TextArea} from '@workday/canvas-kit-react/text-input';
|
|
969
970
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
970
971
|
|
|
971
972
|
<FormField>
|
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
|
}
|