@workday/canvas-kit-docs 14.0.0-alpha.1148-next.0 → 14.0.0-alpha.1151-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 +0 -550
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +19 -2
- package/dist/mdx/react/card/card.mdx +4 -5
- package/dist/mdx/styling/mdx/CreateStyles.mdx +111 -0
- package/dist/mdx/styling/mdx/CustomizingStyles.mdx +179 -0
- package/dist/mdx/styling/mdx/FromEmotion.mdx +178 -0
- package/dist/mdx/styling/mdx/MergingStyles.mdx +164 -0
- package/dist/mdx/styling/mdx/Overview.mdx +254 -0
- package/dist/mdx/styling/mdx/Stencils.mdx +459 -0
- package/dist/mdx/styling/mdx/Utilities.mdx +246 -0
- package/dist/mdx/styling/mdx/WhyCanvasStyling.mdx +136 -0
- package/dist/mdx/styling/mdx/examples/CSProp.tsx +36 -0
- package/dist/mdx/styling/mdx/examples/CreateModifiers.tsx +27 -0
- package/dist/mdx/styling/mdx/examples/CreateStencil.tsx +63 -0
- package/dist/mdx/styling/mdx/examples/CreateStyles.tsx +13 -0
- package/dist/mdx/styling/mdx/examples/CreateVars.tsx +20 -0
- package/dist/mdx/styling/mdx/examples/CustomButton.tsx +69 -0
- package/dist/mdx/styling/mdx/examples/CustomIcon.tsx +23 -0
- package/dist/mdx/styling/mdx/examples/EmotionButton.tsx +111 -0
- package/dist/mdx/styling/mdx/examples/ManualStylesButton.tsx +107 -0
- package/dist/mdx/styling/mdx/examples/StyledButton.tsx +31 -0
- package/dist/mdx/styling/mdx/examples/StylingButton.tsx +107 -0
- package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx +158 -0
- package/package.json +6 -6
- package/dist/mdx/preview-react/menu/Menu.mdx +0 -105
- package/dist/mdx/preview-react/menu/examples/Basic.tsx +0 -74
- package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx +0 -67
- package/dist/mdx/preview-react/menu/examples/CustomMenuItem.tsx +0 -15
- package/dist/mdx/preview-react/menu/examples/Headers.tsx +0 -32
- package/dist/mdx/preview-react/menu/examples/Icons.tsx +0 -26
- package/dist/mdx/preview-react/menu/examples/ManyItems.tsx +0 -15
package/dist/es6/lib/docs.js
CHANGED
|
@@ -8708,556 +8708,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8708
8708
|
"value": "CanvasSystemIcon"
|
|
8709
8709
|
}
|
|
8710
8710
|
},
|
|
8711
|
-
{
|
|
8712
|
-
"name": "DeprecatedMenuProps",
|
|
8713
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx",
|
|
8714
|
-
"description": "",
|
|
8715
|
-
"declarations": [
|
|
8716
|
-
{
|
|
8717
|
-
"name": "DeprecatedMenuProps",
|
|
8718
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8719
|
-
}
|
|
8720
|
-
],
|
|
8721
|
-
"tags": {
|
|
8722
|
-
"deprecated": "⚠️ `DeprecatedMenuProps` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead."
|
|
8723
|
-
},
|
|
8724
|
-
"type": {
|
|
8725
|
-
"kind": "alias",
|
|
8726
|
-
"name": "DeprecatedMenu"
|
|
8727
|
-
}
|
|
8728
|
-
},
|
|
8729
|
-
{
|
|
8730
|
-
"name": "DeprecatedMenuState",
|
|
8731
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx",
|
|
8732
|
-
"description": "",
|
|
8733
|
-
"declarations": [
|
|
8734
|
-
{
|
|
8735
|
-
"name": "DeprecatedMenuState",
|
|
8736
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8737
|
-
}
|
|
8738
|
-
],
|
|
8739
|
-
"tags": {
|
|
8740
|
-
"deprecated": "⚠️ `DeprecatedMenuState` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead."
|
|
8741
|
-
},
|
|
8742
|
-
"type": {
|
|
8743
|
-
"kind": "object",
|
|
8744
|
-
"properties": [
|
|
8745
|
-
{
|
|
8746
|
-
"kind": "property",
|
|
8747
|
-
"name": "selectedItemIndex",
|
|
8748
|
-
"required": true,
|
|
8749
|
-
"type": {
|
|
8750
|
-
"kind": "primitive",
|
|
8751
|
-
"value": "number"
|
|
8752
|
-
},
|
|
8753
|
-
"description": "",
|
|
8754
|
-
"declarations": [
|
|
8755
|
-
{
|
|
8756
|
-
"name": "selectedItemIndex",
|
|
8757
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8758
|
-
}
|
|
8759
|
-
],
|
|
8760
|
-
"tags": {}
|
|
8761
|
-
}
|
|
8762
|
-
]
|
|
8763
|
-
}
|
|
8764
|
-
},
|
|
8765
|
-
{
|
|
8766
|
-
"name": "DeprecatedMenu",
|
|
8767
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx",
|
|
8768
|
-
"description": "`DeprecatedMenu` renders a styled `<ul role=\"menu\">` element within a {@link Card} and follows\nthe [Active Menu\npattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)\nusing `aria-activedescendant`.\n\nUndocumented props are spread to the underlying `<ul>` element.",
|
|
8769
|
-
"declarations": [
|
|
8770
|
-
{
|
|
8771
|
-
"name": "DeprecatedMenu",
|
|
8772
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8773
|
-
}
|
|
8774
|
-
],
|
|
8775
|
-
"tags": {
|
|
8776
|
-
"deprecated": "⚠️ Deprecated Menu has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead."
|
|
8777
|
-
},
|
|
8778
|
-
"type": {
|
|
8779
|
-
"kind": "component",
|
|
8780
|
-
"props": [
|
|
8781
|
-
{
|
|
8782
|
-
"kind": "property",
|
|
8783
|
-
"name": "children",
|
|
8784
|
-
"required": false,
|
|
8785
|
-
"type": {
|
|
8786
|
-
"kind": "union",
|
|
8787
|
-
"value": [
|
|
8788
|
-
{
|
|
8789
|
-
"kind": "external",
|
|
8790
|
-
"name": "ReactElement",
|
|
8791
|
-
"url": "https://reactjs.org/docs/rendering-elements.html",
|
|
8792
|
-
"typeParameters": [
|
|
8793
|
-
{
|
|
8794
|
-
"kind": "symbol",
|
|
8795
|
-
"name": "DeprecatedMenuItemProps",
|
|
8796
|
-
"value": "DeprecatedMenuItemProps"
|
|
8797
|
-
}
|
|
8798
|
-
]
|
|
8799
|
-
},
|
|
8800
|
-
{
|
|
8801
|
-
"kind": "array",
|
|
8802
|
-
"value": {
|
|
8803
|
-
"kind": "external",
|
|
8804
|
-
"name": "ReactElement",
|
|
8805
|
-
"url": "https://reactjs.org/docs/rendering-elements.html",
|
|
8806
|
-
"typeParameters": [
|
|
8807
|
-
{
|
|
8808
|
-
"kind": "symbol",
|
|
8809
|
-
"name": "DeprecatedMenuItemProps",
|
|
8810
|
-
"value": "DeprecatedMenuItemProps"
|
|
8811
|
-
}
|
|
8812
|
-
]
|
|
8813
|
-
}
|
|
8814
|
-
}
|
|
8815
|
-
]
|
|
8816
|
-
},
|
|
8817
|
-
"description": "The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.",
|
|
8818
|
-
"declarations": [
|
|
8819
|
-
{
|
|
8820
|
-
"name": "children",
|
|
8821
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8822
|
-
}
|
|
8823
|
-
],
|
|
8824
|
-
"tags": {}
|
|
8825
|
-
},
|
|
8826
|
-
{
|
|
8827
|
-
"kind": "property",
|
|
8828
|
-
"name": "isOpen",
|
|
8829
|
-
"required": false,
|
|
8830
|
-
"type": {
|
|
8831
|
-
"kind": "primitive",
|
|
8832
|
-
"value": "boolean"
|
|
8833
|
-
},
|
|
8834
|
-
"description": "If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.",
|
|
8835
|
-
"declarations": [
|
|
8836
|
-
{
|
|
8837
|
-
"name": "isOpen",
|
|
8838
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8839
|
-
}
|
|
8840
|
-
],
|
|
8841
|
-
"tags": {
|
|
8842
|
-
"default": "true"
|
|
8843
|
-
},
|
|
8844
|
-
"defaultValue": {
|
|
8845
|
-
"kind": "boolean",
|
|
8846
|
-
"value": true
|
|
8847
|
-
}
|
|
8848
|
-
},
|
|
8849
|
-
{
|
|
8850
|
-
"kind": "property",
|
|
8851
|
-
"name": "width",
|
|
8852
|
-
"required": false,
|
|
8853
|
-
"type": {
|
|
8854
|
-
"kind": "union",
|
|
8855
|
-
"value": [
|
|
8856
|
-
{
|
|
8857
|
-
"kind": "primitive",
|
|
8858
|
-
"value": "number"
|
|
8859
|
-
},
|
|
8860
|
-
{
|
|
8861
|
-
"kind": "primitive",
|
|
8862
|
-
"value": "string"
|
|
8863
|
-
}
|
|
8864
|
-
]
|
|
8865
|
-
},
|
|
8866
|
-
"description": "The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.",
|
|
8867
|
-
"declarations": [
|
|
8868
|
-
{
|
|
8869
|
-
"name": "width",
|
|
8870
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8871
|
-
}
|
|
8872
|
-
],
|
|
8873
|
-
"tags": {}
|
|
8874
|
-
},
|
|
8875
|
-
{
|
|
8876
|
-
"kind": "property",
|
|
8877
|
-
"name": "onSelect",
|
|
8878
|
-
"required": false,
|
|
8879
|
-
"type": {
|
|
8880
|
-
"kind": "function",
|
|
8881
|
-
"parameters": [],
|
|
8882
|
-
"members": [],
|
|
8883
|
-
"returnType": {
|
|
8884
|
-
"kind": "primitive",
|
|
8885
|
-
"value": "void"
|
|
8886
|
-
}
|
|
8887
|
-
},
|
|
8888
|
-
"description": "The function called when a menu item is selected.",
|
|
8889
|
-
"declarations": [
|
|
8890
|
-
{
|
|
8891
|
-
"name": "onSelect",
|
|
8892
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8893
|
-
}
|
|
8894
|
-
],
|
|
8895
|
-
"tags": {}
|
|
8896
|
-
},
|
|
8897
|
-
{
|
|
8898
|
-
"kind": "property",
|
|
8899
|
-
"name": "onClose",
|
|
8900
|
-
"required": false,
|
|
8901
|
-
"type": {
|
|
8902
|
-
"kind": "function",
|
|
8903
|
-
"parameters": [],
|
|
8904
|
-
"members": [],
|
|
8905
|
-
"returnType": {
|
|
8906
|
-
"kind": "primitive",
|
|
8907
|
-
"value": "void"
|
|
8908
|
-
}
|
|
8909
|
-
},
|
|
8910
|
-
"description": "The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.",
|
|
8911
|
-
"declarations": [
|
|
8912
|
-
{
|
|
8913
|
-
"name": "onClose",
|
|
8914
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8915
|
-
}
|
|
8916
|
-
],
|
|
8917
|
-
"tags": {}
|
|
8918
|
-
},
|
|
8919
|
-
{
|
|
8920
|
-
"kind": "property",
|
|
8921
|
-
"name": "initialSelectedItem",
|
|
8922
|
-
"required": false,
|
|
8923
|
-
"type": {
|
|
8924
|
-
"kind": "primitive",
|
|
8925
|
-
"value": "number"
|
|
8926
|
-
},
|
|
8927
|
-
"description": "The zero-based index of the menu item which should initially receive focus.",
|
|
8928
|
-
"declarations": [
|
|
8929
|
-
{
|
|
8930
|
-
"name": "initialSelectedItem",
|
|
8931
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8932
|
-
}
|
|
8933
|
-
],
|
|
8934
|
-
"tags": {}
|
|
8935
|
-
},
|
|
8936
|
-
{
|
|
8937
|
-
"kind": "property",
|
|
8938
|
-
"name": "id",
|
|
8939
|
-
"required": false,
|
|
8940
|
-
"type": {
|
|
8941
|
-
"kind": "primitive",
|
|
8942
|
-
"value": "string"
|
|
8943
|
-
},
|
|
8944
|
-
"description": "The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.",
|
|
8945
|
-
"declarations": [
|
|
8946
|
-
{
|
|
8947
|
-
"name": "id",
|
|
8948
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8949
|
-
}
|
|
8950
|
-
],
|
|
8951
|
-
"tags": {}
|
|
8952
|
-
},
|
|
8953
|
-
{
|
|
8954
|
-
"kind": "property",
|
|
8955
|
-
"name": "aria-labelledby",
|
|
8956
|
-
"required": false,
|
|
8957
|
-
"type": {
|
|
8958
|
-
"kind": "primitive",
|
|
8959
|
-
"value": "string"
|
|
8960
|
-
},
|
|
8961
|
-
"description": "The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.",
|
|
8962
|
-
"declarations": [
|
|
8963
|
-
{
|
|
8964
|
-
"name": "aria-labelledby",
|
|
8965
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/Menu.tsx"
|
|
8966
|
-
}
|
|
8967
|
-
],
|
|
8968
|
-
"tags": {}
|
|
8969
|
-
},
|
|
8970
|
-
{
|
|
8971
|
-
"kind": "property",
|
|
8972
|
-
"name": "grow",
|
|
8973
|
-
"required": false,
|
|
8974
|
-
"type": {
|
|
8975
|
-
"kind": "primitive",
|
|
8976
|
-
"value": "boolean"
|
|
8977
|
-
},
|
|
8978
|
-
"description": "True if the component should grow to its container's width. False otherwise.",
|
|
8979
|
-
"declarations": [
|
|
8980
|
-
{
|
|
8981
|
-
"name": "grow",
|
|
8982
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
|
|
8983
|
-
}
|
|
8984
|
-
],
|
|
8985
|
-
"tags": {}
|
|
8986
|
-
}
|
|
8987
|
-
]
|
|
8988
|
-
}
|
|
8989
|
-
},
|
|
8990
|
-
{
|
|
8991
|
-
"name": "DeprecatedMenuItemProps",
|
|
8992
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx",
|
|
8993
|
-
"description": "",
|
|
8994
|
-
"declarations": [
|
|
8995
|
-
{
|
|
8996
|
-
"name": "DeprecatedMenuItemProps",
|
|
8997
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
8998
|
-
}
|
|
8999
|
-
],
|
|
9000
|
-
"tags": {
|
|
9001
|
-
"deprecated": "⚠️ `DeprecatedMenuItemProps` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead."
|
|
9002
|
-
},
|
|
9003
|
-
"type": {
|
|
9004
|
-
"kind": "alias",
|
|
9005
|
-
"name": "DeprecatedMenuItem"
|
|
9006
|
-
}
|
|
9007
|
-
},
|
|
9008
|
-
{
|
|
9009
|
-
"name": "DeprecatedMenuItem",
|
|
9010
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx",
|
|
9011
|
-
"description": "`DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is\naccessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`\nelements with the following attributes:\n\n- `role=\"menuitem\"`\n- `tabindex={-1}`\n- `id`s following this pattern: `${MenuId}-${index}`\n\nUndocumented props are spread to the underlying `<li>` element.",
|
|
9012
|
-
"declarations": [
|
|
9013
|
-
{
|
|
9014
|
-
"name": "DeprecatedMenuItem",
|
|
9015
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9016
|
-
}
|
|
9017
|
-
],
|
|
9018
|
-
"tags": {
|
|
9019
|
-
"deprecated": "⚠️ `DeprecatedMenuItem` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead."
|
|
9020
|
-
},
|
|
9021
|
-
"type": {
|
|
9022
|
-
"kind": "component",
|
|
9023
|
-
"props": [
|
|
9024
|
-
{
|
|
9025
|
-
"kind": "property",
|
|
9026
|
-
"name": "onClick",
|
|
9027
|
-
"required": false,
|
|
9028
|
-
"type": {
|
|
9029
|
-
"kind": "function",
|
|
9030
|
-
"parameters": [
|
|
9031
|
-
{
|
|
9032
|
-
"kind": "parameter",
|
|
9033
|
-
"name": "event",
|
|
9034
|
-
"type": {
|
|
9035
|
-
"kind": "symbol",
|
|
9036
|
-
"name": "React.MouseEvent",
|
|
9037
|
-
"value": "MouseEvent<T, E>"
|
|
9038
|
-
},
|
|
9039
|
-
"required": true,
|
|
9040
|
-
"rest": false,
|
|
9041
|
-
"description": "",
|
|
9042
|
-
"declarations": [
|
|
9043
|
-
{
|
|
9044
|
-
"name": "event",
|
|
9045
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9046
|
-
}
|
|
9047
|
-
],
|
|
9048
|
-
"tags": {}
|
|
9049
|
-
}
|
|
9050
|
-
],
|
|
9051
|
-
"members": [],
|
|
9052
|
-
"returnType": {
|
|
9053
|
-
"kind": "primitive",
|
|
9054
|
-
"value": "void"
|
|
9055
|
-
}
|
|
9056
|
-
},
|
|
9057
|
-
"description": "The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).",
|
|
9058
|
-
"declarations": [
|
|
9059
|
-
{
|
|
9060
|
-
"name": "onClick",
|
|
9061
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9062
|
-
}
|
|
9063
|
-
],
|
|
9064
|
-
"tags": {}
|
|
9065
|
-
},
|
|
9066
|
-
{
|
|
9067
|
-
"kind": "property",
|
|
9068
|
-
"name": "id",
|
|
9069
|
-
"required": false,
|
|
9070
|
-
"type": {
|
|
9071
|
-
"kind": "primitive",
|
|
9072
|
-
"value": "string"
|
|
9073
|
-
},
|
|
9074
|
-
"description": "The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.",
|
|
9075
|
-
"declarations": [
|
|
9076
|
-
{
|
|
9077
|
-
"name": "id",
|
|
9078
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9079
|
-
}
|
|
9080
|
-
],
|
|
9081
|
-
"tags": {}
|
|
9082
|
-
},
|
|
9083
|
-
{
|
|
9084
|
-
"kind": "property",
|
|
9085
|
-
"name": "icon",
|
|
9086
|
-
"required": false,
|
|
9087
|
-
"type": {
|
|
9088
|
-
"kind": "symbol",
|
|
9089
|
-
"name": "CanvasSystemIcon",
|
|
9090
|
-
"value": "CanvasSystemIcon"
|
|
9091
|
-
},
|
|
9092
|
-
"description": "The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.",
|
|
9093
|
-
"declarations": [
|
|
9094
|
-
{
|
|
9095
|
-
"name": "icon",
|
|
9096
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9097
|
-
}
|
|
9098
|
-
],
|
|
9099
|
-
"tags": {}
|
|
9100
|
-
},
|
|
9101
|
-
{
|
|
9102
|
-
"kind": "property",
|
|
9103
|
-
"name": "secondaryIcon",
|
|
9104
|
-
"required": false,
|
|
9105
|
-
"type": {
|
|
9106
|
-
"kind": "symbol",
|
|
9107
|
-
"name": "CanvasSystemIcon",
|
|
9108
|
-
"value": "CanvasSystemIcon"
|
|
9109
|
-
},
|
|
9110
|
-
"description": "The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.",
|
|
9111
|
-
"declarations": [
|
|
9112
|
-
{
|
|
9113
|
-
"name": "secondaryIcon",
|
|
9114
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9115
|
-
}
|
|
9116
|
-
],
|
|
9117
|
-
"tags": {}
|
|
9118
|
-
},
|
|
9119
|
-
{
|
|
9120
|
-
"kind": "property",
|
|
9121
|
-
"name": "hasDivider",
|
|
9122
|
-
"required": false,
|
|
9123
|
-
"type": {
|
|
9124
|
-
"kind": "primitive",
|
|
9125
|
-
"value": "boolean"
|
|
9126
|
-
},
|
|
9127
|
-
"description": "If true, render a top border on the DeprecatedMenuItem.",
|
|
9128
|
-
"declarations": [
|
|
9129
|
-
{
|
|
9130
|
-
"name": "hasDivider",
|
|
9131
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9132
|
-
}
|
|
9133
|
-
],
|
|
9134
|
-
"tags": {
|
|
9135
|
-
"default": "false"
|
|
9136
|
-
},
|
|
9137
|
-
"defaultValue": {
|
|
9138
|
-
"kind": "boolean",
|
|
9139
|
-
"value": false
|
|
9140
|
-
}
|
|
9141
|
-
},
|
|
9142
|
-
{
|
|
9143
|
-
"kind": "property",
|
|
9144
|
-
"name": "isHeader",
|
|
9145
|
-
"required": false,
|
|
9146
|
-
"type": {
|
|
9147
|
-
"kind": "primitive",
|
|
9148
|
-
"value": "boolean"
|
|
9149
|
-
},
|
|
9150
|
-
"description": "If true, render a header to group data, this menu item will not be intractable.",
|
|
9151
|
-
"declarations": [
|
|
9152
|
-
{
|
|
9153
|
-
"name": "isHeader",
|
|
9154
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9155
|
-
}
|
|
9156
|
-
],
|
|
9157
|
-
"tags": {
|
|
9158
|
-
"default": "false"
|
|
9159
|
-
},
|
|
9160
|
-
"defaultValue": {
|
|
9161
|
-
"kind": "boolean",
|
|
9162
|
-
"value": false
|
|
9163
|
-
}
|
|
9164
|
-
},
|
|
9165
|
-
{
|
|
9166
|
-
"kind": "property",
|
|
9167
|
-
"name": "isDisabled",
|
|
9168
|
-
"required": false,
|
|
9169
|
-
"type": {
|
|
9170
|
-
"kind": "primitive",
|
|
9171
|
-
"value": "boolean"
|
|
9172
|
-
},
|
|
9173
|
-
"description": "If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.",
|
|
9174
|
-
"declarations": [
|
|
9175
|
-
{
|
|
9176
|
-
"name": "isDisabled",
|
|
9177
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9178
|
-
}
|
|
9179
|
-
],
|
|
9180
|
-
"tags": {
|
|
9181
|
-
"default": "false"
|
|
9182
|
-
},
|
|
9183
|
-
"defaultValue": {
|
|
9184
|
-
"kind": "boolean",
|
|
9185
|
-
"value": false
|
|
9186
|
-
}
|
|
9187
|
-
},
|
|
9188
|
-
{
|
|
9189
|
-
"kind": "property",
|
|
9190
|
-
"name": "isFocused",
|
|
9191
|
-
"required": false,
|
|
9192
|
-
"type": {
|
|
9193
|
-
"kind": "primitive",
|
|
9194
|
-
"value": "boolean"
|
|
9195
|
-
},
|
|
9196
|
-
"description": "If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.",
|
|
9197
|
-
"declarations": [
|
|
9198
|
-
{
|
|
9199
|
-
"name": "isFocused",
|
|
9200
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9201
|
-
}
|
|
9202
|
-
],
|
|
9203
|
-
"tags": {
|
|
9204
|
-
"default": "false"
|
|
9205
|
-
},
|
|
9206
|
-
"defaultValue": {
|
|
9207
|
-
"kind": "boolean",
|
|
9208
|
-
"value": false
|
|
9209
|
-
}
|
|
9210
|
-
},
|
|
9211
|
-
{
|
|
9212
|
-
"kind": "property",
|
|
9213
|
-
"name": "role",
|
|
9214
|
-
"required": false,
|
|
9215
|
-
"type": {
|
|
9216
|
-
"kind": "primitive",
|
|
9217
|
-
"value": "string"
|
|
9218
|
-
},
|
|
9219
|
-
"description": "The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).",
|
|
9220
|
-
"declarations": [
|
|
9221
|
-
{
|
|
9222
|
-
"name": "role",
|
|
9223
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9224
|
-
}
|
|
9225
|
-
],
|
|
9226
|
-
"tags": {
|
|
9227
|
-
"default": "menuItem"
|
|
9228
|
-
},
|
|
9229
|
-
"defaultValue": {
|
|
9230
|
-
"kind": "symbol",
|
|
9231
|
-
"name": "menuItem",
|
|
9232
|
-
"value": "menuItem"
|
|
9233
|
-
}
|
|
9234
|
-
},
|
|
9235
|
-
{
|
|
9236
|
-
"kind": "property",
|
|
9237
|
-
"name": "shouldClose",
|
|
9238
|
-
"required": false,
|
|
9239
|
-
"type": {
|
|
9240
|
-
"kind": "primitive",
|
|
9241
|
-
"value": "boolean"
|
|
9242
|
-
},
|
|
9243
|
-
"description": "If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.",
|
|
9244
|
-
"declarations": [
|
|
9245
|
-
{
|
|
9246
|
-
"name": "shouldClose",
|
|
9247
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/menu/lib/MenuItem.tsx"
|
|
9248
|
-
}
|
|
9249
|
-
],
|
|
9250
|
-
"tags": {
|
|
9251
|
-
"default": "true"
|
|
9252
|
-
},
|
|
9253
|
-
"defaultValue": {
|
|
9254
|
-
"kind": "boolean",
|
|
9255
|
-
"value": true
|
|
9256
|
-
}
|
|
9257
|
-
}
|
|
9258
|
-
]
|
|
9259
|
-
}
|
|
9260
|
-
},
|
|
9261
8711
|
{
|
|
9262
8712
|
"name": "MultiSelectProps",
|
|
9263
8713
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelect.tsx",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.1.
|
|
23
|
-
"@workday/canvas-kit-react": "13.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.1.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.1.5",
|
|
23
|
+
"@workday/canvas-kit-react": "13.1.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.1.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.1.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.1.
|
|
23
|
-
"@workday/canvas-kit-react": "13.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.1.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.1.5",
|
|
23
|
+
"@workday/canvas-kit-react": "13.1.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.1.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.1.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -9,9 +9,11 @@ any questions.
|
|
|
9
9
|
- [Codemod](#codemod)
|
|
10
10
|
- [Instructions](#instructions)
|
|
11
11
|
- [Component Updates](#component-updates)
|
|
12
|
-
- [Styling
|
|
12
|
+
- [Styling Changes](#styling-changes)
|
|
13
13
|
- [Card](#card)
|
|
14
14
|
- [SearchForm](#search-form)
|
|
15
|
+
- [Removals](#removals)
|
|
16
|
+
- [Menu (preview)](#menu-preview)
|
|
15
17
|
- [Troubleshooting](#troubleshooting)
|
|
16
18
|
- [Glossary](#glossary)
|
|
17
19
|
- [Main](#main)
|
|
@@ -81,7 +83,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
81
83
|
|
|
82
84
|
## Component Updates
|
|
83
85
|
|
|
84
|
-
### Styling
|
|
86
|
+
### Styling Changes 💅
|
|
85
87
|
|
|
86
88
|
Several components have been refactored to use our Canvas tokens and styling API. The React
|
|
87
89
|
interface has not changed, but Canvas Tokens are now used for dynamic properties.
|
|
@@ -243,6 +245,21 @@ const customTheme = {
|
|
|
243
245
|
This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
|
|
244
246
|
or `2` to the `searchTheme` prop.
|
|
245
247
|
|
|
248
|
+
## Removals
|
|
249
|
+
|
|
250
|
+
Removals are deletions from our codebase and you can no longer consume this component. We've either
|
|
251
|
+
promoted or replaced a component or utility.
|
|
252
|
+
|
|
253
|
+
### Menu (preview)
|
|
254
|
+
|
|
255
|
+
**PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
|
|
256
|
+
|
|
257
|
+
We've removed `Menu` from `@workday/canvas-kit-preview-react` package. Please use
|
|
258
|
+
[Menu](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs) from
|
|
259
|
+
`@workday/canvas-kit-react` instead.
|
|
260
|
+
|
|
261
|
+
---
|
|
262
|
+
|
|
246
263
|
## Troubleshooting
|
|
247
264
|
|
|
248
265
|
- When upgrading to the latest major version of Canvas Kit, all related Canvas Kit packages should
|
|
@@ -32,17 +32,16 @@ yarn add @workday/canvas-kit-react
|
|
|
32
32
|
### Borderless Example
|
|
33
33
|
|
|
34
34
|
The `borderless` variant removes the border from the Card, creating a cleaner appearance while
|
|
35
|
-
maintaining the same internal spacing and structure.
|
|
36
|
-
|
|
37
|
-
card to blend seamlessly without borders or shadows.
|
|
35
|
+
maintaining the same internal spacing and structure. Use this variant when placing cards on colored
|
|
36
|
+
backgrounds where you want the card to blend seamlessly without borders or shadows.
|
|
38
37
|
|
|
39
38
|
<ExampleCodeBlock code={Borderless} />
|
|
40
39
|
|
|
41
40
|
### Filled Example
|
|
42
41
|
|
|
43
42
|
The `filled` variant adds a background color to the Card, creating a more prominent appearance while
|
|
44
|
-
maintaining the same internal spacing and structure. Use this variant when you need a card with a
|
|
45
|
-
|
|
43
|
+
maintaining the same internal spacing and structure. Use this variant when you need a card with a
|
|
44
|
+
grayish background to create visual separation from the page background.
|
|
46
45
|
|
|
47
46
|
<ExampleCodeBlock code={Filled} />
|
|
48
47
|
|