@atlaskit/button 23.2.7 → 23.3.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 (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +2 -1
  3. package/dist/cjs/new-button/containers/split-button/split-button.js +3 -2
  4. package/dist/cjs/new-button/variants/shared/button-base.compiled.css +4 -1
  5. package/dist/cjs/new-button/variants/shared/button-base.js +7 -4
  6. package/dist/cjs/old-button/shared/button-base.js +1 -1
  7. package/dist/cjs/old-button/shared/css.js +10 -1
  8. package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +2 -1
  9. package/dist/es2019/new-button/containers/split-button/split-button.js +3 -2
  10. package/dist/es2019/new-button/variants/shared/button-base.compiled.css +4 -1
  11. package/dist/es2019/new-button/variants/shared/button-base.js +7 -4
  12. package/dist/es2019/old-button/shared/button-base.js +1 -1
  13. package/dist/es2019/old-button/shared/css.js +10 -1
  14. package/dist/esm/new-button/containers/split-button/split-button.compiled.css +2 -1
  15. package/dist/esm/new-button/containers/split-button/split-button.js +3 -2
  16. package/dist/esm/new-button/variants/shared/button-base.compiled.css +4 -1
  17. package/dist/esm/new-button/variants/shared/button-base.js +7 -4
  18. package/dist/esm/old-button/shared/button-base.js +1 -1
  19. package/dist/esm/old-button/shared/css.js +10 -1
  20. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 23.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#191380](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191380)
8
+ [`c65ad6bb7b13a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c65ad6bb7b13a) -
9
+ Updates the visual appearance of disabled buttons with `default` and `subtle` appearances. This
10
+ change only affects buttons behind a feature flag for Atlassian's new design language, and will be
11
+ made available in a later release.
12
+
13
+ ## 23.2.8
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 23.2.7
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/new-button/containers/split-button/split-button.compiled.css CHANGED
@@ -2,7 +2,8 @@
2
2
  ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
3
3
  ._195g1h5n{margin-inline:-.03125rem}
4
4
  ._195g1n1a{margin-inline:-1px}
5
- ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
5
+ ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12ji13gt{outline-color:var(--ds-border-disabled,#091e420f)}
6
+ ._12jimuej{outline-color:var(--ds-border,#091e4224)}
6
7
  ._12y3t94y{outline-width:1px}
7
8
  ._1bsbe4h9{width:var(--ds-border-width,1px)}
8
9
  ._1cwg1n1a{outline-offset:-1px}
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -58,7 +58,8 @@ var buttonStyles = {
58
58
  splitButton: "_1e0c116y _kqswh2mm _4cvr1h6o _o5721q9c",
59
59
  primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
60
60
  secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
61
- defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y"
61
+ defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y",
62
+ defaultAppearanceDisabledContainer: "_12ji13gt"
62
63
  };
63
64
 
64
65
  /**
@@ -70,7 +71,7 @@ var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonCo
70
71
  _ref2$isDisabled = _ref2.isDisabled,
71
72
  isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
72
73
  return /*#__PURE__*/React.createElement("div", {
73
- className: (0, _runtime.ax)([appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, buttonStyles.splitButton])
74
+ className: (0, _runtime.ax)([appearance === 'default' && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
74
75
  }, children);
75
76
  };
76
77
 
package/dist/cjs/new-button/variants/shared/button-base.compiled.css CHANGED
@@ -10,6 +10,7 @@
10
10
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
11
11
  ._1tv3nqa1:after{border-style:solid}
12
12
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
13
+ ._8l3m13gt:after{border-color:var(--ds-border-disabled,#091e420f)}
13
14
  ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
14
15
  ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
15
16
  ._11fnglyw:after{pointer-events:none}
@@ -35,11 +36,11 @@
35
36
  ._80om13gf{cursor:not-allowed}
36
37
  ._80om15jw{cursor:progress}
37
38
  ._aetrb3bt:after{content:""}
38
- ._aetrglyw:after{content:none}
39
39
  ._ajmmnqa1{text-decoration-style:solid}
40
40
  ._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
41
41
  ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
42
42
  ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
43
+ ._bfhk1j28{background-color:transparent}
43
44
  ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
44
45
  ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
45
46
  ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
@@ -103,6 +104,7 @@
103
104
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
104
105
  ._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
105
106
  ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
107
+ ._irr31j28:hover{background-color:transparent}
106
108
  ._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
107
109
  ._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
108
110
  ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
@@ -118,6 +120,7 @@
118
120
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
119
121
  ._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
120
122
  ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
123
+ ._1di61j28:active{background-color:transparent}
121
124
  ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
122
125
  ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
123
126
  ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
package/dist/cjs/new-button/variants/shared/button-base.js CHANGED
@@ -29,7 +29,8 @@ var LOADING_LABEL = ', Loading';
29
29
  var styles = {
30
30
  base: "_2rkosqtm _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
31
31
  linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
32
- disabled: "_80om13gf _bfhk1fvb _syaz1lh4 _aetrglyw _irr31fvb _30l31lh4 _1di61fvb _9h8h1lh4",
32
+ disabled: "_80om13gf _syaz1lh4 _30l31lh4 _9h8h1lh4",
33
+ sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
33
34
  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
34
35
  circle: "_2rko14q2",
35
36
  fullWidth: "_1bsb1osq",
@@ -46,7 +47,8 @@ var defaultStyles = {
46
47
  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
47
48
  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
48
49
  interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
49
- interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq"
50
+ interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq",
51
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
50
52
  };
51
53
  var primaryStyles = {
52
54
  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
@@ -68,7 +70,8 @@ var subtleStyles = {
68
70
  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
69
71
  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
70
72
  interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
71
- interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
73
+ interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq",
74
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
72
75
  };
73
76
  var selectedStyles = {
74
77
  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
@@ -175,7 +178,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
175
178
  // TODO: remove me once we kill color fallbacks
176
179
  isSelected && appearance === 'warning' && selectedStyles.warning,
177
180
  // TODO: remove me once we kill color fallbacks
178
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
181
+ isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && (!(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') || appearance !== 'default' && appearance !== 'subtle') && styles.sharedDisabled, isDisabled && appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.disabledRefreshed : defaultStyles.disabled), isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
179
182
  isDisabled: isEffectivelyDisabled,
180
183
  "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
181
184
  "aria-labelledby": isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy,
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -132,7 +132,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
132
132
  action: 'clicked',
133
133
  componentName: 'button',
134
134
  packageName: "@atlaskit/button",
135
- packageVersion: "23.2.6",
135
+ packageVersion: "23.2.8",
136
136
  analyticsData: analyticsContext
137
137
  });
138
138
 
package/dist/cjs/old-button/shared/css.js CHANGED
@@ -74,7 +74,7 @@ var defaultAfterStyles = {
74
74
  var defaultStyles = {
75
75
  background: "var(--ds-background-neutral-subtle, #00000000)",
76
76
  color: "var(--ds-text, #172B4D)",
77
- '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
77
+ '&::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
78
78
  content: '""',
79
79
  borderColor: "var(--ds-border, #091E4224)"
80
80
  }),
@@ -86,6 +86,15 @@ var defaultStyles = {
86
86
  },
87
87
  '&[data-has-overlay="true"]:not([disabled]):hover': {
88
88
  background: "var(--ds-background-neutral-subtle, #00000000)"
89
+ },
90
+ '&:disabled[disabled]': {
91
+ background: "var(--ds-background-neutral-subtle, #00000000)"
92
+ },
93
+ '&:disabled[disabled]:hover': {
94
+ background: "var(--ds-background-neutral-subtle, #00000000)"
95
+ },
96
+ '&:disabled[disabled]:active': {
97
+ background: "var(--ds-background-neutral-subtle, #00000000)"
89
98
  }
90
99
  };
91
100
  var primaryStyles = {
package/dist/es2019/new-button/containers/split-button/split-button.compiled.css CHANGED
@@ -2,7 +2,8 @@
2
2
  ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
3
3
  ._195g1h5n{margin-inline:-.03125rem}
4
4
  ._195g1n1a{margin-inline:-1px}
5
- ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
5
+ ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12ji13gt{outline-color:var(--ds-border-disabled,#091e420f)}
6
+ ._12jimuej{outline-color:var(--ds-border,#091e4224)}
6
7
  ._12y3t94y{outline-width:1px}
7
8
  ._1bsbe4h9{width:var(--ds-border-width,1px)}
8
9
  ._1cwg1n1a{outline-offset:-1px}
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -50,7 +50,8 @@ const buttonStyles = {
50
50
  splitButton: "_1e0c116y _kqswh2mm _4cvr1h6o _o5721q9c",
51
51
  primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
52
52
  secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
53
- defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y"
53
+ defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y",
54
+ defaultAppearanceDisabledContainer: "_12ji13gt"
54
55
  };
55
56
 
56
57
  /**
@@ -62,7 +63,7 @@ export const SplitButtonContainer = ({
62
63
  isDisabled = false
63
64
  }) => {
64
65
  return /*#__PURE__*/React.createElement("div", {
65
- className: ax([appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, buttonStyles.splitButton])
66
+ className: ax([appearance === 'default' && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
66
67
  }, children);
67
68
  };
68
69
 
package/dist/es2019/new-button/variants/shared/button-base.compiled.css CHANGED
@@ -10,6 +10,7 @@
10
10
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
11
11
  ._1tv3nqa1:after{border-style:solid}
12
12
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
13
+ ._8l3m13gt:after{border-color:var(--ds-border-disabled,#091e420f)}
13
14
  ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
14
15
  ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
15
16
  ._11fnglyw:after{pointer-events:none}
@@ -35,11 +36,11 @@
35
36
  ._80om13gf{cursor:not-allowed}
36
37
  ._80om15jw{cursor:progress}
37
38
  ._aetrb3bt:after{content:""}
38
- ._aetrglyw:after{content:none}
39
39
  ._ajmmnqa1{text-decoration-style:solid}
40
40
  ._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
41
41
  ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
42
42
  ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
43
+ ._bfhk1j28{background-color:transparent}
43
44
  ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
44
45
  ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
45
46
  ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
@@ -103,6 +104,7 @@
103
104
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
104
105
  ._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
105
106
  ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
107
+ ._irr31j28:hover{background-color:transparent}
106
108
  ._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
107
109
  ._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
108
110
  ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
@@ -118,6 +120,7 @@
118
120
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
119
121
  ._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
120
122
  ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
123
+ ._1di61j28:active{background-color:transparent}
121
124
  ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
122
125
  ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
123
126
  ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
package/dist/es2019/new-button/variants/shared/button-base.js CHANGED
@@ -17,7 +17,8 @@ const LOADING_LABEL = ', Loading';
17
17
  const styles = {
18
18
  base: "_2rkosqtm _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
19
19
  linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
20
- disabled: "_80om13gf _bfhk1fvb _syaz1lh4 _aetrglyw _irr31fvb _30l31lh4 _1di61fvb _9h8h1lh4",
20
+ disabled: "_80om13gf _syaz1lh4 _30l31lh4 _9h8h1lh4",
21
+ sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
21
22
  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
22
23
  circle: "_2rko14q2",
23
24
  fullWidth: "_1bsb1osq",
@@ -34,7 +35,8 @@ const defaultStyles = {
34
35
  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
35
36
  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
36
37
  interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
37
- interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq"
38
+ interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq",
39
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
38
40
  };
39
41
  const primaryStyles = {
40
42
  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
@@ -56,7 +58,8 @@ const subtleStyles = {
56
58
  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
57
59
  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
58
60
  interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
59
- interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
61
+ interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq",
62
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
60
63
  };
61
64
  const selectedStyles = {
62
65
  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
@@ -156,7 +159,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(({
156
159
  // TODO: remove me once we kill color fallbacks
157
160
  isSelected && appearance === 'warning' && selectedStyles.warning,
158
161
  // TODO: remove me once we kill color fallbacks
159
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
162
+ isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && (!fg('platform-component-visual-refresh') || appearance !== 'default' && appearance !== 'subtle') && styles.sharedDisabled, isDisabled && appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.disabledRefreshed : defaultStyles.disabled), isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
160
163
  isDisabled: isEffectivelyDisabled,
161
164
  "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
162
165
  "aria-labelledby": isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
119
119
  action: 'clicked',
120
120
  componentName: 'button',
121
121
  packageName: "@atlaskit/button",
122
- packageVersion: "23.2.6",
122
+ packageVersion: "23.2.8",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
package/dist/es2019/old-button/shared/css.js CHANGED
@@ -63,7 +63,7 @@ const defaultAfterStyles = {
63
63
  const defaultStyles = {
64
64
  background: "var(--ds-background-neutral-subtle, #00000000)",
65
65
  color: "var(--ds-text, #172B4D)",
66
- '&:not([disabled])::after': {
66
+ '&::after': {
67
67
  ...defaultAfterStyles,
68
68
  content: '""',
69
69
  borderColor: "var(--ds-border, #091E4224)"
@@ -76,6 +76,15 @@ const defaultStyles = {
76
76
  },
77
77
  '&[data-has-overlay="true"]:not([disabled]):hover': {
78
78
  background: "var(--ds-background-neutral-subtle, #00000000)"
79
+ },
80
+ '&:disabled[disabled]': {
81
+ background: "var(--ds-background-neutral-subtle, #00000000)"
82
+ },
83
+ '&:disabled[disabled]:hover': {
84
+ background: "var(--ds-background-neutral-subtle, #00000000)"
85
+ },
86
+ '&:disabled[disabled]:active': {
87
+ background: "var(--ds-background-neutral-subtle, #00000000)"
79
88
  }
80
89
  };
81
90
  const primaryStyles = {
package/dist/esm/new-button/containers/split-button/split-button.compiled.css CHANGED
@@ -2,7 +2,8 @@
2
2
  ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
3
3
  ._195g1h5n{margin-inline:-.03125rem}
4
4
  ._195g1n1a{margin-inline:-1px}
5
- ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
5
+ ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12ji13gt{outline-color:var(--ds-border-disabled,#091e420f)}
6
+ ._12jimuej{outline-color:var(--ds-border,#091e4224)}
6
7
  ._12y3t94y{outline-width:1px}
7
8
  ._1bsbe4h9{width:var(--ds-border-width,1px)}
8
9
  ._1cwg1n1a{outline-offset:-1px}
package/dist/esm/new-button/containers/split-button/split-button.js CHANGED
@@ -50,7 +50,8 @@ var buttonStyles = {
50
50
  splitButton: "_1e0c116y _kqswh2mm _4cvr1h6o _o5721q9c",
51
51
  primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
52
52
  secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
53
- defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y"
53
+ defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y",
54
+ defaultAppearanceDisabledContainer: "_12ji13gt"
54
55
  };
55
56
 
56
57
  /**
@@ -62,7 +63,7 @@ export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
62
63
  _ref2$isDisabled = _ref2.isDisabled,
63
64
  isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
64
65
  return /*#__PURE__*/React.createElement("div", {
65
- className: ax([appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, buttonStyles.splitButton])
66
+ className: ax([appearance === 'default' && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
66
67
  }, children);
67
68
  };
68
69
 
package/dist/esm/new-button/variants/shared/button-base.compiled.css CHANGED
@@ -10,6 +10,7 @@
10
10
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
11
11
  ._1tv3nqa1:after{border-style:solid}
12
12
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
13
+ ._8l3m13gt:after{border-color:var(--ds-border-disabled,#091e420f)}
13
14
  ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
14
15
  ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
15
16
  ._11fnglyw:after{pointer-events:none}
@@ -35,11 +36,11 @@
35
36
  ._80om13gf{cursor:not-allowed}
36
37
  ._80om15jw{cursor:progress}
37
38
  ._aetrb3bt:after{content:""}
38
- ._aetrglyw:after{content:none}
39
39
  ._ajmmnqa1{text-decoration-style:solid}
40
40
  ._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
41
41
  ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
42
42
  ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
43
+ ._bfhk1j28{background-color:transparent}
43
44
  ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
44
45
  ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
45
46
  ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
@@ -103,6 +104,7 @@
103
104
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
104
105
  ._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
105
106
  ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
107
+ ._irr31j28:hover{background-color:transparent}
106
108
  ._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
107
109
  ._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
108
110
  ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
@@ -118,6 +120,7 @@
118
120
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
119
121
  ._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
120
122
  ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
123
+ ._1di61j28:active{background-color:transparent}
121
124
  ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
122
125
  ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
123
126
  ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
package/dist/esm/new-button/variants/shared/button-base.js CHANGED
@@ -20,7 +20,8 @@ var LOADING_LABEL = ', Loading';
20
20
  var styles = {
21
21
  base: "_2rkosqtm _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
22
22
  linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
23
- disabled: "_80om13gf _bfhk1fvb _syaz1lh4 _aetrglyw _irr31fvb _30l31lh4 _1di61fvb _9h8h1lh4",
23
+ disabled: "_80om13gf _syaz1lh4 _30l31lh4 _9h8h1lh4",
24
+ sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
24
25
  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
25
26
  circle: "_2rko14q2",
26
27
  fullWidth: "_1bsb1osq",
@@ -37,7 +38,8 @@ var defaultStyles = {
37
38
  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
38
39
  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
39
40
  interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
40
- interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq"
41
+ interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq",
42
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
41
43
  };
42
44
  var primaryStyles = {
43
45
  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
@@ -59,7 +61,8 @@ var subtleStyles = {
59
61
  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
60
62
  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
61
63
  interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
62
- interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
64
+ interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq",
65
+ disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
63
66
  };
64
67
  var selectedStyles = {
65
68
  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
@@ -166,7 +169,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
166
169
  // TODO: remove me once we kill color fallbacks
167
170
  isSelected && appearance === 'warning' && selectedStyles.warning,
168
171
  // TODO: remove me once we kill color fallbacks
169
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
172
+ isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && (!fg('platform-component-visual-refresh') || appearance !== 'default' && appearance !== 'subtle') && styles.sharedDisabled, isDisabled && appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.disabledRefreshed : defaultStyles.disabled), isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
170
173
  isDisabled: isEffectivelyDisabled,
171
174
  "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
172
175
  "aria-labelledby": isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy,
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
125
125
  action: 'clicked',
126
126
  componentName: 'button',
127
127
  packageName: "@atlaskit/button",
128
- packageVersion: "23.2.6",
128
+ packageVersion: "23.2.8",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
package/dist/esm/old-button/shared/css.js CHANGED
@@ -66,7 +66,7 @@ var defaultAfterStyles = {
66
66
  var defaultStyles = {
67
67
  background: "var(--ds-background-neutral-subtle, #00000000)",
68
68
  color: "var(--ds-text, #172B4D)",
69
- '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
69
+ '&::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
70
70
  content: '""',
71
71
  borderColor: "var(--ds-border, #091E4224)"
72
72
  }),
@@ -78,6 +78,15 @@ var defaultStyles = {
78
78
  },
79
79
  '&[data-has-overlay="true"]:not([disabled]):hover': {
80
80
  background: "var(--ds-background-neutral-subtle, #00000000)"
81
+ },
82
+ '&:disabled[disabled]': {
83
+ background: "var(--ds-background-neutral-subtle, #00000000)"
84
+ },
85
+ '&:disabled[disabled]:hover': {
86
+ background: "var(--ds-background-neutral-subtle, #00000000)"
87
+ },
88
+ '&:disabled[disabled]:active': {
89
+ background: "var(--ds-background-neutral-subtle, #00000000)"
81
90
  }
82
91
  };
83
92
  var primaryStyles = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "23.2.7",
3
+ "version": "23.3.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/"
@@ -85,9 +85,9 @@
85
85
  "dependencies": {
86
86
  "@atlaskit/analytics-next": "^11.1.0",
87
87
  "@atlaskit/css": "^0.12.0",
88
- "@atlaskit/ds-lib": "^4.1.0",
88
+ "@atlaskit/ds-lib": "^5.0.0",
89
89
  "@atlaskit/focus-ring": "^3.0.0",
90
- "@atlaskit/icon": "^27.5.0",
90
+ "@atlaskit/icon": "^27.7.0",
91
91
  "@atlaskit/interaction-context": "^3.0.0",
92
92
  "@atlaskit/platform-feature-flags": "^1.1.0",
93
93
  "@atlaskit/primitives": "^14.10.0",
@@ -107,16 +107,16 @@
107
107
  "@af/accessibility-testing": "workspace:^",
108
108
  "@af/integration-testing": "workspace:^",
109
109
  "@af/visual-regression": "workspace:^",
110
- "@atlaskit/app-provider": "^2.2.0",
110
+ "@atlaskit/app-provider": "^2.3.0",
111
111
  "@atlaskit/checkbox": "^17.1.0",
112
112
  "@atlaskit/docs": "^11.0.0",
113
- "@atlaskit/dropdown-menu": "^16.2.0",
113
+ "@atlaskit/dropdown-menu": "^16.3.0",
114
114
  "@atlaskit/form": "^12.0.0",
115
115
  "@atlaskit/heading": "^5.2.0",
116
116
  "@atlaskit/link": "^3.2.0",
117
- "@atlaskit/logo": "^19.5.0",
117
+ "@atlaskit/logo": "^19.6.0",
118
118
  "@atlaskit/modal-dialog": "^14.3.0",
119
- "@atlaskit/section-message": "^8.2.0",
119
+ "@atlaskit/section-message": "^8.4.0",
120
120
  "@atlaskit/select": "^21.2.0",
121
121
  "@atlaskit/ssr": "workspace:^",
122
122
  "@atlaskit/toggle": "^15.0.0",