@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.
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2HL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}
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: "7d4959", styles: "padding:var(--cnvs-sys-space-zero);" },
71
- start: { name: "5be80f", styles: "" },
72
- end: { name: "4597b1", styles: "" }
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: "b07985", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
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: "3e48da", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
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: "83dc3c", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
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: "8870fa", styles: "min-width:var(--cnvs-sys-space-x10);" }
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: "64fb21", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
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: "d1ca18", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
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: "e95cc8", styles: "min-width:var(--cnvs-sys-space-x8);" }
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: "280095", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
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: "cbf6b5", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
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: "932896", styles: "min-width:var(--cnvs-sys-space-x6);" }
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: "40954e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
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: "f32b2f", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2HL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}
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: "7d4959", styles: "padding:var(--cnvs-sys-space-zero);" },
49
- start: { name: "5be80f", styles: "" },
50
- end: { name: "4597b1", styles: "" }
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: "b07985", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
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: "3e48da", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
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: "83dc3c", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
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: "8870fa", styles: "min-width:var(--cnvs-sys-space-x10);" }
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: "64fb21", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
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: "d1ca18", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
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: "e95cc8", styles: "min-width:var(--cnvs-sys-space-x8);" }
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: "280095", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
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: "cbf6b5", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
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: "932896", styles: "min-width:var(--cnvs-sys-space-x6);" }
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: "40954e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
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: "f32b2f", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
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.8",
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.8",
53
- "@workday/canvas-kit-styling": "^11.0.8",
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": "c56b3882dda05a89fec1cfcb55bfb9f92301a876"
70
+ "gitHead": "d9b7d2f72210557077572bc24e5cd3e241fe161e"
71
71
  }