@workday/canvas-kit-docs 11.0.0-alpha.798-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 (3) hide show
  1. package/dist/es6/lib/docs.js +2 -2
  2. package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +385 -288
  3. package/package.json +6 -6
package/dist/es6/lib/docs.js CHANGED
@@ -30202,7 +30202,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
30202
30202
  }
30203
30203
  ],
30204
30204
  "tags": {
30205
- "deprecated": "⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
30205
+ "deprecated": "⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead."
30206
30206
  },
30207
30207
  "type": {
30208
30208
  "kind": "alias",
@@ -30448,7 +30448,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
30448
30448
  }
30449
30449
  ],
30450
30450
  "tags": {
30451
- "deprecated": "⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
30451
+ "deprecated": "⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead."
30452
30452
  },
30453
30453
  "type": {
30454
30454
  "kind": "enhancedComponent",
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';
198
151
 
199
- If you still want to use a `label` element outside of the context of a form, you can use `Text`
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
+ ```
166
+
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.
469
-
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.
468
+ > **Note:** If you use a visual regression tool, you'll need to update your tests to match the new
469
+ > visual changes.
478
470
 
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>
531
+
532
+ **PR:** [#2709](https://github.com/Workday/canvas-kit/pull/2709)
502
533
 
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.
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,18 +548,28 @@ variant prop.
522
548
 
523
549
  ### Form Field (Preview)
524
550
 
525
- **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472),
526
- [#2746](https://github.com/Workday/canvas-kit/pull/2746)
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
+
560
+ **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
561
+ [#2746](https://github.com/Workday/canvas-kit/pull/274)
527
562
 
528
563
  `FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
529
564
  version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
530
565
  are applied to `FormField` in [Preview](#preview) in order to match the API from the `FormField` in
531
566
  [Main](#main).
532
567
 
533
- - `hasError` prop on the `FormField` has been renamed to `error`.
568
+ - `hasError` prop has been renamed to `error`. **This is a breaking change**
534
569
  - `error` accepts `"error" | "alert" | ""` instead of a boolean value.
535
570
  - `orientation` prop defaults to `vertical` and is no longer required.
536
- - `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`.
537
573
  - `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
538
574
  does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
539
575
  `fieldset` and the `as` prop of `FormField.Label` to `legend`.
@@ -563,8 +599,6 @@ are applied to `FormField` in [Preview](#preview) in order to match the API from
563
599
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
564
600
  import {TextInput} from '@workday/canvas-kit-react/text-input';
565
601
 
566
- //...
567
-
568
602
  <FormField orientation="vertical" hasError={true}>
569
603
  <FormField.Label>Password</FormField.Label>
570
604
  <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
@@ -575,8 +609,6 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
575
609
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
576
610
  import {TextInput} from '@workday/canvas-kit-react/text-input';
577
611
 
578
- //...
579
-
580
612
  <FormField error="error">
581
613
  <FormField.Label>Password</FormField.Label>
582
614
  <FormField.Container>
@@ -586,35 +618,48 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
586
618
  </FormField>;
587
619
  ```
588
620
 
589
- 🤖 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.
590
626
 
591
627
  ### Icons
592
628
 
593
- All icons components including `Svg`, `SystemIcon`, `SystemIconCircle`, `AccentIcon`, `AppletIcon`
594
- and `Graphic` now use our new
595
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
596
- [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>
597
637
 
598
- - 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.
599
640
 
600
- **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.
601
645
 
602
646
  ```tsx
603
647
  // This will no longer be supported in a future major version
604
- <SystemIcon color="blueberry400" .../>
648
+ <SystemIcon color="blueberry400" />
605
649
 
606
650
  // Use new tokens instead.
607
- <SystemIcon color={base.blueberry400} .../>
651
+ import {base} from '@workday/canvas-tokens-web'
652
+ <SystemIcon color={base.blueberry400} />
608
653
  ```
609
654
 
610
- 🤖 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.
611
656
 
612
657
  #### AccentIcon
613
658
 
614
659
  - `AccentIconStyles` prop has been deprecated and will be merged with `AccentIconProps` in a future
615
660
  version.
616
661
  - `accentIconStyles` has been deprecated and will be removed in a future version as a part of
617
- 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
618
663
  class name.
619
664
  - `AccentIcon` supports `size` and `color` css variables, along with `size` and `color` props. Both
620
665
  ways are supported:
@@ -671,10 +716,10 @@ const MyComponent = StyledRadioButton('div')({
671
716
  - `GraphicStyles` prop has been deprecated and will be merged with `GraphicProps` in a future
672
717
  version.
673
718
  - `graphicStyles` has been deprecated and will be removed in a future version as a part of
674
- 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
675
720
  name.
676
- - `width` and `height` props has been deprecated and will be removed in a future version. Consider
677
- 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.
678
723
 
679
724
  ```tsx
680
725
  // before
@@ -686,13 +731,14 @@ const MyComponent = StyledRadioButton('div')({
686
731
 
687
732
  #### Icon
688
733
 
689
- This change only impacts internal Canvas Kit code. `Icon` component has been removed and no longer
690
- 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`.
691
736
 
692
737
  #### SystemIcon
693
738
 
694
- - `SystemIconStyles` prop has been deprecated and will be merged with `SystemIconProps` in a future
695
- 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.
696
742
 
697
743
  - `accentHover` is deprecated and will be removed in a future version. Please use the following when
698
744
  overriding styles:
@@ -731,7 +777,7 @@ used in icons. It was replaced by `Svg` and icon stencils extend `svgStencil`.
731
777
  ```
732
778
 
733
779
  - `systemIconStyles` has been deprecated and will be removed in a future version as a part of
734
- 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
735
781
  class name.
736
782
 
737
783
  - `SystemIcon` supports `size`, `color`, `accentColor` and `background` css variables, along with
@@ -760,99 +806,150 @@ const MyComponent = StyledRadioButton('div')({
760
806
  </MyComponent>;
761
807
  ```
762
808
 
763
- ### Loading Dots
809
+ ### Status Indicator (Preview)
764
810
 
765
- `LoadingDots` now uses
766
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
767
- our
768
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
769
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
770
- identically as it did in previous versions.
811
+ <StatusIndicator variant="red" emphasis="low">
812
+ <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
813
+ </StatusIndicator>
771
814
 
772
- ### Radio (Preview)
815
+ **PR:** [#2620](https://github.com/Workday/canvas-kit/pull/2620)
773
816
 
774
- **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`.
775
819
 
776
- `Radio` and `RadioGroup` now use
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 changed. It should behave
781
- identically as it did in previous versions.
820
+ **There should be no developer impact and the visual changes are safe to accept**.
782
821
 
783
- ### Select
822
+ ### Switch
784
823
 
785
- **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>
786
827
 
787
- `Select` has been refactored to use our
788
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
789
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
790
- component now supports the `cs` prop, but otherwise the API has not changed. It should behave
791
- identically as it did in previous versions.
828
+ **PR:** [#2583](https://github.com/Workday/canvas-kit/pull/2583)
792
829
 
793
- ### 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.
794
834
 
795
- **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**.
796
836
 
797
- `StatusIndicator` now uses
798
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
799
- our
800
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
801
- The component now supports the `cs` prop, but otherwise the API has not been changed.
837
+ ### Table
802
838
 
803
- > #### Visual Breaking Change
804
- >
805
- > Opacity applied to the whole container has been removed for transparent variant and replace by
806
- > translucent color. By this change opacity has been changed from `0.85` to `0.84`, so there is
807
- > possibility of the small visual change.
839
+ **PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
808
840
 
809
- ### Switch
841
+ <StatusIndicator variant="red" emphasis="low">
842
+ <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
843
+ </StatusIndicator>
810
844
 
811
- **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).
812
849
 
813
- `Switch` now uses
814
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
815
- our
816
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
817
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
818
- 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.
819
853
 
820
- > #### Visual Breaking change
821
- >
822
- > Switch no longer uses `theme.primary.light` as the background color for a disabled and checked
823
- > 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.
824
855
 
825
- ### Table (Preview)
856
+ In v10, the `Table` component in [Main](#main) only exposed a `Table` and `TableRow` component to
857
+ build tables.
826
858
 
827
- **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.
828
862
 
829
- `Table` now uses
830
- [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
831
- our
832
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
833
- The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
834
- 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.
835
904
 
836
905
  ### Text
837
906
 
838
907
  **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
839
908
 
840
- `Text` has been refactored to use our
841
- [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
842
- and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). It no
843
- longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
844
- Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
845
- 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.
846
912
 
847
913
  ## Style Utility Updates
848
914
 
849
915
  ### `createStencil`
850
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
+
851
923
  Stencils were updated to automatically add `box-sizing: border-box` to all stencils. If your stencil
852
924
  did not add this style already, it may change the way `width` works for the component. Our intent is
853
925
  to make all elements use border box layouts to make width calculations more predictable. This change
854
926
  may change the way your component works if you use the `width` style property.
855
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
+
856
953
  ## Glossary
857
954
 
858
955
  ### Main
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "11.0.0-alpha.798-next.0",
3
+ "version": "11.0.0-alpha.801-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",
@@ -44,10 +44,10 @@
44
44
  "dependencies": {
45
45
  "@emotion/styled": "^11.6.0",
46
46
  "@storybook/csf": "0.0.1",
47
- "@workday/canvas-kit-labs-react": "^11.0.0-alpha.798-next.0",
48
- "@workday/canvas-kit-preview-react": "^11.0.0-alpha.798-next.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.798-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.798-next.0",
47
+ "@workday/canvas-kit-labs-react": "^11.0.0-alpha.801-next.0",
48
+ "@workday/canvas-kit-preview-react": "^11.0.0-alpha.801-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.801-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.801-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.1",
53
53
  "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
59
59
  "mkdirp": "^1.0.3",
60
60
  "typescript": "4.2"
61
61
  },
62
- "gitHead": "d3ed48908566d8ef153d8992c5c4de11b18f9970"
62
+ "gitHead": "d119d69c2a738f59343b3bbfe0c58b67be2ced24"
63
63
  }