@workday/canvas-kit-docs 11.0.0-alpha.656-next.0 → 11.0.0-alpha.657-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 +306 -1
- package/package.json +6 -6
|
@@ -1,3 +1,8 @@
|
|
|
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
|
+
|
|
5
|
+
|
|
1
6
|
# Canvas Kit 11.0 Upgrade Guide
|
|
2
7
|
|
|
3
8
|
This guide contains an overview of the changes in Canvas Kit v11. Please
|
|
@@ -11,10 +16,11 @@ any questions.
|
|
|
11
16
|
- [Text Area Preview](#text-input-preview)
|
|
12
17
|
- [Label Text](#label-text)
|
|
13
18
|
- [Component Updates](#component-updates)
|
|
19
|
+
- [Component Style Updates](#component-style-updates)
|
|
14
20
|
- [Card](#card)
|
|
15
21
|
- [Count Badge](#count-badge)
|
|
16
22
|
- [Text](#text)
|
|
17
|
-
|
|
23
|
+
- [Form Field Preview](#form-field-preview)
|
|
18
24
|
|
|
19
25
|
## Codemod
|
|
20
26
|
|
|
@@ -132,8 +138,307 @@ instead.
|
|
|
132
138
|
|
|
133
139
|
## Component Updates
|
|
134
140
|
|
|
141
|
+
### Component Style Updates
|
|
142
|
+
|
|
143
|
+
These changes are to address discrepancies that were found between Canvas Kit Design Specs and Canvas Kit.
|
|
144
|
+
|
|
145
|
+
We've made some small styling updates to: `Table`, `Checkbox`, `Radio`, `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `TextInput` and `TextArea`.
|
|
146
|
+
|
|
147
|
+
**PR:** [#2485](https://github.com/Workday/canvas-kit/pull/2485)
|
|
148
|
+
|
|
149
|
+
See below:
|
|
150
|
+
|
|
151
|
+
<Table>
|
|
152
|
+
<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>
|
|
161
|
+
</Table.Head>
|
|
162
|
+
<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>
|
|
435
|
+
</Table.Body>
|
|
436
|
+
</Table>
|
|
437
|
+
|
|
135
438
|
### Card
|
|
136
439
|
|
|
440
|
+
**PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
|
|
441
|
+
|
|
137
442
|
`Card` and its subcomponents have been refactored to use our new styling utilities and tokens.
|
|
138
443
|
`Card` no longer extends the `Box` component, however, it still supports Emotion `styled` and style
|
|
139
444
|
props.
|
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.657-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.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^11.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.657-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.657-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.657-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.657-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.2",
|
|
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": "
|
|
62
|
+
"gitHead": "524bc66bc3431b68ff6340f66a53f30a8b83e541"
|
|
63
63
|
}
|