@workday/canvas-kit-react 11.0.0-alpha.769-next.0 → 11.0.0-alpha.770-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/button/lib/BaseButton.tsx +260 -204
- package/button/lib/Button.tsx +1 -4
- package/button/lib/DeleteButton.tsx +42 -38
- package/button/lib/PrimaryButton.tsx +74 -71
- package/button/lib/SecondaryButton.tsx +85 -87
- package/button/lib/TertiaryButton.tsx +214 -132
- package/dist/commonjs/button/lib/BaseButton.d.ts +70 -29
- package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +98 -55
- package/dist/commonjs/button/lib/Button.d.ts.map +1 -1
- package/dist/commonjs/button/lib/Button.js +1 -2
- package/dist/commonjs/button/lib/DeleteButton.d.ts +1 -1
- package/dist/commonjs/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/DeleteButton.js +9 -6
- package/dist/commonjs/button/lib/PrimaryButton.d.ts +0 -5
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +14 -10
- package/dist/commonjs/button/lib/SecondaryButton.d.ts +0 -5
- package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/SecondaryButton.js +13 -10
- package/dist/commonjs/button/lib/TertiaryButton.d.ts +0 -22
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +80 -35
- package/dist/es6/button/lib/BaseButton.d.ts +70 -29
- package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/es6/button/lib/BaseButton.js +99 -54
- package/dist/es6/button/lib/Button.d.ts.map +1 -1
- package/dist/es6/button/lib/Button.js +1 -2
- package/dist/es6/button/lib/DeleteButton.d.ts +1 -1
- package/dist/es6/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/es6/button/lib/DeleteButton.js +12 -9
- package/dist/es6/button/lib/PrimaryButton.d.ts +0 -5
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +15 -11
- package/dist/es6/button/lib/SecondaryButton.d.ts +0 -5
- package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/SecondaryButton.js +15 -12
- package/dist/es6/button/lib/TertiaryButton.d.ts +0 -22
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +82 -37
- package/package.json +4 -4
|
@@ -19,82 +19,125 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.BaseButton = exports.
|
|
22
|
+
exports.BaseButton = exports.buttonStencil = exports.buttonColorPropVars = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
24
|
const ButtonLabelIcon_1 = require("../lib/parts/ButtonLabelIcon");
|
|
25
25
|
const ButtonLabel_1 = require("../lib/parts/ButtonLabel");
|
|
26
26
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
27
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
29
28
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
29
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
30
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
|
|
33
33
|
*/
|
|
34
|
-
exports.
|
|
35
|
-
default: canvas_kit_styling_1.createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
disabled: canvas_kit_styling_1.createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
34
|
+
exports.buttonColorPropVars = {
|
|
35
|
+
default: canvas_kit_styling_1.createVars({ id: "cnvs-button-color-prop-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
36
|
+
focus: canvas_kit_styling_1.createVars({ id: "cnvs-button-color-prop-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
37
|
+
hover: canvas_kit_styling_1.createVars({ id: "cnvs-button-color-prop-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
38
|
+
active: canvas_kit_styling_1.createVars({ id: "cnvs-button-color-prop-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
39
|
+
disabled: canvas_kit_styling_1.createVars({ id: "cnvs-button-color-prop-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
40
40
|
};
|
|
41
41
|
/**
|
|
42
42
|
* Base styles for Buttons.
|
|
43
43
|
*/
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
large: canvas_kit_styling_1.createStyles({ name: "bac76a", styles: "font-size:var(--cnvs-sys-space-x4);line-height:var(--cnvs-sys-space-x6);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8);min-width:112px;" }),
|
|
54
|
-
medium: canvas_kit_styling_1.createStyles({ name: "384911", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" }),
|
|
55
|
-
small: canvas_kit_styling_1.createStyles({ name: "d66a85", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" }),
|
|
56
|
-
extraSmall: canvas_kit_styling_1.createStyles({ name: "6f327c", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }),
|
|
44
|
+
exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
45
|
+
vars: {
|
|
46
|
+
background: '',
|
|
47
|
+
border: '',
|
|
48
|
+
boxShadowInner: '',
|
|
49
|
+
boxShadowOuter: '',
|
|
50
|
+
label: '',
|
|
51
|
+
opacity: '',
|
|
52
|
+
borderRadius: '',
|
|
57
53
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
54
|
+
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-fg-inverse))), 0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));}" },
|
|
55
|
+
modifiers: {
|
|
56
|
+
/**
|
|
57
|
+
* Button modifiers that will overwrite the base styles of Buttons.
|
|
58
|
+
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
59
|
+
* - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
|
|
60
|
+
* within a button or if there is only an icon and no text.
|
|
61
|
+
*/
|
|
62
|
+
size: {
|
|
63
|
+
large: { name: "e15324", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
|
|
64
|
+
medium: { name: "9d7a0b", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
|
|
65
|
+
small: { name: "19547b", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
|
|
66
|
+
extraSmall: { name: "9672a7", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
|
|
67
|
+
},
|
|
68
|
+
// IconPosition Styles
|
|
69
|
+
iconPosition: {
|
|
70
|
+
only: { name: "b5aed5", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
71
|
+
start: {},
|
|
72
|
+
end: {}
|
|
73
|
+
}
|
|
71
74
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
75
|
+
// Compound Modifier Styles
|
|
76
|
+
compound: [
|
|
77
|
+
{
|
|
78
|
+
modifiers: { size: 'large', iconPosition: 'only' },
|
|
79
|
+
styles: { name: "090b4c", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
modifiers: { size: 'large', iconPosition: 'start' },
|
|
83
|
+
styles: { name: "6cef64", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
modifiers: { size: 'large', iconPosition: 'end' },
|
|
87
|
+
styles: { name: "2b278b", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
91
|
+
styles: { name: "1aa44b", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
95
|
+
styles: { name: "c82aba", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
99
|
+
styles: { name: "9de09f", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
modifiers: { size: 'small', iconPosition: 'only' },
|
|
103
|
+
styles: { name: "da8a4f", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
modifiers: { size: 'small', iconPosition: 'start' },
|
|
107
|
+
styles: { name: "959c67", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
modifiers: { size: 'small', iconPosition: 'end' },
|
|
111
|
+
styles: { name: "318dce", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
115
|
+
styles: { name: "4ce1cf", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
119
|
+
styles: { name: "574caa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
123
|
+
styles: { name: "c85684", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}, "cnvs-button");
|
|
81
127
|
/**
|
|
82
|
-
* The base button which all
|
|
128
|
+
* The base button which which is the foundation of all Button variants (`PrimaryButton`,
|
|
129
|
+
* `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
|
|
83
130
|
*/
|
|
84
131
|
exports.BaseButton = common_1.createComponent('button')({
|
|
85
132
|
displayName: 'BaseButton',
|
|
86
133
|
Component: ({ children, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
87
134
|
return (React.createElement(Element, Object.assign({ ref: ref, type: "button" }, layout_1.mergeStyles(elemProps, [
|
|
88
|
-
|
|
89
|
-
exports.
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}),
|
|
93
|
-
exports.
|
|
94
|
-
exports.buttonVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
95
|
-
exports.buttonVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
|
96
|
-
exports.buttonVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
|
|
97
|
-
exports.buttonVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
|
|
135
|
+
exports.buttonStencil({ size, iconPosition }),
|
|
136
|
+
exports.buttonColorPropVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
|
|
137
|
+
exports.buttonColorPropVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
138
|
+
exports.buttonColorPropVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
|
139
|
+
exports.buttonColorPropVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
|
|
140
|
+
exports.buttonColorPropVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
|
|
98
141
|
])), children));
|
|
99
142
|
},
|
|
100
143
|
subComponents: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAG9D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;IACpE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAG9D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;IACpE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,oFA4CjB,CAAC"}
|
|
@@ -36,7 +36,6 @@ exports.Button = common_1.createComponent('button')({
|
|
|
36
36
|
return (React.createElement(BaseButton_1.BaseButton, Object.assign({ as: Element, ref: ref, size: size, icon: icon, colors: colors, iconPosition: baseIconPosition }, elemProps),
|
|
37
37
|
icon && baseIconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
38
38
|
children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
|
|
39
|
-
icon && baseIconPosition
|
|
40
|
-
icon && baseIconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
39
|
+
icon && baseIconPosition && ['only', 'end'].includes(baseIconPosition) && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
41
40
|
},
|
|
42
41
|
});
|
|
@@ -9,7 +9,7 @@ export interface DeleteButtonProps extends ButtonProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
11
11
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
12
|
-
* confirmation before
|
|
12
|
+
* confirmation before being deleted.
|
|
13
13
|
*/
|
|
14
14
|
export declare const DeleteButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DeleteButtonProps>;
|
|
15
15
|
//# sourceMappingURL=DeleteButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}
|
|
@@ -24,19 +24,22 @@ const React = __importStar(require("react"));
|
|
|
24
24
|
const BaseButton_1 = require("./BaseButton");
|
|
25
25
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
28
|
const Button_1 = require("./Button");
|
|
30
|
-
const icon_1 = require("
|
|
31
|
-
const
|
|
29
|
+
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
|
+
const deleteButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
|
+
extends: BaseButton_1.buttonStencil,
|
|
33
|
+
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-error-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-error-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
34
|
+
}, "cnvs-delete-button");
|
|
32
35
|
/**
|
|
33
36
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
34
37
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
35
|
-
* confirmation before
|
|
38
|
+
* confirmation before being deleted.
|
|
36
39
|
*/
|
|
37
40
|
exports.DeleteButton = common_1.createComponent('button')({
|
|
38
41
|
displayName: 'DeleteButton',
|
|
39
|
-
Component: ({ children,
|
|
40
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref
|
|
42
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
43
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, deleteButtonStencil())), children));
|
|
41
44
|
},
|
|
42
45
|
});
|
|
@@ -10,10 +10,5 @@ export interface PrimaryButtonProps extends ButtonProps {
|
|
|
10
10
|
*/
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
}
|
|
13
|
-
export declare const primaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
14
|
-
variant: {
|
|
15
|
-
inverse: string;
|
|
16
|
-
};
|
|
17
|
-
}>;
|
|
18
13
|
export declare const PrimaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", PrimaryButtonProps>;
|
|
19
14
|
//# sourceMappingURL=PrimaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6ED,eAAO,MAAM,aAAa,2FASxB,CAAC"}
|
|
@@ -19,24 +19,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.PrimaryButton =
|
|
22
|
+
exports.PrimaryButton = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
|
-
const BaseButton_1 = require("./BaseButton");
|
|
25
24
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
26
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
27
25
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
28
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
29
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
|
+
const BaseButton_1 = require("./BaseButton");
|
|
30
29
|
const Button_1 = require("./Button");
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
|
+
const primaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
|
+
extends: BaseButton_1.buttonStencil,
|
|
33
|
+
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-primary-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-primary-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}" },
|
|
34
|
+
modifiers: {
|
|
35
|
+
variant: {
|
|
36
|
+
// Inverse Styles
|
|
37
|
+
inverse: { name: "4fd654", styles: "--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" }
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}, "cnvs-primary-button");
|
|
37
41
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
38
42
|
displayName: 'PrimaryButton',
|
|
39
43
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
40
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps,
|
|
44
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, primaryButtonStencil({ variant }))), children));
|
|
41
45
|
},
|
|
42
46
|
});
|
|
@@ -10,10 +10,5 @@ export interface SecondaryButtonProps extends ButtonProps {
|
|
|
10
10
|
*/
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
}
|
|
13
|
-
export declare const secondaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
14
|
-
variant: {
|
|
15
|
-
inverse: string;
|
|
16
|
-
};
|
|
17
|
-
}>;
|
|
18
13
|
export declare const SecondaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SecondaryButtonProps>;
|
|
19
14
|
//# sourceMappingURL=SecondaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAsFD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
|
|
@@ -19,24 +19,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.SecondaryButton =
|
|
22
|
+
exports.SecondaryButton = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
24
|
const BaseButton_1 = require("./BaseButton");
|
|
25
25
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
26
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
27
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
28
|
const Button_1 = require("./Button");
|
|
30
|
-
const icon_1 = require("
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
|
+
const secondaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
|
+
extends: BaseButton_1.buttonStencil,
|
|
33
|
+
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-default);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-strong);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
34
|
+
modifiers: {
|
|
35
|
+
variant: {
|
|
36
|
+
inverse: { name: "a08d25", styles: "--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}, "cnvs-secondary-button");
|
|
37
40
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
38
41
|
displayName: 'SecondaryButton',
|
|
39
42
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
40
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps,
|
|
43
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, secondaryButtonStencil({ variant }))), children));
|
|
41
44
|
},
|
|
42
45
|
});
|
|
@@ -11,27 +11,5 @@ export interface TertiaryButtonProps extends ButtonProps {
|
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
isThemeable?: boolean;
|
|
13
13
|
}
|
|
14
|
-
export declare const tertiaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
15
|
-
isThemeable: {
|
|
16
|
-
true: string;
|
|
17
|
-
};
|
|
18
|
-
variant: {
|
|
19
|
-
inverse: string;
|
|
20
|
-
};
|
|
21
|
-
iconPosition: {
|
|
22
|
-
largeOnly: string;
|
|
23
|
-
largeStart: string;
|
|
24
|
-
largeEnd: string;
|
|
25
|
-
mediumOnly: string;
|
|
26
|
-
mediumStart: string;
|
|
27
|
-
mediumEnd: string;
|
|
28
|
-
smallOnly: string;
|
|
29
|
-
smallStart: string;
|
|
30
|
-
smallEnd: string;
|
|
31
|
-
extraSmallOnly: string;
|
|
32
|
-
extraSmallStart: string;
|
|
33
|
-
extraSmallEnd: string;
|
|
34
|
-
};
|
|
35
|
-
}>;
|
|
36
14
|
export declare const TertiaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", TertiaryButtonProps>;
|
|
37
15
|
//# sourceMappingURL=TertiaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqND,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
|
|
@@ -19,42 +19,89 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.TertiaryButton =
|
|
22
|
+
exports.TertiaryButton = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
24
|
const BaseButton_1 = require("./BaseButton");
|
|
25
25
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
|
-
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
30
28
|
const Button_1 = require("./Button");
|
|
31
|
-
const icon_1 = require("
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "9b7fcd", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
52
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "d37c78", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
29
|
+
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
|
+
const tertiaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
|
+
extends: BaseButton_1.buttonStencil,
|
|
33
|
+
// Base Styles
|
|
34
|
+
base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-fg-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" },
|
|
35
|
+
modifiers: {
|
|
36
|
+
// IconPosition Styles
|
|
37
|
+
iconPosition: {
|
|
38
|
+
only: { name: "af38ec", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
39
|
+
start: {},
|
|
40
|
+
end: {}
|
|
41
|
+
},
|
|
42
|
+
isThemeable: {
|
|
43
|
+
true: { name: "12b694", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }
|
|
44
|
+
},
|
|
45
|
+
variant: {
|
|
46
|
+
// Inverse Styles
|
|
47
|
+
inverse: { name: "bc73ca", styles: "--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-fg-strong), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-soft);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
48
|
+
}
|
|
53
49
|
},
|
|
54
|
-
|
|
50
|
+
// Compound Modifier Styles
|
|
51
|
+
compound: [
|
|
52
|
+
{
|
|
53
|
+
modifiers: { size: 'large', iconPosition: 'only' },
|
|
54
|
+
styles: { name: "6972da", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
modifiers: { size: 'large', iconPosition: 'start' },
|
|
58
|
+
styles: { name: "911090", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
modifiers: { size: 'large', iconPosition: 'end' },
|
|
62
|
+
styles: { name: "2498ed", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
66
|
+
styles: { name: "da144e", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
70
|
+
styles: { name: "1d5d37", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
74
|
+
styles: { name: "c8c944", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
modifiers: { size: 'small', iconPosition: 'only' },
|
|
78
|
+
styles: { name: "3c90a7", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
modifiers: { size: 'small', iconPosition: 'start' },
|
|
82
|
+
styles: { name: "62b15e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
modifiers: { size: 'small', iconPosition: 'end' },
|
|
86
|
+
styles: { name: "069e24", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
90
|
+
styles: { name: "ad6f77", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
94
|
+
styles: { name: "b6eb74", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
98
|
+
styles: { name: "6f2522", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}, "cnvs-tertiary-button");
|
|
55
102
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
56
103
|
displayName: 'TertiaryButton',
|
|
57
|
-
Component: ({ children, icon, size = 'medium',
|
|
104
|
+
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
|
|
58
105
|
const baseIconPosition = iconPosition
|
|
59
106
|
? iconPosition
|
|
60
107
|
: icon
|
|
@@ -62,13 +109,11 @@ exports.TertiaryButton = common_1.createComponent('button')({
|
|
|
62
109
|
? 'start'
|
|
63
110
|
: 'only'
|
|
64
111
|
: undefined;
|
|
65
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}),
|
|
72
|
-
])), children));
|
|
112
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition }, layout_1.mergeStyles(elemProps, tertiaryButtonStencil({
|
|
113
|
+
variant,
|
|
114
|
+
size,
|
|
115
|
+
isThemeable: (isThemeable || baseIconPosition !== 'only'),
|
|
116
|
+
iconPosition: baseIconPosition,
|
|
117
|
+
}))), children));
|
|
73
118
|
},
|
|
74
119
|
});
|