@workday/canvas-kit-react 12.3.7 → 12.4.0-1019-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/banner/lib/Banner.tsx +2 -9
- package/common/lib/styles/hideMouseFocus.ts +3 -1
- package/dist/commonjs/avatar/lib/Avatar.js +21 -21
- package/dist/commonjs/badge/lib/CountBadge.js +3 -3
- package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
- package/dist/commonjs/banner/lib/Banner.js +1 -2
- package/dist/commonjs/button/lib/BaseButton.js +21 -21
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/Hyperlink.js +2 -2
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +18 -18
- package/dist/commonjs/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardBody.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckBackground.js +3 -3
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +5 -5
- package/dist/commonjs/checkbox/lib/CheckboxContainer.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/commonjs/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/commonjs/collection/lib/ListBox.js +3 -3
- package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +12 -0
- package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/hideMouseFocus.js +3 -1
- package/dist/commonjs/form-field/lib/FormFieldContainer.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +6 -6
- package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
- package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
- package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
- package/dist/commonjs/icon/lib/Graphic.js +2 -2
- package/dist/commonjs/icon/lib/Svg.js +2 -2
- package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +2 -2
- package/dist/commonjs/menu/lib/MenuCard.js +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +1 -1
- package/dist/commonjs/menu/lib/MenuList.js +3 -3
- package/dist/commonjs/menu/lib/MenuOption.js +1 -1
- package/dist/commonjs/modal/lib/ModalBody.js +1 -1
- package/dist/commonjs/modal/lib/ModalCard.js +1 -1
- package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
- package/dist/commonjs/popup/lib/PopupBody.js +1 -1
- package/dist/commonjs/popup/lib/PopupCard.js +2 -2
- package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
- package/dist/commonjs/select/lib/SelectCard.js +1 -1
- package/dist/commonjs/select/lib/SelectInput.js +4 -4
- package/dist/commonjs/switch/lib/Switch.js +7 -7
- package/dist/commonjs/table/lib/Table.js +1 -1
- package/dist/commonjs/table/lib/TableBody.js +1 -1
- package/dist/commonjs/table/lib/TableCaption.js +1 -1
- package/dist/commonjs/table/lib/TableCell.js +1 -1
- package/dist/commonjs/table/lib/TableFooter.js +1 -1
- package/dist/commonjs/table/lib/TableHead.js +1 -1
- package/dist/commonjs/table/lib/TableHeader.js +1 -1
- package/dist/commonjs/table/lib/TableRow.js +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +2 -3
- package/dist/commonjs/tabs/lib/TabsPanel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsPanel.js +1 -1
- package/dist/commonjs/text/lib/LabelText.js +6 -6
- package/dist/commonjs/text/lib/Text.js +16 -16
- package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
- package/dist/commonjs/text-area/lib/TextArea.js +5 -5
- package/dist/commonjs/text-input/lib/InputGroup.js +6 -6
- package/dist/commonjs/text-input/lib/TextInput.js +5 -5
- package/dist/commonjs/toast/lib/Toast.js +1 -1
- package/dist/commonjs/toast/lib/ToastBody.js +1 -1
- package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
- package/dist/commonjs/tooltip/lib/Tooltip.d.ts +13 -2
- package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts +4 -3
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/useTooltip.js +1 -0
- package/dist/es6/avatar/lib/Avatar.js +21 -21
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
- package/dist/es6/banner/lib/Banner.js +2 -3
- package/dist/es6/button/lib/BaseButton.js +21 -21
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/Hyperlink.js +2 -2
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +18 -18
- package/dist/es6/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardBody.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/checkbox/lib/CheckBackground.js +3 -3
- package/dist/es6/checkbox/lib/CheckboxCheck.js +5 -5
- package/dist/es6/checkbox/lib/CheckboxContainer.js +1 -1
- package/dist/es6/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/es6/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/es6/collection/lib/ListBox.js +3 -3
- package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/styles/hideMouseFocus.d.ts +12 -0
- package/dist/es6/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/hideMouseFocus.js +3 -1
- package/dist/es6/form-field/lib/FormFieldContainer.js +1 -1
- package/dist/es6/form-field/lib/FormFieldField.js +1 -1
- package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
- package/dist/es6/form-field/lib/FormFieldLabel.js +6 -6
- package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
- package/dist/es6/icon/lib/AccentIcon.js +2 -2
- package/dist/es6/icon/lib/AppletIcon.js +1 -1
- package/dist/es6/icon/lib/Graphic.js +2 -2
- package/dist/es6/icon/lib/Svg.js +2 -2
- package/dist/es6/icon/lib/SystemIcon.js +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.js +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.js +2 -2
- package/dist/es6/menu/lib/MenuCard.js +1 -1
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/menu/lib/MenuList.js +3 -3
- package/dist/es6/menu/lib/MenuOption.js +1 -1
- package/dist/es6/modal/lib/ModalBody.js +1 -1
- package/dist/es6/modal/lib/ModalCard.js +1 -1
- package/dist/es6/modal/lib/ModalHeading.js +1 -1
- package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/es6/modal/lib/ModalOverlay.js +2 -2
- package/dist/es6/popup/lib/PopupBody.js +1 -1
- package/dist/es6/popup/lib/PopupCard.js +2 -2
- package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/es6/popup/lib/PopupHeading.js +1 -1
- package/dist/es6/select/lib/SelectCard.js +1 -1
- package/dist/es6/select/lib/SelectInput.js +4 -4
- package/dist/es6/switch/lib/Switch.js +7 -7
- package/dist/es6/table/lib/Table.js +1 -1
- package/dist/es6/table/lib/TableBody.js +1 -1
- package/dist/es6/table/lib/TableCaption.js +1 -1
- package/dist/es6/table/lib/TableCell.js +1 -1
- package/dist/es6/table/lib/TableFooter.js +1 -1
- package/dist/es6/table/lib/TableHead.js +1 -1
- package/dist/es6/table/lib/TableHeader.js +1 -1
- package/dist/es6/table/lib/TableRow.js +1 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +3 -4
- package/dist/es6/tabs/lib/TabsPanel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsPanel.js +2 -2
- package/dist/es6/text/lib/LabelText.js +6 -6
- package/dist/es6/text/lib/Text.js +16 -16
- package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
- package/dist/es6/text-area/lib/TextArea.js +5 -5
- package/dist/es6/text-input/lib/InputGroup.js +6 -6
- package/dist/es6/text-input/lib/TextInput.js +5 -5
- package/dist/es6/toast/lib/Toast.js +1 -1
- package/dist/es6/toast/lib/ToastBody.js +1 -1
- package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/es6/toast/lib/ToastIcon.js +1 -1
- package/dist/es6/toast/lib/ToastMessage.js +1 -1
- package/dist/es6/tooltip/lib/Tooltip.d.ts +13 -2
- package/dist/es6/tooltip/lib/Tooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/useTooltip.d.ts +4 -3
- package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/useTooltip.js +1 -0
- package/package.json +4 -4
- package/select/lib/SelectInput.tsx +1 -1
- package/tabs/lib/TabsItem.tsx +2 -5
- package/tabs/lib/TabsPanel.tsx +1 -2
- package/tooltip/lib/Tooltip.tsx +13 -2
- package/tooltip/lib/useTooltip.tsx +4 -3
|
@@ -15,18 +15,18 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
|
15
15
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
16
16
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
17
17
|
const selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
18
|
-
base: { name: "
|
|
18
|
+
base: { name: "ki2958", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
|
|
19
19
|
}, "select-input-f7e590");
|
|
20
20
|
const selectIconsStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
21
|
-
base: { name: "
|
|
21
|
+
base: { name: "ki2959", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
|
|
22
22
|
}, "select-icons-c9a14d");
|
|
23
23
|
const hiddenSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
24
|
-
base: { name: "
|
|
24
|
+
base: { name: "ki295a", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
|
|
25
25
|
}, "hidden-select-input-d9dbbc");
|
|
26
26
|
exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
|
|
27
27
|
modelHook: useSelectModel_1.useSelectModel,
|
|
28
28
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
29
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, ...elemProps }, Element, model) => {
|
|
29
|
+
})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, width, ...elemProps }, Element, model) => {
|
|
30
30
|
return (react_1.default.createElement(text_input_1.InputGroup, { "data-width": "ck-formfield-width" },
|
|
31
31
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { "data-part": "select-start-icon-container", ...selectIconsStencil() },
|
|
32
32
|
react_1.default.createElement(icon_1.SystemIcon, { "data-part": "select-start-icon", icon: inputStartIcon }))),
|
|
@@ -30,7 +30,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
30
30
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
31
31
|
const layout_1 = require("../../layout");
|
|
32
32
|
const switchContainerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
33
|
-
base: { name: "
|
|
33
|
+
base: { name: "ki295c", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
|
|
34
34
|
}, "switch-container-e9661f");
|
|
35
35
|
const SwitchContainer = (0, common_1.createComponent)('div')({
|
|
36
36
|
displayName: 'SwitchContainer',
|
|
@@ -39,11 +39,11 @@ const SwitchContainer = (0, common_1.createComponent)('div')({
|
|
|
39
39
|
},
|
|
40
40
|
});
|
|
41
41
|
const switchInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
42
|
-
base: { name: "
|
|
42
|
+
base: { name: "ki295d", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
43
43
|
modifiers: {
|
|
44
44
|
error: {
|
|
45
|
-
error: { name: "
|
|
46
|
-
alert: { name: "
|
|
45
|
+
error: { name: "ki295e", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
|
|
46
|
+
alert: { name: "ki295f", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
}, "switch-input-001dec");
|
|
@@ -54,7 +54,7 @@ const SwitchInput = (0, common_1.createComponent)('input')({
|
|
|
54
54
|
},
|
|
55
55
|
});
|
|
56
56
|
const switchBackgroundStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
57
|
-
base: { name: "
|
|
57
|
+
base: { name: "ki295g", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
|
|
58
58
|
}, "switch-background-17579c");
|
|
59
59
|
const SwitchBackground = (0, common_1.createComponent)('div')({
|
|
60
60
|
displayName: 'SwitchBackground',
|
|
@@ -63,10 +63,10 @@ const SwitchBackground = (0, common_1.createComponent)('div')({
|
|
|
63
63
|
},
|
|
64
64
|
});
|
|
65
65
|
const switchCircleStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
66
|
-
base: { name: "
|
|
66
|
+
base: { name: "ki295h", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
|
|
67
67
|
modifiers: {
|
|
68
68
|
checked: {
|
|
69
|
-
true: { name: "
|
|
69
|
+
true: { name: "ki295i", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
}, "switch-circle-2d1f0c");
|
|
@@ -17,7 +17,7 @@ const TableCaption_1 = require("./TableCaption");
|
|
|
17
17
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
18
18
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
19
19
|
const tableStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "ki295q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
|
|
21
21
|
}, "table-773355");
|
|
22
22
|
/**
|
|
23
23
|
* `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
|
|
@@ -9,7 +9,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const tableBodyStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "ki295k", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
|
|
13
13
|
}, "table-body-dbe12a");
|
|
14
14
|
exports.TableBody = (0, common_1.createComponent)('tbody')({
|
|
15
15
|
displayName: 'Table.Body',
|
|
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
const tableCaptionStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295p", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
|
|
14
14
|
}, "table-caption-106f16");
|
|
15
15
|
exports.TableCaption = (0, common_1.createComponent)('caption')({
|
|
16
16
|
displayName: 'Table.Caption',
|
|
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
const tableCellStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295n", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
|
|
14
14
|
}, "table-cell-c39aaf");
|
|
15
15
|
exports.TableCell = (0, common_1.createComponent)('td')({
|
|
16
16
|
displayName: 'Table.Cell',
|
|
@@ -9,7 +9,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const tableFooterStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "ki295o", styles: "box-sizing:border-box;display:grid;" }
|
|
13
13
|
}, "table-footer-9bbb07");
|
|
14
14
|
exports.TableFooter = (0, common_1.createComponent)('tfoot')({
|
|
15
15
|
displayName: 'Table.Footer',
|
|
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
const tableHeadStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295j", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
|
|
14
14
|
}, "table-head-c91e37");
|
|
15
15
|
exports.TableHead = (0, common_1.createComponent)('thead')({
|
|
16
16
|
displayName: 'Table.Head',
|
|
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
const tableHeaderStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295m", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
|
|
14
14
|
}, "table-header-8f0b37");
|
|
15
15
|
exports.TableHeader = (0, common_1.createComponent)('th')({
|
|
16
16
|
displayName: 'Table.Header',
|
|
@@ -11,7 +11,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
11
11
|
const childrenVars = (0, canvas_kit_styling_1.createVars)({ id: "4d9bf5", args: ["cellNumber"] });
|
|
12
12
|
// Styles for rows including dynamic sizing for amount of cells within a row
|
|
13
13
|
const tableRowStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "ki295l", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
|
|
15
15
|
}, "table-row-a6e914");
|
|
16
16
|
exports.TableRow = (0, common_1.createComponent)('tr')({
|
|
17
17
|
displayName: 'Table.Row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,
|
|
1
|
+
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAYhE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;oDAsEzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
|
|
@@ -47,13 +47,12 @@ exports.StyledTabItem = (0, common_1.styled)(layout_1.Box.as('button'))(({ theme
|
|
|
47
47
|
position: 'relative',
|
|
48
48
|
borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0px 0px`,
|
|
49
49
|
transition: 'background 150ms ease, color 150ms ease',
|
|
50
|
-
|
|
51
|
-
'&:hover, &:focus': {
|
|
50
|
+
'&:hover, &:focus-visible, &.hover, &.focus': {
|
|
52
51
|
backgroundColor: tokens_1.colors.soap200,
|
|
53
52
|
color: tokens_1.colors.blackPepper400,
|
|
54
53
|
[icon_1.systemIconStencil.vars.color]: tokens_1.iconColors.hover,
|
|
55
54
|
},
|
|
56
|
-
'&:focus': {
|
|
55
|
+
'&:focus-visible, &.focus': {
|
|
57
56
|
outline: `none`,
|
|
58
57
|
...(0, common_1.focusRing)({ inset: 'outer', width: 0, separation: 2 }, theme),
|
|
59
58
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAIL,YAAY,
|
|
1
|
+
{"version":3,"file":"TabsPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAIL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,sCAAsC,CAAC;AAC1D,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAIrD,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACpE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUpB,CAAC"}
|
|
@@ -9,7 +9,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
|
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
11
11
|
const useTabsModel_1 = require("./useTabsModel");
|
|
12
|
-
const StyledTabsPanel = (0, styled_1.default)(layout_1.Box)(
|
|
12
|
+
const StyledTabsPanel = (0, styled_1.default)(layout_1.Box)();
|
|
13
13
|
exports.useTabsPanel = (0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(({ state, events }, _, elemProps = {}) => {
|
|
14
14
|
var _a;
|
|
15
15
|
const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
|
|
@@ -32,21 +32,21 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
32
32
|
const Text_1 = require("./Text");
|
|
33
33
|
const labelTextStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
34
34
|
extends: Text_1.textStencil,
|
|
35
|
-
base: { name: "
|
|
35
|
+
base: { name: "ki29o", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
|
|
36
36
|
modifiers: {
|
|
37
37
|
disabled: {
|
|
38
|
-
true: { name: "
|
|
38
|
+
true: { name: "ki29p", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
|
|
39
39
|
},
|
|
40
40
|
variant: {
|
|
41
|
-
inverse: { name: "
|
|
42
|
-
error: { name: "
|
|
43
|
-
hint: { name: "
|
|
41
|
+
inverse: { name: "ki29q", styles: "color:var(--cnvs-sys-color-text-inverse);" },
|
|
42
|
+
error: { name: "ki29r", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
|
|
43
|
+
hint: { name: "ki29s", styles: "color:var(--cnvs-sys-color-text-hint);" }
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
compound: [
|
|
47
47
|
{
|
|
48
48
|
modifiers: { variant: 'inverse', disabled: true },
|
|
49
|
-
styles: { name: "
|
|
49
|
+
styles: { name: "ki29t", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
|
|
50
50
|
}
|
|
51
51
|
]
|
|
52
52
|
}, "label-text-047ddd");
|
|
@@ -30,30 +30,30 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
30
30
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
31
31
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
32
32
|
exports.textStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
33
|
-
base: { name: "
|
|
33
|
+
base: { name: "ki294", styles: "box-sizing:border-box;" },
|
|
34
34
|
modifiers: {
|
|
35
35
|
typeLevel: {
|
|
36
36
|
// Title level styles
|
|
37
|
-
'title.large': { name: "
|
|
38
|
-
'title.medium': { name: "
|
|
39
|
-
'title.small': { name: "
|
|
37
|
+
'title.large': { name: "ki295", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
|
|
38
|
+
'title.medium': { name: "ki296", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
|
|
39
|
+
'title.small': { name: "ki297", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
|
|
40
40
|
// Heading level styles
|
|
41
|
-
'heading.large': { name: "
|
|
42
|
-
'heading.medium': { name: "
|
|
43
|
-
'heading.small': { name: "
|
|
41
|
+
'heading.large': { name: "ki298", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
|
|
42
|
+
'heading.medium': { name: "ki299", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
|
|
43
|
+
'heading.small': { name: "ki29a", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
|
|
44
44
|
// Body level styles
|
|
45
|
-
'body.large': { name: "
|
|
46
|
-
'body.medium': { name: "
|
|
47
|
-
'body.small': { name: "
|
|
45
|
+
'body.large': { name: "ki29b", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
|
|
46
|
+
'body.medium': { name: "ki29c", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
|
|
47
|
+
'body.small': { name: "ki29d", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
|
|
48
48
|
// Subtext level styles
|
|
49
|
-
'subtext.large': { name: "
|
|
50
|
-
'subtext.medium': { name: "
|
|
51
|
-
'subtext.small': { name: "
|
|
49
|
+
'subtext.large': { name: "ki29e", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
|
|
50
|
+
'subtext.medium': { name: "ki29f", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
|
|
51
|
+
'subtext.small': { name: "ki29g", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
|
|
52
52
|
},
|
|
53
53
|
variant: {
|
|
54
|
-
error: { name: "
|
|
55
|
-
hint: { name: "
|
|
56
|
-
inverse: { name: "
|
|
54
|
+
error: { name: "ki29h", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
|
|
55
|
+
hint: { name: "ki29i", styles: "color:var(--cnvs-sys-color-text-hint);" },
|
|
56
|
+
inverse: { name: "ki29j", styles: "color:var(--cnvs-sys-color-text-inverse);" }
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
}, "text-e3da06");
|
|
@@ -31,7 +31,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
31
31
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
32
32
|
const subtextStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
33
33
|
extends: Text_1.textStencil,
|
|
34
|
-
base: { name: "
|
|
34
|
+
base: { name: "ki29k", styles: "box-sizing:border-box;" }
|
|
35
35
|
}, "subtext-4e8604");
|
|
36
36
|
/**
|
|
37
37
|
* This component is intended to be used for small subtext content or in tight spaces.
|
|
@@ -66,7 +66,7 @@ exports.Subtext = (0, common_1.createComponent)('p')({
|
|
|
66
66
|
});
|
|
67
67
|
const bodyTextStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
68
68
|
extends: Text_1.textStencil,
|
|
69
|
-
base: { name: "
|
|
69
|
+
base: { name: "ki29l", styles: "box-sizing:border-box;" }
|
|
70
70
|
}, "body-text-44de3e");
|
|
71
71
|
/**
|
|
72
72
|
* This component is intended to be used for standard body text.
|
|
@@ -101,7 +101,7 @@ exports.BodyText = (0, common_1.createComponent)('p')({
|
|
|
101
101
|
});
|
|
102
102
|
const headingStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
103
103
|
extends: Text_1.textStencil,
|
|
104
|
-
base: { name: "
|
|
104
|
+
base: { name: "ki29m", styles: "box-sizing:border-box;" }
|
|
105
105
|
}, "heading-5a3efc");
|
|
106
106
|
/**
|
|
107
107
|
* This component is intended to be used for headings and large text.
|
|
@@ -136,7 +136,7 @@ exports.Heading = (0, common_1.createComponent)('h2')({
|
|
|
136
136
|
});
|
|
137
137
|
const titleStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
138
138
|
extends: Text_1.textStencil,
|
|
139
|
-
base: { name: "
|
|
139
|
+
base: { name: "ki29n", styles: "box-sizing:border-box;" }
|
|
140
140
|
}, "title-2c12c2");
|
|
141
141
|
/**
|
|
142
142
|
* This component is intended to be used large page titles.
|
|
@@ -37,13 +37,13 @@ exports.TextAreaResizeDirection = {
|
|
|
37
37
|
};
|
|
38
38
|
exports.textAreaStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
39
39
|
extends: text_input_1.textInputStencil,
|
|
40
|
-
base: { name: "
|
|
40
|
+
base: { name: "ki295r", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x16);min-width:calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));&::webkit-resizer{display:none;}" },
|
|
41
41
|
modifiers: {
|
|
42
42
|
resize: {
|
|
43
|
-
both: { name: "
|
|
44
|
-
horizontal: { name: "
|
|
45
|
-
vertical: { name: "
|
|
46
|
-
none: { name: "
|
|
43
|
+
both: { name: "ki295s", styles: "resize:both;" },
|
|
44
|
+
horizontal: { name: "ki295t", styles: "resize:horizontal;" },
|
|
45
|
+
vertical: { name: "ki295u", styles: "resize:vertical;" },
|
|
46
|
+
none: { name: "ki295v", styles: "resize:none;" }
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
defaultModifiers: {
|
|
@@ -40,10 +40,10 @@ exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
40
40
|
*/
|
|
41
41
|
pointerEvents: '',
|
|
42
42
|
},
|
|
43
|
-
base: { name: "
|
|
43
|
+
base: { name: "ki2942", styles: "--insetInlineStart-input-group-inner-42c96b:initial;--insetInlineEnd-input-group-inner-42c96b:initial;--width-input-group-inner-42c96b:var(--cnvs-sys-space-x10);--height-input-group-inner-42c96b:var(--cnvs-sys-space-x10);box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-42c96b);height:var(--height-input-group-inner-42c96b);inset-inline-start:var(--insetInlineStart-input-group-inner-42c96b);inset-inline-end:var(--insetInlineEnd-input-group-inner-42c96b);" },
|
|
44
44
|
modifiers: {
|
|
45
45
|
pointerEvents: {
|
|
46
|
-
_: { name: "
|
|
46
|
+
_: { name: "ki2943", styles: "pointer-events:var(--pointerEvents-input-group-inner-42c96b);" }
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
}, "input-group-inner-42c96b");
|
|
@@ -81,13 +81,13 @@ exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
81
81
|
paddingInlineStart: '',
|
|
82
82
|
paddingInlineEnd: '',
|
|
83
83
|
},
|
|
84
|
-
base: { name: "
|
|
84
|
+
base: { name: "ki2944", styles: "box-sizing:border-box;display:flex;width:100%;" },
|
|
85
85
|
modifiers: {
|
|
86
86
|
paddingInlineStart: {
|
|
87
|
-
_: { name: "
|
|
87
|
+
_: { name: "ki2945", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-9155da);" }
|
|
88
88
|
},
|
|
89
89
|
paddingInlineEnd: {
|
|
90
|
-
_: { name: "
|
|
90
|
+
_: { name: "ki2946", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-9155da);" }
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}, "input-group-input-9155da");
|
|
@@ -145,7 +145,7 @@ const wrapInCalc = (values) => {
|
|
|
145
145
|
return `calc(${values.map(toPx).join(' + ')})`;
|
|
146
146
|
};
|
|
147
147
|
exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
148
|
-
base: { name: "
|
|
148
|
+
base: { name: "ki2947", styles: "box-sizing:border-box;display:flex;position:relative;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
|
|
149
149
|
}, "input-group-27e30b");
|
|
150
150
|
/**
|
|
151
151
|
* An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
|
|
@@ -33,15 +33,15 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
33
33
|
vars: {
|
|
34
34
|
width: '',
|
|
35
35
|
},
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "ki293x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
|
|
37
37
|
modifiers: {
|
|
38
38
|
grow: {
|
|
39
|
-
true: { name: "
|
|
40
|
-
false: { name: "
|
|
39
|
+
true: { name: "ki293y", styles: "width:100%;resize:vertical;" },
|
|
40
|
+
false: { name: "ki293z", styles: "width:initial;" }
|
|
41
41
|
},
|
|
42
42
|
error: {
|
|
43
|
-
error: { name: "
|
|
44
|
-
alert: { name: "
|
|
43
|
+
error: { name: "ki2940", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
|
|
44
|
+
alert: { name: "ki2941", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n 0 0 0 2px var(--cnvs-sys-color-border-inverse),\n 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
defaultModifiers: {
|
|
@@ -48,7 +48,7 @@ const getAriaAttributes = (mode, id) => {
|
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
const toastStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
51
|
-
base: { name: "
|
|
51
|
+
base: { name: "ki2960", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
|
|
52
52
|
}, "toast-55513d");
|
|
53
53
|
/**
|
|
54
54
|
* Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
|
|
@@ -10,7 +10,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
exports.toastBodyStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295z", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
|
|
14
14
|
}, "toast-body-7d81ac");
|
|
15
15
|
exports.ToastBody = (0, common_1.createComponent)('div')({
|
|
16
16
|
displayName: 'Toast.Body',
|
|
@@ -10,7 +10,7 @@ const popup_1 = require("@workday/canvas-kit-react/popup");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
12
12
|
exports.toastCloseIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295w", styles: "box-sizing:border-box;position:relative;" }
|
|
14
14
|
}, "toast-close-icon-be7e9f");
|
|
15
15
|
exports.ToastCloseIcon = (0, common_1.createComponent)('button')({
|
|
16
16
|
displayName: 'Toast.CloseIcon',
|
|
@@ -10,7 +10,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
exports.toastIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "ki295x", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
|
|
14
14
|
}, "toast-icon-4b0701");
|
|
15
15
|
exports.ToastIcon = (0, common_1.createComponent)('div')({
|
|
16
16
|
displayName: 'Toast.Icon',
|
|
@@ -12,7 +12,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
12
12
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
13
13
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
14
14
|
exports.toastMessageStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
15
|
-
base: { name: "
|
|
15
|
+
base: { name: "ki295y", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
|
|
16
16
|
}, "toast-message-759382");
|
|
17
17
|
exports.ToastMessage = (0, common_1.createSubcomponent)('p')({
|
|
18
18
|
modelHook: useToastModel_1.useToastModel,
|
|
@@ -4,6 +4,17 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
4
4
|
/**
|
|
5
5
|
* This should be a string in most cases. HTML is supported, but only text is understood
|
|
6
6
|
* by assistive technology. This is true for both `label` and `describe` modes.
|
|
7
|
+
*
|
|
8
|
+
* **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.
|
|
9
|
+
*
|
|
10
|
+
* ```jsx
|
|
11
|
+
* // The text will be understood as: You must accept terms and conditions
|
|
12
|
+
* <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
|
|
13
|
+
*
|
|
14
|
+
* // This will render a string including the html and will not be properly understood by voice over.
|
|
15
|
+
* const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
|
|
16
|
+
* <Tooltip type="description" title={MyComponent/>
|
|
17
|
+
* ```
|
|
7
18
|
*/
|
|
8
19
|
title: React.ReactNode;
|
|
9
20
|
/**
|
|
@@ -33,7 +44,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
33
44
|
* - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
|
|
34
45
|
* `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
|
|
35
46
|
* Ellipsis tooltips.
|
|
36
|
-
* - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
|
|
47
|
+
* - **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
|
|
37
48
|
* information about the target.
|
|
38
49
|
* - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
|
|
39
50
|
* tooltip contents are not useful to a screen reader or if you have handled accessibility of
|
|
@@ -43,7 +54,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
43
54
|
* Consider an alternate way to inform a user of additional important information.
|
|
44
55
|
* @default 'label'
|
|
45
56
|
*/
|
|
46
|
-
type?: 'label' | 'describe' | 'muted';
|
|
57
|
+
type?: 'label' | 'describe' | 'muted' | 'description';
|
|
47
58
|
/**
|
|
48
59
|
* Amount of time (in ms) to delay before showing the tooltip
|
|
49
60
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}
|
|
@@ -10,17 +10,17 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
|
|
|
10
10
|
* - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
|
|
11
11
|
* `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
|
|
12
12
|
* Ellipsis tooltips.
|
|
13
|
-
* - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
|
|
14
|
-
* information about the target.
|
|
13
|
+
* - **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target
|
|
15
14
|
* - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
|
|
16
15
|
* tooltip contents are not useful to a screen reader or if you have handled accessibility of
|
|
17
16
|
* the tooltip yourself.
|
|
17
|
+
* - `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target
|
|
18
18
|
*
|
|
19
19
|
* **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
|
|
20
20
|
* Consider an alternate way to inform a user of additional important information.
|
|
21
21
|
* @default 'label'
|
|
22
22
|
*/
|
|
23
|
-
type?: 'label' | 'describe' | 'muted';
|
|
23
|
+
type?: 'label' | 'describe' | 'muted' | 'description';
|
|
24
24
|
/**
|
|
25
25
|
* The content of the `aria-label` if `type` is `label.
|
|
26
26
|
*/
|
|
@@ -37,6 +37,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
|
|
|
37
37
|
/** Mix these properties into the target element. **Must be an Element** */
|
|
38
38
|
targetProps: {
|
|
39
39
|
'aria-describedby': string | undefined;
|
|
40
|
+
'aria-description': string | undefined;
|
|
40
41
|
'aria-label': string | undefined;
|
|
41
42
|
onMouseEnter: (event: React.SyntheticEvent) => void;
|
|
42
43
|
onMouseLeave: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAgEF,2EAA2E;;;;;8BA9C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA2CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
|
|
@@ -104,6 +104,7 @@ function useTooltip({ type = 'label', titleText = '', showDelay = 300, hideDelay
|
|
|
104
104
|
const targetProps = {
|
|
105
105
|
// extra description of the target element for assistive technology
|
|
106
106
|
'aria-describedby': type === 'describe' && visible ? id : undefined,
|
|
107
|
+
'aria-description': type === 'description' ? titleText : undefined,
|
|
107
108
|
// This will replace the accessible name of the target element
|
|
108
109
|
'aria-label': type === 'label' ? titleText : undefined,
|
|
109
110
|
onMouseEnter: onOpenFromTarget,
|