@workday/canvas-kit-docs 13.0.0-alpha.1014-next.0 → 13.0.0-alpha.1021-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 +612 -24
- package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +2 -2
- package/dist/mdx/react/_examples/Tooltips.mdx +15 -0
- package/dist/mdx/react/_examples/examples/Tooltips/ListOfUploadedFiles.tsx +38 -0
- package/dist/mdx/react/button/button/Button.mdx +5 -1
- package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx +14 -17
- package/dist/mdx/react/tooltip/Tooltip.mdx +31 -1
- package/dist/mdx/react/tooltip/examples/DescriptionType.tsx +22 -0
- package/package.json +7 -7
package/dist/es6/lib/docs.js
CHANGED
|
@@ -8273,6 +8273,569 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8273
8273
|
}
|
|
8274
8274
|
}
|
|
8275
8275
|
},
|
|
8276
|
+
{
|
|
8277
|
+
"name": "loadingSparklesStencil",
|
|
8278
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/loading-sparkles/lib/LoadingSparkles.tsx",
|
|
8279
|
+
"description": "",
|
|
8280
|
+
"declarations": [
|
|
8281
|
+
{
|
|
8282
|
+
"name": "loadingSparklesStencil",
|
|
8283
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/loading-sparkles/lib/LoadingSparkles.tsx"
|
|
8284
|
+
}
|
|
8285
|
+
],
|
|
8286
|
+
"tags": {},
|
|
8287
|
+
"type": {
|
|
8288
|
+
"kind": "function",
|
|
8289
|
+
"parameters": [
|
|
8290
|
+
{
|
|
8291
|
+
"kind": "parameter",
|
|
8292
|
+
"name": "options",
|
|
8293
|
+
"type": {
|
|
8294
|
+
"kind": "conditional",
|
|
8295
|
+
"check": {
|
|
8296
|
+
"kind": "tuple",
|
|
8297
|
+
"value": [
|
|
8298
|
+
{
|
|
8299
|
+
"kind": "symbol",
|
|
8300
|
+
"name": "E",
|
|
8301
|
+
"value": "E"
|
|
8302
|
+
}
|
|
8303
|
+
]
|
|
8304
|
+
},
|
|
8305
|
+
"extends": {
|
|
8306
|
+
"kind": "tuple",
|
|
8307
|
+
"value": [
|
|
8308
|
+
{
|
|
8309
|
+
"kind": "primitive",
|
|
8310
|
+
"value": "never"
|
|
8311
|
+
}
|
|
8312
|
+
]
|
|
8313
|
+
},
|
|
8314
|
+
"trueType": {
|
|
8315
|
+
"kind": "intersection",
|
|
8316
|
+
"value": [
|
|
8317
|
+
{
|
|
8318
|
+
"kind": "symbol",
|
|
8319
|
+
"name": "ModifierValuesStencil",
|
|
8320
|
+
"typeParameters": [
|
|
8321
|
+
{
|
|
8322
|
+
"kind": "symbol",
|
|
8323
|
+
"name": "M",
|
|
8324
|
+
"value": "M"
|
|
8325
|
+
},
|
|
8326
|
+
{
|
|
8327
|
+
"kind": "symbol",
|
|
8328
|
+
"name": "V",
|
|
8329
|
+
"value": "V"
|
|
8330
|
+
}
|
|
8331
|
+
],
|
|
8332
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
8333
|
+
},
|
|
8334
|
+
{
|
|
8335
|
+
"kind": "symbol",
|
|
8336
|
+
"name": "VariableValuesStencil",
|
|
8337
|
+
"typeParameters": [
|
|
8338
|
+
{
|
|
8339
|
+
"kind": "symbol",
|
|
8340
|
+
"name": "V",
|
|
8341
|
+
"value": "V"
|
|
8342
|
+
}
|
|
8343
|
+
],
|
|
8344
|
+
"value": "VariableValuesStencil<V>"
|
|
8345
|
+
}
|
|
8346
|
+
]
|
|
8347
|
+
},
|
|
8348
|
+
"falseType": {
|
|
8349
|
+
"kind": "conditional",
|
|
8350
|
+
"check": {
|
|
8351
|
+
"kind": "symbol",
|
|
8352
|
+
"name": "E",
|
|
8353
|
+
"value": "E"
|
|
8354
|
+
},
|
|
8355
|
+
"extends": {
|
|
8356
|
+
"kind": "symbol",
|
|
8357
|
+
"name": "BaseStencil",
|
|
8358
|
+
"typeParameters": [
|
|
8359
|
+
{
|
|
8360
|
+
"kind": "infer",
|
|
8361
|
+
"value": {
|
|
8362
|
+
"kind": "typeParameter",
|
|
8363
|
+
"name": "ME",
|
|
8364
|
+
"required": true
|
|
8365
|
+
}
|
|
8366
|
+
},
|
|
8367
|
+
{
|
|
8368
|
+
"kind": "infer",
|
|
8369
|
+
"value": {
|
|
8370
|
+
"kind": "typeParameter",
|
|
8371
|
+
"name": "VE",
|
|
8372
|
+
"required": true
|
|
8373
|
+
}
|
|
8374
|
+
},
|
|
8375
|
+
{
|
|
8376
|
+
"kind": "primitive",
|
|
8377
|
+
"value": "any"
|
|
8378
|
+
},
|
|
8379
|
+
{
|
|
8380
|
+
"kind": "primitive",
|
|
8381
|
+
"value": "any"
|
|
8382
|
+
}
|
|
8383
|
+
],
|
|
8384
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
8385
|
+
},
|
|
8386
|
+
"trueType": {
|
|
8387
|
+
"kind": "intersection",
|
|
8388
|
+
"value": [
|
|
8389
|
+
{
|
|
8390
|
+
"kind": "symbol",
|
|
8391
|
+
"name": "ModifierValuesStencil",
|
|
8392
|
+
"typeParameters": [
|
|
8393
|
+
{
|
|
8394
|
+
"kind": "intersection",
|
|
8395
|
+
"value": [
|
|
8396
|
+
{
|
|
8397
|
+
"kind": "symbol",
|
|
8398
|
+
"name": "ME",
|
|
8399
|
+
"value": "ME"
|
|
8400
|
+
},
|
|
8401
|
+
{
|
|
8402
|
+
"kind": "symbol",
|
|
8403
|
+
"name": "M",
|
|
8404
|
+
"value": "M"
|
|
8405
|
+
}
|
|
8406
|
+
]
|
|
8407
|
+
}
|
|
8408
|
+
],
|
|
8409
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
8410
|
+
},
|
|
8411
|
+
{
|
|
8412
|
+
"kind": "symbol",
|
|
8413
|
+
"name": "VariableValuesStencil",
|
|
8414
|
+
"typeParameters": [
|
|
8415
|
+
{
|
|
8416
|
+
"kind": "intersection",
|
|
8417
|
+
"value": [
|
|
8418
|
+
{
|
|
8419
|
+
"kind": "symbol",
|
|
8420
|
+
"name": "VE",
|
|
8421
|
+
"value": "VE"
|
|
8422
|
+
},
|
|
8423
|
+
{
|
|
8424
|
+
"kind": "symbol",
|
|
8425
|
+
"name": "V",
|
|
8426
|
+
"value": "V"
|
|
8427
|
+
}
|
|
8428
|
+
]
|
|
8429
|
+
}
|
|
8430
|
+
],
|
|
8431
|
+
"value": "VariableValuesStencil<V>"
|
|
8432
|
+
}
|
|
8433
|
+
]
|
|
8434
|
+
},
|
|
8435
|
+
"falseType": {
|
|
8436
|
+
"kind": "primitive",
|
|
8437
|
+
"value": "never"
|
|
8438
|
+
}
|
|
8439
|
+
}
|
|
8440
|
+
},
|
|
8441
|
+
"required": false,
|
|
8442
|
+
"rest": false,
|
|
8443
|
+
"description": "",
|
|
8444
|
+
"declarations": [
|
|
8445
|
+
{
|
|
8446
|
+
"name": "options",
|
|
8447
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8448
|
+
}
|
|
8449
|
+
],
|
|
8450
|
+
"tags": {}
|
|
8451
|
+
}
|
|
8452
|
+
],
|
|
8453
|
+
"members": [
|
|
8454
|
+
{
|
|
8455
|
+
"kind": "property",
|
|
8456
|
+
"name": "vars",
|
|
8457
|
+
"required": true,
|
|
8458
|
+
"type": {
|
|
8459
|
+
"kind": "symbol",
|
|
8460
|
+
"name": "StencilDefaultVars",
|
|
8461
|
+
"typeParameters": [
|
|
8462
|
+
{
|
|
8463
|
+
"kind": "symbol",
|
|
8464
|
+
"name": "V",
|
|
8465
|
+
"value": "V"
|
|
8466
|
+
},
|
|
8467
|
+
{
|
|
8468
|
+
"kind": "symbol",
|
|
8469
|
+
"name": "E",
|
|
8470
|
+
"value": "E"
|
|
8471
|
+
},
|
|
8472
|
+
{
|
|
8473
|
+
"kind": "symbol",
|
|
8474
|
+
"name": "ID",
|
|
8475
|
+
"value": "ID"
|
|
8476
|
+
}
|
|
8477
|
+
],
|
|
8478
|
+
"value": "StencilDefaultVars<V, E, ID>"
|
|
8479
|
+
},
|
|
8480
|
+
"description": "",
|
|
8481
|
+
"declarations": [
|
|
8482
|
+
{
|
|
8483
|
+
"name": "vars",
|
|
8484
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8485
|
+
}
|
|
8486
|
+
],
|
|
8487
|
+
"tags": {}
|
|
8488
|
+
},
|
|
8489
|
+
{
|
|
8490
|
+
"kind": "property",
|
|
8491
|
+
"name": "base",
|
|
8492
|
+
"required": true,
|
|
8493
|
+
"type": {
|
|
8494
|
+
"kind": "primitive",
|
|
8495
|
+
"value": "string"
|
|
8496
|
+
},
|
|
8497
|
+
"description": "",
|
|
8498
|
+
"declarations": [
|
|
8499
|
+
{
|
|
8500
|
+
"name": "base",
|
|
8501
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8502
|
+
}
|
|
8503
|
+
],
|
|
8504
|
+
"tags": {}
|
|
8505
|
+
},
|
|
8506
|
+
{
|
|
8507
|
+
"kind": "property",
|
|
8508
|
+
"name": "modifiers",
|
|
8509
|
+
"required": true,
|
|
8510
|
+
"type": {
|
|
8511
|
+
"kind": "conditional",
|
|
8512
|
+
"check": {
|
|
8513
|
+
"kind": "tuple",
|
|
8514
|
+
"value": [
|
|
8515
|
+
{
|
|
8516
|
+
"kind": "symbol",
|
|
8517
|
+
"name": "E",
|
|
8518
|
+
"value": "E"
|
|
8519
|
+
}
|
|
8520
|
+
]
|
|
8521
|
+
},
|
|
8522
|
+
"extends": {
|
|
8523
|
+
"kind": "tuple",
|
|
8524
|
+
"value": [
|
|
8525
|
+
{
|
|
8526
|
+
"kind": "symbol",
|
|
8527
|
+
"name": "BaseStencil",
|
|
8528
|
+
"typeParameters": [
|
|
8529
|
+
{
|
|
8530
|
+
"kind": "infer",
|
|
8531
|
+
"value": {
|
|
8532
|
+
"kind": "typeParameter",
|
|
8533
|
+
"name": "ME",
|
|
8534
|
+
"required": true
|
|
8535
|
+
}
|
|
8536
|
+
},
|
|
8537
|
+
{
|
|
8538
|
+
"kind": "infer",
|
|
8539
|
+
"value": {
|
|
8540
|
+
"kind": "typeParameter",
|
|
8541
|
+
"name": "VE",
|
|
8542
|
+
"required": true
|
|
8543
|
+
}
|
|
8544
|
+
},
|
|
8545
|
+
{
|
|
8546
|
+
"kind": "primitive",
|
|
8547
|
+
"value": "any"
|
|
8548
|
+
},
|
|
8549
|
+
{
|
|
8550
|
+
"kind": "primitive",
|
|
8551
|
+
"value": "any"
|
|
8552
|
+
}
|
|
8553
|
+
],
|
|
8554
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
8555
|
+
}
|
|
8556
|
+
]
|
|
8557
|
+
},
|
|
8558
|
+
"trueType": {
|
|
8559
|
+
"kind": "symbol",
|
|
8560
|
+
"name": "StencilModifierReturn",
|
|
8561
|
+
"typeParameters": [
|
|
8562
|
+
{
|
|
8563
|
+
"kind": "intersection",
|
|
8564
|
+
"value": [
|
|
8565
|
+
{
|
|
8566
|
+
"kind": "symbol",
|
|
8567
|
+
"name": "ME",
|
|
8568
|
+
"value": "ME"
|
|
8569
|
+
},
|
|
8570
|
+
{
|
|
8571
|
+
"kind": "symbol",
|
|
8572
|
+
"name": "M",
|
|
8573
|
+
"value": "M"
|
|
8574
|
+
}
|
|
8575
|
+
]
|
|
8576
|
+
},
|
|
8577
|
+
{
|
|
8578
|
+
"kind": "intersection",
|
|
8579
|
+
"value": [
|
|
8580
|
+
{
|
|
8581
|
+
"kind": "symbol",
|
|
8582
|
+
"name": "VE",
|
|
8583
|
+
"value": "VE"
|
|
8584
|
+
},
|
|
8585
|
+
{
|
|
8586
|
+
"kind": "symbol",
|
|
8587
|
+
"name": "V",
|
|
8588
|
+
"value": "V"
|
|
8589
|
+
}
|
|
8590
|
+
]
|
|
8591
|
+
}
|
|
8592
|
+
],
|
|
8593
|
+
"value": "StencilModifierReturn<M, V>"
|
|
8594
|
+
},
|
|
8595
|
+
"falseType": {
|
|
8596
|
+
"kind": "symbol",
|
|
8597
|
+
"name": "StencilModifierReturn",
|
|
8598
|
+
"typeParameters": [
|
|
8599
|
+
{
|
|
8600
|
+
"kind": "symbol",
|
|
8601
|
+
"name": "M",
|
|
8602
|
+
"value": "M"
|
|
8603
|
+
},
|
|
8604
|
+
{
|
|
8605
|
+
"kind": "symbol",
|
|
8606
|
+
"name": "V",
|
|
8607
|
+
"value": "V"
|
|
8608
|
+
}
|
|
8609
|
+
],
|
|
8610
|
+
"value": "StencilModifierReturn<M, V>"
|
|
8611
|
+
}
|
|
8612
|
+
},
|
|
8613
|
+
"description": "",
|
|
8614
|
+
"declarations": [
|
|
8615
|
+
{
|
|
8616
|
+
"name": "modifiers",
|
|
8617
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8618
|
+
}
|
|
8619
|
+
],
|
|
8620
|
+
"tags": {}
|
|
8621
|
+
},
|
|
8622
|
+
{
|
|
8623
|
+
"kind": "property",
|
|
8624
|
+
"name": "defaultModifiers",
|
|
8625
|
+
"required": true,
|
|
8626
|
+
"type": {
|
|
8627
|
+
"kind": "conditional",
|
|
8628
|
+
"check": {
|
|
8629
|
+
"kind": "tuple",
|
|
8630
|
+
"value": [
|
|
8631
|
+
{
|
|
8632
|
+
"kind": "symbol",
|
|
8633
|
+
"name": "E",
|
|
8634
|
+
"value": "E"
|
|
8635
|
+
}
|
|
8636
|
+
]
|
|
8637
|
+
},
|
|
8638
|
+
"extends": {
|
|
8639
|
+
"kind": "tuple",
|
|
8640
|
+
"value": [
|
|
8641
|
+
{
|
|
8642
|
+
"kind": "symbol",
|
|
8643
|
+
"name": "BaseStencil",
|
|
8644
|
+
"typeParameters": [
|
|
8645
|
+
{
|
|
8646
|
+
"kind": "infer",
|
|
8647
|
+
"value": {
|
|
8648
|
+
"kind": "typeParameter",
|
|
8649
|
+
"name": "ME",
|
|
8650
|
+
"required": true
|
|
8651
|
+
}
|
|
8652
|
+
},
|
|
8653
|
+
{
|
|
8654
|
+
"kind": "primitive",
|
|
8655
|
+
"value": "any"
|
|
8656
|
+
},
|
|
8657
|
+
{
|
|
8658
|
+
"kind": "primitive",
|
|
8659
|
+
"value": "any"
|
|
8660
|
+
},
|
|
8661
|
+
{
|
|
8662
|
+
"kind": "primitive",
|
|
8663
|
+
"value": "any"
|
|
8664
|
+
}
|
|
8665
|
+
],
|
|
8666
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
8667
|
+
}
|
|
8668
|
+
]
|
|
8669
|
+
},
|
|
8670
|
+
"trueType": {
|
|
8671
|
+
"kind": "symbol",
|
|
8672
|
+
"name": "StencilDefaultModifierReturn",
|
|
8673
|
+
"typeParameters": [
|
|
8674
|
+
{
|
|
8675
|
+
"kind": "intersection",
|
|
8676
|
+
"value": [
|
|
8677
|
+
{
|
|
8678
|
+
"kind": "symbol",
|
|
8679
|
+
"name": "ME",
|
|
8680
|
+
"value": "ME"
|
|
8681
|
+
},
|
|
8682
|
+
{
|
|
8683
|
+
"kind": "symbol",
|
|
8684
|
+
"name": "M",
|
|
8685
|
+
"value": "M"
|
|
8686
|
+
}
|
|
8687
|
+
]
|
|
8688
|
+
}
|
|
8689
|
+
],
|
|
8690
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
8691
|
+
},
|
|
8692
|
+
"falseType": {
|
|
8693
|
+
"kind": "symbol",
|
|
8694
|
+
"name": "StencilDefaultModifierReturn",
|
|
8695
|
+
"typeParameters": [
|
|
8696
|
+
{
|
|
8697
|
+
"kind": "symbol",
|
|
8698
|
+
"name": "M",
|
|
8699
|
+
"value": "M"
|
|
8700
|
+
}
|
|
8701
|
+
],
|
|
8702
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
8703
|
+
}
|
|
8704
|
+
},
|
|
8705
|
+
"description": "",
|
|
8706
|
+
"declarations": [
|
|
8707
|
+
{
|
|
8708
|
+
"name": "defaultModifiers",
|
|
8709
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8710
|
+
}
|
|
8711
|
+
],
|
|
8712
|
+
"tags": {}
|
|
8713
|
+
},
|
|
8714
|
+
{
|
|
8715
|
+
"kind": "property",
|
|
8716
|
+
"name": "__extends",
|
|
8717
|
+
"required": false,
|
|
8718
|
+
"type": {
|
|
8719
|
+
"kind": "symbol",
|
|
8720
|
+
"name": "E",
|
|
8721
|
+
"value": "E"
|
|
8722
|
+
},
|
|
8723
|
+
"description": "",
|
|
8724
|
+
"declarations": [
|
|
8725
|
+
{
|
|
8726
|
+
"name": "__extends",
|
|
8727
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8728
|
+
}
|
|
8729
|
+
],
|
|
8730
|
+
"tags": {}
|
|
8731
|
+
},
|
|
8732
|
+
{
|
|
8733
|
+
"kind": "property",
|
|
8734
|
+
"name": "__vars",
|
|
8735
|
+
"required": true,
|
|
8736
|
+
"type": {
|
|
8737
|
+
"kind": "symbol",
|
|
8738
|
+
"name": "V",
|
|
8739
|
+
"value": "V"
|
|
8740
|
+
},
|
|
8741
|
+
"description": "",
|
|
8742
|
+
"declarations": [
|
|
8743
|
+
{
|
|
8744
|
+
"name": "__vars",
|
|
8745
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8746
|
+
}
|
|
8747
|
+
],
|
|
8748
|
+
"tags": {}
|
|
8749
|
+
},
|
|
8750
|
+
{
|
|
8751
|
+
"kind": "property",
|
|
8752
|
+
"name": "__modifiers",
|
|
8753
|
+
"required": true,
|
|
8754
|
+
"type": {
|
|
8755
|
+
"kind": "symbol",
|
|
8756
|
+
"name": "M",
|
|
8757
|
+
"value": "M"
|
|
8758
|
+
},
|
|
8759
|
+
"description": "",
|
|
8760
|
+
"declarations": [
|
|
8761
|
+
{
|
|
8762
|
+
"name": "__modifiers",
|
|
8763
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8764
|
+
}
|
|
8765
|
+
],
|
|
8766
|
+
"tags": {}
|
|
8767
|
+
},
|
|
8768
|
+
{
|
|
8769
|
+
"kind": "property",
|
|
8770
|
+
"name": "__id",
|
|
8771
|
+
"required": true,
|
|
8772
|
+
"type": {
|
|
8773
|
+
"kind": "symbol",
|
|
8774
|
+
"name": "ID",
|
|
8775
|
+
"value": "ID"
|
|
8776
|
+
},
|
|
8777
|
+
"description": "",
|
|
8778
|
+
"declarations": [
|
|
8779
|
+
{
|
|
8780
|
+
"name": "__id",
|
|
8781
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8782
|
+
}
|
|
8783
|
+
],
|
|
8784
|
+
"tags": {}
|
|
8785
|
+
}
|
|
8786
|
+
],
|
|
8787
|
+
"returnType": {
|
|
8788
|
+
"kind": "object",
|
|
8789
|
+
"properties": [
|
|
8790
|
+
{
|
|
8791
|
+
"kind": "property",
|
|
8792
|
+
"name": "className",
|
|
8793
|
+
"required": true,
|
|
8794
|
+
"type": {
|
|
8795
|
+
"kind": "primitive",
|
|
8796
|
+
"value": "string"
|
|
8797
|
+
},
|
|
8798
|
+
"description": "",
|
|
8799
|
+
"declarations": [
|
|
8800
|
+
{
|
|
8801
|
+
"name": "className",
|
|
8802
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8803
|
+
}
|
|
8804
|
+
],
|
|
8805
|
+
"tags": {}
|
|
8806
|
+
},
|
|
8807
|
+
{
|
|
8808
|
+
"kind": "property",
|
|
8809
|
+
"name": "style",
|
|
8810
|
+
"required": false,
|
|
8811
|
+
"type": {
|
|
8812
|
+
"kind": "external",
|
|
8813
|
+
"name": "Record",
|
|
8814
|
+
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
|
|
8815
|
+
"typeParameters": [
|
|
8816
|
+
{
|
|
8817
|
+
"kind": "primitive",
|
|
8818
|
+
"value": "string"
|
|
8819
|
+
},
|
|
8820
|
+
{
|
|
8821
|
+
"kind": "primitive",
|
|
8822
|
+
"value": "string"
|
|
8823
|
+
}
|
|
8824
|
+
]
|
|
8825
|
+
},
|
|
8826
|
+
"description": "",
|
|
8827
|
+
"declarations": [
|
|
8828
|
+
{
|
|
8829
|
+
"name": "style",
|
|
8830
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
8831
|
+
}
|
|
8832
|
+
],
|
|
8833
|
+
"tags": {}
|
|
8834
|
+
}
|
|
8835
|
+
]
|
|
8836
|
+
}
|
|
8837
|
+
}
|
|
8838
|
+
},
|
|
8276
8839
|
{
|
|
8277
8840
|
"name": "LoadingSparkles",
|
|
8278
8841
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/loading-sparkles/lib/LoadingSparkles.tsx",
|
|
@@ -139314,7 +139877,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
139314
139877
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
|
|
139315
139878
|
}
|
|
139316
139879
|
],
|
|
139317
|
-
"tags": {
|
|
139880
|
+
"tags": {
|
|
139881
|
+
"deprecated": "`hideMouseFocus` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
|
|
139882
|
+
},
|
|
139318
139883
|
"type": {
|
|
139319
139884
|
"kind": "symbol",
|
|
139320
139885
|
"name": "CSSProperties",
|
|
@@ -139324,14 +139889,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
139324
139889
|
{
|
|
139325
139890
|
"name": "mouseFocusBehavior",
|
|
139326
139891
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts",
|
|
139327
|
-
"description": "",
|
|
139892
|
+
"description": "A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:\n[`[data-whatinput=\"mouse\"],\n [data-whatinput=\"touch\"],\n [data-whatinput=\"pointer\"]: {\n '& .my-selector': {\n ...\n }\n},",
|
|
139328
139893
|
"declarations": [
|
|
139329
139894
|
{
|
|
139330
139895
|
"name": "mouseFocusBehavior",
|
|
139331
139896
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
|
|
139332
139897
|
}
|
|
139333
139898
|
],
|
|
139334
|
-
"tags": {
|
|
139899
|
+
"tags": {
|
|
139900
|
+
"deprecated": "`mouseFocusBehavior` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
|
|
139901
|
+
},
|
|
139335
139902
|
"type": {
|
|
139336
139903
|
"kind": "function",
|
|
139337
139904
|
"parameters": [
|
|
@@ -140524,24 +141091,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
140524
141091
|
}
|
|
140525
141092
|
],
|
|
140526
141093
|
"tags": {}
|
|
140527
|
-
},
|
|
140528
|
-
{
|
|
140529
|
-
"kind": "property",
|
|
140530
|
-
"name": "action",
|
|
140531
|
-
"required": true,
|
|
140532
|
-
"type": {
|
|
140533
|
-
"kind": "symbol",
|
|
140534
|
-
"name": "CanvasThemePalette",
|
|
140535
|
-
"value": "CanvasThemePalette"
|
|
140536
|
-
},
|
|
140537
|
-
"description": "",
|
|
140538
|
-
"declarations": [
|
|
140539
|
-
{
|
|
140540
|
-
"name": "action",
|
|
140541
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
140542
|
-
}
|
|
140543
|
-
],
|
|
140544
|
-
"tags": {}
|
|
140545
141094
|
}
|
|
140546
141095
|
]
|
|
140547
141096
|
},
|
|
@@ -304405,7 +304954,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
304405
304954
|
"name": "ReactNode",
|
|
304406
304955
|
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
304407
304956
|
},
|
|
304408
|
-
"description": "This should be a string in most cases. HTML is supported, but only text is understood\nby assistive technology. This is true for both `label` and `describe` modes
|
|
304957
|
+
"description": "This should be a string in most cases. HTML is supported, but only text is understood\nby assistive technology. This is true for both `label` and `describe` modes.\n\n**Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.\n\n```jsx\n// The text will be understood as: You must accept terms and conditions\n<Tooltip type=\"description\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\n\n// This will render a string including the html and will not be properly understood by voice over.\nconst MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\n<Tooltip type=\"description\" title={MyComponent/>\n```",
|
|
304409
304958
|
"declarations": [
|
|
304410
304959
|
{
|
|
304411
304960
|
"name": "title",
|
|
@@ -304501,10 +305050,14 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
304501
305050
|
{
|
|
304502
305051
|
"kind": "string",
|
|
304503
305052
|
"value": "muted"
|
|
305053
|
+
},
|
|
305054
|
+
{
|
|
305055
|
+
"kind": "string",
|
|
305056
|
+
"value": "description"
|
|
304504
305057
|
}
|
|
304505
305058
|
]
|
|
304506
305059
|
},
|
|
304507
|
-
"description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or\n Ellipsis tooltips.\n- `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional\n information about the target.\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n tooltip contents are not useful to a screen reader or if you have handled accessibility of\n the tooltip yourself.\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
|
|
305060
|
+
"description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or\n Ellipsis tooltips.\n- **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional\n information about the target.\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n tooltip contents are not useful to a screen reader or if you have handled accessibility of\n the tooltip yourself.\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
|
|
304508
305061
|
"declarations": [
|
|
304509
305062
|
{
|
|
304510
305063
|
"name": "type",
|
|
@@ -305010,10 +305563,14 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
305010
305563
|
{
|
|
305011
305564
|
"kind": "string",
|
|
305012
305565
|
"value": "muted"
|
|
305566
|
+
},
|
|
305567
|
+
{
|
|
305568
|
+
"kind": "string",
|
|
305569
|
+
"value": "description"
|
|
305013
305570
|
}
|
|
305014
305571
|
]
|
|
305015
305572
|
},
|
|
305016
|
-
"description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or\n Ellipsis tooltips.\n- `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
|
|
305573
|
+
"description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or\n Ellipsis tooltips.\n- **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n tooltip contents are not useful to a screen reader or if you have handled accessibility of\n the tooltip yourself.\n- `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
|
|
305017
305574
|
"declarations": [
|
|
305018
305575
|
{
|
|
305019
305576
|
"name": "type",
|
|
@@ -305146,6 +305703,37 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
305146
305703
|
],
|
|
305147
305704
|
"tags": {}
|
|
305148
305705
|
},
|
|
305706
|
+
{
|
|
305707
|
+
"kind": "property",
|
|
305708
|
+
"name": "aria-description",
|
|
305709
|
+
"defaultValue": {
|
|
305710
|
+
"kind": "unknown",
|
|
305711
|
+
"value": "unknown",
|
|
305712
|
+
"text": "type === 'description' ? titleText : undefined"
|
|
305713
|
+
},
|
|
305714
|
+
"type": {
|
|
305715
|
+
"kind": "union",
|
|
305716
|
+
"value": [
|
|
305717
|
+
{
|
|
305718
|
+
"kind": "primitive",
|
|
305719
|
+
"value": "string"
|
|
305720
|
+
},
|
|
305721
|
+
{
|
|
305722
|
+
"kind": "primitive",
|
|
305723
|
+
"value": "undefined"
|
|
305724
|
+
}
|
|
305725
|
+
]
|
|
305726
|
+
},
|
|
305727
|
+
"required": false,
|
|
305728
|
+
"description": "",
|
|
305729
|
+
"declarations": [
|
|
305730
|
+
{
|
|
305731
|
+
"name": "aria-description",
|
|
305732
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/useTooltip.tsx"
|
|
305733
|
+
}
|
|
305734
|
+
],
|
|
305735
|
+
"tags": {}
|
|
305736
|
+
},
|
|
305149
305737
|
{
|
|
305150
305738
|
"kind": "property",
|
|
305151
305739
|
"name": "aria-label",
|
|
@@ -90,7 +90,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
90
90
|
|
|
91
91
|
### Styling API and CSS Tokens
|
|
92
92
|
|
|
93
|
-
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114)
|
|
93
|
+
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3120](https://github.com/Workday/canvas-kit/pull/3120)
|
|
94
94
|
|
|
95
95
|
Several components have been refactored to use our
|
|
96
96
|
[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
|
|
@@ -104,6 +104,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
|
|
|
104
104
|
The following components are affected:
|
|
105
105
|
|
|
106
106
|
- `ExternalHyperlink`
|
|
107
|
+
- `LoadingSparkles`
|
|
107
108
|
- `Menu`
|
|
108
109
|
- `Skeleton`
|
|
109
110
|
|
|
@@ -125,7 +126,6 @@ The following components are affected:
|
|
|
125
126
|
</ExternalHyperlink>
|
|
126
127
|
```
|
|
127
128
|
|
|
128
|
-
|
|
129
129
|
## Troubleshooting
|
|
130
130
|
|
|
131
131
|
## Glossary
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
2
|
+
import ListOfUploadedFiles from './examples/Tooltips/ListOfUploadedFiles';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
# Accessible Tooltip Examples
|
|
6
|
+
|
|
7
|
+
## Using descriptive tooltips for repeated text buttons
|
|
8
|
+
|
|
9
|
+
In this example, the "Delete" buttons are used repeatedly to reference the multiple files that have
|
|
10
|
+
been uploaded to the web app. The text buttons already have an accessible name (a.k.a. label)
|
|
11
|
+
derived from the button's inner text. The `describe` tooltip can be useful for providing more
|
|
12
|
+
in-context description for both low vision sighted users and screen reader users without overriding
|
|
13
|
+
the button name "Delete".
|
|
14
|
+
|
|
15
|
+
<ExampleCodeBlock code={ListOfUploadedFiles} />
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {DeleteButton} from '@workday/canvas-kit-react/button';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {Heading, Text} from '@workday/canvas-kit-react/text';
|
|
6
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
7
|
+
import {trashIcon} from '@workday/canvas-system-icons-web';
|
|
8
|
+
|
|
9
|
+
const files = ['Cover Letter.docx', 'Resume.docx', 'Portfolio.pptx', 'Portrait.png'];
|
|
10
|
+
|
|
11
|
+
const listStyles = {
|
|
12
|
+
alignItems: 'center',
|
|
13
|
+
width: '35rem',
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const deleteBtnStyle = {
|
|
17
|
+
marginLeft: 'auto',
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export default () => {
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<Heading size="medium">Uploaded Files:</Heading>
|
|
24
|
+
<Flex as="ul" gap="1rem" flexDirection="column">
|
|
25
|
+
{files.map(i => (
|
|
26
|
+
<Flex as="li" style={listStyles}>
|
|
27
|
+
<Text>{i}</Text>
|
|
28
|
+
<Tooltip type="description" title={i}>
|
|
29
|
+
<DeleteButton icon={trashIcon} style={deleteBtnStyle}>
|
|
30
|
+
Delete
|
|
31
|
+
</DeleteButton>
|
|
32
|
+
</Tooltip>
|
|
33
|
+
</Flex>
|
|
34
|
+
))}
|
|
35
|
+
</Flex>
|
|
36
|
+
</>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
@@ -94,7 +94,11 @@ or view the example below.
|
|
|
94
94
|
|
|
95
95
|
### Theme Overrides
|
|
96
96
|
|
|
97
|
-
The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
|
|
97
|
+
The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
|
|
98
|
+
|
|
99
|
+
> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
|
|
100
|
+
|
|
101
|
+
> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
|
|
98
102
|
|
|
99
103
|
<ExampleCodeBlock code={ThemeOverrides} />
|
|
100
104
|
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
caretDownIcon,
|
|
9
9
|
} from '@workday/canvas-system-icons-web';
|
|
10
10
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
11
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
11
|
+
import {brand, system} from '@workday/canvas-tokens-web';
|
|
12
12
|
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
13
13
|
import {Heading} from '@workday/canvas-kit-react/text';
|
|
14
14
|
|
|
@@ -17,17 +17,24 @@ const parentContainerStyles = createStyles({
|
|
|
17
17
|
padding: system.space.x4,
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
+
const customActionTheme = createStyles({
|
|
21
|
+
[brand.action.base]: 'teal',
|
|
22
|
+
[brand.action.accent]: 'white',
|
|
23
|
+
[brand.action.dark]: 'hsla(180, 100%, 20%)',
|
|
24
|
+
[brand.action.darkest]: 'hsla(180, 100%, 16%)',
|
|
25
|
+
});
|
|
26
|
+
|
|
20
27
|
export default () => (
|
|
21
28
|
<div>
|
|
22
29
|
<Heading size="medium" as="h3">
|
|
23
|
-
Override Primary Color
|
|
30
|
+
Override Primary Color Via Canvas Provider
|
|
24
31
|
</Heading>
|
|
25
32
|
<CanvasProvider
|
|
26
33
|
theme={{
|
|
27
34
|
canvas: {
|
|
28
35
|
palette: {
|
|
29
|
-
|
|
30
|
-
main: '
|
|
36
|
+
primary: {
|
|
37
|
+
main: 'navy',
|
|
31
38
|
},
|
|
32
39
|
},
|
|
33
40
|
},
|
|
@@ -45,19 +52,9 @@ export default () => (
|
|
|
45
52
|
</Flex>
|
|
46
53
|
</CanvasProvider>
|
|
47
54
|
<Heading size="medium" as="h3">
|
|
48
|
-
Override Action Color
|
|
55
|
+
Override Action Color Via CSS Action Token
|
|
49
56
|
</Heading>
|
|
50
|
-
<
|
|
51
|
-
theme={{
|
|
52
|
-
canvas: {
|
|
53
|
-
palette: {
|
|
54
|
-
primary: {
|
|
55
|
-
main: 'navy',
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
57
|
+
<div className={customActionTheme}>
|
|
61
58
|
<Flex cs={parentContainerStyles}>
|
|
62
59
|
<PrimaryButton>Primary</PrimaryButton>
|
|
63
60
|
<PrimaryButton icon={plusIcon} iconPosition="start">
|
|
@@ -68,6 +65,6 @@ export default () => (
|
|
|
68
65
|
</PrimaryButton>
|
|
69
66
|
<PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
|
|
70
67
|
</Flex>
|
|
71
|
-
</
|
|
68
|
+
</div>
|
|
72
69
|
</div>
|
|
73
70
|
);
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
|
|
1
|
+
import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
|
|
3
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'import Default from './examples/Default';
|
|
2
4
|
import CustomContent from './examples/CustomContent';
|
|
3
5
|
import DelayedTooltip from './examples/DelayedTooltip';
|
|
6
|
+
import DescriptionType from './examples/DescriptionType';
|
|
4
7
|
import DescribeType from './examples/DescribeType';
|
|
5
8
|
import Muted from './examples/Muted';
|
|
6
9
|
import Placements from './examples/Placements';
|
|
@@ -62,6 +65,14 @@ and focus events.
|
|
|
62
65
|
|
|
63
66
|
### Describing an Element
|
|
64
67
|
|
|
68
|
+
<InformationHighlight variant={'caution'} className='sb-unstyled'>
|
|
69
|
+
<InformationHighlight.Icon />
|
|
70
|
+
<InformationHighlight.Heading> Caution: Describe type has been deprecated </InformationHighlight.Heading>
|
|
71
|
+
<InformationHighlight.Body>
|
|
72
|
+
Assistive technology may ignore <StatusIndicator variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="describe"</StatusIndicator.Label></StatusIndicator> techniques based on verbosity settings. Please use <StatusIndicator cs={{textTransform: 'lowercase'}} variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="description"</StatusIndicator.Label></StatusIndicator> on Tooltips.
|
|
73
|
+
</InformationHighlight.Body>
|
|
74
|
+
</InformationHighlight>
|
|
75
|
+
|
|
65
76
|
The default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to
|
|
66
77
|
provide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`
|
|
67
78
|
to the target element. This will allow screen reader users to hear the name of the control that is
|
|
@@ -69,6 +80,25 @@ being focused and the ancillary tooltip information.
|
|
|
69
80
|
|
|
70
81
|
<ExampleCodeBlock code={DescribeType} />
|
|
71
82
|
|
|
83
|
+
### Description of an Element
|
|
84
|
+
|
|
85
|
+
The default mode for a tooltip is to assign a name to the target element with an `aria-label`
|
|
86
|
+
string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
|
|
87
|
+
This will add `aria-description` strings to the target element instead. This variant is useful on
|
|
88
|
+
text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.
|
|
89
|
+
|
|
90
|
+
> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
|
|
91
|
+
>
|
|
92
|
+
> ```jsx
|
|
93
|
+
> // The text will be understood as: You must accept terms and conditions
|
|
94
|
+
> <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
|
|
95
|
+
>
|
|
96
|
+
> // This will render a string including the html and will not be properly understood by voice over.
|
|
97
|
+
> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
|
|
98
|
+
> <Tool
|
|
99
|
+
|
|
100
|
+
<ExampleCodeBlock code={DescriptionType} />
|
|
101
|
+
|
|
72
102
|
### Muted Tooltips
|
|
73
103
|
|
|
74
104
|
If a tooltip does not need to be visible to screen reader users, or you handle accessibility of the
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
4
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
5
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
6
|
+
import {chartConfigIcon} from '@workday/canvas-system-icons-web';
|
|
7
|
+
|
|
8
|
+
export default () => {
|
|
9
|
+
return (
|
|
10
|
+
<Flex gap="s">
|
|
11
|
+
<Tooltip type="description" title="Search using additional criteria">
|
|
12
|
+
<TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>
|
|
13
|
+
</Tooltip>
|
|
14
|
+
<Tooltip type="description" title="Create saved search">
|
|
15
|
+
<SecondaryButton>Save</SecondaryButton>
|
|
16
|
+
</Tooltip>
|
|
17
|
+
<Tooltip type="description" title="The service will restart after this action">
|
|
18
|
+
<DeleteButton>Delete</DeleteButton>
|
|
19
|
+
</Tooltip>
|
|
20
|
+
</Flex>
|
|
21
|
+
);
|
|
22
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.1021-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": "^13.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^13.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^13.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.1021-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.1021-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.1021-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.1021-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
|
-
"@workday/canvas-tokens-web": "^2.1.
|
|
52
|
+
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
54
54
|
"react-syntax-highlighter": "^15.5.0",
|
|
55
55
|
"ts-node": "^10.9.1"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "83a8c87bbc32ebeac0451f0558502f33a38bc9ed"
|
|
64
64
|
}
|