@workday/canvas-kit-docs 11.0.0-alpha.656-next.0 → 11.0.0-alpha.662-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
CHANGED
|
@@ -109497,6 +109497,551 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
109497
109497
|
}
|
|
109498
109498
|
}
|
|
109499
109499
|
},
|
|
109500
|
+
{
|
|
109501
|
+
"name": "accessibleHide",
|
|
109502
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx",
|
|
109503
|
+
"description": "A utility to visually hide content, while still making accessible to screen readers\nSee https://a11y-101.com/development/skip-link",
|
|
109504
|
+
"declarations": [
|
|
109505
|
+
{
|
|
109506
|
+
"name": "accessibleHide",
|
|
109507
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109508
|
+
}
|
|
109509
|
+
],
|
|
109510
|
+
"tags": {},
|
|
109511
|
+
"type": {
|
|
109512
|
+
"kind": "object",
|
|
109513
|
+
"properties": [
|
|
109514
|
+
{
|
|
109515
|
+
"kind": "property",
|
|
109516
|
+
"name": "clip",
|
|
109517
|
+
"defaultValue": {
|
|
109518
|
+
"kind": "string",
|
|
109519
|
+
"value": "rect(1px, 1px, 1px, 1px)"
|
|
109520
|
+
},
|
|
109521
|
+
"type": {
|
|
109522
|
+
"kind": "string",
|
|
109523
|
+
"value": "rect(1px, 1px, 1px, 1px)"
|
|
109524
|
+
},
|
|
109525
|
+
"required": true,
|
|
109526
|
+
"description": "",
|
|
109527
|
+
"declarations": [
|
|
109528
|
+
{
|
|
109529
|
+
"name": "clip",
|
|
109530
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109531
|
+
}
|
|
109532
|
+
],
|
|
109533
|
+
"tags": {}
|
|
109534
|
+
},
|
|
109535
|
+
{
|
|
109536
|
+
"kind": "property",
|
|
109537
|
+
"name": "clipPath",
|
|
109538
|
+
"defaultValue": {
|
|
109539
|
+
"kind": "string",
|
|
109540
|
+
"value": "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)"
|
|
109541
|
+
},
|
|
109542
|
+
"type": {
|
|
109543
|
+
"kind": "string",
|
|
109544
|
+
"value": "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)"
|
|
109545
|
+
},
|
|
109546
|
+
"required": true,
|
|
109547
|
+
"description": "",
|
|
109548
|
+
"declarations": [
|
|
109549
|
+
{
|
|
109550
|
+
"name": "clipPath",
|
|
109551
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109552
|
+
}
|
|
109553
|
+
],
|
|
109554
|
+
"tags": {}
|
|
109555
|
+
},
|
|
109556
|
+
{
|
|
109557
|
+
"kind": "property",
|
|
109558
|
+
"name": "position",
|
|
109559
|
+
"defaultValue": {
|
|
109560
|
+
"kind": "string",
|
|
109561
|
+
"value": "absolute"
|
|
109562
|
+
},
|
|
109563
|
+
"type": {
|
|
109564
|
+
"kind": "string",
|
|
109565
|
+
"value": "absolute"
|
|
109566
|
+
},
|
|
109567
|
+
"required": true,
|
|
109568
|
+
"description": "",
|
|
109569
|
+
"declarations": [
|
|
109570
|
+
{
|
|
109571
|
+
"name": "position",
|
|
109572
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109573
|
+
}
|
|
109574
|
+
],
|
|
109575
|
+
"tags": {}
|
|
109576
|
+
},
|
|
109577
|
+
{
|
|
109578
|
+
"kind": "property",
|
|
109579
|
+
"name": "overflow",
|
|
109580
|
+
"defaultValue": {
|
|
109581
|
+
"kind": "string",
|
|
109582
|
+
"value": "hidden"
|
|
109583
|
+
},
|
|
109584
|
+
"type": {
|
|
109585
|
+
"kind": "string",
|
|
109586
|
+
"value": "hidden"
|
|
109587
|
+
},
|
|
109588
|
+
"required": true,
|
|
109589
|
+
"description": "",
|
|
109590
|
+
"declarations": [
|
|
109591
|
+
{
|
|
109592
|
+
"name": "overflow",
|
|
109593
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109594
|
+
}
|
|
109595
|
+
],
|
|
109596
|
+
"tags": {}
|
|
109597
|
+
},
|
|
109598
|
+
{
|
|
109599
|
+
"kind": "property",
|
|
109600
|
+
"name": "whiteSpace",
|
|
109601
|
+
"defaultValue": {
|
|
109602
|
+
"kind": "string",
|
|
109603
|
+
"value": "nowrap"
|
|
109604
|
+
},
|
|
109605
|
+
"type": {
|
|
109606
|
+
"kind": "string",
|
|
109607
|
+
"value": "nowrap"
|
|
109608
|
+
},
|
|
109609
|
+
"required": true,
|
|
109610
|
+
"description": "",
|
|
109611
|
+
"declarations": [
|
|
109612
|
+
{
|
|
109613
|
+
"name": "whiteSpace",
|
|
109614
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109615
|
+
}
|
|
109616
|
+
],
|
|
109617
|
+
"tags": {}
|
|
109618
|
+
},
|
|
109619
|
+
{
|
|
109620
|
+
"kind": "property",
|
|
109621
|
+
"name": "height",
|
|
109622
|
+
"defaultValue": {
|
|
109623
|
+
"kind": "string",
|
|
109624
|
+
"value": "1px"
|
|
109625
|
+
},
|
|
109626
|
+
"type": {
|
|
109627
|
+
"kind": "string",
|
|
109628
|
+
"value": "1px"
|
|
109629
|
+
},
|
|
109630
|
+
"required": true,
|
|
109631
|
+
"description": "",
|
|
109632
|
+
"declarations": [
|
|
109633
|
+
{
|
|
109634
|
+
"name": "height",
|
|
109635
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109636
|
+
}
|
|
109637
|
+
],
|
|
109638
|
+
"tags": {}
|
|
109639
|
+
},
|
|
109640
|
+
{
|
|
109641
|
+
"kind": "property",
|
|
109642
|
+
"name": "width",
|
|
109643
|
+
"defaultValue": {
|
|
109644
|
+
"kind": "string",
|
|
109645
|
+
"value": "1px"
|
|
109646
|
+
},
|
|
109647
|
+
"type": {
|
|
109648
|
+
"kind": "string",
|
|
109649
|
+
"value": "1px"
|
|
109650
|
+
},
|
|
109651
|
+
"required": true,
|
|
109652
|
+
"description": "",
|
|
109653
|
+
"declarations": [
|
|
109654
|
+
{
|
|
109655
|
+
"name": "width",
|
|
109656
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109657
|
+
}
|
|
109658
|
+
],
|
|
109659
|
+
"tags": {}
|
|
109660
|
+
},
|
|
109661
|
+
{
|
|
109662
|
+
"kind": "property",
|
|
109663
|
+
"name": "margin",
|
|
109664
|
+
"defaultValue": {
|
|
109665
|
+
"kind": "string",
|
|
109666
|
+
"value": "-1px"
|
|
109667
|
+
},
|
|
109668
|
+
"type": {
|
|
109669
|
+
"kind": "string",
|
|
109670
|
+
"value": "-1px"
|
|
109671
|
+
},
|
|
109672
|
+
"required": true,
|
|
109673
|
+
"description": "",
|
|
109674
|
+
"declarations": [
|
|
109675
|
+
{
|
|
109676
|
+
"name": "margin",
|
|
109677
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109678
|
+
}
|
|
109679
|
+
],
|
|
109680
|
+
"tags": {}
|
|
109681
|
+
},
|
|
109682
|
+
{
|
|
109683
|
+
"kind": "property",
|
|
109684
|
+
"name": "padding",
|
|
109685
|
+
"defaultValue": {
|
|
109686
|
+
"kind": "number",
|
|
109687
|
+
"value": 0
|
|
109688
|
+
},
|
|
109689
|
+
"type": {
|
|
109690
|
+
"kind": "number",
|
|
109691
|
+
"value": 0
|
|
109692
|
+
},
|
|
109693
|
+
"required": true,
|
|
109694
|
+
"description": "",
|
|
109695
|
+
"declarations": [
|
|
109696
|
+
{
|
|
109697
|
+
"name": "padding",
|
|
109698
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109699
|
+
}
|
|
109700
|
+
],
|
|
109701
|
+
"tags": {}
|
|
109702
|
+
},
|
|
109703
|
+
{
|
|
109704
|
+
"kind": "property",
|
|
109705
|
+
"name": "border",
|
|
109706
|
+
"defaultValue": {
|
|
109707
|
+
"kind": "number",
|
|
109708
|
+
"value": 0
|
|
109709
|
+
},
|
|
109710
|
+
"type": {
|
|
109711
|
+
"kind": "number",
|
|
109712
|
+
"value": 0
|
|
109713
|
+
},
|
|
109714
|
+
"required": true,
|
|
109715
|
+
"description": "",
|
|
109716
|
+
"declarations": [
|
|
109717
|
+
{
|
|
109718
|
+
"name": "border",
|
|
109719
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109720
|
+
}
|
|
109721
|
+
],
|
|
109722
|
+
"tags": {}
|
|
109723
|
+
}
|
|
109724
|
+
]
|
|
109725
|
+
}
|
|
109726
|
+
},
|
|
109727
|
+
{
|
|
109728
|
+
"name": "AccessibleHide",
|
|
109729
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx",
|
|
109730
|
+
"description": "A convenient component wrapper to visually hide content, while still making it accessible to screen readers",
|
|
109731
|
+
"declarations": [
|
|
109732
|
+
{
|
|
109733
|
+
"name": "AccessibleHide",
|
|
109734
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
|
|
109735
|
+
}
|
|
109736
|
+
],
|
|
109737
|
+
"tags": {},
|
|
109738
|
+
"type": {
|
|
109739
|
+
"kind": "enhancedComponent",
|
|
109740
|
+
"componentType": "regular",
|
|
109741
|
+
"displayName": "AccessibleHide",
|
|
109742
|
+
"props": [
|
|
109743
|
+
{
|
|
109744
|
+
"kind": "property",
|
|
109745
|
+
"name": "cs",
|
|
109746
|
+
"required": false,
|
|
109747
|
+
"type": {
|
|
109748
|
+
"kind": "symbol",
|
|
109749
|
+
"name": "CSToPropsInput",
|
|
109750
|
+
"value": "CSToPropsInput"
|
|
109751
|
+
},
|
|
109752
|
+
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
109753
|
+
"declarations": [
|
|
109754
|
+
{
|
|
109755
|
+
"name": "cs",
|
|
109756
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
109757
|
+
}
|
|
109758
|
+
],
|
|
109759
|
+
"tags": {}
|
|
109760
|
+
},
|
|
109761
|
+
{
|
|
109762
|
+
"kind": "property",
|
|
109763
|
+
"name": "children",
|
|
109764
|
+
"description": "",
|
|
109765
|
+
"tags": {},
|
|
109766
|
+
"declarations": [],
|
|
109767
|
+
"type": {
|
|
109768
|
+
"kind": "external",
|
|
109769
|
+
"name": "React.ReactNode",
|
|
109770
|
+
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
109771
|
+
}
|
|
109772
|
+
},
|
|
109773
|
+
{
|
|
109774
|
+
"kind": "property",
|
|
109775
|
+
"name": "as",
|
|
109776
|
+
"description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
|
|
109777
|
+
"tags": {},
|
|
109778
|
+
"declarations": [],
|
|
109779
|
+
"type": {
|
|
109780
|
+
"kind": "external",
|
|
109781
|
+
"name": "React.ElementType",
|
|
109782
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
109783
|
+
},
|
|
109784
|
+
"defaultValue": {
|
|
109785
|
+
"kind": "external",
|
|
109786
|
+
"name": "div",
|
|
109787
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
109788
|
+
}
|
|
109789
|
+
},
|
|
109790
|
+
{
|
|
109791
|
+
"kind": "property",
|
|
109792
|
+
"name": "ref",
|
|
109793
|
+
"description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
|
|
109794
|
+
"tags": {},
|
|
109795
|
+
"declarations": [],
|
|
109796
|
+
"type": {
|
|
109797
|
+
"kind": "external",
|
|
109798
|
+
"name": "React.Ref",
|
|
109799
|
+
"url": "https://reactjs.org/docs/refs-and-the-dom.html",
|
|
109800
|
+
"typeParameters": [
|
|
109801
|
+
{
|
|
109802
|
+
"kind": "typeParameter",
|
|
109803
|
+
"name": "R",
|
|
109804
|
+
"required": true,
|
|
109805
|
+
"defaultValue": {
|
|
109806
|
+
"kind": "external",
|
|
109807
|
+
"name": "div",
|
|
109808
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
109809
|
+
}
|
|
109810
|
+
}
|
|
109811
|
+
]
|
|
109812
|
+
}
|
|
109813
|
+
}
|
|
109814
|
+
],
|
|
109815
|
+
"baseElement": {
|
|
109816
|
+
"kind": "external",
|
|
109817
|
+
"name": "div",
|
|
109818
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
109819
|
+
}
|
|
109820
|
+
}
|
|
109821
|
+
},
|
|
109822
|
+
{
|
|
109823
|
+
"name": "AriaLiveRegionProps",
|
|
109824
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx",
|
|
109825
|
+
"description": "",
|
|
109826
|
+
"declarations": [
|
|
109827
|
+
{
|
|
109828
|
+
"name": "AriaLiveRegionProps",
|
|
109829
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
|
|
109830
|
+
}
|
|
109831
|
+
],
|
|
109832
|
+
"tags": {},
|
|
109833
|
+
"type": {
|
|
109834
|
+
"kind": "alias",
|
|
109835
|
+
"name": "AriaLiveRegion"
|
|
109836
|
+
}
|
|
109837
|
+
},
|
|
109838
|
+
{
|
|
109839
|
+
"name": "AriaLiveRegion",
|
|
109840
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx",
|
|
109841
|
+
"description": "A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)",
|
|
109842
|
+
"declarations": [
|
|
109843
|
+
{
|
|
109844
|
+
"name": "AriaLiveRegion",
|
|
109845
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
|
|
109846
|
+
}
|
|
109847
|
+
],
|
|
109848
|
+
"tags": {},
|
|
109849
|
+
"type": {
|
|
109850
|
+
"kind": "enhancedComponent",
|
|
109851
|
+
"componentType": "regular",
|
|
109852
|
+
"displayName": "AriaLiveRegion",
|
|
109853
|
+
"props": [
|
|
109854
|
+
{
|
|
109855
|
+
"kind": "property",
|
|
109856
|
+
"name": "aria-atomic",
|
|
109857
|
+
"required": false,
|
|
109858
|
+
"type": {
|
|
109859
|
+
"kind": "union",
|
|
109860
|
+
"value": [
|
|
109861
|
+
{
|
|
109862
|
+
"kind": "boolean",
|
|
109863
|
+
"value": true
|
|
109864
|
+
},
|
|
109865
|
+
{
|
|
109866
|
+
"kind": "boolean",
|
|
109867
|
+
"value": false
|
|
109868
|
+
},
|
|
109869
|
+
{
|
|
109870
|
+
"kind": "string",
|
|
109871
|
+
"value": "true"
|
|
109872
|
+
},
|
|
109873
|
+
{
|
|
109874
|
+
"kind": "string",
|
|
109875
|
+
"value": "false"
|
|
109876
|
+
}
|
|
109877
|
+
]
|
|
109878
|
+
},
|
|
109879
|
+
"description": "set the [aria-atomic](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute",
|
|
109880
|
+
"declarations": [
|
|
109881
|
+
{
|
|
109882
|
+
"name": "aria-atomic",
|
|
109883
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
|
|
109884
|
+
}
|
|
109885
|
+
],
|
|
109886
|
+
"tags": {
|
|
109887
|
+
"default": "true"
|
|
109888
|
+
},
|
|
109889
|
+
"defaultValue": {
|
|
109890
|
+
"kind": "boolean",
|
|
109891
|
+
"value": true
|
|
109892
|
+
}
|
|
109893
|
+
},
|
|
109894
|
+
{
|
|
109895
|
+
"kind": "property",
|
|
109896
|
+
"name": "aria-live",
|
|
109897
|
+
"required": false,
|
|
109898
|
+
"type": {
|
|
109899
|
+
"kind": "union",
|
|
109900
|
+
"value": [
|
|
109901
|
+
{
|
|
109902
|
+
"kind": "string",
|
|
109903
|
+
"value": "polite"
|
|
109904
|
+
},
|
|
109905
|
+
{
|
|
109906
|
+
"kind": "string",
|
|
109907
|
+
"value": "assertive"
|
|
109908
|
+
},
|
|
109909
|
+
{
|
|
109910
|
+
"kind": "string",
|
|
109911
|
+
"value": "off"
|
|
109912
|
+
}
|
|
109913
|
+
]
|
|
109914
|
+
},
|
|
109915
|
+
"description": "set the [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute",
|
|
109916
|
+
"declarations": [
|
|
109917
|
+
{
|
|
109918
|
+
"name": "aria-live",
|
|
109919
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
|
|
109920
|
+
}
|
|
109921
|
+
],
|
|
109922
|
+
"tags": {
|
|
109923
|
+
"default": "'polite'"
|
|
109924
|
+
},
|
|
109925
|
+
"defaultValue": {
|
|
109926
|
+
"kind": "string",
|
|
109927
|
+
"value": "polite"
|
|
109928
|
+
}
|
|
109929
|
+
},
|
|
109930
|
+
{
|
|
109931
|
+
"kind": "property",
|
|
109932
|
+
"name": "role",
|
|
109933
|
+
"required": false,
|
|
109934
|
+
"type": {
|
|
109935
|
+
"kind": "union",
|
|
109936
|
+
"value": [
|
|
109937
|
+
{
|
|
109938
|
+
"kind": "string",
|
|
109939
|
+
"value": "status"
|
|
109940
|
+
},
|
|
109941
|
+
{
|
|
109942
|
+
"kind": "string",
|
|
109943
|
+
"value": "alert"
|
|
109944
|
+
},
|
|
109945
|
+
{
|
|
109946
|
+
"kind": "string",
|
|
109947
|
+
"value": "log"
|
|
109948
|
+
}
|
|
109949
|
+
]
|
|
109950
|
+
},
|
|
109951
|
+
"description": "set the live region's [aria role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)",
|
|
109952
|
+
"declarations": [
|
|
109953
|
+
{
|
|
109954
|
+
"name": "role",
|
|
109955
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
|
|
109956
|
+
}
|
|
109957
|
+
],
|
|
109958
|
+
"tags": {
|
|
109959
|
+
"default": "'status'"
|
|
109960
|
+
},
|
|
109961
|
+
"defaultValue": {
|
|
109962
|
+
"kind": "string",
|
|
109963
|
+
"value": "status"
|
|
109964
|
+
}
|
|
109965
|
+
},
|
|
109966
|
+
{
|
|
109967
|
+
"kind": "property",
|
|
109968
|
+
"name": "cs",
|
|
109969
|
+
"required": false,
|
|
109970
|
+
"type": {
|
|
109971
|
+
"kind": "symbol",
|
|
109972
|
+
"name": "CSToPropsInput",
|
|
109973
|
+
"value": "CSToPropsInput"
|
|
109974
|
+
},
|
|
109975
|
+
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
109976
|
+
"declarations": [
|
|
109977
|
+
{
|
|
109978
|
+
"name": "cs",
|
|
109979
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
109980
|
+
}
|
|
109981
|
+
],
|
|
109982
|
+
"tags": {}
|
|
109983
|
+
},
|
|
109984
|
+
{
|
|
109985
|
+
"kind": "property",
|
|
109986
|
+
"name": "children",
|
|
109987
|
+
"description": "",
|
|
109988
|
+
"tags": {},
|
|
109989
|
+
"declarations": [],
|
|
109990
|
+
"type": {
|
|
109991
|
+
"kind": "external",
|
|
109992
|
+
"name": "React.ReactNode",
|
|
109993
|
+
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
109994
|
+
}
|
|
109995
|
+
},
|
|
109996
|
+
{
|
|
109997
|
+
"kind": "property",
|
|
109998
|
+
"name": "as",
|
|
109999
|
+
"description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
|
|
110000
|
+
"tags": {},
|
|
110001
|
+
"declarations": [],
|
|
110002
|
+
"type": {
|
|
110003
|
+
"kind": "external",
|
|
110004
|
+
"name": "React.ElementType",
|
|
110005
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
110006
|
+
},
|
|
110007
|
+
"defaultValue": {
|
|
110008
|
+
"kind": "external",
|
|
110009
|
+
"name": "div",
|
|
110010
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
110011
|
+
}
|
|
110012
|
+
},
|
|
110013
|
+
{
|
|
110014
|
+
"kind": "property",
|
|
110015
|
+
"name": "ref",
|
|
110016
|
+
"description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
|
|
110017
|
+
"tags": {},
|
|
110018
|
+
"declarations": [],
|
|
110019
|
+
"type": {
|
|
110020
|
+
"kind": "external",
|
|
110021
|
+
"name": "React.Ref",
|
|
110022
|
+
"url": "https://reactjs.org/docs/refs-and-the-dom.html",
|
|
110023
|
+
"typeParameters": [
|
|
110024
|
+
{
|
|
110025
|
+
"kind": "typeParameter",
|
|
110026
|
+
"name": "R",
|
|
110027
|
+
"required": true,
|
|
110028
|
+
"defaultValue": {
|
|
110029
|
+
"kind": "external",
|
|
110030
|
+
"name": "div",
|
|
110031
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
110032
|
+
}
|
|
110033
|
+
}
|
|
110034
|
+
]
|
|
110035
|
+
}
|
|
110036
|
+
}
|
|
110037
|
+
],
|
|
110038
|
+
"baseElement": {
|
|
110039
|
+
"kind": "external",
|
|
110040
|
+
"name": "div",
|
|
110041
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
|
|
110042
|
+
}
|
|
110043
|
+
}
|
|
110044
|
+
},
|
|
109500
110045
|
{
|
|
109501
110046
|
"name": "CanvasProviderProps",
|
|
109502
110047
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
|
|
@@ -110665,23 +111210,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
110665
111210
|
}
|
|
110666
111211
|
}
|
|
110667
111212
|
},
|
|
110668
|
-
{
|
|
110669
|
-
"name": "accessibleHide",
|
|
110670
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/accessibleHide.ts",
|
|
110671
|
-
"description": "A utility to visually hide content, while still making accessible to screenreaders\nSee https://a11y-101.com/development/skip-link",
|
|
110672
|
-
"declarations": [
|
|
110673
|
-
{
|
|
110674
|
-
"name": "accessibleHide",
|
|
110675
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/accessibleHide.ts"
|
|
110676
|
-
}
|
|
110677
|
-
],
|
|
110678
|
-
"tags": {},
|
|
110679
|
-
"type": {
|
|
110680
|
-
"kind": "symbol",
|
|
110681
|
-
"name": "CSSProperties",
|
|
110682
|
-
"value": "CSSProperties"
|
|
110683
|
-
}
|
|
110684
|
-
},
|
|
110685
111213
|
{
|
|
110686
111214
|
"name": "getErrorColors",
|
|
110687
111215
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/errorRing.ts",
|
|
@@ -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.
|
|
@@ -19,8 +19,21 @@ yarn add @workday/canvas-kit-react
|
|
|
19
19
|
|
|
20
20
|
### Basic Example
|
|
21
21
|
|
|
22
|
-
`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add
|
|
23
|
-
|
|
22
|
+
`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen
|
|
23
|
+
readers. In the example below, we're simulating a loading state with a `setTimeout` that's triggered
|
|
24
|
+
when the "Generate Quote" button is clicked.
|
|
25
|
+
|
|
26
|
+
The ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And
|
|
27
|
+
it uses the text in `AccessibleHide` to announce when loading is complete. In a real-world
|
|
28
|
+
application, you would probably add another state for loading failures. Also note that generated
|
|
29
|
+
text should live outside the live region. This content doesn't need to be announced to screen
|
|
30
|
+
readers.
|
|
31
|
+
|
|
32
|
+
#### Consolidating ARIA Live Regions
|
|
33
|
+
|
|
34
|
+
In the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general
|
|
35
|
+
you should not have multiple ARIA live regions on the page at once. If you already have a live
|
|
36
|
+
region, consider sending these loading messages there instead of adding another region.
|
|
24
37
|
|
|
25
38
|
<ExampleCodeBlock code={Basic} />
|
|
26
39
|
|
|
@@ -1,6 +1,64 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import {SecondaryButton} from '@workday/canvas-kit-react/button';
|
|
3
|
+
import {Text} from '@workday/canvas-kit-react/text';
|
|
2
4
|
import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
|
|
5
|
+
import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
|
|
6
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
7
|
+
|
|
8
|
+
const containerStyles = createStyles({
|
|
9
|
+
minHeight: '3.5rem',
|
|
10
|
+
display: 'flex',
|
|
11
|
+
flexDirection: 'column',
|
|
12
|
+
gap: '0.5rem',
|
|
13
|
+
});
|
|
3
14
|
|
|
4
15
|
export default () => {
|
|
5
|
-
|
|
16
|
+
const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
|
|
17
|
+
const [quote, setQuote] = React.useState('');
|
|
18
|
+
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
if (loadingStatus === 'loading') {
|
|
21
|
+
const mockLoading = setTimeout(() => {
|
|
22
|
+
setLoadingStatus('success');
|
|
23
|
+
setQuote(getQuote());
|
|
24
|
+
}, 3000);
|
|
25
|
+
|
|
26
|
+
return () => {
|
|
27
|
+
clearTimeout(mockLoading);
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}, [loadingStatus]);
|
|
31
|
+
|
|
32
|
+
const handleClick = () => {
|
|
33
|
+
setQuote('');
|
|
34
|
+
setLoadingStatus('loading');
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<div className={containerStyles}>
|
|
40
|
+
{quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
|
|
41
|
+
<AriaLiveRegion>
|
|
42
|
+
{loadingStatus === 'loading' && <LoadingSparkles aria-label="loading" />}
|
|
43
|
+
{loadingStatus === 'success' && (
|
|
44
|
+
<AccessibleHide role="status">loading complete</AccessibleHide>
|
|
45
|
+
)}
|
|
46
|
+
</AriaLiveRegion>
|
|
47
|
+
</div>
|
|
48
|
+
<SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
|
|
49
|
+
</>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const robotQuotes = [
|
|
54
|
+
'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',
|
|
55
|
+
'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
|
|
56
|
+
'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',
|
|
57
|
+
'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',
|
|
58
|
+
'There is nothing so eternally adhesive as the memory of power.',
|
|
59
|
+
];
|
|
60
|
+
|
|
61
|
+
const getQuote = () => {
|
|
62
|
+
const index = Math.floor(Math.random() * robotQuotes.length);
|
|
63
|
+
return robotQuotes[index];
|
|
6
64
|
};
|
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.662-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.662-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.662-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.662-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.662-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": "ffa75d9e1edd782bf454f8a88dffdc6fca2695fa"
|
|
63
63
|
}
|