@workday/canvas-kit-docs 11.0.0-alpha.667-next.0 → 11.0.0-alpha.669-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.
- package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +210 -295
- package/package.json +5 -5
|
@@ -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
|
|
@@ -20,7 +20,7 @@ any questions.
|
|
|
20
20
|
- [Card](#card)
|
|
21
21
|
- [Count Badge](#count-badge)
|
|
22
22
|
- [Text](#text)
|
|
23
|
-
|
|
23
|
+
- [Form Field Preview](#form-field-preview)
|
|
24
24
|
|
|
25
25
|
## Codemod
|
|
26
26
|
|
|
@@ -140,9 +140,11 @@ instead.
|
|
|
140
140
|
|
|
141
141
|
### Component Style Updates
|
|
142
142
|
|
|
143
|
-
These changes are to address discrepancies that were found between Canvas Kit Design Specs and
|
|
143
|
+
These changes are to address discrepancies that were found between Canvas Kit Design Specs and
|
|
144
|
+
Canvas Kit.
|
|
144
145
|
|
|
145
|
-
We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`,
|
|
146
|
+
We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`,
|
|
147
|
+
`TertiaryButton`, `DeleteButton`, `TextInput` and `TextArea`.
|
|
146
148
|
|
|
147
149
|
**PR:** [#2485](https://github.com/Workday/canvas-kit/pull/2485)
|
|
148
150
|
|
|
@@ -150,288 +152,186 @@ See below:
|
|
|
150
152
|
|
|
151
153
|
<Table>
|
|
152
154
|
<Table.Head>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
155
|
+
<Table.Row>
|
|
156
|
+
<Table.Header scope="col">Component</Table.Header>
|
|
157
|
+
<Table.Header scope="col">Variant</Table.Header>
|
|
158
|
+
<Table.Header scope="col">psuedo Class</Table.Header>
|
|
159
|
+
<Table.Header scope="col">Property</Table.Header>
|
|
160
|
+
<Table.Header scope="col">v10 Value</Table.Header>
|
|
161
|
+
<Table.Header scope="col">v11 Value</Table.Header>
|
|
162
|
+
</Table.Row>
|
|
161
163
|
</Table.Head>
|
|
162
164
|
<Table.Body>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
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>
|
|
165
|
+
<Table.Row>
|
|
166
|
+
<Table.Cell>Table (Header)</Table.Cell>
|
|
167
|
+
<Table.Cell />
|
|
168
|
+
<Table.Cell />
|
|
169
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
170
|
+
<Table.Cell backgroundColor="soap400">soap400</Table.Cell>
|
|
171
|
+
<Table.Cell backgroundColor="soap500">soap500</Table.Cell>
|
|
172
|
+
</Table.Row>
|
|
173
|
+
<Table.Row>
|
|
174
|
+
<Table.Cell>Checkbox</Table.Cell>
|
|
175
|
+
<Table.Cell />
|
|
176
|
+
<Table.Cell>disabled</Table.Cell>
|
|
177
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
178
|
+
<Table.Cell backgroundColor="soap600">soap600</Table.Cell>
|
|
179
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
|
|
180
|
+
licorice100
|
|
181
|
+
</Table.Cell>
|
|
182
|
+
</Table.Row>
|
|
183
|
+
<Table.Row>
|
|
184
|
+
<Table.Cell>Checkbox</Table.Cell>
|
|
185
|
+
<Table.Cell>Inverse</Table.Cell>
|
|
186
|
+
<Table.Cell>disabled</Table.Cell>
|
|
187
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
188
|
+
<Table.Cell backgroundColor="soap600">soap600</Table.Cell>
|
|
189
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
|
|
190
|
+
licorice100
|
|
191
|
+
</Table.Cell>
|
|
192
|
+
</Table.Row>
|
|
193
|
+
<Table.Row>
|
|
194
|
+
<Table.Cell>Radio</Table.Cell>
|
|
195
|
+
<Table.Cell />
|
|
196
|
+
<Table.Cell>disabled</Table.Cell>
|
|
197
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
198
|
+
<Table.Cell backgroundColor="soap600">soap600</Table.Cell>
|
|
199
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
|
|
200
|
+
licorice100
|
|
201
|
+
</Table.Cell>
|
|
202
|
+
</Table.Row>
|
|
203
|
+
<Table.Row>
|
|
204
|
+
<Table.Cell>SecondaryButton</Table.Cell>
|
|
205
|
+
<Table.Cell>Inverse</Table.Cell>
|
|
206
|
+
<Table.Cell>focus</Table.Cell>
|
|
207
|
+
<Table.Cell>color</Table.Cell>
|
|
208
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
|
|
209
|
+
blackPepper500
|
|
210
|
+
</Table.Cell>
|
|
211
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
|
|
212
|
+
blackPepper400
|
|
213
|
+
</Table.Cell>
|
|
214
|
+
</Table.Row>
|
|
215
|
+
<Table.Row>
|
|
216
|
+
<Table.Cell>SecondaryButton</Table.Cell>
|
|
217
|
+
<Table.Cell>Inverse</Table.Cell>
|
|
218
|
+
<Table.Cell>focus</Table.Cell>
|
|
219
|
+
<Table.Cell>boxShdaow (Inner Color)</Table.Cell>
|
|
220
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
|
|
221
|
+
blackPepper500
|
|
222
|
+
</Table.Cell>
|
|
223
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
|
|
224
|
+
blackPepper400
|
|
225
|
+
</Table.Cell>
|
|
226
|
+
</Table.Row>
|
|
227
|
+
<Table.Row>
|
|
228
|
+
<Table.Cell>SecondaryButton (Icon)</Table.Cell>
|
|
229
|
+
<Table.Cell>Inverse</Table.Cell>
|
|
230
|
+
<Table.Cell>focus</Table.Cell>
|
|
231
|
+
<Table.Cell>fill</Table.Cell>
|
|
232
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
|
|
233
|
+
blackPepper500
|
|
234
|
+
</Table.Cell>
|
|
235
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
|
|
236
|
+
blackPepper400
|
|
237
|
+
</Table.Cell>
|
|
238
|
+
</Table.Row>
|
|
239
|
+
<Table.Row>
|
|
240
|
+
<Table.Cell>TertiaryButton</Table.Cell>
|
|
241
|
+
<Table.Cell />
|
|
242
|
+
<Table.Cell>hover</Table.Cell>
|
|
243
|
+
<Table.Cell>backgroundColor</Table.Cell>
|
|
244
|
+
<Table.Cell backgroundColor="soap200">soap200</Table.Cell>
|
|
245
|
+
<Table.Cell backgroundColor="soap300">soap300</Table.Cell>
|
|
246
|
+
</Table.Row>
|
|
247
|
+
<Table.Row>
|
|
248
|
+
<Table.Cell>TertiaryButton</Table.Cell>
|
|
249
|
+
<Table.Cell />
|
|
250
|
+
<Table.Cell>active</Table.Cell>
|
|
251
|
+
<Table.Cell>backgroundColor</Table.Cell>
|
|
252
|
+
<Table.Cell backgroundColor="soap300">soap300</Table.Cell>
|
|
253
|
+
<Table.Cell backgroundColor="soap400">soap400</Table.Cell>
|
|
254
|
+
</Table.Row>
|
|
255
|
+
<Table.Row>
|
|
256
|
+
<Table.Cell>TertiaryButton</Table.Cell>
|
|
257
|
+
<Table.Cell />
|
|
258
|
+
<Table.Cell>active</Table.Cell>
|
|
259
|
+
<Table.Cell>color</Table.Cell>
|
|
260
|
+
<Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.dark)}>
|
|
261
|
+
primary.dark
|
|
262
|
+
</Table.Cell>
|
|
263
|
+
<Table.Cell color="frenchVanilla100" backgroundColor={cssVar(brand.primary.darkest)}>
|
|
264
|
+
primary.darkest
|
|
265
|
+
</Table.Cell>
|
|
266
|
+
</Table.Row>
|
|
267
|
+
<Table.Row>
|
|
268
|
+
<Table.Cell>TertiaryButton</Table.Cell>
|
|
269
|
+
<Table.Cell />
|
|
270
|
+
<Table.Cell>disabled</Table.Cell>
|
|
271
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
272
|
+
<Table.Cell backgroundColor="frenchVanilla100">frenchVanilla100</Table.Cell>
|
|
273
|
+
<Table.Cell backgroundColor="transparent">transparent</Table.Cell>
|
|
274
|
+
</Table.Row>
|
|
275
|
+
<Table.Row>
|
|
276
|
+
<Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
|
|
277
|
+
<Table.Cell />
|
|
278
|
+
<Table.Cell>focus</Table.Cell>
|
|
279
|
+
<Table.Cell>fill</Table.Cell>
|
|
280
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
|
|
281
|
+
blackPepper500
|
|
282
|
+
</Table.Cell>
|
|
283
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
|
|
284
|
+
blackPepper400
|
|
285
|
+
</Table.Cell>
|
|
286
|
+
</Table.Row>
|
|
287
|
+
<Table.Row>
|
|
288
|
+
<Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
|
|
289
|
+
<Table.Cell />
|
|
290
|
+
<Table.Cell>hover</Table.Cell>
|
|
291
|
+
<Table.Cell>fill</Table.Cell>
|
|
292
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
|
|
293
|
+
blackPepper500
|
|
294
|
+
</Table.Cell>
|
|
295
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="blackPepper400">
|
|
296
|
+
blackPepper400
|
|
297
|
+
</Table.Cell>
|
|
298
|
+
</Table.Row>
|
|
299
|
+
<Table.Row>
|
|
300
|
+
<Table.Cell>DeleteButton</Table.Cell>
|
|
301
|
+
<Table.Cell />
|
|
302
|
+
<Table.Cell>disabled</Table.Cell>
|
|
303
|
+
<Table.Cell>backgroundColor</Table.Cell>
|
|
304
|
+
<Table.Cell backgroundColor={cssVar(brand.error.light)}>error.light</Table.Cell>
|
|
305
|
+
<Table.Cell backgroundColor="rgba(222,46,33,0.4)">error.base</Table.Cell>
|
|
306
|
+
</Table.Row>
|
|
307
|
+
<Table.Row>
|
|
308
|
+
<Table.Cell>DeleteButton</Table.Cell>
|
|
309
|
+
<Table.Cell />
|
|
310
|
+
<Table.Cell>disabled</Table.Cell>
|
|
311
|
+
<Table.Cell>opacity</Table.Cell>
|
|
312
|
+
<Table.Cell>1</Table.Cell>
|
|
313
|
+
<Table.Cell>0.4</Table.Cell>
|
|
314
|
+
</Table.Row>
|
|
315
|
+
<Table.Row>
|
|
316
|
+
<Table.Cell>TextInput</Table.Cell>
|
|
317
|
+
<Table.Cell />
|
|
318
|
+
<Table.Cell>disabled</Table.Cell>
|
|
319
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
320
|
+
<Table.Cell backgroundColor="soap600">soap600</Table.Cell>
|
|
321
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
|
|
322
|
+
licorice100
|
|
323
|
+
</Table.Cell>
|
|
324
|
+
</Table.Row>
|
|
325
|
+
<Table.Row>
|
|
326
|
+
<Table.Cell>TextArea</Table.Cell>
|
|
327
|
+
<Table.Cell />
|
|
328
|
+
<Table.Cell>disabled</Table.Cell>
|
|
329
|
+
<Table.Cell>borderColor</Table.Cell>
|
|
330
|
+
<Table.Cell backgroundColor="soap600">soap600</Table.Cell>
|
|
331
|
+
<Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
|
|
332
|
+
licorice100
|
|
333
|
+
</Table.Cell>
|
|
334
|
+
</Table.Row>
|
|
435
335
|
</Table.Body>
|
|
436
336
|
</Table>
|
|
437
337
|
|
|
@@ -439,25 +339,40 @@ See below:
|
|
|
439
339
|
|
|
440
340
|
**PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
|
|
441
341
|
|
|
442
|
-
`Card` and its subcomponents have been refactored to use our new
|
|
443
|
-
|
|
444
|
-
|
|
342
|
+
`Card` and its subcomponents have been refactored to use our new
|
|
343
|
+
[styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
|
|
344
|
+
and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). `Card`
|
|
345
|
+
no longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
|
|
445
346
|
|
|
446
347
|
### Count Badge
|
|
447
348
|
|
|
448
349
|
**PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
|
|
449
350
|
|
|
450
|
-
`CountBadge` now uses `createComponent`,
|
|
451
|
-
|
|
351
|
+
`CountBadge` now uses `createComponent`,
|
|
352
|
+
[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs), and
|
|
353
|
+
our new
|
|
354
|
+
[styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
|
|
355
|
+
The component API has not been changed, and it should behave identically as it did in previous
|
|
356
|
+
versions.
|
|
357
|
+
|
|
358
|
+
### Form Field in Preview
|
|
359
|
+
|
|
360
|
+
**PR:** [#2541](https://github.com/Workday/canvas-kit/pull/2541)
|
|
361
|
+
|
|
362
|
+
`FormField` in [Preview](#preview) and its subcomponents have been refactored to use our
|
|
363
|
+
[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
|
|
364
|
+
and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
|
|
452
365
|
|
|
453
366
|
### Text
|
|
454
367
|
|
|
455
368
|
**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
|
|
456
369
|
|
|
457
|
-
`Text` has been refactored to use our
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
component
|
|
370
|
+
`Text` has been refactored to use our
|
|
371
|
+
[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
|
|
372
|
+
and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). It no
|
|
373
|
+
longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
|
|
374
|
+
Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
|
|
375
|
+
they extend the `Text` component. These changes do not affect the components API.
|
|
461
376
|
|
|
462
377
|
### Form Field Preview
|
|
463
378
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.669-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.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^11.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.669-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.669-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.669-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": "
|
|
62
|
+
"gitHead": "61dca4fd454434a6e3d7d6d691a700c704b14c51"
|
|
63
63
|
}
|