@atlaskit/button 20.0.0 → 20.1.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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/old-button/shared/button-base.js +1 -1
  3. package/dist/cjs/old-button/shared/css.js +17 -7
  4. package/dist/es2019/old-button/shared/button-base.js +1 -1
  5. package/dist/es2019/old-button/shared/css.js +16 -5
  6. package/dist/esm/old-button/shared/button-base.js +1 -1
  7. package/dist/esm/old-button/shared/css.js +17 -7
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 20.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#131274](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131274)
8
+ [`1a59a1dc3f2f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a59a1dc3f2f2) -
9
+ Correct hover states for old loading button
10
+
3
11
  ## 20.0.0
4
12
 
5
13
  ### Major Changes
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
133
133
  action: 'clicked',
134
134
  componentName: 'button',
135
135
  packageName: "@atlaskit/button",
136
- packageVersion: "20.0.0",
136
+ packageVersion: "20.1.0",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
package/dist/cjs/old-button/shared/css.js CHANGED
@@ -83,6 +83,9 @@ var defaultStyles = {
83
83
  },
84
84
  '&:active': {
85
85
  background: "var(--ds-background-neutral-pressed, #091E424F)"
86
+ },
87
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
88
+ background: "var(--ds-background-neutral-subtle, #00000000)"
86
89
  }
87
90
  };
88
91
  var primaryStyles = {
@@ -93,6 +96,9 @@ var primaryStyles = {
93
96
  },
94
97
  '&:active': {
95
98
  background: "var(--ds-background-brand-bold-pressed, #09326C)"
99
+ },
100
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
101
+ background: "var(--ds-background-brand-bold, #0C66E4)"
96
102
  }
97
103
  };
98
104
  var linkStyles = {
@@ -115,6 +121,9 @@ var subtleStyles = {
115
121
  },
116
122
  '&:active': {
117
123
  background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
124
+ },
125
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
126
+ background: 'transparent'
118
127
  }
119
128
  };
120
129
  var subtleLinkStyles = {
@@ -139,6 +148,9 @@ var warningStyles = {
139
148
  },
140
149
  '&:active': {
141
150
  background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
151
+ },
152
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
153
+ background: "var(--ds-background-warning-bold, #F5CD47)"
142
154
  }
143
155
  };
144
156
  var dangerStyles = {
@@ -149,6 +161,9 @@ var dangerStyles = {
149
161
  },
150
162
  '&:active': {
151
163
  background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
164
+ },
165
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
166
+ background: "var(--ds-background-danger-bold, #C9372C)"
152
167
  }
153
168
  };
154
169
  var selectedStyles = {
@@ -280,7 +295,7 @@ function getCss(_ref3) {
280
295
  key: isSelected ? 'selected' : 'default',
281
296
  mode: mode
282
297
  }))
283
- })), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
298
+ })), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
284
299
  '&[disabled]': {
285
300
  color: "var(--ds-text-disabled, #091E424F)",
286
301
  backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
@@ -293,12 +308,7 @@ function getCss(_ref3) {
293
308
  backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
294
309
  }
295
310
  }
296
- }, hasOverlayStyles), {}, {
297
- // disabling hover and active color changes when there is an overlay, but the button is not disabled
298
- '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
299
- background: 'inherit'
300
- }
301
- }))), {}, {
311
+ }, hasOverlayStyles))), {}, {
302
312
  '&::-moz-focus-inner': {
303
313
  border: 0,
304
314
  margin: 0,
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: "20.0.0",
122
+ packageVersion: "20.1.0",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
package/dist/es2019/old-button/shared/css.js CHANGED
@@ -73,6 +73,9 @@ const defaultStyles = {
73
73
  },
74
74
  '&:active': {
75
75
  background: "var(--ds-background-neutral-pressed, #091E424F)"
76
+ },
77
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
78
+ background: "var(--ds-background-neutral-subtle, #00000000)"
76
79
  }
77
80
  };
78
81
  const primaryStyles = {
@@ -83,6 +86,9 @@ const primaryStyles = {
83
86
  },
84
87
  '&:active': {
85
88
  background: "var(--ds-background-brand-bold-pressed, #09326C)"
89
+ },
90
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
91
+ background: "var(--ds-background-brand-bold, #0C66E4)"
86
92
  }
87
93
  };
88
94
  const linkStyles = {
@@ -105,6 +111,9 @@ const subtleStyles = {
105
111
  },
106
112
  '&:active': {
107
113
  background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
114
+ },
115
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
116
+ background: 'transparent'
108
117
  }
109
118
  };
110
119
  const subtleLinkStyles = {
@@ -129,6 +138,9 @@ const warningStyles = {
129
138
  },
130
139
  '&:active': {
131
140
  background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
141
+ },
142
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
143
+ background: "var(--ds-background-warning-bold, #F5CD47)"
132
144
  }
133
145
  };
134
146
  const dangerStyles = {
@@ -139,6 +151,9 @@ const dangerStyles = {
139
151
  },
140
152
  '&:active': {
141
153
  background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
154
+ },
155
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
156
+ background: "var(--ds-background-danger-bold, #C9372C)"
142
157
  }
143
158
  };
144
159
  const selectedStyles = {
@@ -309,11 +324,7 @@ export function getCss({
309
324
  backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
310
325
  }
311
326
  },
312
- ...hasOverlayStyles,
313
- // disabling hover and active color changes when there is an overlay, but the button is not disabled
314
- '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
315
- background: 'inherit'
316
- }
327
+ ...hasOverlayStyles
317
328
  })),
318
329
  '&::-moz-focus-inner': {
319
330
  border: 0,
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: "20.0.0",
128
+ packageVersion: "20.1.0",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
package/dist/esm/old-button/shared/css.js CHANGED
@@ -75,6 +75,9 @@ var defaultStyles = {
75
75
  },
76
76
  '&:active': {
77
77
  background: "var(--ds-background-neutral-pressed, #091E424F)"
78
+ },
79
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
80
+ background: "var(--ds-background-neutral-subtle, #00000000)"
78
81
  }
79
82
  };
80
83
  var primaryStyles = {
@@ -85,6 +88,9 @@ var primaryStyles = {
85
88
  },
86
89
  '&:active': {
87
90
  background: "var(--ds-background-brand-bold-pressed, #09326C)"
91
+ },
92
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
93
+ background: "var(--ds-background-brand-bold, #0C66E4)"
88
94
  }
89
95
  };
90
96
  var linkStyles = {
@@ -107,6 +113,9 @@ var subtleStyles = {
107
113
  },
108
114
  '&:active': {
109
115
  background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
116
+ },
117
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
118
+ background: 'transparent'
110
119
  }
111
120
  };
112
121
  var subtleLinkStyles = {
@@ -131,6 +140,9 @@ var warningStyles = {
131
140
  },
132
141
  '&:active': {
133
142
  background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
143
+ },
144
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
145
+ background: "var(--ds-background-warning-bold, #F5CD47)"
134
146
  }
135
147
  };
136
148
  var dangerStyles = {
@@ -141,6 +153,9 @@ var dangerStyles = {
141
153
  },
142
154
  '&:active': {
143
155
  background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
156
+ },
157
+ '&[data-has-overlay="true"]:not([disabled]):hover': {
158
+ background: "var(--ds-background-danger-bold, #C9372C)"
144
159
  }
145
160
  };
146
161
  var selectedStyles = {
@@ -272,7 +287,7 @@ export function getCss(_ref3) {
272
287
  key: isSelected ? 'selected' : 'default',
273
288
  mode: mode
274
289
  }))
275
- })), fg('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
290
+ })), fg('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
276
291
  '&[disabled]': {
277
292
  color: "var(--ds-text-disabled, #091E424F)",
278
293
  backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
@@ -285,12 +300,7 @@ export function getCss(_ref3) {
285
300
  backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
286
301
  }
287
302
  }
288
- }, hasOverlayStyles), {}, {
289
- // disabling hover and active color changes when there is an overlay, but the button is not disabled
290
- '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
291
- background: 'inherit'
292
- }
293
- }))), {}, {
303
+ }, hasOverlayStyles))), {}, {
294
304
  '&::-moz-focus-inner': {
295
305
  border: 0,
296
306
  margin: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "20.0.0",
3
+ "version": "20.1.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,7 +87,7 @@
87
87
  },
88
88
  "dependencies": {
89
89
  "@atlaskit/analytics-next": "^10.1.0",
90
- "@atlaskit/ds-lib": "^2.4.0",
90
+ "@atlaskit/ds-lib": "^2.5.0",
91
91
  "@atlaskit/focus-ring": "^1.6.0",
92
92
  "@atlaskit/icon": "^22.13.0",
93
93
  "@atlaskit/interaction-context": "^2.1.0",