@workday/canvas-kit-docs 11.0.0-alpha.668-next.0 → 11.0.0-alpha.671-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 +9 -24
  2. package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +232 -316
  3. package/package.json +5 -5
package/dist/es6/lib/docs.js CHANGED
@@ -11478,8 +11478,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
11478
11478
  "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
11479
11479
  },
11480
11480
  "defaultValue": {
11481
- "kind": "symbol",
11482
- "name": "Flex"
11481
+ "kind": "external",
11482
+ "name": "div",
11483
+ "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
11483
11484
  }
11484
11485
  },
11485
11486
  {
@@ -11498,8 +11499,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
11498
11499
  "name": "R",
11499
11500
  "required": true,
11500
11501
  "defaultValue": {
11501
- "kind": "symbol",
11502
- "name": "Flex"
11502
+ "kind": "external",
11503
+ "name": "div",
11504
+ "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
11503
11505
  }
11504
11506
  }
11505
11507
  ]
@@ -11558,8 +11560,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
11558
11560
  }
11559
11561
  ],
11560
11562
  "baseElement": {
11561
- "kind": "symbol",
11562
- "name": "Flex"
11563
+ "kind": "external",
11564
+ "name": "div",
11565
+ "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
11563
11566
  },
11564
11567
  "model": "RadioModel",
11565
11568
  "styleComponent": {
@@ -12354,24 +12357,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
12354
12357
  ],
12355
12358
  "tags": {}
12356
12359
  },
12357
- {
12358
- "kind": "property",
12359
- "name": "theme",
12360
- "required": false,
12361
- "type": {
12362
- "kind": "symbol",
12363
- "name": "EmotionCanvasTheme",
12364
- "value": "EmotionCanvasTheme"
12365
- },
12366
- "description": "",
12367
- "declarations": [
12368
- {
12369
- "name": "theme",
12370
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
12371
- }
12372
- ],
12373
- "tags": {}
12374
- },
12375
12360
  {
12376
12361
  "kind": "property",
12377
12362
  "name": "children",
package/dist/mdx/11.0-UPGRADE-GUIDE.mdx CHANGED
@@ -1,6 +1,6 @@
1
- import {Table} from '@workday/canvas-kit-preview-react'
2
- import {base, brand} from '@workday/canvas-tokens-web'
3
- import {cssVar} from '@workday/canvas-kit-styling'
1
+ import {Table} from '@workday/canvas-kit-preview-react';
2
+ import {base, brand} from '@workday/canvas-tokens-web';
3
+ import {cssVar} from '@workday/canvas-kit-styling';
4
4
 
5
5
 
6
6
  # Canvas Kit 11.0 Upgrade Guide
@@ -11,16 +11,17 @@ any questions.
11
11
 
12
12
  - [Codemod](#codemod)
13
13
  - [Deprecations](#deprecations)
14
- - [Form Field Main](#form-field-main)
15
- - [Text Input Preview](#text-input-preview)
16
- - [Text Area Preview](#text-input-preview)
14
+ - [Form Field (Main)](#form-field-main)
17
15
  - [Label Text](#label-text)
16
+ - [Text Area (Preview)](#text-area-preview)
17
+ - [Text Input (Preview)](#text-input-preview)
18
18
  - [Component Updates](#component-updates)
19
19
  - [Component Style Updates](#component-style-updates)
20
20
  - [Card](#card)
21
21
  - [Count Badge](#count-badge)
22
+ - [Form Field Preview](#form-field-preview)
23
+ - [Radio (Preview)](#radio-preview)
22
24
  - [Text](#text)
23
- - [Form Field Preview](#form-field-preview)
24
25
 
25
26
  ## Codemod
26
27
 
@@ -100,13 +101,16 @@ instead.
100
101
 
101
102
  ---
102
103
 
103
- ### Text Input Preview
104
+ ### Label Text
104
105
 
105
- **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
106
+ **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
106
107
 
107
- We've deprecated `TextInput` from [Preview](#preview) in favor of our compound component `FormField`
108
+ We've deprecated `LabelText` from [Main](#main) in favor of our compound component `FormField.Label`
108
109
  in [Preview](#preview). Please use
109
- [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
110
+ [`FormField.Label`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
111
+ instead.
112
+
113
+ If you still want to use a `label` element outside of the context of a form, you can use `Text`
110
114
  instead.
111
115
 
112
116
  ---
@@ -122,16 +126,13 @@ instead.
122
126
 
123
127
  ---
124
128
 
125
- ### Label Text
129
+ ### Text Input Preview
126
130
 
127
- **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
131
+ **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
128
132
 
129
- We've deprecated `LabelText` from [Main](#main) in favor of our compound component `FormField.Label`
133
+ We've deprecated `TextInput` from [Preview](#preview) in favor of our compound component `FormField`
130
134
  in [Preview](#preview). Please use
131
- [`FormField.Label`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
132
- instead.
133
-
134
- If you still want to use a `label` element outside of the context of a form, you can use `Text`
135
+ [`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
135
136
  instead.
136
137
 
137
138
  ---
@@ -140,9 +141,11 @@ instead.
140
141
 
141
142
  ### Component Style Updates
142
143
 
143
- These changes are to address discrepancies that were found between Canvas Kit Design Specs and Canvas Kit.
144
+ These changes are to address discrepancies that were found between Canvas Kit Design Specs and
145
+ Canvas Kit.
144
146
 
145
- We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `TextInput` and `TextArea`.
147
+ We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`,
148
+ `TertiaryButton`, `DeleteButton`, `TextInput` and `TextArea`.
146
149
 
147
150
  **PR:** [#2485](https://github.com/Workday/canvas-kit/pull/2485)
148
151
 
@@ -150,288 +153,186 @@ See below:
150
153
 
151
154
  <Table>
152
155
  <Table.Head>
153
- <Table.Row>
154
- <Table.Header scope="col">Component</Table.Header>
155
- <Table.Header scope="col">Variant</Table.Header>
156
- <Table.Header scope="col">psuedo Class</Table.Header>
157
- <Table.Header scope="col">Property</Table.Header>
158
- <Table.Header scope="col">v10 Value</Table.Header>
159
- <Table.Header scope="col">v11 Value</Table.Header>
160
- </Table.Row>
156
+ <Table.Row>
157
+ <Table.Header scope="col">Component</Table.Header>
158
+ <Table.Header scope="col">Variant</Table.Header>
159
+ <Table.Header scope="col">psuedo Class</Table.Header>
160
+ <Table.Header scope="col">Property</Table.Header>
161
+ <Table.Header scope="col">v10 Value</Table.Header>
162
+ <Table.Header scope="col">v11 Value</Table.Header>
163
+ </Table.Row>
161
164
  </Table.Head>
162
165
  <Table.Body>
163
- <Table.Row>
164
- <Table.Cell>
165
- Table (Header)
166
- </Table.Cell>
167
- <Table.Cell/>
168
- <Table.Cell/>
169
- <Table.Cell>
170
- borderColor
171
- </Table.Cell>
172
- <Table.Cell backgroundColor='soap400'>
173
- soap400
174
- </Table.Cell>
175
- <Table.Cell backgroundColor='soap500'>
176
- soap500
177
- </Table.Cell>
178
- </Table.Row>
179
- <Table.Row>
180
- <Table.Cell>
181
- Checkbox
182
- </Table.Cell>
183
- <Table.Cell/>
184
- <Table.Cell>disabled</Table.Cell>
185
- <Table.Cell>
186
- borderColor
187
- </Table.Cell>
188
- <Table.Cell backgroundColor='soap600'>
189
- soap600
190
- </Table.Cell>
191
- <Table.Cell color='frenchVanilla100' backgroundColor='licorice100'>
192
- licorice100
193
- </Table.Cell>
194
- </Table.Row>
195
- <Table.Row>
196
- <Table.Cell>
197
- Checkbox
198
- </Table.Cell>
199
- <Table.Cell>Inverse</Table.Cell>
200
- <Table.Cell>disabled</Table.Cell>
201
- <Table.Cell>
202
- borderColor
203
- </Table.Cell>
204
- <Table.Cell backgroundColor='soap600'>
205
- soap600
206
- </Table.Cell>
207
- <Table.Cell color='frenchVanilla100' backgroundColor='licorice100'>
208
- licorice100
209
- </Table.Cell>
210
- </Table.Row>
211
- <Table.Row>
212
- <Table.Cell>
213
- Radio
214
- </Table.Cell>
215
- <Table.Cell/>
216
- <Table.Cell>disabled</Table.Cell>
217
- <Table.Cell>
218
- borderColor
219
- </Table.Cell>
220
- <Table.Cell backgroundColor='soap600'>
221
- soap600
222
- </Table.Cell>
223
- <Table.Cell color='frenchVanilla100' backgroundColor='licorice100'>
224
- licorice100
225
- </Table.Cell>
226
- </Table.Row>
227
- <Table.Row>
228
- <Table.Cell>
229
- SecondaryButton
230
- </Table.Cell>
231
- <Table.Cell>Inverse</Table.Cell>
232
- <Table.Cell>focus</Table.Cell>
233
- <Table.Cell>
234
- color
235
- </Table.Cell>
236
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper500'>
237
- blackPepper500
238
- </Table.Cell>
239
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper400'>
240
- blackPepper400
241
- </Table.Cell>
242
- </Table.Row>
243
- <Table.Row>
244
- <Table.Cell>
245
- SecondaryButton
246
- </Table.Cell>
247
- <Table.Cell>Inverse</Table.Cell>
248
- <Table.Cell>focus</Table.Cell>
249
- <Table.Cell>
250
- boxShdaow (Inner Color)
251
- </Table.Cell>
252
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper500'>
253
- blackPepper500
254
- </Table.Cell>
255
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper400'>
256
- blackPepper400
257
- </Table.Cell>
258
- </Table.Row>
259
- <Table.Row>
260
- <Table.Cell>
261
- SecondaryButton (Icon)
262
- </Table.Cell>
263
- <Table.Cell>Inverse</Table.Cell>
264
- <Table.Cell>focus</Table.Cell>
265
- <Table.Cell>
266
- fill
267
- </Table.Cell>
268
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper500'>
269
- blackPepper500
270
- </Table.Cell>
271
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper400'>
272
- blackPepper400
273
- </Table.Cell>
274
- </Table.Row>
275
- <Table.Row>
276
- <Table.Cell>
277
- TertiaryButton
278
- </Table.Cell>
279
- <Table.Cell/>
280
- <Table.Cell>hover</Table.Cell>
281
- <Table.Cell>
282
- backgroundColor
283
- </Table.Cell>
284
- <Table.Cell backgroundColor='soap200'>
285
- soap200
286
- </Table.Cell>
287
- <Table.Cell backgroundColor='soap300'>
288
- soap300
289
- </Table.Cell>
290
- </Table.Row>
291
- <Table.Row>
292
- <Table.Cell>
293
- TertiaryButton
294
- </Table.Cell>
295
- <Table.Cell/>
296
- <Table.Cell>active</Table.Cell>
297
- <Table.Cell>
298
- backgroundColor
299
- </Table.Cell>
300
- <Table.Cell backgroundColor='soap300'>
301
- soap300
302
- </Table.Cell>
303
- <Table.Cell backgroundColor='soap400'>
304
- soap400
305
- </Table.Cell>
306
- </Table.Row>
307
- <Table.Row>
308
- <Table.Cell>
309
- TertiaryButton
310
- </Table.Cell>
311
- <Table.Cell/>
312
- <Table.Cell>active</Table.Cell>
313
- <Table.Cell>
314
- color
315
- </Table.Cell>
316
- <Table.Cell color='frenchVanilla100' backgroundColor={cssVar(brand.primary.dark)}>
317
- primary.dark
318
- </Table.Cell>
319
- <Table.Cell color='frenchVanilla100' backgroundColor={cssVar(brand.primary.darkest)}>
320
- primary.darkest
321
- </Table.Cell>
322
- </Table.Row>
323
- <Table.Row>
324
- <Table.Cell>
325
- TertiaryButton
326
- </Table.Cell>
327
- <Table.Cell/>
328
- <Table.Cell>disabled</Table.Cell>
329
- <Table.Cell>
330
- borderColor
331
- </Table.Cell>
332
- <Table.Cell backgroundColor='frenchVanilla100'>
333
- frenchVanilla100
334
- </Table.Cell>
335
- <Table.Cell backgroundColor='transparent'>
336
- transparent
337
- </Table.Cell>
338
- </Table.Row>
339
- <Table.Row>
340
- <Table.Cell>
341
- TertiaryButton (Icon Only)
342
- </Table.Cell>
343
- <Table.Cell/>
344
- <Table.Cell>focus</Table.Cell>
345
- <Table.Cell>
346
- fill
347
- </Table.Cell>
348
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper500'>
349
- blackPepper500
350
- </Table.Cell>
351
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper400'>
352
- blackPepper400
353
- </Table.Cell>
354
- </Table.Row>
355
- <Table.Row>
356
- <Table.Cell>
357
- TertiaryButton (Icon Only)
358
- </Table.Cell>
359
- <Table.Cell/>
360
- <Table.Cell>hover</Table.Cell>
361
- <Table.Cell>
362
- fill
363
- </Table.Cell>
364
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper500'>
365
- blackPepper500
366
- </Table.Cell>
367
- <Table.Cell color='frenchVanilla100' backgroundColor='blackPepper400'>
368
- blackPepper400
369
- </Table.Cell>
370
- </Table.Row>
371
- <Table.Row>
372
- <Table.Cell>
373
- DeleteButton
374
- </Table.Cell>
375
- <Table.Cell/>
376
- <Table.Cell>disabled</Table.Cell>
377
- <Table.Cell>
378
- backgroundColor
379
- </Table.Cell>
380
- <Table.Cell backgroundColor={cssVar(brand.error.light)}>
381
- error.light
382
- </Table.Cell>
383
- <Table.Cell backgroundColor="rgba(222,46,33,0.4)">
384
- error.base
385
- </Table.Cell>
386
- </Table.Row>
387
- <Table.Row>
388
- <Table.Cell>
389
- DeleteButton
390
- </Table.Cell>
391
- <Table.Cell/>
392
- <Table.Cell>disabled</Table.Cell>
393
- <Table.Cell>
394
- opacity
395
- </Table.Cell>
396
- <Table.Cell>
397
- 1
398
- </Table.Cell>
399
- <Table.Cell>
400
- 0.4
401
- </Table.Cell>
402
- </Table.Row>
403
- <Table.Row>
404
- <Table.Cell>
405
- TextInput
406
- </Table.Cell>
407
- <Table.Cell/>
408
- <Table.Cell>disabled</Table.Cell>
409
- <Table.Cell>
410
- borderColor
411
- </Table.Cell>
412
- <Table.Cell backgroundColor='soap600'>
413
- soap600
414
- </Table.Cell>
415
- <Table.Cell color='frenchVanilla100' backgroundColor='licorice100'>
416
- licorice100
417
- </Table.Cell>
418
- </Table.Row>
419
- <Table.Row>
420
- <Table.Cell>
421
- TextArea
422
- </Table.Cell>
423
- <Table.Cell/>
424
- <Table.Cell>disabled</Table.Cell>
425
- <Table.Cell>
426
- borderColor
427
- </Table.Cell>
428
- <Table.Cell backgroundColor='soap600'>
429
- soap600
430
- </Table.Cell>
431
- <Table.Cell color='frenchVanilla100' backgroundColor='licorice100'>
432
- licorice100
433
- </Table.Cell>
434
- </Table.Row>
166
+ <Table.Row>
167
+ <Table.Cell>Table (Header)</Table.Cell>
168
+ <Table.Cell />
169
+ <Table.Cell />
170
+ <Table.Cell>borderColor</Table.Cell>
171
+ <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
172
+ <Table.Cell backgroundColor="soap500">soap500</Table.Cell>
173
+ </Table.Row>
174
+ <Table.Row>
175
+ <Table.Cell>Checkbox</Table.Cell>
176
+ <Table.Cell />
177
+ <Table.Cell>disabled</Table.Cell>
178
+ <Table.Cell>borderColor</Table.Cell>
179
+ <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
180
+ <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
181
+ licorice100
182
+ </Table.Cell>
183
+ </Table.Row>
184
+ <Table.Row>
185
+ <Table.Cell>Checkbox</Table.Cell>
186
+ <Table.Cell>Inverse</Table.Cell>
187
+ <Table.Cell>disabled</Table.Cell>
188
+ <Table.Cell>borderColor</Table.Cell>
189
+ <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
190
+ <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
191
+ licorice100
192
+ </Table.Cell>
193
+ </Table.Row>
194
+ <Table.Row>
195
+ <Table.Cell>Radio</Table.Cell>
196
+ <Table.Cell />
197
+ <Table.Cell>disabled</Table.Cell>
198
+ <Table.Cell>borderColor</Table.Cell>
199
+ <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
200
+ <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
201
+ licorice100
202
+ </Table.Cell>
203
+ </Table.Row>
204
+ <Table.Row>
205
+ <Table.Cell>SecondaryButton</Table.Cell>
206
+ <Table.Cell>Inverse</Table.Cell>
207
+ <Table.Cell>focus</Table.Cell>
208
+ <Table.Cell>color</Table.Cell>
209
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
210
+ blackPepper500
211
+ </Table.Cell>
212
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
213
+ blackPepper400
214
+ </Table.Cell>
215
+ </Table.Row>
216
+ <Table.Row>
217
+ <Table.Cell>SecondaryButton</Table.Cell>
218
+ <Table.Cell>Inverse</Table.Cell>
219
+ <Table.Cell>focus</Table.Cell>
220
+ <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
221
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
222
+ blackPepper500
223
+ </Table.Cell>
224
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
225
+ blackPepper400
226
+ </Table.Cell>
227
+ </Table.Row>
228
+ <Table.Row>
229
+ <Table.Cell>SecondaryButton (Icon)</Table.Cell>
230
+ <Table.Cell>Inverse</Table.Cell>
231
+ <Table.Cell>focus</Table.Cell>
232
+ <Table.Cell>fill</Table.Cell>
233
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
234
+ blackPepper500
235
+ </Table.Cell>
236
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
237
+ blackPepper400
238
+ </Table.Cell>
239
+ </Table.Row>
240
+ <Table.Row>
241
+ <Table.Cell>TertiaryButton</Table.Cell>
242
+ <Table.Cell />
243
+ <Table.Cell>hover</Table.Cell>
244
+ <Table.Cell>backgroundColor</Table.Cell>
245
+ <Table.Cell backgroundColor="soap200">soap200</Table.Cell>
246
+ <Table.Cell backgroundColor="soap300">soap300</Table.Cell>
247
+ </Table.Row>
248
+ <Table.Row>
249
+ <Table.Cell>TertiaryButton</Table.Cell>
250
+ <Table.Cell />
251
+ <Table.Cell>active</Table.Cell>
252
+ <Table.Cell>backgroundColor</Table.Cell>
253
+ <Table.Cell backgroundColor="soap300">soap300</Table.Cell>
254
+ <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
255
+ </Table.Row>
256
+ <Table.Row>
257
+ <Table.Cell>TertiaryButton</Table.Cell>
258
+ <Table.Cell />
259
+ <Table.Cell>active</Table.Cell>
260
+ <Table.Cell>color</Table.Cell>
261
+ <Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.dark)}>
262
+ primary.dark
263
+ </Table.Cell>
264
+ <Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.darkest)}>
265
+ primary.darkest
266
+ </Table.Cell>
267
+ </Table.Row>
268
+ <Table.Row>
269
+ <Table.Cell>TertiaryButton</Table.Cell>
270
+ <Table.Cell />
271
+ <Table.Cell>disabled</Table.Cell>
272
+ <Table.Cell>borderColor</Table.Cell>
273
+ <Table.Cell backgroundColor="frenchVanilla100">frenchVanilla100</Table.Cell>
274
+ <Table.Cell backgroundColor="transparent">transparent</Table.Cell>
275
+ </Table.Row>
276
+ <Table.Row>
277
+ <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
278
+ <Table.Cell />
279
+ <Table.Cell>focus</Table.Cell>
280
+ <Table.Cell>fill</Table.Cell>
281
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
282
+ blackPepper500
283
+ </Table.Cell>
284
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
285
+ blackPepper400
286
+ </Table.Cell>
287
+ </Table.Row>
288
+ <Table.Row>
289
+ <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
290
+ <Table.Cell />
291
+ <Table.Cell>hover</Table.Cell>
292
+ <Table.Cell>fill</Table.Cell>
293
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
294
+ blackPepper500
295
+ </Table.Cell>
296
+ <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
297
+ blackPepper400
298
+ </Table.Cell>
299
+ </Table.Row>
300
+ <Table.Row>
301
+ <Table.Cell>DeleteButton</Table.Cell>
302
+ <Table.Cell />
303
+ <Table.Cell>disabled</Table.Cell>
304
+ <Table.Cell>backgroundColor</Table.Cell>
305
+ <Table.Cell backgroundColor={cssVar(brand.error.light)}>error.light</Table.Cell>
306
+ <Table.Cell backgroundColor="rgba(222,46,33,0.4)">error.base</Table.Cell>
307
+ </Table.Row>
308
+ <Table.Row>
309
+ <Table.Cell>DeleteButton</Table.Cell>
310
+ <Table.Cell />
311
+ <Table.Cell>disabled</Table.Cell>
312
+ <Table.Cell>opacity</Table.Cell>
313
+ <Table.Cell>1</Table.Cell>
314
+ <Table.Cell>0.4</Table.Cell>
315
+ </Table.Row>
316
+ <Table.Row>
317
+ <Table.Cell>TextInput</Table.Cell>
318
+ <Table.Cell />
319
+ <Table.Cell>disabled</Table.Cell>
320
+ <Table.Cell>borderColor</Table.Cell>
321
+ <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
322
+ <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
323
+ licorice100
324
+ </Table.Cell>
325
+ </Table.Row>
326
+ <Table.Row>
327
+ <Table.Cell>TextArea</Table.Cell>
328
+ <Table.Cell />
329
+ <Table.Cell>disabled</Table.Cell>
330
+ <Table.Cell>borderColor</Table.Cell>
331
+ <Table.Cell backgroundColor="soap600">soap600</Table.Cell>
332
+ <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
333
+ licorice100
334
+ </Table.Cell>
335
+ </Table.Row>
435
336
  </Table.Body>
436
337
  </Table>
437
338
 
@@ -439,27 +340,23 @@ See below:
439
340
 
440
341
  **PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
441
342
 
442
- `Card` and its subcomponents have been refactored to use our new styling utilities and tokens.
443
- `Card` no longer extends the `Box` component, however, it still supports Emotion `styled` and style
444
- props.
343
+ `Card` and its subcomponents have been refactored to use our new
344
+ [styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
345
+ and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). `Card`
346
+ no longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
445
347
 
446
348
  ### Count Badge
447
349
 
448
350
  **PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
449
351
 
450
- `CountBadge` now uses `createComponent`, Canvas Tokens, and our new styling utilities. The component
451
- API has not been changed, and it should behave identically as it did in previous versions.
452
-
453
- ### Text
454
-
455
- **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
456
-
457
- `Text` has been refactored to use our new styling utilities and tokens. It no longer extends the
458
- `Box` component, however, it still supports Emotion `styled` and style props. Type level components:
459
- `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since they extend the `Text`
460
- component. These changes do not affect the components API.
352
+ `CountBadge` now uses `createComponent`,
353
+ [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs), and
354
+ our new
355
+ [styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
356
+ The component API has not been changed, and it should behave identically as it did in previous
357
+ versions.
461
358
 
462
- ### Form Field Preview
359
+ ### Form Field (Preview)
463
360
 
464
361
  **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
465
362
 
@@ -504,4 +401,23 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
504
401
  </FormField>;
505
402
  ```
506
403
 
507
- 🤖 The codemod will handle the change of `hasError` to `error` for you automatically.
404
+ 🤖 The codemod will handle the change of `hasError` to `error` for you automatically.
405
+
406
+ ### Radio (Preview)
407
+
408
+ **PR:** [#2546](https://github.com/Workday/canvas-kit/pull/2546)
409
+
410
+ `Radio` and `RadioGroup` now use [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and our [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api). The
411
+ component now supports the `cs` prop, but otherwise the API has not changed. It should behave
412
+ identically as it did in previous versions.
413
+
414
+ ### Text
415
+
416
+ **PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
417
+
418
+ `Text` has been refactored to use our
419
+ [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
420
+ and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). It no
421
+ longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
422
+ Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
423
+ they extend the `Text` component. These changes do not affect the components API.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "11.0.0-alpha.668-next.0",
3
+ "version": "11.0.0-alpha.671-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,9 +44,9 @@
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.668-next.0",
48
- "@workday/canvas-kit-preview-react": "^11.0.0-alpha.668-next.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.668-next.0",
47
+ "@workday/canvas-kit-labs-react": "^11.0.0-alpha.671-next.0",
48
+ "@workday/canvas-kit-preview-react": "^11.0.0-alpha.671-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.671-next.0",
50
50
  "@workday/canvas-kit-styling": "^10.3.1",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.0.2",
@@ -59,5 +59,5 @@
59
59
  "mkdirp": "^1.0.3",
60
60
  "typescript": "4.2"
61
61
  },
62
- "gitHead": "0e652be802901414f4bfa9fc04c8b2abb2220f1e"
62
+ "gitHead": "a38c87c96e3c54cb7eb20ea92d615d297c861112"
63
63
  }