@atlaskit/button 17.8.0 → 17.9.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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/entry-points/standard-button.js +0 -1
  3. package/dist/cjs/new-button/variants/shared/colors.js +44 -36
  4. package/dist/cjs/new-button/variants/shared/xcss.js +7 -5
  5. package/dist/cjs/old-button/shared/button-base.js +1 -1
  6. package/dist/es2019/entry-points/standard-button.js +0 -5
  7. package/dist/es2019/new-button/variants/shared/colors.js +44 -36
  8. package/dist/es2019/new-button/variants/shared/xcss.js +7 -5
  9. package/dist/es2019/old-button/shared/button-base.js +1 -1
  10. package/dist/esm/entry-points/standard-button.js +0 -5
  11. package/dist/esm/new-button/variants/shared/colors.js +44 -36
  12. package/dist/esm/new-button/variants/shared/xcss.js +7 -5
  13. package/dist/esm/old-button/shared/button-base.js +1 -1
  14. package/dist/types/entry-points/standard-button.d.ts +0 -5
  15. package/dist/types/new-button/variants/shared/colors.d.ts +5 -3
  16. package/dist/types-ts4.5/entry-points/standard-button.d.ts +0 -5
  17. package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts +5 -3
  18. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 17.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#87334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87334) [`b779928f2d49`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b779928f2d49) - [ux] New buttons now have hovered and pressed interaction states when they are selected (`isSelected`)
8
+
3
9
  ## 17.8.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/entry-points/standard-button.js CHANGED
@@ -10,5 +10,4 @@ Object.defineProperty(exports, "default", {
10
10
  return _button.default;
11
11
  }
12
12
  });
13
- require("@emotion/react");
14
13
  var _button = _interopRequireDefault(require("../old-button/button"));
package/dist/cjs/new-button/variants/shared/colors.js CHANGED
@@ -24,18 +24,14 @@ var values = {
24
24
  hover: 'color.background.neutral.hovered',
25
25
  active: 'color.background.neutral.pressed',
26
26
  // @ts-expect-error
27
- disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
28
- // @ts-expect-error
29
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
27
+ disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
30
28
  },
31
29
  primary: {
32
30
  default: 'color.background.brand.bold',
33
31
  hover: 'color.background.brand.bold.hovered',
34
32
  active: 'color.background.brand.bold.pressed',
35
33
  // @ts-expect-error
36
- disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
37
- // @ts-expect-error
38
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
34
+ disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
39
35
  },
40
36
  warning: {
41
37
  default: 'color.background.warning.bold',
@@ -43,8 +39,14 @@ var values = {
43
39
  active: 'color.background.warning.bold.pressed',
44
40
  // @ts-expect-error
45
41
  disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
46
- // @ts-expect-error
47
- selected: "var(--ds-background-selected, ".concat(colors.Y400, ")")
42
+ selected: {
43
+ // @ts-expect-error
44
+ default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
45
+ // @ts-expect-error
46
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
47
+ // @ts-expect-error
48
+ active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
49
+ }
48
50
  },
49
51
  danger: {
50
52
  default: 'color.background.danger.bold',
@@ -52,27 +54,35 @@ var values = {
52
54
  active: 'color.background.danger.bold.pressed',
53
55
  // @ts-expect-error
54
56
  disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
55
- // @ts-expect-error
56
- selected: "var(--ds-background-selected, ".concat(colors.R500, ")")
57
+ selected: {
58
+ // @ts-expect-error
59
+ default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
60
+ // @ts-expect-error
61
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
62
+ // @ts-expect-error
63
+ active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
64
+ }
57
65
  },
58
66
  link: {
59
- default: 'color.background.neutral.subtle',
60
- // @ts-expect-error
61
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
67
+ default: 'color.background.neutral.subtle'
62
68
  },
63
69
  subtle: {
64
70
  default: 'color.background.neutral.subtle',
65
71
  hover: 'color.background.neutral.subtle.hovered',
66
72
  active: 'color.background.neutral.subtle.pressed',
67
73
  // @ts-expect-error
68
- disabled: "var(--ds-background-neutral-subtle, none)",
69
- // @ts-expect-error
70
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
74
+ disabled: "var(--ds-background-neutral-subtle, none)"
71
75
  },
72
76
  'subtle-link': {
73
- default: 'color.background.neutral.subtle',
77
+ default: 'color.background.neutral.subtle'
78
+ },
79
+ selected: {
80
+ // @ts-expect-error
81
+ default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
82
+ // @ts-expect-error
83
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
74
84
  // @ts-expect-error
75
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
85
+ active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
76
86
  }
77
87
  },
78
88
  color: {
@@ -81,45 +91,41 @@ var values = {
81
91
  default: "var(--ds-text, ".concat(colors.N500, ")"),
82
92
  // @ts-expect-error
83
93
  active: "var(--ds-text, ".concat(colors.B400, ")"),
84
- disabled: 'color.text.disabled',
85
- // @ts-expect-error
86
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
94
+ disabled: 'color.text.disabled'
87
95
  },
88
96
  primary: {
89
97
  default: 'color.text.inverse',
90
- disabled: 'color.text.disabled',
91
- // @ts-expect-error
92
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
98
+ disabled: 'color.text.disabled'
93
99
  },
94
100
  warning: {
95
101
  default: 'color.text.warning.inverse',
96
102
  disabled: 'color.text.disabled',
97
- // @ts-expect-error
98
- selected: "var(--ds-text-selected, ".concat(colors.N800, ")")
103
+ selected: {
104
+ // @ts-expect-error
105
+ default: "var(--ds-text-selected, ".concat(colors.N800, ")")
106
+ }
99
107
  },
100
108
  danger: {
101
109
  default: 'color.text.inverse',
102
110
  disabled: 'color.text.disabled',
103
- // @ts-expect-error
104
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")")
111
+ selected: {
112
+ // @ts-expect-error
113
+ default: "var(--ds-text-selected, ".concat(colors.N0, ")")
114
+ }
105
115
  },
106
116
  link: {
107
117
  default: 'color.link',
108
118
  // @ts-expect-error
109
119
  hover: "var(--ds-link, ".concat(colors.B300, ")"),
110
120
  active: 'color.link.pressed',
111
- disabled: 'color.text.disabled',
112
- // @ts-expect-error
113
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
121
+ disabled: 'color.text.disabled'
114
122
  },
115
123
  subtle: {
116
124
  // @ts-expect-error
117
125
  default: "var(--ds-text, ".concat(colors.N500, ")"),
118
126
  // @ts-expect-error
119
127
  active: "var(--ds-text, ".concat(colors.B400, ")"),
120
- disabled: 'color.text.disabled',
121
- // @ts-expect-error
122
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
128
+ disabled: 'color.text.disabled'
123
129
  },
124
130
  'subtle-link': {
125
131
  // @ts-expect-error
@@ -128,9 +134,11 @@ var values = {
128
134
  hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
129
135
  // @ts-expect-error
130
136
  active: "var(--ds-text, ".concat(colors.N400, ")"),
131
- disabled: 'color.text.disabled',
137
+ disabled: 'color.text.disabled'
138
+ },
139
+ selected: {
132
140
  // @ts-expect-error
133
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
141
+ default: "var(--ds-text-selected, ".concat(colors.N20, ")")
134
142
  }
135
143
  }
136
144
  };
package/dist/cjs/new-button/variants/shared/xcss.js CHANGED
@@ -66,21 +66,23 @@ function getColors(_ref2) {
66
66
  isHighlighted = _ref2.isHighlighted,
67
67
  isActiveOverSelected = _ref2.isActiveOverSelected,
68
68
  hasOverlay = _ref2.hasOverlay;
69
+ var showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
69
70
  var key = interactionState;
70
71
  // Overlay does not change color on interaction, revert to 'default' or resting state
71
72
  key = hasOverlay ? 'default' : key;
72
- key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
73
+ key = showSelectedState && isActiveOverSelected ? 'active' : key;
74
+
73
75
  // Disabled colors overrule everything else
74
76
  key = isDisabled ? 'disabled' : key;
75
77
  return {
76
78
  backgroundColor: getColor({
77
- group: _colors.default.background[appearance],
79
+ group: showSelectedState && _colors.default.background[appearance]['selected'] || _colors.default.background[showSelectedState ? 'selected' : appearance],
78
80
  key: key
79
81
  }),
80
- color: "".concat(getColor({
81
- group: _colors.default.color[appearance],
82
+ color: getColor({
83
+ group: showSelectedState && _colors.default.color[appearance]['selected'] || _colors.default.color[showSelectedState ? 'selected' : appearance],
82
84
  key: key
83
- }))
85
+ })
84
86
  };
85
87
  }
86
88
  function getXCSS(_ref3) {
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
117
117
  action: 'clicked',
118
118
  componentName: 'button',
119
119
  packageName: "@atlaskit/button",
120
- packageVersion: "17.8.0",
120
+ packageVersion: "17.9.0",
121
121
  analyticsData: analyticsContext
122
122
  });
123
123
 
package/dist/es2019/entry-points/standard-button.js CHANGED
@@ -1,6 +1 @@
1
- /**
2
- * Must import '@emotion/core' in order to resolve type error
3
- * https://product-fabric.atlassian.net/browse/DSP-3222
4
- */
5
- import '@emotion/react';
6
1
  export { default } from '../old-button/button';
package/dist/es2019/new-button/variants/shared/colors.js CHANGED
@@ -15,18 +15,14 @@ const values = {
15
15
  hover: 'color.background.neutral.hovered',
16
16
  active: 'color.background.neutral.pressed',
17
17
  // @ts-expect-error
18
- disabled: `var(--ds-background-disabled, ${colors.N20A})`,
19
- // @ts-expect-error
20
- selected: `var(--ds-background-selected, ${colors.N700})`
18
+ disabled: `var(--ds-background-disabled, ${colors.N20A})`
21
19
  },
22
20
  primary: {
23
21
  default: 'color.background.brand.bold',
24
22
  hover: 'color.background.brand.bold.hovered',
25
23
  active: 'color.background.brand.bold.pressed',
26
24
  // @ts-expect-error
27
- disabled: `var(--ds-background-disabled, ${colors.N20A})`,
28
- // @ts-expect-error
29
- selected: `var(--ds-background-selected, ${colors.N700})`
25
+ disabled: `var(--ds-background-disabled, ${colors.N20A})`
30
26
  },
31
27
  warning: {
32
28
  default: 'color.background.warning.bold',
@@ -34,8 +30,14 @@ const values = {
34
30
  active: 'color.background.warning.bold.pressed',
35
31
  // @ts-expect-error
36
32
  disabled: `var(--ds-background-disabled, ${colors.N20A})`,
37
- // @ts-expect-error
38
- selected: `var(--ds-background-selected, ${colors.Y400})`
33
+ selected: {
34
+ // @ts-expect-error
35
+ default: `var(--ds-background-selected, ${colors.Y400})`,
36
+ // @ts-expect-error
37
+ hover: `var(--ds-background-selected-hovered, ${colors.Y400})`,
38
+ // @ts-expect-error
39
+ active: `var(--ds-background-selected-pressed, ${colors.Y400})`
40
+ }
39
41
  },
40
42
  danger: {
41
43
  default: 'color.background.danger.bold',
@@ -43,27 +45,35 @@ const values = {
43
45
  active: 'color.background.danger.bold.pressed',
44
46
  // @ts-expect-error
45
47
  disabled: `var(--ds-background-disabled, ${colors.N20A})`,
46
- // @ts-expect-error
47
- selected: `var(--ds-background-selected, ${colors.R500})`
48
+ selected: {
49
+ // @ts-expect-error
50
+ default: `var(--ds-background-selected, ${colors.R500})`,
51
+ // @ts-expect-error
52
+ hover: `var(--ds-background-selected-hovered, ${colors.R500})`,
53
+ // @ts-expect-error
54
+ active: `var(--ds-background-selected-pressed, ${colors.R500})`
55
+ }
48
56
  },
49
57
  link: {
50
- default: 'color.background.neutral.subtle',
51
- // @ts-expect-error
52
- selected: `var(--ds-background-selected, ${colors.N700})`
58
+ default: 'color.background.neutral.subtle'
53
59
  },
54
60
  subtle: {
55
61
  default: 'color.background.neutral.subtle',
56
62
  hover: 'color.background.neutral.subtle.hovered',
57
63
  active: 'color.background.neutral.subtle.pressed',
58
64
  // @ts-expect-error
59
- disabled: "var(--ds-background-neutral-subtle, none)",
60
- // @ts-expect-error
61
- selected: `var(--ds-background-selected, ${colors.N700})`
65
+ disabled: "var(--ds-background-neutral-subtle, none)"
62
66
  },
63
67
  'subtle-link': {
64
- default: 'color.background.neutral.subtle',
68
+ default: 'color.background.neutral.subtle'
69
+ },
70
+ selected: {
71
+ // @ts-expect-error
72
+ default: `var(--ds-background-selected, ${colors.N700})`,
73
+ // @ts-expect-error
74
+ hover: `var(--ds-background-selected-hovered, ${colors.N700})`,
65
75
  // @ts-expect-error
66
- selected: `var(--ds-background-selected, ${colors.N700})`
76
+ active: `var(--ds-background-selected-pressed, ${colors.N700})`
67
77
  }
68
78
  },
69
79
  color: {
@@ -72,45 +82,41 @@ const values = {
72
82
  default: `var(--ds-text, ${colors.N500})`,
73
83
  // @ts-expect-error
74
84
  active: `var(--ds-text, ${colors.B400})`,
75
- disabled: 'color.text.disabled',
76
- // @ts-expect-error
77
- selected: `var(--ds-text-selected, ${colors.N20})`
85
+ disabled: 'color.text.disabled'
78
86
  },
79
87
  primary: {
80
88
  default: 'color.text.inverse',
81
- disabled: 'color.text.disabled',
82
- // @ts-expect-error
83
- selected: `var(--ds-text-selected, ${colors.N20})`
89
+ disabled: 'color.text.disabled'
84
90
  },
85
91
  warning: {
86
92
  default: 'color.text.warning.inverse',
87
93
  disabled: 'color.text.disabled',
88
- // @ts-expect-error
89
- selected: `var(--ds-text-selected, ${colors.N800})`
94
+ selected: {
95
+ // @ts-expect-error
96
+ default: `var(--ds-text-selected, ${colors.N800})`
97
+ }
90
98
  },
91
99
  danger: {
92
100
  default: 'color.text.inverse',
93
101
  disabled: 'color.text.disabled',
94
- // @ts-expect-error
95
- selected: `var(--ds-text-selected, ${colors.N0})`
102
+ selected: {
103
+ // @ts-expect-error
104
+ default: `var(--ds-text-selected, ${colors.N0})`
105
+ }
96
106
  },
97
107
  link: {
98
108
  default: 'color.link',
99
109
  // @ts-expect-error
100
110
  hover: `var(--ds-link, ${colors.B300})`,
101
111
  active: 'color.link.pressed',
102
- disabled: 'color.text.disabled',
103
- // @ts-expect-error
104
- selected: `var(--ds-text-selected, ${colors.N20})`
112
+ disabled: 'color.text.disabled'
105
113
  },
106
114
  subtle: {
107
115
  // @ts-expect-error
108
116
  default: `var(--ds-text, ${colors.N500})`,
109
117
  // @ts-expect-error
110
118
  active: `var(--ds-text, ${colors.B400})`,
111
- disabled: 'color.text.disabled',
112
- // @ts-expect-error
113
- selected: `var(--ds-text-selected, ${colors.N20})`
119
+ disabled: 'color.text.disabled'
114
120
  },
115
121
  'subtle-link': {
116
122
  // @ts-expect-error
@@ -119,9 +125,11 @@ const values = {
119
125
  hover: `var(--ds-text-subtle, ${colors.N90})`,
120
126
  // @ts-expect-error
121
127
  active: `var(--ds-text, ${colors.N400})`,
122
- disabled: 'color.text.disabled',
128
+ disabled: 'color.text.disabled'
129
+ },
130
+ selected: {
123
131
  // @ts-expect-error
124
- selected: `var(--ds-text-selected, ${colors.N20})`
132
+ default: `var(--ds-text-selected, ${colors.N20})`
125
133
  }
126
134
  }
127
135
  };
package/dist/es2019/new-button/variants/shared/xcss.js CHANGED
@@ -56,21 +56,23 @@ function getColors({
56
56
  isActiveOverSelected,
57
57
  hasOverlay
58
58
  }) {
59
+ const showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
59
60
  let key = interactionState;
60
61
  // Overlay does not change color on interaction, revert to 'default' or resting state
61
62
  key = hasOverlay ? 'default' : key;
62
- key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
63
+ key = showSelectedState && isActiveOverSelected ? 'active' : key;
64
+
63
65
  // Disabled colors overrule everything else
64
66
  key = isDisabled ? 'disabled' : key;
65
67
  return {
66
68
  backgroundColor: getColor({
67
- group: colors.background[appearance],
69
+ group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
68
70
  key
69
71
  }),
70
- color: `${getColor({
71
- group: colors.color[appearance],
72
+ color: getColor({
73
+ group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
72
74
  key
73
- })}`
75
+ })
74
76
  };
75
77
  }
76
78
  export function getXCSS({
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
102
102
  action: 'clicked',
103
103
  componentName: 'button',
104
104
  packageName: "@atlaskit/button",
105
- packageVersion: "17.8.0",
105
+ packageVersion: "17.9.0",
106
106
  analyticsData: analyticsContext
107
107
  });
108
108
 
package/dist/esm/entry-points/standard-button.js CHANGED
@@ -1,6 +1 @@
1
- /**
2
- * Must import '@emotion/core' in order to resolve type error
3
- * https://product-fabric.atlassian.net/browse/DSP-3222
4
- */
5
- import '@emotion/react';
6
1
  export { default } from '../old-button/button';
package/dist/esm/new-button/variants/shared/colors.js CHANGED
@@ -15,18 +15,14 @@ var values = {
15
15
  hover: 'color.background.neutral.hovered',
16
16
  active: 'color.background.neutral.pressed',
17
17
  // @ts-expect-error
18
- disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
19
- // @ts-expect-error
20
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
18
+ disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
21
19
  },
22
20
  primary: {
23
21
  default: 'color.background.brand.bold',
24
22
  hover: 'color.background.brand.bold.hovered',
25
23
  active: 'color.background.brand.bold.pressed',
26
24
  // @ts-expect-error
27
- disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
28
- // @ts-expect-error
29
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
25
+ disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
30
26
  },
31
27
  warning: {
32
28
  default: 'color.background.warning.bold',
@@ -34,8 +30,14 @@ var values = {
34
30
  active: 'color.background.warning.bold.pressed',
35
31
  // @ts-expect-error
36
32
  disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
37
- // @ts-expect-error
38
- selected: "var(--ds-background-selected, ".concat(colors.Y400, ")")
33
+ selected: {
34
+ // @ts-expect-error
35
+ default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
36
+ // @ts-expect-error
37
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
38
+ // @ts-expect-error
39
+ active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
40
+ }
39
41
  },
40
42
  danger: {
41
43
  default: 'color.background.danger.bold',
@@ -43,27 +45,35 @@ var values = {
43
45
  active: 'color.background.danger.bold.pressed',
44
46
  // @ts-expect-error
45
47
  disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
46
- // @ts-expect-error
47
- selected: "var(--ds-background-selected, ".concat(colors.R500, ")")
48
+ selected: {
49
+ // @ts-expect-error
50
+ default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
51
+ // @ts-expect-error
52
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
53
+ // @ts-expect-error
54
+ active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
55
+ }
48
56
  },
49
57
  link: {
50
- default: 'color.background.neutral.subtle',
51
- // @ts-expect-error
52
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
58
+ default: 'color.background.neutral.subtle'
53
59
  },
54
60
  subtle: {
55
61
  default: 'color.background.neutral.subtle',
56
62
  hover: 'color.background.neutral.subtle.hovered',
57
63
  active: 'color.background.neutral.subtle.pressed',
58
64
  // @ts-expect-error
59
- disabled: "var(--ds-background-neutral-subtle, none)",
60
- // @ts-expect-error
61
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
65
+ disabled: "var(--ds-background-neutral-subtle, none)"
62
66
  },
63
67
  'subtle-link': {
64
- default: 'color.background.neutral.subtle',
68
+ default: 'color.background.neutral.subtle'
69
+ },
70
+ selected: {
71
+ // @ts-expect-error
72
+ default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
73
+ // @ts-expect-error
74
+ hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
65
75
  // @ts-expect-error
66
- selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
76
+ active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
67
77
  }
68
78
  },
69
79
  color: {
@@ -72,45 +82,41 @@ var values = {
72
82
  default: "var(--ds-text, ".concat(colors.N500, ")"),
73
83
  // @ts-expect-error
74
84
  active: "var(--ds-text, ".concat(colors.B400, ")"),
75
- disabled: 'color.text.disabled',
76
- // @ts-expect-error
77
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
85
+ disabled: 'color.text.disabled'
78
86
  },
79
87
  primary: {
80
88
  default: 'color.text.inverse',
81
- disabled: 'color.text.disabled',
82
- // @ts-expect-error
83
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
89
+ disabled: 'color.text.disabled'
84
90
  },
85
91
  warning: {
86
92
  default: 'color.text.warning.inverse',
87
93
  disabled: 'color.text.disabled',
88
- // @ts-expect-error
89
- selected: "var(--ds-text-selected, ".concat(colors.N800, ")")
94
+ selected: {
95
+ // @ts-expect-error
96
+ default: "var(--ds-text-selected, ".concat(colors.N800, ")")
97
+ }
90
98
  },
91
99
  danger: {
92
100
  default: 'color.text.inverse',
93
101
  disabled: 'color.text.disabled',
94
- // @ts-expect-error
95
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")")
102
+ selected: {
103
+ // @ts-expect-error
104
+ default: "var(--ds-text-selected, ".concat(colors.N0, ")")
105
+ }
96
106
  },
97
107
  link: {
98
108
  default: 'color.link',
99
109
  // @ts-expect-error
100
110
  hover: "var(--ds-link, ".concat(colors.B300, ")"),
101
111
  active: 'color.link.pressed',
102
- disabled: 'color.text.disabled',
103
- // @ts-expect-error
104
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
112
+ disabled: 'color.text.disabled'
105
113
  },
106
114
  subtle: {
107
115
  // @ts-expect-error
108
116
  default: "var(--ds-text, ".concat(colors.N500, ")"),
109
117
  // @ts-expect-error
110
118
  active: "var(--ds-text, ".concat(colors.B400, ")"),
111
- disabled: 'color.text.disabled',
112
- // @ts-expect-error
113
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
119
+ disabled: 'color.text.disabled'
114
120
  },
115
121
  'subtle-link': {
116
122
  // @ts-expect-error
@@ -119,9 +125,11 @@ var values = {
119
125
  hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
120
126
  // @ts-expect-error
121
127
  active: "var(--ds-text, ".concat(colors.N400, ")"),
122
- disabled: 'color.text.disabled',
128
+ disabled: 'color.text.disabled'
129
+ },
130
+ selected: {
123
131
  // @ts-expect-error
124
- selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
132
+ default: "var(--ds-text-selected, ".concat(colors.N20, ")")
125
133
  }
126
134
  }
127
135
  };
package/dist/esm/new-button/variants/shared/xcss.js CHANGED
@@ -58,21 +58,23 @@ function getColors(_ref2) {
58
58
  isHighlighted = _ref2.isHighlighted,
59
59
  isActiveOverSelected = _ref2.isActiveOverSelected,
60
60
  hasOverlay = _ref2.hasOverlay;
61
+ var showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
61
62
  var key = interactionState;
62
63
  // Overlay does not change color on interaction, revert to 'default' or resting state
63
64
  key = hasOverlay ? 'default' : key;
64
- key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
65
+ key = showSelectedState && isActiveOverSelected ? 'active' : key;
66
+
65
67
  // Disabled colors overrule everything else
66
68
  key = isDisabled ? 'disabled' : key;
67
69
  return {
68
70
  backgroundColor: getColor({
69
- group: colors.background[appearance],
71
+ group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
70
72
  key: key
71
73
  }),
72
- color: "".concat(getColor({
73
- group: colors.color[appearance],
74
+ color: getColor({
75
+ group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
74
76
  key: key
75
- }))
77
+ })
76
78
  };
77
79
  }
78
80
  export function getXCSS(_ref3) {
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
108
108
  action: 'clicked',
109
109
  componentName: 'button',
110
110
  packageName: "@atlaskit/button",
111
- packageVersion: "17.8.0",
111
+ packageVersion: "17.9.0",
112
112
  analyticsData: analyticsContext
113
113
  });
114
114
 
package/dist/types/entry-points/standard-button.d.ts CHANGED
@@ -1,7 +1,2 @@
1
- /**
2
- * Must import '@emotion/core' in order to resolve type error
3
- * https://product-fabric.atlassian.net/browse/DSP-3222
4
- */
5
- import '@emotion/react';
6
1
  export { default } from '../old-button/button';
7
2
  export type { ButtonProps } from '../old-button/button';
package/dist/types/new-button/variants/shared/colors.d.ts CHANGED
@@ -5,10 +5,12 @@ export type ColorGroup<T extends BackgroundColor | TextColor> = {
5
5
  hover?: T;
6
6
  active?: T;
7
7
  disabled?: T;
8
- selected?: T;
9
8
  };
10
- export type ColorPreset<T extends BackgroundColor | TextColor> = {
11
- [key in Appearance]: ColorGroup<T>;
9
+ export type ColorGroupWithSelected<T extends BackgroundColor | TextColor> = ColorGroup<T> & {
10
+ selected?: ColorGroup<T>;
11
+ };
12
+ export type ColorPreset<T extends BackgroundColor | TextColor> = Record<Appearance, ColorGroupWithSelected<T>> & {
13
+ selected: ColorGroup<T>;
12
14
  };
13
15
  type Values = {
14
16
  background: ColorPreset<BackgroundColor>;
package/dist/types-ts4.5/entry-points/standard-button.d.ts CHANGED
@@ -1,7 +1,2 @@
1
- /**
2
- * Must import '@emotion/core' in order to resolve type error
3
- * https://product-fabric.atlassian.net/browse/DSP-3222
4
- */
5
- import '@emotion/react';
6
1
  export { default } from '../old-button/button';
7
2
  export type { ButtonProps } from '../old-button/button';
package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts CHANGED
@@ -5,10 +5,12 @@ export type ColorGroup<T extends BackgroundColor | TextColor> = {
5
5
  hover?: T;
6
6
  active?: T;
7
7
  disabled?: T;
8
- selected?: T;
9
8
  };
10
- export type ColorPreset<T extends BackgroundColor | TextColor> = {
11
- [key in Appearance]: ColorGroup<T>;
9
+ export type ColorGroupWithSelected<T extends BackgroundColor | TextColor> = ColorGroup<T> & {
10
+ selected?: ColorGroup<T>;
11
+ };
12
+ export type ColorPreset<T extends BackgroundColor | TextColor> = Record<Appearance, ColorGroupWithSelected<T>> & {
13
+ selected: ColorGroup<T>;
12
14
  };
13
15
  type Values = {
14
16
  background: ColorPreset<BackgroundColor>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "17.8.0",
3
+ "version": "17.9.0",
4
4
  "description": "A button triggers an event or action. They let users know what will happen next.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -87,10 +87,10 @@
87
87
  "@atlaskit/focus-ring": "^1.3.0",
88
88
  "@atlaskit/icon": "^22.1.0",
89
89
  "@atlaskit/interaction-context": "^2.1.0",
90
- "@atlaskit/primitives": "^5.1.0",
90
+ "@atlaskit/primitives": "^5.5.0",
91
91
  "@atlaskit/spinner": "^16.0.0",
92
92
  "@atlaskit/theme": "^12.7.0",
93
- "@atlaskit/tokens": "^1.42.0",
93
+ "@atlaskit/tokens": "^1.43.0",
94
94
  "@atlaskit/visually-hidden": "^1.2.4",
95
95
  "@babel/runtime": "^7.0.0",
96
96
  "@emotion/react": "^11.7.1"
@@ -102,7 +102,7 @@
102
102
  "@af/accessibility-testing": "*",
103
103
  "@af/integration-testing": "*",
104
104
  "@af/visual-regression": "*",
105
- "@atlaskit/app-provider": "^1.0.0",
105
+ "@atlaskit/app-provider": "^1.2.0",
106
106
  "@atlaskit/ssr": "*",
107
107
  "@atlaskit/visual-regression": "*",
108
108
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",