@workday/canvas-kit-react 11.0.8 → 11.0.10
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 +8 -1
- package/dist/commonjs/button/lib/BaseButton.d.ts +6 -0
- package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +20 -17
- package/dist/es6/button/lib/BaseButton.d.ts +6 -0
- package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/es6/button/lib/BaseButton.js +20 -17
- package/package.json +4 -4
|
@@ -273,6 +273,12 @@ export const buttonStencil = createStencil({
|
|
|
273
273
|
gap: system.space.x1,
|
|
274
274
|
},
|
|
275
275
|
},
|
|
276
|
+
grow: {
|
|
277
|
+
true: {
|
|
278
|
+
width: '100%',
|
|
279
|
+
maxWidth: '100%',
|
|
280
|
+
},
|
|
281
|
+
},
|
|
276
282
|
// IconPosition Styles
|
|
277
283
|
iconPosition: {
|
|
278
284
|
only: {padding: system.space.zero},
|
|
@@ -376,6 +382,7 @@ export const BaseButton = createComponent('button')({
|
|
|
376
382
|
children,
|
|
377
383
|
size,
|
|
378
384
|
fillIcon,
|
|
385
|
+
grow,
|
|
379
386
|
iconPosition,
|
|
380
387
|
icon,
|
|
381
388
|
colors,
|
|
@@ -390,7 +397,7 @@ export const BaseButton = createComponent('button')({
|
|
|
390
397
|
ref={ref}
|
|
391
398
|
type="button"
|
|
392
399
|
{...mergeStyles(elemProps, [
|
|
393
|
-
buttonStencil({size, iconPosition}),
|
|
400
|
+
buttonStencil({size, iconPosition, grow}),
|
|
394
401
|
buttonColorPropVars.default(colors?.default || {}),
|
|
395
402
|
buttonColorPropVars.focus(colors?.focus || {}),
|
|
396
403
|
buttonColorPropVars.hover(colors?.hover || {}),
|
|
@@ -110,6 +110,12 @@ export declare const buttonStencil: import("@workday/canvas-kit-styling").Stenci
|
|
|
110
110
|
letterSpacing: "--cnvs-base-letter-spacing-100";
|
|
111
111
|
};
|
|
112
112
|
};
|
|
113
|
+
grow: {
|
|
114
|
+
true: {
|
|
115
|
+
width: string;
|
|
116
|
+
maxWidth: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
113
119
|
iconPosition: {
|
|
114
120
|
only: {
|
|
115
121
|
padding: "--cnvs-sys-space-zero";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAsCrB,CAAC"}
|
|
@@ -65,62 +65,65 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
|
65
65
|
small: { name: "6dd9a6", 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
66
|
extraSmall: { name: "8e0948", 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
67
|
},
|
|
68
|
+
grow: {
|
|
69
|
+
true: { name: "78af46", styles: "width:100%;max-width:100%;" }
|
|
70
|
+
},
|
|
68
71
|
// IconPosition Styles
|
|
69
72
|
iconPosition: {
|
|
70
|
-
only: { name: "
|
|
71
|
-
start: { name: "
|
|
72
|
-
end: { name: "
|
|
73
|
+
only: { name: "15f981", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
74
|
+
start: { name: "72cad8", styles: "" },
|
|
75
|
+
end: { name: "343c4c", styles: "" }
|
|
73
76
|
}
|
|
74
77
|
},
|
|
75
78
|
// Compound Modifier Styles
|
|
76
79
|
compound: [
|
|
77
80
|
{
|
|
78
81
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
79
|
-
styles: { name: "
|
|
82
|
+
styles: { name: "e0aed0", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
80
83
|
},
|
|
81
84
|
{
|
|
82
85
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
83
|
-
styles: { name: "
|
|
86
|
+
styles: { name: "8bfeda", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
84
87
|
},
|
|
85
88
|
{
|
|
86
89
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
87
|
-
styles: { name: "
|
|
90
|
+
styles: { name: "5ae4e1", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
88
91
|
},
|
|
89
92
|
{
|
|
90
93
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
91
|
-
styles: { name: "
|
|
94
|
+
styles: { name: "175eb9", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
92
95
|
},
|
|
93
96
|
{
|
|
94
97
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
95
|
-
styles: { name: "
|
|
98
|
+
styles: { name: "859313", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
96
99
|
},
|
|
97
100
|
{
|
|
98
101
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
99
|
-
styles: { name: "
|
|
102
|
+
styles: { name: "935d2d", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
100
103
|
},
|
|
101
104
|
{
|
|
102
105
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
103
|
-
styles: { name: "
|
|
106
|
+
styles: { name: "613220", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
104
107
|
},
|
|
105
108
|
{
|
|
106
109
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
107
|
-
styles: { name: "
|
|
110
|
+
styles: { name: "7509f7", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
108
111
|
},
|
|
109
112
|
{
|
|
110
113
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
111
|
-
styles: { name: "
|
|
114
|
+
styles: { name: "308d05", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
112
115
|
},
|
|
113
116
|
{
|
|
114
117
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
115
|
-
styles: { name: "
|
|
118
|
+
styles: { name: "a4966d", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
116
119
|
},
|
|
117
120
|
{
|
|
118
121
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
119
|
-
styles: { name: "
|
|
122
|
+
styles: { name: "451145", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
120
123
|
},
|
|
121
124
|
{
|
|
122
125
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
123
|
-
styles: { name: "
|
|
126
|
+
styles: { name: "cfd053", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
124
127
|
}
|
|
125
128
|
]
|
|
126
129
|
}, "button-65cb05");
|
|
@@ -130,9 +133,9 @@ exports.buttonStencil = canvas_kit_styling_1.createStencil({
|
|
|
130
133
|
*/
|
|
131
134
|
exports.BaseButton = common_1.createComponent('button')({
|
|
132
135
|
displayName: 'BaseButton',
|
|
133
|
-
Component: ({ children, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
136
|
+
Component: ({ children, size, fillIcon, grow, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
134
137
|
return (React.createElement(Element, Object.assign({ ref: ref, type: "button" }, layout_1.mergeStyles(elemProps, [
|
|
135
|
-
exports.buttonStencil({ size, iconPosition }),
|
|
138
|
+
exports.buttonStencil({ size, iconPosition, grow }),
|
|
136
139
|
exports.buttonColorPropVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
|
|
137
140
|
exports.buttonColorPropVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
138
141
|
exports.buttonColorPropVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
|
@@ -110,6 +110,12 @@ export declare const buttonStencil: import("@workday/canvas-kit-styling").Stenci
|
|
|
110
110
|
letterSpacing: "--cnvs-base-letter-spacing-100";
|
|
111
111
|
};
|
|
112
112
|
};
|
|
113
|
+
grow: {
|
|
114
|
+
true: {
|
|
115
|
+
width: string;
|
|
116
|
+
maxWidth: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
113
119
|
iconPosition: {
|
|
114
120
|
only: {
|
|
115
121
|
padding: "--cnvs-sys-space-zero";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAsCrB,CAAC"}
|
|
@@ -43,62 +43,65 @@ export const buttonStencil = createStencil({
|
|
|
43
43
|
small: { name: "6dd9a6", 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);" },
|
|
44
44
|
extraSmall: { name: "8e0948", 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);" }
|
|
45
45
|
},
|
|
46
|
+
grow: {
|
|
47
|
+
true: { name: "78af46", styles: "width:100%;max-width:100%;" }
|
|
48
|
+
},
|
|
46
49
|
// IconPosition Styles
|
|
47
50
|
iconPosition: {
|
|
48
|
-
only: { name: "
|
|
49
|
-
start: { name: "
|
|
50
|
-
end: { name: "
|
|
51
|
+
only: { name: "15f981", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
52
|
+
start: { name: "72cad8", styles: "" },
|
|
53
|
+
end: { name: "343c4c", styles: "" }
|
|
51
54
|
}
|
|
52
55
|
},
|
|
53
56
|
// Compound Modifier Styles
|
|
54
57
|
compound: [
|
|
55
58
|
{
|
|
56
59
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
57
|
-
styles: { name: "
|
|
60
|
+
styles: { name: "e0aed0", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
58
61
|
},
|
|
59
62
|
{
|
|
60
63
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
61
|
-
styles: { name: "
|
|
64
|
+
styles: { name: "8bfeda", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
62
65
|
},
|
|
63
66
|
{
|
|
64
67
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
65
|
-
styles: { name: "
|
|
68
|
+
styles: { name: "5ae4e1", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
66
69
|
},
|
|
67
70
|
{
|
|
68
71
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
69
|
-
styles: { name: "
|
|
72
|
+
styles: { name: "175eb9", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
70
73
|
},
|
|
71
74
|
{
|
|
72
75
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
73
|
-
styles: { name: "
|
|
76
|
+
styles: { name: "859313", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
74
77
|
},
|
|
75
78
|
{
|
|
76
79
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
77
|
-
styles: { name: "
|
|
80
|
+
styles: { name: "935d2d", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
78
81
|
},
|
|
79
82
|
{
|
|
80
83
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
81
|
-
styles: { name: "
|
|
84
|
+
styles: { name: "613220", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
82
85
|
},
|
|
83
86
|
{
|
|
84
87
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
85
|
-
styles: { name: "
|
|
88
|
+
styles: { name: "7509f7", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
86
89
|
},
|
|
87
90
|
{
|
|
88
91
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
89
|
-
styles: { name: "
|
|
92
|
+
styles: { name: "308d05", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
90
93
|
},
|
|
91
94
|
{
|
|
92
95
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
93
|
-
styles: { name: "
|
|
96
|
+
styles: { name: "a4966d", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
94
97
|
},
|
|
95
98
|
{
|
|
96
99
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
97
|
-
styles: { name: "
|
|
100
|
+
styles: { name: "451145", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
98
101
|
},
|
|
99
102
|
{
|
|
100
103
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
101
|
-
styles: { name: "
|
|
104
|
+
styles: { name: "cfd053", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
102
105
|
}
|
|
103
106
|
]
|
|
104
107
|
}, "button-65cb05");
|
|
@@ -108,9 +111,9 @@ export const buttonStencil = createStencil({
|
|
|
108
111
|
*/
|
|
109
112
|
export const BaseButton = createComponent('button')({
|
|
110
113
|
displayName: 'BaseButton',
|
|
111
|
-
Component: ({ children, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
114
|
+
Component: ({ children, size, fillIcon, grow, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
112
115
|
return (React.createElement(Element, Object.assign({ ref: ref, type: "button" }, mergeStyles(elemProps, [
|
|
113
|
-
buttonStencil({ size, iconPosition }),
|
|
116
|
+
buttonStencil({ size, iconPosition, grow }),
|
|
114
117
|
buttonColorPropVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
|
|
115
118
|
buttonColorPropVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
116
119
|
buttonColorPropVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.10",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^11.0.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.10",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.10",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "d9b7d2f72210557077572bc24e5cd3e241fe161e"
|
|
71
71
|
}
|