@workday/canvas-kit-react 11.0.0-alpha.767-next.0 → 11.0.0-alpha.770-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/button/lib/BaseButton.tsx +260 -204
  2. package/button/lib/Button.tsx +1 -4
  3. package/button/lib/DeleteButton.tsx +42 -38
  4. package/button/lib/PrimaryButton.tsx +74 -71
  5. package/button/lib/SecondaryButton.tsx +85 -87
  6. package/button/lib/TertiaryButton.tsx +214 -132
  7. package/dist/commonjs/button/lib/BaseButton.d.ts +70 -29
  8. package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
  9. package/dist/commonjs/button/lib/BaseButton.js +98 -55
  10. package/dist/commonjs/button/lib/Button.d.ts.map +1 -1
  11. package/dist/commonjs/button/lib/Button.js +1 -2
  12. package/dist/commonjs/button/lib/DeleteButton.d.ts +1 -1
  13. package/dist/commonjs/button/lib/DeleteButton.d.ts.map +1 -1
  14. package/dist/commonjs/button/lib/DeleteButton.js +9 -6
  15. package/dist/commonjs/button/lib/PrimaryButton.d.ts +0 -5
  16. package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
  17. package/dist/commonjs/button/lib/PrimaryButton.js +14 -10
  18. package/dist/commonjs/button/lib/SecondaryButton.d.ts +0 -5
  19. package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
  20. package/dist/commonjs/button/lib/SecondaryButton.js +13 -10
  21. package/dist/commonjs/button/lib/TertiaryButton.d.ts +0 -22
  22. package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
  23. package/dist/commonjs/button/lib/TertiaryButton.js +80 -35
  24. package/dist/es6/button/lib/BaseButton.d.ts +70 -29
  25. package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
  26. package/dist/es6/button/lib/BaseButton.js +99 -54
  27. package/dist/es6/button/lib/Button.d.ts.map +1 -1
  28. package/dist/es6/button/lib/Button.js +1 -2
  29. package/dist/es6/button/lib/DeleteButton.d.ts +1 -1
  30. package/dist/es6/button/lib/DeleteButton.d.ts.map +1 -1
  31. package/dist/es6/button/lib/DeleteButton.js +12 -9
  32. package/dist/es6/button/lib/PrimaryButton.d.ts +0 -5
  33. package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
  34. package/dist/es6/button/lib/PrimaryButton.js +15 -11
  35. package/dist/es6/button/lib/SecondaryButton.d.ts +0 -5
  36. package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
  37. package/dist/es6/button/lib/SecondaryButton.js +15 -12
  38. package/dist/es6/button/lib/TertiaryButton.d.ts +0 -22
  39. package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
  40. package/dist/es6/button/lib/TertiaryButton.js +82 -37
  41. package/package.json +4 -4
package/button/lib/PrimaryButton.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React from 'react';
2
2
 
3
- import {buttonVars} from './BaseButton';
4
3
  import {createComponent} from '@workday/canvas-kit-react/common';
5
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
6
4
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
7
- import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
8
- import {base, brand, system} from '@workday/canvas-tokens-web';
5
+ import {createStencil} from '@workday/canvas-kit-styling';
6
+ import {brand, system} from '@workday/canvas-tokens-web';
7
+ import {buttonStencil} from './BaseButton';
9
8
  import {Button, ButtonProps} from './Button';
9
+ import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
10
 
11
11
  /**
12
12
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -20,71 +20,78 @@ export interface PrimaryButtonProps extends ButtonProps {
20
20
  variant?: 'inverse';
21
21
  }
22
22
 
23
- const primaryStyles = createStyles({
24
- [buttonVars.default.background]: brand.primary.base,
25
- [buttonVars.default.border]: 'transparent',
26
- [buttonVars.default.borderRadius]: system.shape.round,
27
- [buttonVars.default.label]: brand.primary.accent,
28
- [systemIconStencil.vars.color]: brand.primary.accent,
29
- '&:focus-visible, &.focus': {
30
- [buttonVars.focus.background]: brand.primary.base,
31
- [buttonVars.focus.border]: 'transparent',
32
- [buttonVars.focus.label]: brand.primary.accent,
33
- [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
34
- [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
35
- [systemIconStencil.vars.color]: brand.primary.accent,
36
- },
37
- '&:hover, &.hover': {
38
- [buttonVars.hover.background]: brand.primary.dark,
39
- [buttonVars.hover.border]: 'transparent',
40
- [buttonVars.hover.label]: brand.primary.accent,
23
+ const primaryButtonStencil = createStencil({
24
+ extends: buttonStencil,
25
+ base: {
26
+ // Base Styles
27
+ [buttonStencil.vars.background]: brand.primary.base,
28
+ [buttonStencil.vars.borderRadius]: system.shape.round,
29
+ [buttonStencil.vars.label]: brand.primary.accent,
41
30
  [systemIconStencil.vars.color]: brand.primary.accent,
31
+ // Focus Styles
32
+ '&:focus-visible, &.focus': {
33
+ [buttonStencil.vars.background]: brand.primary.base,
34
+ [buttonStencil.vars.label]: brand.primary.accent,
35
+ [buttonStencil.vars.boxShadowInner]: system.color.fg.inverse,
36
+ [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
37
+ [systemIconStencil.vars.color]: brand.primary.accent,
38
+ },
39
+ // Hover Styles
40
+ '&:hover, &.hover': {
41
+ [buttonStencil.vars.background]: brand.primary.dark,
42
+ [buttonStencil.vars.label]: brand.primary.accent,
43
+ [systemIconStencil.vars.color]: brand.primary.accent,
44
+ },
45
+ // Active Styles
46
+ '&:active, &.active': {
47
+ [buttonStencil.vars.background]: brand.primary.darkest,
48
+ [buttonStencil.vars.label]: brand.primary.accent,
49
+ [systemIconStencil.vars.color]: brand.primary.accent,
50
+ },
51
+ // Disabled Styles
52
+ '&:disabled, &.disabled': {
53
+ [buttonStencil.vars.background]: brand.primary.base,
54
+ [buttonStencil.vars.label]: brand.primary.accent,
55
+ [buttonStencil.vars.opacity]: system.opacity.disabled,
56
+ [systemIconStencil.vars.color]: brand.primary.accent,
57
+ },
42
58
  },
43
- '&:active, &.active': {
44
- [buttonVars.active.background]: brand.primary.darkest,
45
- [buttonVars.active.border]: 'transparent',
46
- [buttonVars.active.label]: brand.primary.accent,
47
- [systemIconStencil.vars.color]: brand.primary.accent,
48
- },
49
- '&:disabled, &.disabled': {
50
- [buttonVars.disabled.background]: brand.primary.base,
51
- [buttonVars.disabled.border]: 'transparent',
52
- [buttonVars.disabled.label]: brand.primary.accent,
53
- [buttonVars.disabled.opacity]: '0.4',
54
- [systemIconStencil.vars.color]: brand.primary.accent,
55
- },
56
- });
57
-
58
- export const primaryButtonModifiers = createModifiers({
59
- variant: {
60
- inverse: createStyles({
61
- [buttonVars.default.background]: base.frenchVanilla100,
62
- [buttonVars.default.borderRadius]: system.shape.round,
63
- [buttonVars.default.label]: base.blackPepper400,
64
- [systemIconStencil.vars.color]: base.blackPepper400,
65
- '&:focus-visible, &.focus': {
66
- [buttonVars.focus.background]: base.frenchVanilla100,
67
- [buttonVars.focus.label]: base.blackPepper400,
68
- [buttonVars.focus.boxShadowInner]: base.blackPepper400,
69
- [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
70
- [systemIconStencil.vars.color]: base.blackPepper400,
71
- },
72
- '&:hover, &.hover': {
73
- [buttonVars.hover.background]: base.soap300,
74
- [buttonVars.hover.label]: base.blackPepper500,
75
- [systemIconStencil.vars.color]: base.blackPepper500,
76
- },
77
- '&:active, &.active': {
78
- [buttonVars.active.background]: base.soap400,
79
- [buttonVars.active.label]: base.blackPepper500,
80
- [systemIconStencil.vars.color]: base.blackPepper500,
81
- },
82
- '&:disabled, &.disabled': {
83
- [buttonVars.disabled.background]: base.frenchVanilla100,
84
- [buttonVars.disabled.label]: base.blackPepper400,
85
- [systemIconStencil.vars.color]: base.blackPepper400,
59
+ modifiers: {
60
+ variant: {
61
+ // Inverse Styles
62
+ inverse: {
63
+ [buttonStencil.vars.background]: system.color.bg.default,
64
+ [buttonStencil.vars.borderRadius]: system.shape.round,
65
+ [buttonStencil.vars.label]: system.color.fg.strong,
66
+ [systemIconStencil.vars.color]: system.color.fg.strong,
67
+ // Focus Styles
68
+ '&:focus-visible, &.focus': {
69
+ [buttonStencil.vars.background]: system.color.bg.default,
70
+ [buttonStencil.vars.label]: system.color.fg.strong,
71
+ [buttonStencil.vars.boxShadowInner]: system.color.fg.strong,
72
+ [buttonStencil.vars.boxShadowOuter]: system.color.fg.inverse,
73
+ [systemIconStencil.vars.color]: system.color.fg.strong,
74
+ },
75
+ // Hover Styles
76
+ '&:hover, &.hover': {
77
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
78
+ [buttonStencil.vars.label]: system.color.fg.stronger,
79
+ [systemIconStencil.vars.color]: system.color.fg.stronger,
80
+ },
81
+ // Active Styles
82
+ '&:active, &.active': {
83
+ [buttonStencil.vars.background]: system.color.bg.alt.strong,
84
+ [buttonStencil.vars.label]: system.color.fg.stronger,
85
+ [systemIconStencil.vars.color]: system.color.fg.stronger,
86
+ },
87
+ // Disabled Styles
88
+ '&:disabled, &.disabled': {
89
+ [buttonStencil.vars.background]: system.color.bg.default,
90
+ [buttonStencil.vars.label]: system.color.fg.strong,
91
+ [systemIconStencil.vars.color]: system.color.fg.strong,
92
+ },
86
93
  },
87
- }),
94
+ },
88
95
  },
89
96
  });
90
97
 
@@ -92,11 +99,7 @@ export const PrimaryButton = createComponent('button')({
92
99
  displayName: 'PrimaryButton',
93
100
  Component: ({children, variant, ...elemProps}: PrimaryButtonProps, ref, Element) => {
94
101
  return (
95
- <Button
96
- as={Element}
97
- ref={ref}
98
- {...mergeStyles(elemProps, [primaryStyles, primaryButtonModifiers({variant: variant})])}
99
- >
102
+ <Button as={Element} ref={ref} {...mergeStyles(elemProps, primaryButtonStencil({variant}))}>
100
103
  {children}
101
104
  </Button>
102
105
  );
package/button/lib/SecondaryButton.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React from 'react';
2
2
 
3
- import {buttonVars} from './BaseButton';
3
+ import {buttonStencil} from './BaseButton';
4
4
  import {createComponent} from '@workday/canvas-kit-react/common';
5
- import {mergeStyles} from '@workday/canvas-kit-react/layout';
6
- import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
7
- import {base, brand, system} from '@workday/canvas-tokens-web';
5
+ import {createStencil} from '@workday/canvas-kit-styling';
6
+ import {brand, system} from '@workday/canvas-tokens-web';
8
7
  import {Button, ButtonProps} from './Button';
9
- import {systemIconStencil} from '../../icon';
8
+ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
9
+ import {mergeStyles} from '@workday/canvas-kit-react/layout';
10
10
 
11
11
  /**
12
12
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -20,85 +20,87 @@ export interface SecondaryButtonProps extends ButtonProps {
20
20
  variant?: 'inverse';
21
21
  }
22
22
 
23
- const secondaryStyles = createStyles({
24
- // Default Styles
25
- [buttonVars.default.background]: 'transparent',
26
- [buttonVars.default.border]: base.blackPepper400,
27
- [buttonVars.default.borderRadius]: system.shape.round,
28
- [buttonVars.default.label]: base.blackPepper400,
29
- [systemIconStencil.vars.color]: base.blackPepper400,
30
- // Focus Styles
31
- '&:focus-visible, &.focus': {
32
- [buttonVars.focus.background]: 'transparent',
33
- [buttonVars.focus.border]: base.blackPepper400,
34
- [buttonVars.focus.label]: base.blackPepper400,
35
- [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
36
- [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
37
- [systemIconStencil.vars.color]: base.blackPepper400,
38
- },
39
- // Hover Styles
40
- '&:hover, &.hover': {
41
- [buttonVars.hover.background]: base.blackPepper400,
42
- [buttonVars.hover.border]: base.blackPepper400,
43
- [buttonVars.hover.label]: brand.primary.accent,
44
- [systemIconStencil.vars.color]: brand.primary.accent,
45
- },
46
- // Active Styles
47
- '&:active, &.active': {
48
- [buttonVars.active.background]: base.blackPepper500,
49
- [buttonVars.active.border]: base.blackPepper500,
50
- [buttonVars.active.label]: brand.primary.accent,
51
- [systemIconStencil.vars.color]: brand.primary.accent,
52
- },
53
- // Disabled Styles
54
- '&:disabled, &.disabled': {
55
- [buttonVars.disabled.background]: 'transparent',
56
- [buttonVars.disabled.border]: base.blackPepper400,
57
- [buttonVars.disabled.label]: base.blackPepper400,
58
- [buttonVars.disabled.opacity]: '0.4',
59
- [systemIconStencil.vars.color]: base.blackPepper400,
23
+ const secondaryButtonStencil = createStencil({
24
+ extends: buttonStencil,
25
+ base: {
26
+ // Base Styles
27
+ [buttonStencil.vars.background]: 'transparent',
28
+ [buttonStencil.vars.border]: system.color.border.contrast.default,
29
+ [buttonStencil.vars.borderRadius]: system.shape.round,
30
+ [buttonStencil.vars.label]: system.color.fg.strong,
31
+ [systemIconStencil.vars.color]: system.color.fg.strong,
32
+ // Focus Styles
33
+ '&:focus-visible, &.focus': {
34
+ [buttonStencil.vars.background]: 'transparent',
35
+ [buttonStencil.vars.border]: system.color.border.contrast.default,
36
+ [buttonStencil.vars.label]: system.color.fg.strong,
37
+ [buttonStencil.vars.boxShadowInner]: system.color.fg.inverse,
38
+ [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
39
+ [systemIconStencil.vars.color]: system.color.fg.strong,
40
+ },
41
+ // Hover Styles
42
+ '&:hover, &.hover': {
43
+ [buttonStencil.vars.background]: system.color.bg.contrast.default,
44
+ [buttonStencil.vars.border]: system.color.border.contrast.default,
45
+ [buttonStencil.vars.label]: brand.primary.accent,
46
+ [systemIconStencil.vars.color]: brand.primary.accent,
47
+ },
48
+ // Active Styles
49
+ '&:active, &.active': {
50
+ [buttonStencil.vars.background]: system.color.bg.contrast.strong,
51
+ [buttonStencil.vars.border]: system.color.border.contrast.strong,
52
+ [buttonStencil.vars.label]: brand.primary.accent,
53
+ [systemIconStencil.vars.color]: brand.primary.accent,
54
+ },
55
+ // Disabled Styles
56
+ '&:disabled, &.disabled': {
57
+ [buttonStencil.vars.background]: 'transparent',
58
+ [buttonStencil.vars.border]: system.color.border.contrast.default,
59
+ [buttonStencil.vars.label]: system.color.fg.strong,
60
+ [buttonStencil.vars.opacity]: system.opacity.disabled,
61
+ [systemIconStencil.vars.color]: system.color.fg.strong,
62
+ },
60
63
  },
61
- });
62
-
63
- export const secondaryButtonModifiers = createModifiers({
64
- variant: {
65
- inverse: createStyles({
66
- // Default Styles
67
- [buttonVars.default.background]: 'transparent',
68
- [buttonVars.default.border]: base.frenchVanilla100,
69
- [buttonVars.default.label]: base.frenchVanilla100,
70
- [systemIconStencil.vars.color]: base.frenchVanilla100,
71
- // Focus Styles
72
- '&:focus-visible, &.focus': {
73
- [buttonVars.focus.background]: base.frenchVanilla100,
74
- [buttonVars.focus.border]: base.frenchVanilla100,
75
- [buttonVars.focus.label]: base.blackPepper400,
76
- [buttonVars.focus.boxShadowInner]: base.blackPepper400,
77
- [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
78
- [systemIconStencil.vars.color]: base.blackPepper400,
79
- },
80
- // Hover Styles
81
- '&:hover, &.hover': {
82
- [buttonVars.hover.background]: base.soap300,
83
- [buttonVars.hover.border]: base.soap300,
84
- [buttonVars.hover.label]: base.blackPepper500,
85
- [systemIconStencil.vars.color]: base.blackPepper500,
86
- },
87
- // Active Styles
88
- '&:active, &.active': {
89
- [buttonVars.active.background]: base.soap400,
90
- [buttonVars.active.border]: base.soap400,
91
- [buttonVars.active.label]: base.blackPepper500,
92
- [systemIconStencil.vars.color]: base.blackPepper500,
93
- },
94
- // Disabled Styles
95
- '&:disabled, &.disabled': {
96
- [buttonVars.disabled.background]: 'transparent',
97
- [buttonVars.disabled.border]: base.frenchVanilla100,
98
- [buttonVars.disabled.label]: base.frenchVanilla100,
99
- [systemIconStencil.vars.color]: base.frenchVanilla100,
64
+ modifiers: {
65
+ variant: {
66
+ inverse: {
67
+ // Default Styles
68
+ [buttonStencil.vars.background]: 'transparent',
69
+ [buttonStencil.vars.border]: system.color.border.inverse,
70
+ [buttonStencil.vars.label]: system.color.fg.inverse,
71
+ [systemIconStencil.vars.color]: system.color.fg.inverse,
72
+ // Focus Styles
73
+ '&:focus-visible, &.focus': {
74
+ [buttonStencil.vars.background]: system.color.bg.default,
75
+ [buttonStencil.vars.border]: 'transparent',
76
+ [buttonStencil.vars.label]: system.color.fg.strong,
77
+ [buttonStencil.vars.boxShadowInner]: system.color.fg.strong,
78
+ [buttonStencil.vars.boxShadowOuter]: system.color.fg.inverse,
79
+ [systemIconStencil.vars.color]: system.color.fg.strong,
80
+ },
81
+ // Hover Styles
82
+ '&:hover, &.hover': {
83
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
84
+ [buttonStencil.vars.border]: 'transparent',
85
+ [buttonStencil.vars.label]: system.color.fg.stronger,
86
+ [systemIconStencil.vars.color]: system.color.fg.stronger,
87
+ },
88
+ // Active Styles
89
+ '&:active, &.active': {
90
+ [buttonStencil.vars.background]: system.color.bg.alt.strong,
91
+ [buttonStencil.vars.border]: 'transparent',
92
+ [buttonStencil.vars.label]: system.color.fg.stronger,
93
+ [systemIconStencil.vars.color]: system.color.fg.stronger,
94
+ },
95
+ // Disabled Styles
96
+ '&:disabled, &.disabled': {
97
+ [buttonStencil.vars.background]: 'transparent',
98
+ [buttonStencil.vars.border]: system.color.border.inverse,
99
+ [buttonStencil.vars.label]: system.color.fg.inverse,
100
+ [systemIconStencil.vars.color]: system.color.fg.inverse,
101
+ },
100
102
  },
101
- }),
103
+ },
102
104
  },
103
105
  });
104
106
 
@@ -106,11 +108,7 @@ export const SecondaryButton = createComponent('button')({
106
108
  displayName: 'SecondaryButton',
107
109
  Component: ({children, variant, ...elemProps}: SecondaryButtonProps, ref, Element) => {
108
110
  return (
109
- <Button
110
- as={Element}
111
- ref={ref}
112
- {...mergeStyles(elemProps, [secondaryStyles, secondaryButtonModifiers({variant: variant})])}
113
- >
111
+ <Button as={Element} ref={ref} {...mergeStyles(elemProps, secondaryButtonStencil({variant}))}>
114
112
  {children}
115
113
  </Button>
116
114
  );