@workday/canvas-kit-react 11.1.14 → 11.1.16

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.
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
6
6
  import {brand, system} from '@workday/canvas-tokens-web';
7
7
  import {Button, ButtonProps} from './Button';
8
8
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
9
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
9
 
11
10
  /**
12
11
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -60,9 +59,21 @@ const deleteButtonStencil = createStencil({
60
59
  */
61
60
  export const DeleteButton = createComponent('button')({
62
61
  displayName: 'DeleteButton',
63
- Component: ({children, ...elemProps}: DeleteButtonProps, ref, Element) => {
62
+ Component: (
63
+ {children, size, iconPosition, grow, cs, ...elemProps}: DeleteButtonProps,
64
+ ref,
65
+ Element
66
+ ) => {
64
67
  return (
65
- <Button as={Element} ref={ref} {...mergeStyles(elemProps, deleteButtonStencil())}>
68
+ <Button
69
+ as={Element}
70
+ ref={ref}
71
+ size={size}
72
+ grow={grow}
73
+ iconPosition={iconPosition}
74
+ cs={[deleteButtonStencil({size, iconPosition}), cs]}
75
+ {...elemProps}
76
+ >
66
77
  {children}
67
78
  </Button>
68
79
  );
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
6
6
  import {brand, system} from '@workday/canvas-tokens-web';
7
7
  import {buttonColorPropVars, buttonStencil} from './BaseButton';
8
8
  import {Button, ButtonProps} from './Button';
9
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
9
 
11
10
  /**
12
11
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -115,9 +114,21 @@ const primaryButtonStencil = createStencil({
115
114
 
116
115
  export const PrimaryButton = createComponent('button')({
117
116
  displayName: 'PrimaryButton',
118
- Component: ({children, variant, ...elemProps}: PrimaryButtonProps, ref, Element) => {
117
+ Component: (
118
+ {children, variant, size, iconPosition, grow, cs, ...elemProps}: PrimaryButtonProps,
119
+ ref,
120
+ Element
121
+ ) => {
119
122
  return (
120
- <Button as={Element} ref={ref} {...mergeStyles(elemProps, primaryButtonStencil({variant}))}>
123
+ <Button
124
+ as={Element}
125
+ ref={ref}
126
+ iconPosition={iconPosition}
127
+ size={size}
128
+ grow={grow}
129
+ cs={[primaryButtonStencil({variant, iconPosition, grow, size}), cs]}
130
+ {...elemProps}
131
+ >
121
132
  {children}
122
133
  </Button>
123
134
  );
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
6
6
  import {brand, system} from '@workday/canvas-tokens-web';
7
7
  import {Button, ButtonProps} from './Button';
8
8
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
9
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
9
 
11
10
  /**
12
11
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -130,9 +129,21 @@ const secondaryButtonStencil = createStencil({
130
129
 
131
130
  export const SecondaryButton = createComponent('button')({
132
131
  displayName: 'SecondaryButton',
133
- Component: ({children, variant, ...elemProps}: SecondaryButtonProps, ref, Element) => {
132
+ Component: (
133
+ {children, variant, size, iconPosition, grow, cs, ...elemProps}: SecondaryButtonProps,
134
+ ref,
135
+ Element
136
+ ) => {
134
137
  return (
135
- <Button as={Element} ref={ref} {...mergeStyles(elemProps, secondaryButtonStencil({variant}))}>
138
+ <Button
139
+ as={Element}
140
+ ref={ref}
141
+ iconPosition={iconPosition}
142
+ size={size}
143
+ grow={grow}
144
+ cs={[secondaryButtonStencil({variant, iconPosition, grow, size}), cs]}
145
+ {...elemProps}
146
+ >
136
147
  {children}
137
148
  </Button>
138
149
  );
@@ -6,7 +6,6 @@ import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
6
6
  import {system, brand} from '@workday/canvas-tokens-web';
7
7
  import {Button, ButtonProps} from './Button';
8
8
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
9
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
9
 
11
10
  /**
12
11
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -291,6 +290,8 @@ export const TertiaryButton = createComponent('button')({
291
290
  size = 'medium',
292
291
  variant,
293
292
  iconPosition,
293
+ grow,
294
+ cs,
294
295
  ...elemProps
295
296
  }: TertiaryButtonProps,
296
297
  ref,
@@ -311,15 +312,18 @@ export const TertiaryButton = createComponent('button')({
311
312
  icon={icon}
312
313
  size={size}
313
314
  iconPosition={iconPosition}
314
- {...mergeStyles(
315
- elemProps,
315
+ grow={grow}
316
+ cs={[
316
317
  tertiaryButtonStencil({
317
- variant,
318
318
  size,
319
+ variant,
320
+ grow,
319
321
  isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
320
322
  iconPosition: baseIconPosition,
321
- })
322
- )}
323
+ }),
324
+ cs,
325
+ ]}
326
+ {...elemProps}
323
327
  >
324
328
  {children}
325
329
  </Button>
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAqBvB,CAAC"}
@@ -27,11 +27,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
29
  const icon_1 = require("@workday/canvas-kit-react/icon");
30
- const layout_1 = require("@workday/canvas-kit-react/layout");
31
30
  const deleteButtonStencil = canvas_kit_styling_1.createStencil({
32
31
  extends: BaseButton_1.buttonStencil,
33
- base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
34
- }, "delete-button-d069ff");
32
+ base: { name: "ad5763", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
33
+ }, "delete-button-880e51");
35
34
  /**
36
35
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
37
36
  * have significant consequences. They commonly appear in confirmation dialogs as the final
@@ -39,7 +38,7 @@ const deleteButtonStencil = canvas_kit_styling_1.createStencil({
39
38
  */
40
39
  exports.DeleteButton = common_1.createComponent('button')({
41
40
  displayName: 'DeleteButton',
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
+ Component: ({ children, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
42
+ return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ size, iconPosition }), cs] }, elemProps), children));
44
43
  },
45
44
  });
@@ -1 +1 @@
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;AA+FD,eAAO,MAAM,aAAa,2FASxB,CAAC"}
1
+ {"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}
@@ -27,20 +27,19 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const BaseButton_1 = require("./BaseButton");
29
29
  const Button_1 = require("./Button");
30
- const layout_1 = require("@workday/canvas-kit-react/layout");
31
30
  const primaryButtonStencil = canvas_kit_styling_1.createStencil({
32
31
  extends: BaseButton_1.buttonStencil,
33
- base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
32
+ base: { name: "58848f", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
34
33
  modifiers: {
35
34
  variant: {
36
35
  // Inverse Styles
37
- inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
36
+ inverse: { name: "a03cfe", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
38
37
  }
39
38
  }
40
- }, "primary-button-a56ed8");
39
+ }, "primary-button-cc7f35");
41
40
  exports.PrimaryButton = common_1.createComponent('button')({
42
41
  displayName: 'PrimaryButton',
43
- Component: ({ children, variant, ...elemProps }, ref, Element) => {
44
- return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, primaryButtonStencil({ variant }))), children));
42
+ Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
43
+ return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
45
44
  },
46
45
  });
@@ -1 +1 @@
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;AA8GD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
1
+ {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAqB1B,CAAC"}
@@ -27,19 +27,18 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
29
  const icon_1 = require("@workday/canvas-kit-react/icon");
30
- const layout_1 = require("@workday/canvas-kit-react/layout");
31
30
  const secondaryButtonStencil = canvas_kit_styling_1.createStencil({
32
31
  extends: BaseButton_1.buttonStencil,
33
- base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
32
+ base: { name: "843acd", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
34
33
  modifiers: {
35
34
  variant: {
36
- inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
35
+ inverse: { name: "79e673", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
37
36
  }
38
37
  }
39
- }, "secondary-button-c33259");
38
+ }, "secondary-button-e11131");
40
39
  exports.SecondaryButton = common_1.createComponent('button')({
41
40
  displayName: 'SecondaryButton',
42
- Component: ({ children, variant, ...elemProps }, ref, Element) => {
43
- return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, secondaryButtonStencil({ variant }))), children));
41
+ Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
42
+ return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [secondaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
44
43
  },
45
44
  });
@@ -1 +1 @@
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;AAsQD,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
1
+ {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FAiDzB,CAAC"}
@@ -27,81 +27,80 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
29
  const icon_1 = require("@workday/canvas-kit-react/icon");
30
- const layout_1 = require("@workday/canvas-kit-react/layout");
31
30
  const tertiaryButtonStencil = canvas_kit_styling_1.createStencil({
32
31
  extends: BaseButton_1.buttonStencil,
33
32
  // Base Styles
34
- base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
33
+ base: { name: "35d89c", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
35
34
  modifiers: {
36
35
  // IconPosition Styles
37
36
  iconPosition: {
38
- only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
39
- start: { name: "74ae7d", styles: "" },
40
- end: { name: "526d6e", styles: "" }
37
+ only: { name: "edc98d", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
38
+ start: { name: "ae3305", styles: "" },
39
+ end: { name: "bc73ca", styles: "" }
41
40
  },
42
41
  isThemeable: {
43
- true: { name: "a82202", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
42
+ true: { name: "44a76b", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
44
43
  },
45
44
  variant: {
46
45
  // Inverse Styles
47
- inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
46
+ inverse: { name: "9bce42", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
48
47
  }
49
48
  },
50
49
  // Compound Modifier Styles
51
50
  compound: [
52
51
  {
53
52
  modifiers: { size: 'large', iconPosition: 'only' },
54
- styles: { name: "267da1", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
53
+ styles: { name: "c2436d", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
55
54
  },
56
55
  {
57
56
  modifiers: { size: 'large', iconPosition: 'start' },
58
- styles: { name: "bfdcdf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
57
+ styles: { name: "6113cf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
59
58
  },
60
59
  {
61
60
  modifiers: { size: 'large', iconPosition: 'end' },
62
- styles: { name: "489483", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
61
+ styles: { name: "94c90d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
63
62
  },
64
63
  {
65
64
  modifiers: { size: 'medium', iconPosition: 'only' },
66
- styles: { name: "98e2d0", styles: "min-width:var(--cnvs-sys-space-x10);" }
65
+ styles: { name: "91d174", styles: "min-width:var(--cnvs-sys-space-x10);" }
67
66
  },
68
67
  {
69
68
  modifiers: { size: 'medium', iconPosition: 'start' },
70
- styles: { name: "c9fa78", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
69
+ styles: { name: "ee0a1d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
71
70
  },
72
71
  {
73
72
  modifiers: { size: 'medium', iconPosition: 'end' },
74
- styles: { name: "69061d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
73
+ styles: { name: "0564c4", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
75
74
  },
76
75
  {
77
76
  modifiers: { size: 'small', iconPosition: 'only' },
78
- styles: { name: "5d8afb", styles: "min-width:var(--cnvs-sys-space-x8);" }
77
+ styles: { name: "0578ae", styles: "min-width:var(--cnvs-sys-space-x8);" }
79
78
  },
80
79
  {
81
80
  modifiers: { size: 'small', iconPosition: 'start' },
82
- styles: { name: "a26836", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
81
+ styles: { name: "945899", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
83
82
  },
84
83
  {
85
84
  modifiers: { size: 'small', iconPosition: 'end' },
86
- styles: { name: "0f9b2c", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
85
+ styles: { name: "31aee3", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
87
86
  },
88
87
  {
89
88
  modifiers: { size: 'extraSmall', iconPosition: 'only' },
90
- styles: { name: "484a1c", styles: "min-width:var(--cnvs-sys-space-x6);" }
89
+ styles: { name: "7606d0", styles: "min-width:var(--cnvs-sys-space-x6);" }
91
90
  },
92
91
  {
93
92
  modifiers: { size: 'extraSmall', iconPosition: 'start' },
94
- styles: { name: "b8b1ae", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
93
+ styles: { name: "fb2eb9", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
95
94
  },
96
95
  {
97
96
  modifiers: { size: 'extraSmall', iconPosition: 'end' },
98
- styles: { name: "4071aa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
97
+ styles: { name: "837cd0", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
99
98
  }
100
99
  ]
101
- }, "tertiary-button-dc2ab2");
100
+ }, "tertiary-button-4896ac");
102
101
  exports.TertiaryButton = common_1.createComponent('button')({
103
102
  displayName: 'TertiaryButton',
104
- Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
103
+ Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
105
104
  const baseIconPosition = iconPosition
106
105
  ? iconPosition
107
106
  : icon
@@ -109,11 +108,15 @@ exports.TertiaryButton = common_1.createComponent('button')({
109
108
  ? 'start'
110
109
  : 'only'
111
110
  : undefined;
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));
111
+ return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
112
+ tertiaryButtonStencil({
113
+ size,
114
+ variant,
115
+ grow,
116
+ isThemeable: (isThemeable || baseIconPosition !== 'only'),
117
+ iconPosition: baseIconPosition,
118
+ }),
119
+ cs,
120
+ ] }, elemProps), children));
118
121
  },
119
122
  });
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAqBvB,CAAC"}
@@ -5,11 +5,10 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
7
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
8
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
8
  const deleteButtonStencil = createStencil({
10
9
  extends: buttonStencil,
11
- base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
12
- }, "delete-button-d069ff");
10
+ base: { name: "ad5763", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
11
+ }, "delete-button-880e51");
13
12
  /**
14
13
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
15
14
  * have significant consequences. They commonly appear in confirmation dialogs as the final
@@ -17,7 +16,7 @@ const deleteButtonStencil = createStencil({
17
16
  */
18
17
  export const DeleteButton = createComponent('button')({
19
18
  displayName: 'DeleteButton',
20
- Component: ({ children, ...elemProps }, ref, Element) => {
21
- return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, deleteButtonStencil())), children));
19
+ Component: ({ children, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
20
+ return (React.createElement(Button, Object.assign({ as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ size, iconPosition }), cs] }, elemProps), children));
22
21
  },
23
22
  });
@@ -1 +1 @@
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;AA+FD,eAAO,MAAM,aAAa,2FASxB,CAAC"}
1
+ {"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}
@@ -5,20 +5,19 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { brand, system } from '@workday/canvas-tokens-web';
6
6
  import { buttonColorPropVars, buttonStencil } from './BaseButton';
7
7
  import { Button } from './Button';
8
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
8
  const primaryButtonStencil = createStencil({
10
9
  extends: buttonStencil,
11
- base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
10
+ base: { name: "58848f", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
12
11
  modifiers: {
13
12
  variant: {
14
13
  // Inverse Styles
15
- inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
14
+ inverse: { name: "a03cfe", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
16
15
  }
17
16
  }
18
- }, "primary-button-a56ed8");
17
+ }, "primary-button-cc7f35");
19
18
  export const PrimaryButton = createComponent('button')({
20
19
  displayName: 'PrimaryButton',
21
- Component: ({ children, variant, ...elemProps }, ref, Element) => {
22
- return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, primaryButtonStencil({ variant }))), children));
20
+ Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
21
+ return (React.createElement(Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
23
22
  },
24
23
  });
@@ -1 +1 @@
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;AA8GD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
1
+ {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAqB1B,CAAC"}
@@ -5,19 +5,18 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
7
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
8
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
8
  const secondaryButtonStencil = createStencil({
10
9
  extends: buttonStencil,
11
- base: { name: "67b9b8", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
10
+ base: { name: "843acd", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
12
11
  modifiers: {
13
12
  variant: {
14
- inverse: { name: "3e1152", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
13
+ inverse: { name: "79e673", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
15
14
  }
16
15
  }
17
- }, "secondary-button-c33259");
16
+ }, "secondary-button-e11131");
18
17
  export const SecondaryButton = createComponent('button')({
19
18
  displayName: 'SecondaryButton',
20
- Component: ({ children, variant, ...elemProps }, ref, Element) => {
21
- return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, secondaryButtonStencil({ variant }))), children));
19
+ Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
20
+ return (React.createElement(Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [secondaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
22
21
  },
23
22
  });
@@ -1 +1 @@
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;AAsQD,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
1
+ {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FAiDzB,CAAC"}
@@ -5,81 +5,80 @@ import { calc, createStencil, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { system, brand } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
7
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
8
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
8
  const tertiaryButtonStencil = createStencil({
10
9
  extends: buttonStencil,
11
10
  // Base Styles
12
- base: { name: "ffe654", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
11
+ base: { name: "35d89c", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
13
12
  modifiers: {
14
13
  // IconPosition Styles
15
14
  iconPosition: {
16
- only: { name: "83cdfe", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
17
- start: { name: "74ae7d", styles: "" },
18
- end: { name: "526d6e", styles: "" }
15
+ only: { name: "edc98d", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
16
+ start: { name: "ae3305", styles: "" },
17
+ end: { name: "bc73ca", styles: "" }
19
18
  },
20
19
  isThemeable: {
21
- true: { name: "a82202", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
20
+ true: { name: "44a76b", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
22
21
  },
23
22
  variant: {
24
23
  // Inverse Styles
25
- inverse: { name: "1f333b", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
24
+ inverse: { name: "9bce42", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
26
25
  }
27
26
  },
28
27
  // Compound Modifier Styles
29
28
  compound: [
30
29
  {
31
30
  modifiers: { size: 'large', iconPosition: 'only' },
32
- styles: { name: "267da1", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
31
+ styles: { name: "c2436d", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
33
32
  },
34
33
  {
35
34
  modifiers: { size: 'large', iconPosition: 'start' },
36
- styles: { name: "bfdcdf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
35
+ styles: { name: "6113cf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
37
36
  },
38
37
  {
39
38
  modifiers: { size: 'large', iconPosition: 'end' },
40
- styles: { name: "489483", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
39
+ styles: { name: "94c90d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
41
40
  },
42
41
  {
43
42
  modifiers: { size: 'medium', iconPosition: 'only' },
44
- styles: { name: "98e2d0", styles: "min-width:var(--cnvs-sys-space-x10);" }
43
+ styles: { name: "91d174", styles: "min-width:var(--cnvs-sys-space-x10);" }
45
44
  },
46
45
  {
47
46
  modifiers: { size: 'medium', iconPosition: 'start' },
48
- styles: { name: "c9fa78", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
47
+ styles: { name: "ee0a1d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
49
48
  },
50
49
  {
51
50
  modifiers: { size: 'medium', iconPosition: 'end' },
52
- styles: { name: "69061d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
51
+ styles: { name: "0564c4", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
53
52
  },
54
53
  {
55
54
  modifiers: { size: 'small', iconPosition: 'only' },
56
- styles: { name: "5d8afb", styles: "min-width:var(--cnvs-sys-space-x8);" }
55
+ styles: { name: "0578ae", styles: "min-width:var(--cnvs-sys-space-x8);" }
57
56
  },
58
57
  {
59
58
  modifiers: { size: 'small', iconPosition: 'start' },
60
- styles: { name: "a26836", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
59
+ styles: { name: "945899", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
61
60
  },
62
61
  {
63
62
  modifiers: { size: 'small', iconPosition: 'end' },
64
- styles: { name: "0f9b2c", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
63
+ styles: { name: "31aee3", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
65
64
  },
66
65
  {
67
66
  modifiers: { size: 'extraSmall', iconPosition: 'only' },
68
- styles: { name: "484a1c", styles: "min-width:var(--cnvs-sys-space-x6);" }
67
+ styles: { name: "7606d0", styles: "min-width:var(--cnvs-sys-space-x6);" }
69
68
  },
70
69
  {
71
70
  modifiers: { size: 'extraSmall', iconPosition: 'start' },
72
- styles: { name: "b8b1ae", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
71
+ styles: { name: "fb2eb9", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
73
72
  },
74
73
  {
75
74
  modifiers: { size: 'extraSmall', iconPosition: 'end' },
76
- styles: { name: "4071aa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
75
+ styles: { name: "837cd0", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
77
76
  }
78
77
  ]
79
- }, "tertiary-button-dc2ab2");
78
+ }, "tertiary-button-4896ac");
80
79
  export const TertiaryButton = createComponent('button')({
81
80
  displayName: 'TertiaryButton',
82
- Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
81
+ Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
83
82
  const baseIconPosition = iconPosition
84
83
  ? iconPosition
85
84
  : icon
@@ -87,11 +86,15 @@ export const TertiaryButton = createComponent('button')({
87
86
  ? 'start'
88
87
  : 'only'
89
88
  : undefined;
90
- return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition }, mergeStyles(elemProps, tertiaryButtonStencil({
91
- variant,
92
- size,
93
- isThemeable: (isThemeable || baseIconPosition !== 'only'),
94
- iconPosition: baseIconPosition,
95
- }))), children));
89
+ return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
90
+ tertiaryButtonStencil({
91
+ size,
92
+ variant,
93
+ grow,
94
+ isThemeable: (isThemeable || baseIconPosition !== 'only'),
95
+ iconPosition: baseIconPosition,
96
+ }),
97
+ cs,
98
+ ] }, elemProps), children));
96
99
  },
97
100
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.1.14",
3
+ "version": "11.1.16",
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.1.14",
53
- "@workday/canvas-kit-styling": "^11.1.14",
52
+ "@workday/canvas-kit-popup-stack": "^11.1.16",
53
+ "@workday/canvas-kit-styling": "^11.1.16",
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": "e03fcc1935f517a5417adb66c66c4d424db03b50"
70
+ "gitHead": "471bb231c188ab23de9c11f5950b0d1e893d426d"
71
71
  }