@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: "See raw file" }), _jsx(SecondaryButton, { icon: downloadIcon, size: "small", onClick: handleDownload, children: "Download LLM File" })] })] }) }));
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 [v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) page for a visual reference of what's changed.**
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 contents
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 ExternalHyperlink](#hyperlink-and-external-hyperlink)
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)](#searchform-)
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 provide a **LLM migration mapping file** (`llm-canvas-kit-upgrade-guide-v14.txt`) specifically designed for
68
- use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or similar tools). This
69
- file is not intended for direct human reference or team documentation, but rather as structured
70
- input for LLMs to automate and assist with your token migration process.
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 review changes to be sure they are correct using our
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 as txt**: Save the file locally to upload or paste into your LLM/code assistant
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
- rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
86
- filenames="llm-canvas-kit-upgrade-guide-v14.txt"
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
- [AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
97
- prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
98
- updates, which allows you to focus on changes that need your attention. **We highly recommend you
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 v8 of Canvas Kit,
105
- you'll need to run the v9 codemod before you run v10 and so on.
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 (for example, use `red` instead of `cinnamon`, `blue`
154
- instead of `blueberry`, and `green` instead of `greenApple`). We strongly recommend upgrading to
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 that teams can upgrade when they can.
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 should be backwards compatible with older versions of Canvas Kit.
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 are still using our old tokens from (`@workday/canvas-kit-react/tokens`): Migrate from
167
- `@workday/canvas-kit-react/tokens` to `@workday/canvas-tokens-web` v3:
168
- [Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs)
169
- - [v2 to v3 Migration Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs)
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 are using the error type either from our `Common` package or the one exposed from the
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 [Canvas Kit Theming Guide](/get-started/for-developers/theming/overview/).
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
- [#3394](https://github.com/Workday/canvas-kit/pull/3394)
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 [cascade barrier](/get-started/for-developers/theming/overview/#what-is-a-cascade-barrier), which redefined brand CSS variables under a class and created a higher specificity. This made it difficult to override brand tokens in certain scenarios. v14 removes that barrier.
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
- **Before in v13** In v13, the `useTheme` hook would call `createCanvasTheme` which generated a
268
- palette given a `main` color via `chroma.js`.
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** We use `oklch` to generate the palette colors. The color shifting will be
277
- different. If you want more control over the colors, we suggest providing the full palette object.
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 in Main
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` stays the same. This prop is optional and will be used to display an image `Avatar`.
350
- - `variant` defines the color of the `Avatar`. The default is `blue` but you can choose one of the
351
- following colors:
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 in Main**
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 in Preview**
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
- The following components have been updated (**see [v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) for a visual reference of the updates**):
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
- #### TertiaryButton 🚨
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, follow
442
- [this guide](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles).
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 directions and provide better
449
- visual hierarchy and more flexible styling options. The following changes have been made:
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
- #### Default Card No Longer Has a Box Shadow
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** Only do this if you need a shadow. Otherwise, adhere to the default styling.
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 you want the
483
- card to blend seamlessly without borders or shadows.
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 - if no variant is specified, the card will use the default styling.
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
- #### Gap Instead of Margins
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
- - `<Expandable.Target>` hover state has been updated to use `system.color.bg.alt.soft` instead of
560
- `system.color.bg.alt.default` to match our new brand directions.
561
- - The `focus` state has been updated to use `system.color.border.primary.default` to ensure the same
562
- focus state color across all components.
563
- - `Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change
564
- requires that you update the `altText` prop to `name`.
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 ExternalHyperlink
583
+ ### Hyperlink and External Hyperlink
571
584
 
572
585
  **PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
573
586
 
574
- - `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
575
- removes the underline text decoration for use outside the context of body text.
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 the
587
- > `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
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
- - We've updated the colors to match our brand refresh. The default color changes from
594
- `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
595
- - `LoadingDots` now has an `inverse` variant. Use this variant when the Loading Dots are on a dark
596
- background or image.
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
- - `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
611
- provide a value for the `name` prop.
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
- - The `Pill` component no longer supports `'default'` as a value for the `variant` prop. If the
616
- `variant` prop is not provided, the component will use its default styling.
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
- - `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling cleanup.
619
- Please use `pillStencil` instead.
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
- ### SearchForm 🚨
653
+ ### Search Form (Labs) 🚨
640
654
 
641
655
  **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
642
656
 
643
- - `SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only
644
- accept a `string` instead of `string | string[]`.
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
- - `SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`.
687
- This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
688
- or `2` to the `searchTheme` prop.
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:** [#3287](https://github.com/Workday/canvas-kit/pull/3287)
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 by the following mapping:
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}` to
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 and will be
809
- removed in a future major release. Please migrate to the
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 use the new
816
- [Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio--docs) component
817
- from the same package, which offers improved accessibility and API consistency.
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 and will be
824
- removed in a future major release. Please migrate to the new
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 new
832
- [Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-segmented-control--docs)
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` is now deprecated and will be
838
- removed in a future release. Please use the new
839
- [Side Panel](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) for enhanced
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` are now deprecated. Please use the new
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 are deletions from our codebase and you can no longer consume this component. We've either
853
- promoted or replaced a component or utility.
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 are removing our `DeprecatedButton`. Our design
860
- system supported this for quite some time, but with the advancement in theming, our components API
861
- and our flexibility, it is time for us to finally remove this component. This component has served
862
- as a reminder of how far we've come and we're thankful for this change.
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` package. Please use
900
- [Menu](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs) from
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` package. Please use
913
- [TextArea](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) from
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-preview-react/text-area';
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 (preview)
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` package. Please use
946
- [TextInput](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs)
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-preview-react/text-input';
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
- rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.txt"
45
- filenames="llm-token-migration-14.0.0.txt"
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
@@ -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}>See raw file</ExternalHyperlink>
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.1257-next.0",
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.1257-next.0",
49
- "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1257-next.0",
50
- "@workday/canvas-kit-react": "^14.0.0-alpha.1257-next.0",
51
- "@workday/canvas-kit-styling": "^14.0.0-alpha.1257-next.0",
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": "4638acfc42f1ba3f4b2cfe455750dc0916e33d3c"
64
+ "gitHead": "d7bffdf36b9f6deb90a87731fcb4a67ba3a532da"
65
65
  }