@workday/canvas-kit-docs 12.0.6 → 13.0.0-alpha.938-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 +627 -0
- package/dist/mdx/react/loading-dots/LoadingDots.mdx +17 -6
- package/dist/mdx/react/loading-dots/examples/Accessible.tsx +1 -1
- package/dist/mdx/react/loading-dots/examples/CustomColorAndAnimation.tsx +19 -0
- package/dist/mdx/react/loading-dots/examples/CustomShape.tsx +32 -0
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -171298,6 +171298,585 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
171298
171298
|
}
|
|
171299
171299
|
}
|
|
171300
171300
|
},
|
|
171301
|
+
{
|
|
171302
|
+
"name": "LoadingDotsProps",
|
|
171303
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx",
|
|
171304
|
+
"description": "",
|
|
171305
|
+
"declarations": [
|
|
171306
|
+
{
|
|
171307
|
+
"name": "LoadingDotsProps",
|
|
171308
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
|
|
171309
|
+
}
|
|
171310
|
+
],
|
|
171311
|
+
"tags": {},
|
|
171312
|
+
"type": {
|
|
171313
|
+
"kind": "alias",
|
|
171314
|
+
"name": "LoadingDots"
|
|
171315
|
+
}
|
|
171316
|
+
},
|
|
171317
|
+
{
|
|
171318
|
+
"name": "loadingDotsStencil",
|
|
171319
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx",
|
|
171320
|
+
"description": "",
|
|
171321
|
+
"declarations": [
|
|
171322
|
+
{
|
|
171323
|
+
"name": "loadingDotsStencil",
|
|
171324
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
|
|
171325
|
+
}
|
|
171326
|
+
],
|
|
171327
|
+
"tags": {},
|
|
171328
|
+
"type": {
|
|
171329
|
+
"kind": "function",
|
|
171330
|
+
"parameters": [
|
|
171331
|
+
{
|
|
171332
|
+
"kind": "parameter",
|
|
171333
|
+
"name": "options",
|
|
171334
|
+
"type": {
|
|
171335
|
+
"kind": "conditional",
|
|
171336
|
+
"check": {
|
|
171337
|
+
"kind": "tuple",
|
|
171338
|
+
"value": [
|
|
171339
|
+
{
|
|
171340
|
+
"kind": "symbol",
|
|
171341
|
+
"name": "E",
|
|
171342
|
+
"value": "E"
|
|
171343
|
+
}
|
|
171344
|
+
]
|
|
171345
|
+
},
|
|
171346
|
+
"extends": {
|
|
171347
|
+
"kind": "tuple",
|
|
171348
|
+
"value": [
|
|
171349
|
+
{
|
|
171350
|
+
"kind": "primitive",
|
|
171351
|
+
"value": "never"
|
|
171352
|
+
}
|
|
171353
|
+
]
|
|
171354
|
+
},
|
|
171355
|
+
"trueType": {
|
|
171356
|
+
"kind": "intersection",
|
|
171357
|
+
"value": [
|
|
171358
|
+
{
|
|
171359
|
+
"kind": "symbol",
|
|
171360
|
+
"name": "ModifierValuesStencil",
|
|
171361
|
+
"typeParameters": [
|
|
171362
|
+
{
|
|
171363
|
+
"kind": "symbol",
|
|
171364
|
+
"name": "M",
|
|
171365
|
+
"value": "M"
|
|
171366
|
+
},
|
|
171367
|
+
{
|
|
171368
|
+
"kind": "symbol",
|
|
171369
|
+
"name": "V",
|
|
171370
|
+
"value": "V"
|
|
171371
|
+
}
|
|
171372
|
+
],
|
|
171373
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
171374
|
+
},
|
|
171375
|
+
{
|
|
171376
|
+
"kind": "symbol",
|
|
171377
|
+
"name": "VariableValuesStencil",
|
|
171378
|
+
"typeParameters": [
|
|
171379
|
+
{
|
|
171380
|
+
"kind": "symbol",
|
|
171381
|
+
"name": "V",
|
|
171382
|
+
"value": "V"
|
|
171383
|
+
}
|
|
171384
|
+
],
|
|
171385
|
+
"value": "VariableValuesStencil<V>"
|
|
171386
|
+
}
|
|
171387
|
+
]
|
|
171388
|
+
},
|
|
171389
|
+
"falseType": {
|
|
171390
|
+
"kind": "conditional",
|
|
171391
|
+
"check": {
|
|
171392
|
+
"kind": "symbol",
|
|
171393
|
+
"name": "E",
|
|
171394
|
+
"value": "E"
|
|
171395
|
+
},
|
|
171396
|
+
"extends": {
|
|
171397
|
+
"kind": "symbol",
|
|
171398
|
+
"name": "BaseStencil",
|
|
171399
|
+
"typeParameters": [
|
|
171400
|
+
{
|
|
171401
|
+
"kind": "infer",
|
|
171402
|
+
"value": {
|
|
171403
|
+
"kind": "typeParameter",
|
|
171404
|
+
"name": "ME",
|
|
171405
|
+
"required": true
|
|
171406
|
+
}
|
|
171407
|
+
},
|
|
171408
|
+
{
|
|
171409
|
+
"kind": "infer",
|
|
171410
|
+
"value": {
|
|
171411
|
+
"kind": "typeParameter",
|
|
171412
|
+
"name": "VE",
|
|
171413
|
+
"required": true
|
|
171414
|
+
}
|
|
171415
|
+
},
|
|
171416
|
+
{
|
|
171417
|
+
"kind": "primitive",
|
|
171418
|
+
"value": "any"
|
|
171419
|
+
},
|
|
171420
|
+
{
|
|
171421
|
+
"kind": "primitive",
|
|
171422
|
+
"value": "any"
|
|
171423
|
+
}
|
|
171424
|
+
],
|
|
171425
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
171426
|
+
},
|
|
171427
|
+
"trueType": {
|
|
171428
|
+
"kind": "intersection",
|
|
171429
|
+
"value": [
|
|
171430
|
+
{
|
|
171431
|
+
"kind": "symbol",
|
|
171432
|
+
"name": "ModifierValuesStencil",
|
|
171433
|
+
"typeParameters": [
|
|
171434
|
+
{
|
|
171435
|
+
"kind": "intersection",
|
|
171436
|
+
"value": [
|
|
171437
|
+
{
|
|
171438
|
+
"kind": "symbol",
|
|
171439
|
+
"name": "ME",
|
|
171440
|
+
"value": "ME"
|
|
171441
|
+
},
|
|
171442
|
+
{
|
|
171443
|
+
"kind": "symbol",
|
|
171444
|
+
"name": "M",
|
|
171445
|
+
"value": "M"
|
|
171446
|
+
}
|
|
171447
|
+
]
|
|
171448
|
+
}
|
|
171449
|
+
],
|
|
171450
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
171451
|
+
},
|
|
171452
|
+
{
|
|
171453
|
+
"kind": "symbol",
|
|
171454
|
+
"name": "VariableValuesStencil",
|
|
171455
|
+
"typeParameters": [
|
|
171456
|
+
{
|
|
171457
|
+
"kind": "intersection",
|
|
171458
|
+
"value": [
|
|
171459
|
+
{
|
|
171460
|
+
"kind": "symbol",
|
|
171461
|
+
"name": "VE",
|
|
171462
|
+
"value": "VE"
|
|
171463
|
+
},
|
|
171464
|
+
{
|
|
171465
|
+
"kind": "symbol",
|
|
171466
|
+
"name": "V",
|
|
171467
|
+
"value": "V"
|
|
171468
|
+
}
|
|
171469
|
+
]
|
|
171470
|
+
}
|
|
171471
|
+
],
|
|
171472
|
+
"value": "VariableValuesStencil<V>"
|
|
171473
|
+
}
|
|
171474
|
+
]
|
|
171475
|
+
},
|
|
171476
|
+
"falseType": {
|
|
171477
|
+
"kind": "primitive",
|
|
171478
|
+
"value": "never"
|
|
171479
|
+
}
|
|
171480
|
+
}
|
|
171481
|
+
},
|
|
171482
|
+
"required": false,
|
|
171483
|
+
"rest": false,
|
|
171484
|
+
"description": "",
|
|
171485
|
+
"declarations": [
|
|
171486
|
+
{
|
|
171487
|
+
"name": "options",
|
|
171488
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171489
|
+
}
|
|
171490
|
+
],
|
|
171491
|
+
"tags": {}
|
|
171492
|
+
}
|
|
171493
|
+
],
|
|
171494
|
+
"members": [
|
|
171495
|
+
{
|
|
171496
|
+
"kind": "property",
|
|
171497
|
+
"name": "vars",
|
|
171498
|
+
"required": true,
|
|
171499
|
+
"type": {
|
|
171500
|
+
"kind": "symbol",
|
|
171501
|
+
"name": "StencilDefaultVars",
|
|
171502
|
+
"typeParameters": [
|
|
171503
|
+
{
|
|
171504
|
+
"kind": "symbol",
|
|
171505
|
+
"name": "V",
|
|
171506
|
+
"value": "V"
|
|
171507
|
+
},
|
|
171508
|
+
{
|
|
171509
|
+
"kind": "symbol",
|
|
171510
|
+
"name": "E",
|
|
171511
|
+
"value": "E"
|
|
171512
|
+
},
|
|
171513
|
+
{
|
|
171514
|
+
"kind": "symbol",
|
|
171515
|
+
"name": "ID",
|
|
171516
|
+
"value": "ID"
|
|
171517
|
+
}
|
|
171518
|
+
],
|
|
171519
|
+
"value": "StencilDefaultVars<V, E, ID>"
|
|
171520
|
+
},
|
|
171521
|
+
"description": "",
|
|
171522
|
+
"declarations": [
|
|
171523
|
+
{
|
|
171524
|
+
"name": "vars",
|
|
171525
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171526
|
+
}
|
|
171527
|
+
],
|
|
171528
|
+
"tags": {}
|
|
171529
|
+
},
|
|
171530
|
+
{
|
|
171531
|
+
"kind": "property",
|
|
171532
|
+
"name": "base",
|
|
171533
|
+
"required": true,
|
|
171534
|
+
"type": {
|
|
171535
|
+
"kind": "primitive",
|
|
171536
|
+
"value": "string"
|
|
171537
|
+
},
|
|
171538
|
+
"description": "",
|
|
171539
|
+
"declarations": [
|
|
171540
|
+
{
|
|
171541
|
+
"name": "base",
|
|
171542
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171543
|
+
}
|
|
171544
|
+
],
|
|
171545
|
+
"tags": {}
|
|
171546
|
+
},
|
|
171547
|
+
{
|
|
171548
|
+
"kind": "property",
|
|
171549
|
+
"name": "modifiers",
|
|
171550
|
+
"required": true,
|
|
171551
|
+
"type": {
|
|
171552
|
+
"kind": "conditional",
|
|
171553
|
+
"check": {
|
|
171554
|
+
"kind": "tuple",
|
|
171555
|
+
"value": [
|
|
171556
|
+
{
|
|
171557
|
+
"kind": "symbol",
|
|
171558
|
+
"name": "E",
|
|
171559
|
+
"value": "E"
|
|
171560
|
+
}
|
|
171561
|
+
]
|
|
171562
|
+
},
|
|
171563
|
+
"extends": {
|
|
171564
|
+
"kind": "tuple",
|
|
171565
|
+
"value": [
|
|
171566
|
+
{
|
|
171567
|
+
"kind": "symbol",
|
|
171568
|
+
"name": "BaseStencil",
|
|
171569
|
+
"typeParameters": [
|
|
171570
|
+
{
|
|
171571
|
+
"kind": "infer",
|
|
171572
|
+
"value": {
|
|
171573
|
+
"kind": "typeParameter",
|
|
171574
|
+
"name": "ME",
|
|
171575
|
+
"required": true
|
|
171576
|
+
}
|
|
171577
|
+
},
|
|
171578
|
+
{
|
|
171579
|
+
"kind": "infer",
|
|
171580
|
+
"value": {
|
|
171581
|
+
"kind": "typeParameter",
|
|
171582
|
+
"name": "VE",
|
|
171583
|
+
"required": true
|
|
171584
|
+
}
|
|
171585
|
+
},
|
|
171586
|
+
{
|
|
171587
|
+
"kind": "primitive",
|
|
171588
|
+
"value": "any"
|
|
171589
|
+
},
|
|
171590
|
+
{
|
|
171591
|
+
"kind": "primitive",
|
|
171592
|
+
"value": "any"
|
|
171593
|
+
}
|
|
171594
|
+
],
|
|
171595
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
171596
|
+
}
|
|
171597
|
+
]
|
|
171598
|
+
},
|
|
171599
|
+
"trueType": {
|
|
171600
|
+
"kind": "symbol",
|
|
171601
|
+
"name": "StencilModifierReturn",
|
|
171602
|
+
"typeParameters": [
|
|
171603
|
+
{
|
|
171604
|
+
"kind": "intersection",
|
|
171605
|
+
"value": [
|
|
171606
|
+
{
|
|
171607
|
+
"kind": "symbol",
|
|
171608
|
+
"name": "ME",
|
|
171609
|
+
"value": "ME"
|
|
171610
|
+
},
|
|
171611
|
+
{
|
|
171612
|
+
"kind": "symbol",
|
|
171613
|
+
"name": "M",
|
|
171614
|
+
"value": "M"
|
|
171615
|
+
}
|
|
171616
|
+
]
|
|
171617
|
+
},
|
|
171618
|
+
{
|
|
171619
|
+
"kind": "intersection",
|
|
171620
|
+
"value": [
|
|
171621
|
+
{
|
|
171622
|
+
"kind": "symbol",
|
|
171623
|
+
"name": "VE",
|
|
171624
|
+
"value": "VE"
|
|
171625
|
+
},
|
|
171626
|
+
{
|
|
171627
|
+
"kind": "symbol",
|
|
171628
|
+
"name": "V",
|
|
171629
|
+
"value": "V"
|
|
171630
|
+
}
|
|
171631
|
+
]
|
|
171632
|
+
}
|
|
171633
|
+
],
|
|
171634
|
+
"value": "StencilModifierReturn<M, V>"
|
|
171635
|
+
},
|
|
171636
|
+
"falseType": {
|
|
171637
|
+
"kind": "symbol",
|
|
171638
|
+
"name": "StencilModifierReturn",
|
|
171639
|
+
"typeParameters": [
|
|
171640
|
+
{
|
|
171641
|
+
"kind": "symbol",
|
|
171642
|
+
"name": "M",
|
|
171643
|
+
"value": "M"
|
|
171644
|
+
},
|
|
171645
|
+
{
|
|
171646
|
+
"kind": "symbol",
|
|
171647
|
+
"name": "V",
|
|
171648
|
+
"value": "V"
|
|
171649
|
+
}
|
|
171650
|
+
],
|
|
171651
|
+
"value": "StencilModifierReturn<M, V>"
|
|
171652
|
+
}
|
|
171653
|
+
},
|
|
171654
|
+
"description": "",
|
|
171655
|
+
"declarations": [
|
|
171656
|
+
{
|
|
171657
|
+
"name": "modifiers",
|
|
171658
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171659
|
+
}
|
|
171660
|
+
],
|
|
171661
|
+
"tags": {}
|
|
171662
|
+
},
|
|
171663
|
+
{
|
|
171664
|
+
"kind": "property",
|
|
171665
|
+
"name": "defaultModifiers",
|
|
171666
|
+
"required": true,
|
|
171667
|
+
"type": {
|
|
171668
|
+
"kind": "conditional",
|
|
171669
|
+
"check": {
|
|
171670
|
+
"kind": "tuple",
|
|
171671
|
+
"value": [
|
|
171672
|
+
{
|
|
171673
|
+
"kind": "symbol",
|
|
171674
|
+
"name": "E",
|
|
171675
|
+
"value": "E"
|
|
171676
|
+
}
|
|
171677
|
+
]
|
|
171678
|
+
},
|
|
171679
|
+
"extends": {
|
|
171680
|
+
"kind": "tuple",
|
|
171681
|
+
"value": [
|
|
171682
|
+
{
|
|
171683
|
+
"kind": "symbol",
|
|
171684
|
+
"name": "BaseStencil",
|
|
171685
|
+
"typeParameters": [
|
|
171686
|
+
{
|
|
171687
|
+
"kind": "infer",
|
|
171688
|
+
"value": {
|
|
171689
|
+
"kind": "typeParameter",
|
|
171690
|
+
"name": "ME",
|
|
171691
|
+
"required": true
|
|
171692
|
+
}
|
|
171693
|
+
},
|
|
171694
|
+
{
|
|
171695
|
+
"kind": "primitive",
|
|
171696
|
+
"value": "any"
|
|
171697
|
+
},
|
|
171698
|
+
{
|
|
171699
|
+
"kind": "primitive",
|
|
171700
|
+
"value": "any"
|
|
171701
|
+
},
|
|
171702
|
+
{
|
|
171703
|
+
"kind": "primitive",
|
|
171704
|
+
"value": "any"
|
|
171705
|
+
}
|
|
171706
|
+
],
|
|
171707
|
+
"value": "BaseStencil<M, V, E, ID>"
|
|
171708
|
+
}
|
|
171709
|
+
]
|
|
171710
|
+
},
|
|
171711
|
+
"trueType": {
|
|
171712
|
+
"kind": "symbol",
|
|
171713
|
+
"name": "StencilDefaultModifierReturn",
|
|
171714
|
+
"typeParameters": [
|
|
171715
|
+
{
|
|
171716
|
+
"kind": "intersection",
|
|
171717
|
+
"value": [
|
|
171718
|
+
{
|
|
171719
|
+
"kind": "symbol",
|
|
171720
|
+
"name": "ME",
|
|
171721
|
+
"value": "ME"
|
|
171722
|
+
},
|
|
171723
|
+
{
|
|
171724
|
+
"kind": "symbol",
|
|
171725
|
+
"name": "M",
|
|
171726
|
+
"value": "M"
|
|
171727
|
+
}
|
|
171728
|
+
]
|
|
171729
|
+
}
|
|
171730
|
+
],
|
|
171731
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
171732
|
+
},
|
|
171733
|
+
"falseType": {
|
|
171734
|
+
"kind": "symbol",
|
|
171735
|
+
"name": "StencilDefaultModifierReturn",
|
|
171736
|
+
"typeParameters": [
|
|
171737
|
+
{
|
|
171738
|
+
"kind": "symbol",
|
|
171739
|
+
"name": "M",
|
|
171740
|
+
"value": "M"
|
|
171741
|
+
}
|
|
171742
|
+
],
|
|
171743
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
171744
|
+
}
|
|
171745
|
+
},
|
|
171746
|
+
"description": "",
|
|
171747
|
+
"declarations": [
|
|
171748
|
+
{
|
|
171749
|
+
"name": "defaultModifiers",
|
|
171750
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171751
|
+
}
|
|
171752
|
+
],
|
|
171753
|
+
"tags": {}
|
|
171754
|
+
},
|
|
171755
|
+
{
|
|
171756
|
+
"kind": "property",
|
|
171757
|
+
"name": "__extends",
|
|
171758
|
+
"required": false,
|
|
171759
|
+
"type": {
|
|
171760
|
+
"kind": "symbol",
|
|
171761
|
+
"name": "E",
|
|
171762
|
+
"value": "E"
|
|
171763
|
+
},
|
|
171764
|
+
"description": "",
|
|
171765
|
+
"declarations": [
|
|
171766
|
+
{
|
|
171767
|
+
"name": "__extends",
|
|
171768
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171769
|
+
}
|
|
171770
|
+
],
|
|
171771
|
+
"tags": {}
|
|
171772
|
+
},
|
|
171773
|
+
{
|
|
171774
|
+
"kind": "property",
|
|
171775
|
+
"name": "__vars",
|
|
171776
|
+
"required": true,
|
|
171777
|
+
"type": {
|
|
171778
|
+
"kind": "symbol",
|
|
171779
|
+
"name": "V",
|
|
171780
|
+
"value": "V"
|
|
171781
|
+
},
|
|
171782
|
+
"description": "",
|
|
171783
|
+
"declarations": [
|
|
171784
|
+
{
|
|
171785
|
+
"name": "__vars",
|
|
171786
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171787
|
+
}
|
|
171788
|
+
],
|
|
171789
|
+
"tags": {}
|
|
171790
|
+
},
|
|
171791
|
+
{
|
|
171792
|
+
"kind": "property",
|
|
171793
|
+
"name": "__modifiers",
|
|
171794
|
+
"required": true,
|
|
171795
|
+
"type": {
|
|
171796
|
+
"kind": "symbol",
|
|
171797
|
+
"name": "M",
|
|
171798
|
+
"value": "M"
|
|
171799
|
+
},
|
|
171800
|
+
"description": "",
|
|
171801
|
+
"declarations": [
|
|
171802
|
+
{
|
|
171803
|
+
"name": "__modifiers",
|
|
171804
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171805
|
+
}
|
|
171806
|
+
],
|
|
171807
|
+
"tags": {}
|
|
171808
|
+
},
|
|
171809
|
+
{
|
|
171810
|
+
"kind": "property",
|
|
171811
|
+
"name": "__id",
|
|
171812
|
+
"required": true,
|
|
171813
|
+
"type": {
|
|
171814
|
+
"kind": "symbol",
|
|
171815
|
+
"name": "ID",
|
|
171816
|
+
"value": "ID"
|
|
171817
|
+
},
|
|
171818
|
+
"description": "",
|
|
171819
|
+
"declarations": [
|
|
171820
|
+
{
|
|
171821
|
+
"name": "__id",
|
|
171822
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171823
|
+
}
|
|
171824
|
+
],
|
|
171825
|
+
"tags": {}
|
|
171826
|
+
}
|
|
171827
|
+
],
|
|
171828
|
+
"returnType": {
|
|
171829
|
+
"kind": "object",
|
|
171830
|
+
"properties": [
|
|
171831
|
+
{
|
|
171832
|
+
"kind": "property",
|
|
171833
|
+
"name": "className",
|
|
171834
|
+
"required": true,
|
|
171835
|
+
"type": {
|
|
171836
|
+
"kind": "primitive",
|
|
171837
|
+
"value": "string"
|
|
171838
|
+
},
|
|
171839
|
+
"description": "",
|
|
171840
|
+
"declarations": [
|
|
171841
|
+
{
|
|
171842
|
+
"name": "className",
|
|
171843
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171844
|
+
}
|
|
171845
|
+
],
|
|
171846
|
+
"tags": {}
|
|
171847
|
+
},
|
|
171848
|
+
{
|
|
171849
|
+
"kind": "property",
|
|
171850
|
+
"name": "style",
|
|
171851
|
+
"required": false,
|
|
171852
|
+
"type": {
|
|
171853
|
+
"kind": "external",
|
|
171854
|
+
"name": "Record",
|
|
171855
|
+
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
|
|
171856
|
+
"typeParameters": [
|
|
171857
|
+
{
|
|
171858
|
+
"kind": "primitive",
|
|
171859
|
+
"value": "string"
|
|
171860
|
+
},
|
|
171861
|
+
{
|
|
171862
|
+
"kind": "primitive",
|
|
171863
|
+
"value": "string"
|
|
171864
|
+
}
|
|
171865
|
+
]
|
|
171866
|
+
},
|
|
171867
|
+
"description": "",
|
|
171868
|
+
"declarations": [
|
|
171869
|
+
{
|
|
171870
|
+
"name": "style",
|
|
171871
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
171872
|
+
}
|
|
171873
|
+
],
|
|
171874
|
+
"tags": {}
|
|
171875
|
+
}
|
|
171876
|
+
]
|
|
171877
|
+
}
|
|
171878
|
+
}
|
|
171879
|
+
},
|
|
171301
171880
|
{
|
|
171302
171881
|
"name": "LoadingDots",
|
|
171303
171882
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx",
|
|
@@ -171314,6 +171893,54 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
171314
171893
|
"componentType": "regular",
|
|
171315
171894
|
"displayName": "LoadingDots",
|
|
171316
171895
|
"props": [
|
|
171896
|
+
{
|
|
171897
|
+
"kind": "property",
|
|
171898
|
+
"name": "loadingDotColor",
|
|
171899
|
+
"required": false,
|
|
171900
|
+
"type": {
|
|
171901
|
+
"kind": "primitive",
|
|
171902
|
+
"value": "string"
|
|
171903
|
+
},
|
|
171904
|
+
"description": "Applies backgroundColor to loading dots, intended for use with the circle variant design on grey/dark/image-based backgrounds.",
|
|
171905
|
+
"declarations": [
|
|
171906
|
+
{
|
|
171907
|
+
"name": "loadingDotColor",
|
|
171908
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
|
|
171909
|
+
}
|
|
171910
|
+
],
|
|
171911
|
+
"tags": {
|
|
171912
|
+
"default": "`system.color.bg.alt.strong`"
|
|
171913
|
+
},
|
|
171914
|
+
"defaultValue": {
|
|
171915
|
+
"kind": "symbol",
|
|
171916
|
+
"name": "`system.color.bg.alt.strong`",
|
|
171917
|
+
"value": "`system.color.bg.alt.strong`"
|
|
171918
|
+
}
|
|
171919
|
+
},
|
|
171920
|
+
{
|
|
171921
|
+
"kind": "property",
|
|
171922
|
+
"name": "animationDurationMs",
|
|
171923
|
+
"required": false,
|
|
171924
|
+
"type": {
|
|
171925
|
+
"kind": "primitive",
|
|
171926
|
+
"value": "string"
|
|
171927
|
+
},
|
|
171928
|
+
"description": "Duration of the loading animation in milliseconds.",
|
|
171929
|
+
"declarations": [
|
|
171930
|
+
{
|
|
171931
|
+
"name": "animationDurationMs",
|
|
171932
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
|
|
171933
|
+
}
|
|
171934
|
+
],
|
|
171935
|
+
"tags": {
|
|
171936
|
+
"default": "`40ms`"
|
|
171937
|
+
},
|
|
171938
|
+
"defaultValue": {
|
|
171939
|
+
"kind": "symbol",
|
|
171940
|
+
"name": "`40ms`",
|
|
171941
|
+
"value": "`40ms`"
|
|
171942
|
+
}
|
|
171943
|
+
},
|
|
171317
171944
|
{
|
|
171318
171945
|
"kind": "property",
|
|
171319
171946
|
"name": "cs",
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
|
|
1
|
+
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
2
|
import Basic from './examples/Basic';
|
|
3
3
|
import RTL from './examples/RTL';
|
|
4
4
|
import Accessible from './examples/Accessible';
|
|
5
|
+
import CustomShape from './examples/CustomShape';
|
|
6
|
+
import CustomColorAndAnimation from './examples/CustomColorAndAnimation';
|
|
5
7
|
|
|
6
8
|
# Canvas Kit Loading Dots
|
|
7
9
|
|
|
8
10
|
Loading Dots make users aware that content is currently being loaded, processing, or that change
|
|
9
11
|
will occur on the page.
|
|
10
12
|
|
|
11
|
-
[> Workday Design Reference](https://
|
|
13
|
+
[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/loading-dots/)
|
|
12
14
|
|
|
13
15
|
## Installation
|
|
14
16
|
|
|
@@ -26,10 +28,20 @@ yarn add @workday/canvas-kit-react
|
|
|
26
28
|
|
|
27
29
|
<ExampleCodeBlock code={RTL} />
|
|
28
30
|
|
|
31
|
+
### Custom Shape
|
|
32
|
+
|
|
33
|
+
<ExampleCodeBlock code={CustomShape} />
|
|
34
|
+
|
|
35
|
+
### Custom Color and Animation
|
|
36
|
+
|
|
37
|
+
<ExampleCodeBlock code={CustomColorAndAnimation} />
|
|
38
|
+
|
|
29
39
|
### Custom Styles
|
|
30
40
|
|
|
31
41
|
Loading Dots supports custom styling via the `cs` prop. For more information, check our
|
|
32
|
-
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--
|
|
42
|
+
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
|
|
43
|
+
|
|
44
|
+
Custom styling is also supported through the [Loading Dots documented props below](#props).
|
|
33
45
|
|
|
34
46
|
### Adding screen reader support to loading animations
|
|
35
47
|
|
|
@@ -47,7 +59,6 @@ components included in Canvas to describe both the appearance and disappearance
|
|
|
47
59
|
|
|
48
60
|
<ExampleCodeBlock code={Accessible} />
|
|
49
61
|
|
|
50
|
-
##
|
|
62
|
+
## Component API
|
|
51
63
|
|
|
52
|
-
|
|
53
|
-
element.
|
|
64
|
+
<SymbolDoc name="LoadingDots" fileName="/react/" />
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
|
|
3
|
-
import {
|
|
3
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import {SecondaryButton} from '@workday/canvas-kit-react/button';
|
|
6
6
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
|
|
3
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
4
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
5
|
+
|
|
6
|
+
const styleOverrides = {
|
|
7
|
+
parentContainer: createStyles({
|
|
8
|
+
display: 'flex',
|
|
9
|
+
gap: system.space.x4,
|
|
10
|
+
}),
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default () => {
|
|
14
|
+
return (
|
|
15
|
+
<div className={styleOverrides.parentContainer}>
|
|
16
|
+
<LoadingDots loadingDotColor={system.color.fg.primary.default} animationDurationMs="60ms" />
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {LoadingDots, loadingDotsStencil} from '@workday/canvas-kit-react/loading-dots';
|
|
3
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
4
|
+
import {createStyles, createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
|
|
6
|
+
const styleOverrides = {
|
|
7
|
+
parentContainer: createStyles({
|
|
8
|
+
display: 'flex',
|
|
9
|
+
gap: system.space.x4,
|
|
10
|
+
}),
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const loadingStencil = createStencil({
|
|
14
|
+
base: {
|
|
15
|
+
borderRadius: system.shape.round,
|
|
16
|
+
backgroundColor: system.color.bg.overlay,
|
|
17
|
+
height: 80,
|
|
18
|
+
width: 80,
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
justifyContent: 'center',
|
|
21
|
+
display: 'flex',
|
|
22
|
+
[loadingDotsStencil.vars.loadingDotColor]: system.color.icon.inverse,
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export default () => {
|
|
27
|
+
return (
|
|
28
|
+
<div className={styleOverrides.parentContainer}>
|
|
29
|
+
<LoadingDots cs={loadingStencil()} />
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0-alpha.938-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": "^
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^
|
|
49
|
-
"@workday/canvas-kit-react": "^
|
|
50
|
-
"@workday/canvas-kit-styling": "^
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.938-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.938-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.938-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.938-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.0.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "2ad2b087dc7ee7b1c0a737ebcee42b927dca7806"
|
|
64
64
|
}
|