@workday/canvas-kit-docs 11.0.0-alpha.645-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/es6/lib/docs.js +1918 -705
- package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +346 -9
- package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx +33 -0
- package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx +6 -0
- package/dist/mdx/preview-react/loading-sparkles/examples/RTL.tsx +16 -0
- package/dist/mdx/react/card/card.mdx +2 -2
- package/dist/mdx/react/card/examples/Depth.tsx +7 -1
- package/dist/mdx/react/card/examples/Padding.tsx +8 -1
- package/dist/mdx/react/text/LabelText.mdx +11 -1
- package/dist/mdx/react/text/examples/LabelText/Disabled.tsx +21 -1
- package/package.json +7 -7
|
@@ -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
|
|
@@ -6,12 +11,16 @@ any questions.
|
|
|
6
11
|
|
|
7
12
|
- [Codemod](#codemod)
|
|
8
13
|
- [Deprecations](#deprecations)
|
|
9
|
-
- [
|
|
10
|
-
- [
|
|
11
|
-
- [
|
|
14
|
+
- [Form Field Main](#form-field-main)
|
|
15
|
+
- [Text Input Preview](#text-input-preview)
|
|
16
|
+
- [Text Area Preview](#text-input-preview)
|
|
17
|
+
- [Label Text](#label-text)
|
|
12
18
|
- [Component Updates](#component-updates)
|
|
13
|
-
|
|
14
|
-
|
|
19
|
+
- [Component Style Updates](#component-style-updates)
|
|
20
|
+
- [Card](#card)
|
|
21
|
+
- [Count Badge](#count-badge)
|
|
22
|
+
- [Text](#text)
|
|
23
|
+
- [Form Field Preview](#form-field-preview)
|
|
15
24
|
|
|
16
25
|
## Codemod
|
|
17
26
|
|
|
@@ -80,7 +89,7 @@ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to co
|
|
|
80
89
|
in a future major release. This signals consumers to migrate to a more stable alternative before the
|
|
81
90
|
deprecated code is removed.
|
|
82
91
|
|
|
83
|
-
###
|
|
92
|
+
### Form Field Main
|
|
84
93
|
|
|
85
94
|
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
|
|
86
95
|
|
|
@@ -91,7 +100,7 @@ instead.
|
|
|
91
100
|
|
|
92
101
|
---
|
|
93
102
|
|
|
94
|
-
###
|
|
103
|
+
### Text Input Preview
|
|
95
104
|
|
|
96
105
|
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
|
|
97
106
|
|
|
@@ -102,7 +111,7 @@ instead.
|
|
|
102
111
|
|
|
103
112
|
---
|
|
104
113
|
|
|
105
|
-
###
|
|
114
|
+
### Text Area Preview
|
|
106
115
|
|
|
107
116
|
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
|
|
108
117
|
|
|
@@ -113,8 +122,327 @@ instead.
|
|
|
113
122
|
|
|
114
123
|
---
|
|
115
124
|
|
|
125
|
+
### Label Text
|
|
126
|
+
|
|
127
|
+
**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
|
|
128
|
+
|
|
129
|
+
We've deprecated `LabelText` from [Main](#main) in favor of our compound component `FormField.Label`
|
|
130
|
+
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
|
+
instead.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
116
139
|
## Component Updates
|
|
117
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
|
+
|
|
438
|
+
### Card
|
|
439
|
+
|
|
440
|
+
**PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
|
|
441
|
+
|
|
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.
|
|
445
|
+
|
|
118
446
|
### Count Badge
|
|
119
447
|
|
|
120
448
|
**PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
|
|
@@ -122,7 +450,16 @@ instead.
|
|
|
122
450
|
`CountBadge` now uses `createComponent`, Canvas Tokens, and our new styling utilities. The component
|
|
123
451
|
API has not been changed, and it should behave identically as it did in previous versions.
|
|
124
452
|
|
|
125
|
-
###
|
|
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.
|
|
461
|
+
|
|
462
|
+
### Form Field Preview
|
|
126
463
|
|
|
127
464
|
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
|
|
128
465
|
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import {SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
+
import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
|
|
3
|
+
|
|
4
|
+
import Basic from './examples/Basic';
|
|
5
|
+
import RTL from './examples/RTL';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
# Canvas Kit Loading Sparkles
|
|
9
|
+
|
|
10
|
+
`LoadingSparkles` is a loading animation that makes users aware an AI operation is in progress.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
yarn add @workday/canvas-kit-react
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
### Basic Example
|
|
21
|
+
|
|
22
|
+
`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add `aria-live="polite"`
|
|
23
|
+
and a descriptive `aria-label` for screen reader accesibility.
|
|
24
|
+
|
|
25
|
+
<ExampleCodeBlock code={Basic} />
|
|
26
|
+
|
|
27
|
+
### Right-to-Left (RTL)
|
|
28
|
+
|
|
29
|
+
<ExampleCodeBlock code={RTL} />
|
|
30
|
+
|
|
31
|
+
## Component API
|
|
32
|
+
|
|
33
|
+
<SymbolDoc name="LoadingSparkles" fileName="/preview-react/" />
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
|
|
3
|
+
import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
|
|
4
|
+
|
|
5
|
+
export default () => {
|
|
6
|
+
const theme = {
|
|
7
|
+
canvas: {
|
|
8
|
+
direction: ContentDirection.RTL,
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
return (
|
|
12
|
+
<CanvasProvider theme={theme}>
|
|
13
|
+
<LoadingSparkles />
|
|
14
|
+
</CanvasProvider>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -45,9 +45,9 @@ Here's an example of a `Card` with a increased `depth` of `2`.
|
|
|
45
45
|
### Padding
|
|
46
46
|
|
|
47
47
|
Set the `padding` prop of the `Card` (again, supported via `Box`) to adjust its padding. Card has a
|
|
48
|
-
default padding of `
|
|
48
|
+
default padding of `x8` (`4rem` or `32px`).
|
|
49
49
|
|
|
50
|
-
Here's an example of a `Card` with a reduced padding of `
|
|
50
|
+
Here's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).
|
|
51
51
|
|
|
52
52
|
<ExampleCodeBlock code={Padding} />
|
|
53
53
|
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
3
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
|
|
6
|
+
const cardCustomDepth = createStyles({
|
|
7
|
+
boxShadow: system.depth[2],
|
|
8
|
+
});
|
|
3
9
|
|
|
4
10
|
export default () => {
|
|
5
11
|
return (
|
|
6
|
-
<Card
|
|
12
|
+
<Card cs={cardCustomDepth}>
|
|
7
13
|
<Card.Heading>Canvas Supreme</Card.Heading>
|
|
8
14
|
<Card.Body>
|
|
9
15
|
Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
3
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
import {space} from '../../../tokens';
|
|
6
|
+
|
|
7
|
+
const cardCustomPadding = createStyles({
|
|
8
|
+
padding: system.space.x3,
|
|
9
|
+
});
|
|
3
10
|
|
|
4
11
|
export default () => {
|
|
5
12
|
return (
|
|
6
|
-
<Card
|
|
13
|
+
<Card cs={cardCustomPadding}>
|
|
7
14
|
<Card.Heading>Canvas Supreme</Card.Heading>
|
|
8
15
|
<Card.Body>
|
|
9
16
|
Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
2
3
|
|
|
3
4
|
import Basic from './examples/LabelText/Basic';
|
|
4
5
|
import Cursor from './examples/LabelText/Cursor';
|
|
@@ -7,6 +8,14 @@ import Disabled from './examples/LabelText/Disabled';
|
|
|
7
8
|
|
|
8
9
|
# Canvas Kit Label Text
|
|
9
10
|
|
|
11
|
+
<StatusIndicator variant="red">
|
|
12
|
+
<StatusIndicator.Label>Deprecated</StatusIndicator.Label>
|
|
13
|
+
</StatusIndicator>
|
|
14
|
+
|
|
15
|
+
`LabelText` has been deprecated and will be removed in a future major version. Please use
|
|
16
|
+
[FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic)
|
|
17
|
+
from Preview instead.
|
|
18
|
+
|
|
10
19
|
`LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
|
|
11
20
|
|
|
12
21
|
## Installation
|
|
@@ -19,7 +28,8 @@ yarn add @workday/canvas-kit-react
|
|
|
19
28
|
|
|
20
29
|
### Basic Example
|
|
21
30
|
|
|
22
|
-
`LabelText`
|
|
31
|
+
`LabelText` renders a `<label>` element. This component is deprecated in favor of `FormField.Label`
|
|
32
|
+
since it should be used in tandem with form elements.
|
|
23
33
|
|
|
24
34
|
<ExampleCodeBlock code={Basic} />
|
|
25
35
|
|
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {LabelText} from '@workday/canvas-kit-react/text';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
6
|
+
|
|
7
|
+
const inverseBackground = createStyles({
|
|
8
|
+
backgroundColor: base.blueberry400,
|
|
9
|
+
padding: system.space.x4,
|
|
10
|
+
marginTop: system.space.x4,
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export default () => {
|
|
14
|
+
return (
|
|
15
|
+
<div>
|
|
16
|
+
<LabelText disabled>Disabled Label</LabelText>
|
|
17
|
+
<div className={inverseBackground}>
|
|
18
|
+
<LabelText disabled variant="inverse">
|
|
19
|
+
Disabled Inverse Label
|
|
20
|
+
</LabelText>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
};
|
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,12 +44,12 @@
|
|
|
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
|
-
"@workday/canvas-tokens-web": "^1.0.
|
|
52
|
+
"@workday/canvas-tokens-web": "^1.0.2",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
54
54
|
"ts-node": "^10.9.1"
|
|
55
55
|
},
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "524bc66bc3431b68ff6340f66a53f30a8b83e541"
|
|
63
63
|
}
|