@workday/canvas-kit-docs 11.0.0-alpha.797-next.0 → 11.0.0-alpha.801-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.
Files changed (4) hide show
  1. package/dist/es6/lib/docs.js +2821 -441
  2. package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +404 -286
  3. package/dist/mdx/preview-react/form-field/examples/Custom.tsx +2 -4
  4. package/package.json +6 -6
package/dist/mdx/11.0-UPGRADE-GUIDE.mdx CHANGED
@@ -1,6 +1,8 @@
1
1
  import {Table} from '@workday/canvas-kit-react/table';
2
- import {base, brand} from '@workday/canvas-tokens-web';
2
+ import {base, brand, system} from '@workday/canvas-tokens-web';
3
+ import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
3
4
  import {cssVar} from '@workday/canvas-kit-styling';
5
+ import {Box} from '@workday/canvas-kit-react/layout';
4
6
 
5
7
 
6
8
  # Canvas Kit 11.0 Upgrade Guide
@@ -9,37 +11,50 @@ This guide contains an overview of the changes in Canvas Kit v11. Please
9
11
  [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
10
12
  any questions.
11
13
 
14
+ ## Why You Should Upgrade
15
+
16
+ Canvas Kit v11 is transitioning into a
17
+ [new way of styling](https://github.com/Workday/canvas-kit/discussions/2265). Theming and building an in
18
+ sync Canvas Kit CSS has been at the top of our minds. We've started using our new
19
+ [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
20
+ package to take advantage of
21
+ [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and
22
+ provide semantic tokens that can translate to theming components.
23
+
24
+ A note to the reader:
25
+
26
+ - While we still support our old tokens from `@workday/canvas-kit-react/tokens` we encourage
27
+ consumers to start using our new tokens from `@workday/canvas-tokens-web`. You can find more info
28
+ in our [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
29
+ - In this release, we've introduced a
30
+ [new styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
31
+ This shouldn't effect the way you currently style your components. Because we're moving away from
32
+ Emotion, support for style props will eventually be removed, however, this API provide backwards
33
+ compatability. If you want to slowly move off of Emotion as well, you can start styling components
34
+ via the `cs` prop or our new styling utilities.
35
+
36
+ ## Table of contents
37
+
12
38
  - [Codemod](#codemod)
13
- - [Component Promotions](#component-promotions)
14
- - [Table](#table)
15
39
  - [Deprecations](#deprecations)
16
40
  - [Form Field (Main)](#form-field-main)
17
41
  - [Label Text](#label-text)
18
42
  - [Text Area (Preview)](#text-area-preview)
19
43
  - [Text Input (Preview)](#text-input-preview)
20
44
  - [Removals](#removals)
21
- - [Status Indicator model](#status-indicator-model)
22
- - [statusIndicatorColors](#statusIndicatorColors)
23
- - [useStatusIndicator](#useStatusIndicator)
24
- - [useStatusIndicatorIcon](#useStatusIndicatorIcon)
45
+ - [Status Indicator (Preview) Utilities](#status-indicator-preview-utilities)
25
46
  - [Component Style Updates](#component-style-updates)
26
47
  - [Component Updates](#component-updates)
27
- - [Buttons](#buttons)
28
- - [Card](#card)
29
- - [Checkbox](#checkbox)
30
- - [Combobox](#combobox)
31
- - [Count Badge](#count-badge)
48
+ - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
49
+ - [CountBadge](#count-badge)
32
50
  - [Form Field Preview](#form-field-preview)
33
51
  - [Icons](#icons)
34
- - [Loading Dots](#loading-dots)
35
- - [Radio (Preview)](#radio-preview)
36
- - [Select](#select)
37
52
  - [Status Indicator (Preview)](#status-indicator-preview)
38
- - [Switch](#switch)
39
- - [Table (Preview)](#table-preview)
53
+ - [Table](#table)
40
54
  - [Text](#text)
41
55
  - [Style Utility Updates](#style-utility-updates)
42
56
  - [createStencil](#createstencil)
57
+ - [Troubleshooting](#troubleshooting)
43
58
  - [Glossary](#glossary)
44
59
  - [Main](#main)
45
60
  - [Preview](#preview)
@@ -60,8 +75,8 @@ use the codemod for these reasons.**
60
75
  If you're new to running codemods or if it's been a minute since you've used one, there are a few
61
76
  things you'll want to keep in mind.
62
77
 
63
- - Our codemods are meant to be run sequentially. For example, if you're using v7 of Canvas Kit,
64
- you'll need to run the v8 and v9 codemod before you run v11.
78
+ - Our codemods are meant to be run sequentially. For example, if you're using v8 of Canvas Kit,
79
+ you'll need to run the v9 and v10 codemod before you run v11.
65
80
  - The codemod will update your code to be compatible with the specified version, but it will **not**
66
81
  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
67
82
  dependencies on your own.
@@ -79,10 +94,10 @@ our team. We'd be very happy to walk you through the process to set you up for s
79
94
 
80
95
  ### Instructions
81
96
 
82
- The easiest way to run our codemod is to use `npx`.
97
+ The easiest way to run our codemod is to use `npx` in your terminal.
83
98
 
84
99
  ```sh
85
- > npx @workday/canvas-kit-codemod v11 [path]
100
+ npx @workday/canvas-kit-codemod v11 [path]
86
101
  ```
87
102
 
88
103
  Be sure to provide specific directories that need to be updated via the `[path]` argument. This
@@ -96,79 +111,15 @@ codemod package as a dev dependency, run it with `yarn`, and then remove the pac
96
111
  finished.
97
112
 
98
113
  ```sh
99
- > yarn add @workday/canvas-kit-codemod --dev
100
- > yarn canvas-kit-codemod v11 [path]
101
- > yarn remove @workday/canvas-kit-codemod
102
- ```
103
-
104
- > The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to manually edit
105
- > other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter after executing
106
- > the codemod, as its resulting formatting (spacing, quotes, etc.) may not match your project
107
- > conventions.
108
-
109
- ## Component Promotions
110
-
111
- ### Table
112
-
113
- **PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
114
-
115
- We've promoted the `Table` compound component in [Preview](#preview) to [Main](#main). This replaces
116
- the existing `Table` component with a compound component and will consist of a new compound
117
- component API.
118
-
119
- > `rowState` prop is no longer a part of the `Table` component.
120
-
121
- In v10, the `Table` component in [Main](#main) only exposed a `Table` and `TableRow` component to
122
- build tables.
123
-
124
- In v11, `Table` now exposes every subcomponent of a semantic HTML
125
- [Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it
126
- provides more flexibility for customization.
127
-
128
- See below for examples of the differences between the v10 `Table` and the v11 `Table` compound
129
- component.
130
-
131
- v10:
132
-
133
- ```tsx
134
- <Table>
135
- <thead>
136
- <TableRow header={true}>
137
- <th>Header Text</th>
138
- </TableRow>
139
- </thead>
140
- <tbody>
141
- <TableRow>
142
- <td>Cell Text</td>
143
- </TableRow>
144
- </tbody>
145
- </Table>
146
- ```
147
-
148
- v11:
149
-
150
- ```tsx
151
- <Table>
152
- <Table.Head>
153
- <Table.Row>
154
- <Table.Header>Header Text</Table.Header>
155
- </Table.Row>
156
- </Table.Head>
157
- <Table.Body>
158
- <Table.Row>
159
- <Table.Cell>Cell Text</Table.Cell>
160
- </Table.Row>
161
- </Table.Body>
162
- </Table>
114
+ yarn add @workday/canvas-kit-codemod --dev
115
+ yarn canvas-kit-codemod v11 [path]
116
+ yarn remove @workday/canvas-kit-codemod
163
117
  ```
164
118
 
165
- Please refer to the
166
- [Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic)
167
- for how to implement new tables.
168
-
169
- > **NOTE:** If you were using the [Preview](#preview) `Table` compound component, then you will need
170
- > to update your import from `"@workday/canvas-kit-preview-react/table"` to
171
- > `"@workday/canvas-kit-react/table"`.
119
+ > **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
120
+ > manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
121
+ > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
122
+ > your project conventions.
172
123
 
173
124
  ## Deprecations
174
125
 
@@ -180,10 +131,9 @@ deprecated code is removed.
180
131
 
181
132
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
182
133
 
183
- We've deprecated `FormField` from [Main](#main) in favor of our compound component `FormField` in
184
- [Preview](#preview). Please use
185
- [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
186
- instead.
134
+ We've deprecated `FormField` in [Main](#main). Please use
135
+ [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
136
+ [Preivew](#preview) instead.
187
137
 
188
138
  ---
189
139
 
@@ -191,12 +141,30 @@ instead.
191
141
 
192
142
  **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
193
143
 
194
- We've deprecated `LabelText` from [Main](#main) in favor of our compound component `FormField.Label`
195
- in [Preview](#preview). Please use
144
+ We've deprecated `LabelText` in [Main](#main). Please use
196
145
  [`FormField.Label`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
197
- instead.
146
+ in [Preview](#preview) in context of a `FormField` instead.
147
+
148
+ ```tsx
149
+ //v10
150
+ import {LabelText} from '@workday/canvas-kit-react/text';
151
+
152
+ <form>
153
+ <LabelText>Pizza</LabelText>
154
+ <input type="text" />
155
+ </form>;
156
+
157
+ //v11
158
+ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
159
+ import {TextInput} from '@workday/canvas-kit-react/text-input';
160
+
161
+ <FormField>
162
+ <FormField.Label>First Name</FormField.Label>
163
+ <FormField.Input as={TextInput} value={value} onChange={e => console.log(e)} />
164
+ </FormField>;
165
+ ```
198
166
 
199
- If you still want to use a `label` element outside of the context of a form, you can use `Text`
167
+ If you still want to use a `label` element outside of the context of a form, you can use our `Text` component
200
168
  instead.
201
169
 
202
170
  ---
@@ -205,10 +173,9 @@ instead.
205
173
 
206
174
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
207
175
 
208
- We've deprecated `TextArea` from [Preview](#preview) in favor of our compound component `FormField`
209
- in [Preview](#preview). Please use
210
- [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
211
- instead.
176
+ We've deprecated `TextArea` from [Preview](#preview). Please use
177
+ [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
178
+ [Preview](#preview) with `TextArea` in [Main](#main) instead.
212
179
 
213
180
  ---
214
181
 
@@ -216,42 +183,56 @@ instead.
216
183
 
217
184
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
218
185
 
219
- We've deprecated `TextInput` from [Preview](#preview) in favor of our compound component `FormField`
220
- in [Preview](#preview). Please use
221
- [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
222
- instead.
186
+ We've deprecated `TextInput` from [Preview](#preview). Please use
187
+ [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
188
+ [Preview](#preview) with `TextInput` in [Main](#main) instead.
223
189
 
224
- ---
190
+ The following model hooks have also been deprecated:
191
+
192
+ - `useTextInputModel`
193
+ - `useTextInputField`
225
194
 
226
195
  ## Removals
227
196
 
228
- ### Status Indicator model
197
+ ### Status Indicator (Preview) Utilities
229
198
 
230
199
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2700)
231
200
 
232
- As part of the refactor, we've removed the following exports that were primarily used to style the
233
- component:
201
+ As part of the styling refactor, we've removed the following exports that were primarily used to
202
+ style the component:
234
203
 
235
204
  - `useStatusIndicatorModel`
236
205
  - `useStatusIndicator`
237
206
  - `statusIndicatorColors`
238
207
  - `useStatusIndicatorIcon`.
239
208
 
240
- Since there was no usage of these by our consumers, there should be no breaking changes.
209
+ **There should be no developer impact.**
241
210
 
242
211
  ---
243
212
 
244
213
  ## Component Style Updates
245
214
 
246
- These changes are to address discrepancies that were found between Canvas Kit Design Specs and
247
- Canvas Kit.
248
-
249
- We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`,
250
- `TertiaryButton`, `DeleteButton`, `TextInput` and `TextArea`.
215
+ <StatusIndicator variant="red" emphasis="low">
216
+ <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
217
+ </StatusIndicator>
251
218
 
252
219
  **PR:** [#2485](https://github.com/Workday/canvas-kit/pull/2485)
253
220
 
254
- See below:
221
+ The following changes address visual discrepancies between our design spec files and code. These
222
+ changes **should not** impact the layout or behavior of a component.
223
+
224
+ Components affected:
225
+
226
+ - `Checkbox`
227
+ - `DeleteButton`
228
+ - `Radio`
229
+ - `SecondaryButton`
230
+ - `StatusIndicator`
231
+ - `Switch`
232
+ - `Table`
233
+ - `TertiaryButton`
234
+ - `TextArea`
235
+ - `TextInput`
255
236
 
256
237
  <Table>
257
238
  <Table.Head>
@@ -270,8 +251,8 @@ See below:
270
251
  <Table.Cell />
271
252
  <Table.Cell>disabled</Table.Cell>
272
253
  <Table.Cell>borderColor</Table.Cell>
273
- <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
274
- <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
254
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
255
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
275
256
  licorice100
276
257
  </Table.Cell>
277
258
  </Table.Row>
@@ -280,8 +261,8 @@ See below:
280
261
  <Table.Cell>Inverse</Table.Cell>
281
262
  <Table.Cell>disabled</Table.Cell>
282
263
  <Table.Cell>borderColor</Table.Cell>
283
- <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
284
- <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
264
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
265
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
285
266
  licorice100
286
267
  </Table.Cell>
287
268
  </Table.Row>
@@ -290,8 +271,8 @@ See below:
290
271
  <Table.Cell />
291
272
  <Table.Cell>disabled</Table.Cell>
292
273
  <Table.Cell>backgroundColor</Table.Cell>
293
- <Table.Cell backgroundColor={cssVar(brand.error.light)}>error.light</Table.Cell>
294
- <Table.Cell backgroundColor="rgba(222,46,33,0.4)">error.base</Table.Cell>
274
+ <Table.Cell cs={{backgroundColor: cssVar(brand.error.light)}}>error.light</Table.Cell>
275
+ <Table.Cell cs={{backgroundColor: 'rgba(222,46,33,0.4)'}}>error.base</Table.Cell>
295
276
  </Table.Row>
296
277
  <Table.Row>
297
278
  <Table.Cell>DeleteButton</Table.Cell>
@@ -306,8 +287,8 @@ See below:
306
287
  <Table.Cell />
307
288
  <Table.Cell>disabled</Table.Cell>
308
289
  <Table.Cell>borderColor</Table.Cell>
309
- <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
310
- <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
290
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
291
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
311
292
  licorice100
312
293
  </Table.Cell>
313
294
  </Table.Row>
@@ -316,10 +297,10 @@ See below:
316
297
  <Table.Cell>Inverse</Table.Cell>
317
298
  <Table.Cell>focus</Table.Cell>
318
299
  <Table.Cell>border</Table.Cell>
319
- <Table.Cell color="blackPepper400" backgroundColor="soap400">
300
+ <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: cssVar(base.soap400)}}>
320
301
  soap400
321
302
  </Table.Cell>
322
- <Table.Cell color="blackPepper400" backgroundColor="transparent">
303
+ <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: 'transparent'}}>
323
304
  transparent
324
305
  </Table.Cell>
325
306
  </Table.Row>
@@ -328,10 +309,10 @@ See below:
328
309
  <Table.Cell>Inverse</Table.Cell>
329
310
  <Table.Cell>focus</Table.Cell>
330
311
  <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
331
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
312
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
332
313
  blackPepper500
333
314
  </Table.Cell>
334
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
315
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
335
316
  blackPepper400
336
317
  </Table.Cell>
337
318
  </Table.Row>
@@ -340,10 +321,10 @@ See below:
340
321
  <Table.Cell>Inverse</Table.Cell>
341
322
  <Table.Cell>focus</Table.Cell>
342
323
  <Table.Cell>color</Table.Cell>
343
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
324
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
344
325
  blackPepper500
345
326
  </Table.Cell>
346
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
327
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
347
328
  blackPepper400
348
329
  </Table.Cell>
349
330
  </Table.Row>
@@ -352,46 +333,79 @@ See below:
352
333
  <Table.Cell>Inverse</Table.Cell>
353
334
  <Table.Cell>focus</Table.Cell>
354
335
  <Table.Cell>fill</Table.Cell>
355
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
336
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
356
337
  blackPepper500
357
338
  </Table.Cell>
358
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
339
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
359
340
  blackPepper400
360
341
  </Table.Cell>
361
342
  </Table.Row>
343
+ <Table.Row>
344
+ <Table.Cell>StatusIndicator (Preview)</Table.Cell>
345
+ <Table.Cell>transparent</Table.Cell>
346
+ <Table.Cell></Table.Cell>
347
+ <Table.Cell>backgroundColor</Table.Cell>
348
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
349
+ blackPepper600
350
+ </Table.Cell>
351
+ <Table.Cell cs={{backgroundColor: cssVar(system.color.bg.translucent), color: cssVar(base.frenchVanilla100)}}>
352
+ rgba(0,0,0,.84)
353
+ </Table.Cell>
354
+ </Table.Row>
355
+ <Table.Row>
356
+ <Table.Cell>StatusIndicator (Preview)</Table.Cell>
357
+ <Table.Cell>transparent</Table.Cell>
358
+ <Table.Cell></Table.Cell>
359
+ <Table.Cell>opacity</Table.Cell>
360
+ <Table.Cell >0.85</Table.Cell>
361
+ <Table.Cell>
362
+ Removed
363
+ </Table.Cell>
364
+ </Table.Row>
365
+ <Table.Row>
366
+ <Table.Cell>Switch</Table.Cell>
367
+ <Table.Cell>Checked and Disabled</Table.Cell>
368
+ <Table.Cell></Table.Cell>
369
+ <Table.Cell>backgroundColor, opacity</Table.Cell>
370
+ <Table.Cell cs={{backgroundColor: cssVar(base.blueberry200)}}>blueberry200</Table.Cell>
371
+ <Table.Cell cs={{backgroundColor: 'rgba(8,117,225,.3)'}}>
372
+ backgroundColor: brand.primary.base
373
+ opacity: system.opacity.disabled
374
+ </Table.Cell>
375
+ </Table.Row>
362
376
  <Table.Row>
363
377
  <Table.Cell>Table (Header)</Table.Cell>
364
378
  <Table.Cell />
365
379
  <Table.Cell />
366
380
  <Table.Cell>borderColor</Table.Cell>
367
- <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
368
- <Table.Cell backgroundColor="soap500">soap500</Table.Cell>
381
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
382
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap500)}}>soap500</Table.Cell>
369
383
  </Table.Row>
370
384
  <Table.Row>
371
385
  <Table.Cell>TertiaryButton</Table.Cell>
372
386
  <Table.Cell />
373
387
  <Table.Cell>hover</Table.Cell>
374
388
  <Table.Cell>backgroundColor</Table.Cell>
375
- <Table.Cell backgroundColor="soap200">soap200</Table.Cell>
376
- <Table.Cell backgroundColor="soap300">soap300</Table.Cell>
389
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap200)}}>soap200</Table.Cell>
390
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
377
391
  </Table.Row>
378
392
  <Table.Row>
379
393
  <Table.Cell>TertiaryButton</Table.Cell>
380
394
  <Table.Cell />
381
395
  <Table.Cell>active</Table.Cell>
382
396
  <Table.Cell>backgroundColor</Table.Cell>
383
- <Table.Cell backgroundColor="soap300">soap300</Table.Cell>
384
- <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
397
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
398
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
385
399
  </Table.Row>
386
400
  <Table.Row>
387
401
  <Table.Cell>TertiaryButton</Table.Cell>
388
402
  <Table.Cell />
389
403
  <Table.Cell>active</Table.Cell>
390
404
  <Table.Cell>color</Table.Cell>
391
- <Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.dark)}>
405
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.dark)}}>
392
406
  primary.dark
393
407
  </Table.Cell>
394
- <Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.darkest)}>
408
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.darkest)}}>
395
409
  primary.darkest
396
410
  </Table.Cell>
397
411
  </Table.Row>
@@ -401,17 +415,17 @@ See below:
401
415
  <Table.Cell>disabled</Table.Cell>
402
416
  <Table.Cell>borderColor</Table.Cell>
403
417
  <Table.Cell backgroundColor="frenchVanilla100">frenchVanilla100</Table.Cell>
404
- <Table.Cell backgroundColor="transparent">transparent</Table.Cell>
418
+ <Table.Cell cs={{backgroundColor: 'transparent'}}>transparent</Table.Cell>
405
419
  </Table.Row>
406
420
  <Table.Row>
407
421
  <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
408
422
  <Table.Cell />
409
423
  <Table.Cell>focus</Table.Cell>
410
424
  <Table.Cell>fill</Table.Cell>
411
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
425
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
412
426
  blackPepper500
413
427
  </Table.Cell>
414
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
428
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
415
429
  blackPepper400
416
430
  </Table.Cell>
417
431
  </Table.Row>
@@ -420,10 +434,10 @@ See below:
420
434
  <Table.Cell />
421
435
  <Table.Cell>hover</Table.Cell>
422
436
  <Table.Cell>fill</Table.Cell>
423
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
437
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
424
438
  blackPepper500
425
439
  </Table.Cell>
426
- <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
440
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
427
441
  blackPepper400
428
442
  </Table.Cell>
429
443
  </Table.Row>
@@ -432,8 +446,8 @@ See below:
432
446
  <Table.Cell />
433
447
  <Table.Cell>disabled</Table.Cell>
434
448
  <Table.Cell>borderColor</Table.Cell>
435
- <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
436
- <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
449
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
450
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
437
451
  licorice100
438
452
  </Table.Cell>
439
453
  </Table.Row>
@@ -442,70 +456,82 @@ See below:
442
456
  <Table.Cell />
443
457
  <Table.Cell>disabled</Table.Cell>
444
458
  <Table.Cell>borderColor</Table.Cell>
445
- <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
446
- <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
459
+ <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
460
+ <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
447
461
  licorice100
448
462
  </Table.Cell>
449
463
  </Table.Row>
464
+
450
465
  </Table.Body>
451
466
  </Table>
452
467
 
453
- ## Component Updates
454
-
455
- ### Buttons
456
-
457
- **PR:** [#2666](https://github.com/Workday/canvas-kit/pull/2666)
458
-
459
- `PrimaryButton`, `SecondaryButton`, `TertiaryButton` and `DeleteButton` have been refactored to use
460
- our
461
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
462
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
463
- components now support the `cs` prop, but otherwise the API has not changed.
464
-
465
- > #### Visual Breaking Change
466
- >
467
- > The `border` color for `SecondaryButton` on the `focus` state is now `transparent` and may cause a
468
- > small visual difference in visual tests.
468
+ > **Note:** If you use a visual regression tool, you'll need to update your tests to match the new
469
+ > visual changes.
469
470
 
470
- ### Card
471
-
472
- **PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
473
-
474
- `Card` and its subcomponents have been refactored to use our new
475
- [styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
476
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). `Card`
477
- no longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
478
-
479
- ### Checkbox
480
-
481
- **PR:** [#2542](https://github.com/Workday/canvas-kit/pull/2542)
471
+ ## Component Updates
482
472
 
483
- `Checkbox` now uses
473
+ ### Styling API and CSS Tokens
474
+
475
+ **PRs:** [#2666](https://github.com/Workday/canvas-kit/pull/2666),
476
+ [#2471](https://github.com/Workday/canvas-kit/pull/2471),
477
+ [#2542](https://github.com/Workday/canvas-kit/pull/2542),
478
+ [#2570](https://github.com/Workday/canvas-kit/pull/2570),
479
+ [#2442](https://github.com/Workday/canvas-kit/pull/2442),
480
+ [#2472](https://github.com/Workday/canvas-kit/pull/2472),
481
+ [#2685](https://github.com/Workday/canvas-kit/pull/2685),
482
+ [#2615](https://github.com/Workday/canvas-kit/pull/2615),
483
+ [#2699](https://github.com/Workday/canvas-kit/pull/2699),
484
+ [#2546](https://github.com/Workday/canvas-kit/pull/2546),
485
+ [#2570](https://github.com/Workday/canvas-kit/pull/2570),
486
+ [#2620](https://github.com/Workday/canvas-kit/pull/2620),
487
+ [#2583](https://github.com/Workday/canvas-kit/pull/2583),
488
+ [#2567](https://github.com/Workday/canvas-kit/pull/2567),
489
+ [#2455](https://github.com/Workday/canvas-kit/pull/2455),
490
+ [#2709](https://github.com/Workday/canvas-kit/pull/2709)
491
+
492
+ Several components have been refactored to use our new
484
493
  [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
485
- our
486
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
487
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
488
- identically as it did in previous versions.
489
-
490
- ### Combobox
491
-
492
- **PR:** [#2570](https://github.com/Workday/canvas-kit/pull/2570)
493
-
494
- `Combobox` has been refactored to use our
495
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
496
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
497
- component now supports the `cs` prop, but otherwise the API has not changed.
494
+ [styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
495
+ The React interface **has not changed**, but CSS variables are now used for dynamic properties.
496
+
497
+ The following components are affected:
498
+
499
+ - `AccentIcon`
500
+ - `AppletIcon`
501
+ - `Card`
502
+ - `CheckBox`
503
+ - `Combobox`
504
+ - `CountBadge`
505
+ - `FormField (Preview)`
506
+ - `DeleteButton`
507
+ - `Graphic`
508
+ - `LoadingDots`
509
+ - `PrimaryButton`
510
+ - `SecondaryButton`
511
+ - `Radio (Preview)`
512
+ - `Select`
513
+ - `StatusIndicator`
514
+ - `Svg`
515
+ - `Switch`
516
+ - `SystemIconCircle`
517
+ - `SystemIcon`
518
+ - `Table`
519
+ - `TertiaryButton`
520
+ - `Text`
521
+
522
+ > **Note:** These components also support our new `cs` prop for styling. Learn more about styling
523
+ > with `cs` in our
524
+ > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
498
525
 
499
526
  ### Count Badge
500
527
 
501
- **PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
528
+ <StatusIndicator variant="red" emphasis="low">
529
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
530
+ </StatusIndicator>
502
531
 
503
- `CountBadge` now uses `createComponent`,
504
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs), and
505
- our new
506
- [styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
507
- The component API has not been changed, and it should behave identically as it did in previous
508
- versions.
532
+ **PR:** [#2709](https://github.com/Workday/canvas-kit/pull/2709)
533
+
534
+ - `default` has been removed from the `variant` type and is now the default for styles.
509
535
 
510
536
  We also removed the `default` variant and consolidated those styles into the badge's base styles.
511
537
  This will not be a breaking change for most users. However, if you have a `CountBadge` with an
@@ -522,28 +548,57 @@ variant prop.
522
548
 
523
549
  ### Form Field (Preview)
524
550
 
551
+ <div style={{display: 'inline-flex', gap: '.5rem'}}>
552
+ <StatusIndicator variant="red" emphasis="low">
553
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
554
+ </StatusIndicator>
555
+ <StatusIndicator variant="green" emphasis="low">
556
+ <StatusIndicator.Label>🤖 Codemod Available</StatusIndicator.Label>
557
+ </StatusIndicator>
558
+ </div>
559
+
525
560
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
561
+ [#2746](https://github.com/Workday/canvas-kit/pull/274)
526
562
 
527
563
  `FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
528
564
  version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
529
565
  are applied to `FormField` in [Preview](#preview) in order to match the API from the `FormField` in
530
566
  [Main](#main).
531
567
 
532
- - `hasError` prop on the `FormField` has been renamed to `error`.
568
+ - `hasError` prop has been renamed to `error`. **This is a breaking change**
533
569
  - `error` accepts `"error" | "alert" | ""` instead of a boolean value.
534
570
  - `orientation` prop defaults to `vertical` and is no longer required.
535
- - `FormField.Input` can be used by any `input`.
571
+ - `FormField.Input` can be used by any of our inputs including `Select`, `TextInput`, `TextArea`,
572
+ `RadioGroup`, `Switch` and `Checkbox`.
536
573
  - `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
537
574
  does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
538
575
  `fieldset` and the `as` prop of `FormField.Label` to `legend`.
576
+ - The required asterisk is now a pseudo element. While the asterisk was never read out loud by
577
+ screen readers, Testing Library required it in the `*ByLabelText` query. `*ByRole` uses the w3c
578
+ [accessible name calculation specification](https://www.w3.org/TR/accname-1.2/), but
579
+ `*ByLabelText` uses
580
+ [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Additional
581
+ information: https://github.com/testing-library/dom-testing-library/issues/929
582
+
583
+ v10:
584
+
585
+ ```ts
586
+ screen.getByLabelText('Email*'); // Email is a required field and asterisk is included in name
587
+ screen.getByRole('textbox', {name: 'Email'}); // correctly ignores the `*`
588
+ ```
589
+
590
+ v11:
591
+
592
+ ```ts
593
+ screen.getByLabelText('Email');
594
+ screen.getByRole('textbox', {name: 'Email'});
595
+ ```
539
596
 
540
597
  ```tsx
541
598
  // v10 FormField in Preview
542
599
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
543
600
  import {TextInput} from '@workday/canvas-kit-react/text-input';
544
601
 
545
- //...
546
-
547
602
  <FormField orientation="vertical" hasError={true}>
548
603
  <FormField.Label>Password</FormField.Label>
549
604
  <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
@@ -554,8 +609,6 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
554
609
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
555
610
  import {TextInput} from '@workday/canvas-kit-react/text-input';
556
611
 
557
- //...
558
-
559
612
  <FormField error="error">
560
613
  <FormField.Label>Password</FormField.Label>
561
614
  <FormField.Container>
@@ -565,35 +618,48 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
565
618
  </FormField>;
566
619
  ```
567
620
 
568
- 🤖 The codemod will handle the change of `hasError` to `error` for you automatically.
621
+ 🤖 The codemod will handle the change of `hasError` to `error` for you automatically. You may need
622
+ to check your logic to make sure it sets the appropaite value to the prop.
623
+
624
+ > **Note:** If you use your own custom `input` you will need to handle the styling for error and
625
+ > alert states.
569
626
 
570
627
  ### Icons
571
628
 
572
- All icons components including `Svg`, `SystemIcon`, `SystemIconCircle`, `AccentIcon`, `AppletIcon`
573
- and `Graphic` now use our new
574
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
575
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
629
+ <div style={{display: 'inline-flex', gap: '.5rem'}}>
630
+ <StatusIndicator variant="red" emphasis="low">
631
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
632
+ </StatusIndicator>
633
+ <StatusIndicator variant="green" emphasis="low">
634
+ <StatusIndicator.Label>🤖 Codemod Available</StatusIndicator.Label>
635
+ </StatusIndicator>
636
+ </div>
576
637
 
577
- - Components now support the `cs` prop. -`styles` prop has been removed.
638
+ `styles` prop has been removed. If you still need to style an Icon component, please use the `cs`
639
+ prop.
578
640
 
579
- **Note: Passing a token name to a style prop will be not supported in a future major version.**
641
+ > **Note:** Passing a token name to a style prop will not be supported in a future major version.
642
+ > Please use our
643
+ > [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
644
+ > instead.
580
645
 
581
646
  ```tsx
582
647
  // This will no longer be supported in a future major version
583
- <SystemIcon color="blueberry400" .../>
648
+ <SystemIcon color="blueberry400" />
584
649
 
585
650
  // Use new tokens instead.
586
- <SystemIcon color={base.blueberry400} .../>
651
+ import {base} from '@workday/canvas-tokens-web'
652
+ <SystemIcon color={base.blueberry400} />
587
653
  ```
588
654
 
589
- 🤖 The codemod will handle the change of `styles` to `cs` for you automatically.
655
+ 🤖 The codemod will handle the change of renaming `styles` to `cs` for you automatically.
590
656
 
591
657
  #### AccentIcon
592
658
 
593
659
  - `AccentIconStyles` prop has been deprecated and will be merged with `AccentIconProps` in a future
594
660
  version.
595
661
  - `accentIconStyles` has been deprecated and will be removed in a future version as a part of
596
- implementation of stencils and new tokens. Consider to use `accentIconStencil` to get styles or
662
+ implementation of stencils and new tokens. Consider using `accentIconStencil` to get styles or
597
663
  class name.
598
664
  - `AccentIcon` supports `size` and `color` css variables, along with `size` and `color` props. Both
599
665
  ways are supported:
@@ -650,10 +716,10 @@ const MyComponent = StyledRadioButton('div')({
650
716
  - `GraphicStyles` prop has been deprecated and will be merged with `GraphicProps` in a future
651
717
  version.
652
718
  - `graphicStyles` has been deprecated and will be removed in a future version as a part of
653
- implementation of stencils and new tokens. Consider to use `graphicStencil` to get styles or class
719
+ implementation of stencils and new tokens. Consider using `graphicStencil` to get styles or class
654
720
  name.
655
- - `width` and `height` props has been deprecated and will be removed in a future version. Consider
656
- using `cs` props instead to set svg sizes.
721
+ - `width` and `height` props have been deprecated and will be removed in a future version. Consider
722
+ using `cs` props instead to set `svg` sizes.
657
723
 
658
724
  ```tsx
659
725
  // before
@@ -665,13 +731,14 @@ const MyComponent = StyledRadioButton('div')({
665
731
 
666
732
  #### Icon
667
733
 
668
- This change only impacts internal Canvas Kit code. `Icon` component has been removed and no longer
669
- used in icons. It was replaced by `Svg` and icon stencils extend `svgStencil`.
734
+ This change only impacts internal Canvas Kit code. `Icon` component has been removed and is no longer
735
+ used to build our icons. It has been replaced by our `Svg` component. Most of our icons now extend styles from `svgStencil`.
670
736
 
671
737
  #### SystemIcon
672
738
 
673
- - `SystemIconStyles` prop has been deprecated and will be merged with `SystemIconProps` in a future
674
- version.
739
+ - `SystemIconStyles` has been deprecated and will be removed in a future version as a part of
740
+ implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or class
741
+ name.
675
742
 
676
743
  - `accentHover` is deprecated and will be removed in a future version. Please use the following when
677
744
  overriding styles:
@@ -710,7 +777,7 @@ used in icons. It was replaced by `Svg` and icon stencils extend `svgStencil`.
710
777
  ```
711
778
 
712
779
  - `systemIconStyles` has been deprecated and will be removed in a future version as a part of
713
- implementation of stencils and new tokens. Consider to use `systemIconStencil` to get styles or
780
+ implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or
714
781
  class name.
715
782
 
716
783
  - `SystemIcon` supports `size`, `color`, `accentColor` and `background` css variables, along with
@@ -739,99 +806,150 @@ const MyComponent = StyledRadioButton('div')({
739
806
  </MyComponent>;
740
807
  ```
741
808
 
742
- ### Loading Dots
809
+ ### Status Indicator (Preview)
743
810
 
744
- `LoadingDots` now uses
745
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
746
- our
747
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
748
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
749
- identically as it did in previous versions.
811
+ <StatusIndicator variant="red" emphasis="low">
812
+ <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
813
+ </StatusIndicator>
750
814
 
751
- ### Radio (Preview)
815
+ **PR:** [#2620](https://github.com/Workday/canvas-kit/pull/2620)
752
816
 
753
- **PR:** [#2546](https://github.com/Workday/canvas-kit/pull/2546)
817
+ The `transparent` variant now uses `system.color.bg.translucent` which is a background color of
818
+ black with an opacity of `0.84`.
754
819
 
755
- `Radio` and `RadioGroup` now use
756
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
757
- our
758
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
759
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
760
- identically as it did in previous versions.
820
+ **There should be no developer impact and the visual changes are safe to accept**.
761
821
 
762
- ### Select
822
+ ### Switch
763
823
 
764
- **PR:** [#2570](https://github.com/Workday/canvas-kit/pull/2570)
824
+ <StatusIndicator variant="red" emphasis="low">
825
+ <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
826
+ </StatusIndicator>
765
827
 
766
- `Select` has been refactored to use our
767
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
768
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
769
- component now supports the `cs` prop, but otherwise the API has not changed. It should behave
770
- identically as it did in previous versions.
828
+ **PR:** [#2583](https://github.com/Workday/canvas-kit/pull/2583)
771
829
 
772
- ### Status Indicator (Preview)
830
+ Switch no longer uses `blueberry200` which was part of our theme object
831
+ `theme.palette.primary.light` for the background color to indicate a Switch that is checked and
832
+ disabled. Now, it uses `blueberry400` or `brand.base.primary` with an opacity of `0.4` for checked
833
+ and disabled.
773
834
 
774
- **PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620
835
+ **There should be no developer impact and the visual changes are safe to accept**.
775
836
 
776
- `StatusIndicator` now uses
777
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
778
- our
779
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
780
- The component now supports the `cs` prop, but otherwise the API has not been changed.
837
+ ### Table
781
838
 
782
- > #### Visual Breaking Change
783
- >
784
- > Opacity applied to the whole container has been removed for transparent variant and replace by
785
- > translucent color. By this change opacity has been changed from `0.85` to `0.84`, so there is
786
- > possibility of the small visual change.
839
+ **PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
787
840
 
788
- ### Switch
841
+ <StatusIndicator variant="red" emphasis="low">
842
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
843
+ </StatusIndicator>
789
844
 
790
- **PR:** [#2583](https://github.com/Workday/canvas-kit/pull/2583)
845
+ We've promoted `Table` from [Preview](#preview) to [Main](#main). It replaces the `Table` that was
846
+ previously in [Main](#main) (for reference, see
847
+ [`Table`](https://d2krrudi3mmzzw.cloudfront.net/v9/?path=/story/components-containers-table--basic)
848
+ in [Main](#main) from v9).
791
849
 
792
- `Switch` now uses
793
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
794
- our
795
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
796
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
797
- identically as it did in previous versions.
850
+ `Table` is a
851
+ [compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page)
852
+ which provides a flexible API and access to its internals via its subcomponents.
798
853
 
799
- > #### Visual Breaking change
800
- >
801
- > Switch no longer uses `theme.primary.light` as the background color for a disabled and checked
802
- > Switch. Instead, it uses `theme.primary.main` with an opacity of `0.4` to show a disabled state.
854
+ > **Note**: `rowState` prop is no longer a part of the `Table` component.
803
855
 
804
- ### Table (Preview)
856
+ In v10, the `Table` component in [Main](#main) only exposed a `Table` and `TableRow` component to
857
+ build tables.
805
858
 
806
- **PR:** [#2567](https://github.com/Workday/canvas-kit/pull/2567)
859
+ In v11, `Table` now exposes every subcomponent of a semantic HTML
860
+ [Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it
861
+ provides more flexibility for customization.
807
862
 
808
- `Table` now uses
809
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
810
- our
811
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
812
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
813
- identically as it did in previous versions.
863
+ ```tsx
864
+ // v10
865
+ import {Table, TableRow} from '@workday/canvas-kit-react/table';
866
+
867
+ <Table>
868
+ <thead>
869
+ <TableRow header={true}>
870
+ <th>Header Text</th>
871
+ </TableRow>
872
+ </thead>
873
+ <tbody>
874
+ <TableRow>
875
+ <td>Cell Text</td>
876
+ </TableRow>
877
+ </tbody>
878
+ </Table>;
879
+
880
+ // v11
881
+ import {Table} from '@workday/canvas-kit-react/table';
882
+
883
+ <Table>
884
+ <Table.Head>
885
+ <Table.Row>
886
+ <Table.Header>Header Text</Table.Header>
887
+ </Table.Row>
888
+ </Table.Head>
889
+ <Table.Body>
890
+ <Table.Row>
891
+ <Table.Cell>Cell Text</Table.Cell>
892
+ </Table.Row>
893
+ </Table.Body>
894
+ </Table>;
895
+ ```
896
+
897
+ Please refer to the
898
+ [Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic)
899
+ for how to implement new tables.
900
+
901
+ > **Note:** If you were using the [Preview](#preview) `Table` compound component, then you will need
902
+ > to update your import from `@workday/canvas-kit-preview-react/table` to
903
+ > `@workday/canvas-kit-react/table`. This change is **not** handled by the codemod.
814
904
 
815
905
  ### Text
816
906
 
817
907
  **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
818
908
 
819
- `Text` has been refactored to use our
820
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
821
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). It no
822
- longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
823
- Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
824
- they extend the `Text` component. These changes do not affect the components API.
909
+ - `Text` no longer extends the `Box` component, however, it still supports Emotion `styled` and
910
+ style props.
911
+ - Type level components: `Title`, `Heading`, `BodyText` and `Subtext` remain unchanged.
825
912
 
826
913
  ## Style Utility Updates
827
914
 
828
915
  ### `createStencil`
829
916
 
917
+ **PR:** [#2697](https://github.com/Workday/canvas-kit/pull/2697)
918
+
919
+ <StatusIndicator variant="red" emphasis="low">
920
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
921
+ </StatusIndicator>
922
+
830
923
  Stencils were updated to automatically add `box-sizing: border-box` to all stencils. If your stencil
831
924
  did not add this style already, it may change the way `width` works for the component. Our intent is
832
925
  to make all elements use border box layouts to make width calculations more predictable. This change
833
926
  may change the way your component works if you use the `width` style property.
834
927
 
928
+ > **Note:** This is only a breaking change if you were using `createStencil` to apply margin and
929
+ > padding without box-sizing. For reference, view box-sizing
930
+ > [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
931
+
932
+ ## Troubleshooting
933
+
934
+ ### My Styles Seem Broken?
935
+
936
+ Our components are reliant on our new Canvas Tokens Web package. Be sure you install
937
+ `@workday/canvas-tokens-web`. For more information, reference our
938
+ [Getting Started docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
939
+ for this package.
940
+
941
+ ### Did You Upgrade All Canvas Kit Related Packages?
942
+
943
+ In order for all the packages to work in harmony, you must upgrade all Canvas Kit packages to the same version that
944
+ you're using, including:
945
+
946
+ - `@workday/canvas-kit-react`
947
+ - `@workday/canvas-kit-preview-react`
948
+ - `@workday/canvas-kit-labs-react`
949
+ - `@workday/canvas-kit-styling`
950
+ - `@workday/canvas-kit-react-fonts`
951
+ - `@workday/canvas-kit-docs`
952
+
835
953
  ## Glossary
836
954
 
837
955
  ### Main