@atlaskit/button 18.1.0 → 18.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 (16) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.js +33 -15
  3. package/dist/cjs/new-button/variants/shared/use-button-base.js +9 -3
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/cjs/old-button/shared/css.js +130 -12
  6. package/dist/es2019/new-button/containers/split-button/split-button.js +33 -16
  7. package/dist/es2019/new-button/variants/shared/use-button-base.js +10 -4
  8. package/dist/es2019/old-button/shared/button-base.js +1 -1
  9. package/dist/es2019/old-button/shared/css.js +193 -61
  10. package/dist/esm/new-button/containers/split-button/split-button.js +34 -16
  11. package/dist/esm/new-button/variants/shared/use-button-base.js +10 -4
  12. package/dist/esm/old-button/shared/button-base.js +1 -1
  13. package/dist/esm/old-button/shared/css.js +130 -12
  14. package/dist/types/new-button/containers/split-button/split-button.d.ts +9 -3
  15. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +9 -3
  16. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 18.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#118362](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118362)
8
+ [`743ff30e960c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/743ff30e960c1) -
9
+ Remove unused prop `isSelected` from Split button.
10
+
11
+ ## 18.2.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#117552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117552)
16
+ [`89ed46b28e349`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89ed46b28e349) -
17
+ [ux] Updates the old-button component behind a feature flag with new visual changes as per the
18
+ JIRA visual refresh project.
19
+
20
+ ### Patch Changes
21
+
22
+ - [#117552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117552)
23
+ [`6eabeed917202`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6eabeed917202) -
24
+ Fix dividers being under selected button when the new visual appearance feature gate is enabled.
25
+
3
26
  ## 18.1.0
4
27
 
5
28
  ### Minor Changes
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -21,10 +21,12 @@ var heights = {
21
21
  none: 'auto'
22
22
  };
23
23
  var baseDividerStyles = (0, _react.css)({
24
- display: 'inline-flex',
25
24
  width: "var(--ds-border-width, 1px)",
26
25
  position: 'relative',
27
- zIndex: 2
26
+ // This is 1 so it appears above buttons by default.
27
+ // When buttons are selected they have a zIndex of 2 applied.
28
+ // See use-button-base.tsx.
29
+ zIndex: 1
28
30
  });
29
31
  var defaultDividerStyles = (0, _react.css)({
30
32
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -36,13 +38,12 @@ var compactDividerStyles = (0, _react.css)({
36
38
  });
37
39
  var dividerDisabledStyles = (0, _react.css)({
38
40
  backgroundColor: "var(--ds-text-disabled, #091E4224)",
39
- cursor: 'not-allowed'
41
+ cursor: 'not-allowed',
42
+ opacity: 0.51
40
43
  });
41
- var navigationDividerStyles = (0, _react.css)({
42
- height: '16px',
43
- margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
44
- backgroundColor: "var(--ds-text-subtle, #0052cc)",
45
- opacity: 0.62
44
+ var dividerDisabledRefreshedStyles = (0, _react.css)({
45
+ backgroundColor: "var(--ds-border-disabled, #091E4224)",
46
+ cursor: 'not-allowed'
46
47
  });
47
48
  var dividerAppearance = {
48
49
  default: (0, _react.css)({
@@ -53,7 +54,12 @@ var dividerAppearance = {
53
54
  backgroundColor: "var(--ds-text-inverse, #FFF)",
54
55
  opacity: 0.64
55
56
  }),
56
- navigation: navigationDividerStyles
57
+ navigation: (0, _react.css)({
58
+ height: '16px',
59
+ margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
60
+ backgroundColor: "var(--ds-text-subtle, #0052cc)",
61
+ opacity: 0.62
62
+ })
57
63
  };
58
64
  var dividerRefreshedOffsetStyles = (0, _react.css)({
59
65
  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
@@ -73,7 +79,7 @@ var Divider = exports.Divider = function Divider(_ref) {
73
79
  return (
74
80
  // I find it funny to provide a div for Divider
75
81
  (0, _react.jsx)("div", {
76
- css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
82
+ css: [baseDividerStyles, dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
77
83
  })
78
84
  );
79
85
  };
@@ -110,9 +116,11 @@ var defaultAppearanceContainerStyles = (0, _react.css)({
110
116
  */
111
117
  var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
112
118
  var appearance = _ref2.appearance,
113
- children = _ref2.children;
119
+ children = _ref2.children,
120
+ _ref2$isDisabled = _ref2.isDisabled,
121
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
114
122
  return (0, _react.jsx)("div", {
115
- css: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
123
+ css: [appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && defaultAppearanceContainerStyles, splitButtonStyles]
116
124
  }, children);
117
125
  };
118
126
 
@@ -137,7 +145,8 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
137
145
  PrimaryAction = _getActions.PrimaryAction,
138
146
  SecondaryAction = _getActions.SecondaryAction;
139
147
  return (0, _react.jsx)(SplitButtonContainer, {
140
- appearance: appearance
148
+ appearance: appearance,
149
+ isDisabled: isDisabled
141
150
  }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
142
151
  value: {
143
152
  appearance: appearance,
@@ -154,8 +163,16 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
154
163
  css: secondaryButtonStyles
155
164
  }, SecondaryAction)));
156
165
  };
166
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
167
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
157
168
  /**
158
- * TODO: Decide on API
169
+ * __Split button with slots__
170
+ *
171
+ * A split button with slots {description}.
172
+ *
173
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
174
+ * - [Code](https://atlassian.design/components/{packageName}/code)
175
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
159
176
  */
160
177
  var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
161
178
  var primaryAction = _ref4.primaryAction,
@@ -167,7 +184,8 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
167
184
  _ref4$isDisabled = _ref4.isDisabled,
168
185
  isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
169
186
  return (0, _react.jsx)(SplitButtonContainer, {
170
- appearance: appearance
187
+ appearance: appearance,
188
+ isDisabled: isDisabled
171
189
  }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
172
190
  value: {
173
191
  appearance: appearance,
package/dist/cjs/new-button/variants/shared/use-button-base.js CHANGED
@@ -339,6 +339,12 @@ var selectedRefreshedStyles = (0, _primitives.xcss)({
339
339
  color: 'color.text.selected'
340
340
  }
341
341
  });
342
+ var selectedInsideSplitButtonStyles = (0, _primitives.xcss)({
343
+ // This is 2 so it appears above the split button divider when selected.
344
+ // See split-button.tsx.
345
+ // @ts-expect-error — We need a local zindex just for button.
346
+ zIndex: 2
347
+ });
342
348
  var selectedInteractiveStyles = (0, _primitives.xcss)({
343
349
  ':hover': {
344
350
  // @ts-expect-error
@@ -553,7 +559,7 @@ var useButtonBase = function useButtonBase(_ref) {
553
559
  var isSplitButton = Boolean(splitButtonContext);
554
560
  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
555
561
  var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
556
- var appearance = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
562
+ var appearance = isDefaultAppearanceSplitButton && (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
557
563
  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
558
564
  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
559
565
  var isInteractive = !isDisabled && !isLoading;
@@ -563,13 +569,13 @@ var useButtonBase = function useButtonBase(_ref) {
563
569
  (0, _useAutoFocus.default)(localRef, autoFocus);
564
570
  return _objectSpread({
565
571
  ref: (0, _mergeRefs.default)([localRef, ref]),
566
- xcss: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
572
+ xcss: [(0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
567
573
  // TODO: remove me once we kill color fallbacks
568
574
  isSelected && appearance === 'danger' && selectedDangerStyles,
569
575
  // TODO: remove me once we kill color fallbacks
570
576
  isSelected && appearance === 'warning' && selectedWarningStyles,
571
577
  // TODO: remove me once we kill color fallbacks
572
- isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
578
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
573
579
  isDisabled: isEffectivelyDisabled,
574
580
  children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, isLoading ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
575
581
  as: "span",
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -133,7 +133,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
133
133
  action: 'clicked',
134
134
  componentName: 'button',
135
135
  packageName: "@atlaskit/button",
136
- packageVersion: "18.1.0",
136
+ packageVersion: "18.3.0",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
package/dist/cjs/old-button/shared/css.js CHANGED
@@ -11,11 +11,13 @@ exports.getIconStyle = getIconStyle;
11
11
  exports.overlayCss = void 0;
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
13
  var _react = require("@emotion/react");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _constants = require("@atlaskit/theme/constants");
15
16
  var _colors = _interopRequireDefault(require("./colors"));
16
17
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
18
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
18
19
  var gridSize = (0, _constants.gridSize)();
20
+ var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
19
21
 
20
22
  // ## Button layout
21
23
  //
@@ -61,6 +63,108 @@ var innerMargin = {
61
63
  content: "0 ".concat(gridSize / 4, "px"),
62
64
  icon: "0 ".concat(gridSize / 4, "px")
63
65
  };
66
+ var defaultAfterStyles = {
67
+ borderRadius: 'inherit',
68
+ inset: "var(--ds-space-0, 0px)",
69
+ borderStyle: 'solid',
70
+ borderWidth: "var(--ds-border-width, 1px)",
71
+ pointerEvents: 'none',
72
+ position: 'absolute'
73
+ };
74
+ var defaultStyles = {
75
+ background: "var(--ds-background-neutral-subtle, #00000000)",
76
+ color: "var(--ds-text, #172B4D)",
77
+ '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
78
+ content: '""',
79
+ borderColor: "var(--ds-border, #091E4224)"
80
+ }),
81
+ '&:hover': {
82
+ background: "var(--ds-background-neutral-hovered, #091E4224)"
83
+ },
84
+ '&:active': {
85
+ background: "var(--ds-background-neutral-pressed, #091E424F)"
86
+ }
87
+ };
88
+ var primaryStyles = {
89
+ background: "var(--ds-background-brand-bold, #0C66E4)",
90
+ color: "var(--ds-text-inverse, #FFFFFF)",
91
+ '&:hover': {
92
+ background: "var(--ds-background-brand-bold-hovered, #0055CC)"
93
+ },
94
+ '&:active': {
95
+ background: "var(--ds-background-brand-bold-pressed, #09326C)"
96
+ }
97
+ };
98
+ var linkStyles = {
99
+ background: 'transparent',
100
+ color: "var(--ds-link, #0C66E4)",
101
+ '&:hover': {
102
+ color: "var(--ds-link, #0C66E4)",
103
+ textDecoration: 'underline'
104
+ },
105
+ '&:active': {
106
+ color: "var(--ds-link-pressed, #0055CC)",
107
+ textDecoration: 'underline'
108
+ }
109
+ };
110
+ var subtleStyles = {
111
+ background: 'transparent',
112
+ color: "var(--ds-text-subtle, #44546F)",
113
+ '&:hover': {
114
+ background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
115
+ },
116
+ '&:active': {
117
+ background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
118
+ }
119
+ };
120
+ var subtleLinkStyles = {
121
+ background: 'transparent',
122
+ color: "var(--ds-text-subtle, #44546F)",
123
+ '&:hover': {
124
+ background: 'transparent',
125
+ color: "var(--ds-text-subtle, #44546F)",
126
+ textDecoration: 'underline'
127
+ },
128
+ '&:active': {
129
+ background: 'transparent',
130
+ color: "var(--ds-text, #172B4D)",
131
+ textDecoration: 'underline'
132
+ }
133
+ };
134
+ var warningStyles = {
135
+ background: "var(--ds-background-warning-bold, #F5CD47)",
136
+ color: "var(--ds-text-warning-inverse, #172B4D)",
137
+ '&:hover': {
138
+ background: "var(--ds-background-warning-bold-hovered, #E2B203)"
139
+ },
140
+ '&:active': {
141
+ background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
142
+ }
143
+ };
144
+ var dangerStyles = {
145
+ background: "var(--ds-background-danger-bold, #C9372C)",
146
+ color: "var(--ds-text-inverse, #FFFFFF)",
147
+ '&:hover': {
148
+ background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
149
+ },
150
+ '&:active': {
151
+ background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
152
+ }
153
+ };
154
+ var selectedStyles = {
155
+ background: "var(--ds-background-selected, #E9F2FF)",
156
+ color: "var(--ds-text-selected, #0C66E4)",
157
+ '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
158
+ content: '""',
159
+ borderColor: "var(--ds-border-selected, #0C66E4)"
160
+ })
161
+ };
162
+ var hasOverlayStyles = {
163
+ '&[data-has-overlay="true"]': {
164
+ cursor: 'default',
165
+ textDecoration: 'none'
166
+ }
167
+ };
64
168
  function getColor(_ref) {
65
169
  var group = _ref.group,
66
170
  key = _ref.key,
@@ -98,7 +202,7 @@ function getCss(_ref3) {
98
202
  key: isSelected ? 'selected' : 'default',
99
203
  mode: mode
100
204
  });
101
- return _objectSpread(_objectSpread({
205
+ return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
102
206
  // 0px margin added to css-reset
103
207
  alignItems: 'baseline',
104
208
  borderWidth: 0,
@@ -118,7 +222,7 @@ function getCss(_ref3) {
118
222
  textDecoration: 'none',
119
223
  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
120
224
  whiteSpace: 'nowrap'
121
- }, baseColors), {}, {
225
+ }, !(0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && baseColors), {}, {
122
226
  cursor: 'pointer',
123
227
  height: heights[spacing],
124
228
  lineHeight: lineHeights[spacing],
@@ -126,10 +230,8 @@ function getCss(_ref3) {
126
230
  verticalAlign: verticalAlign[spacing],
127
231
  width: shouldFitContainer ? '100%' : 'auto',
128
232
  // justifyContent required for shouldFitContainer buttons with an icon inside
129
- justifyContent: 'center',
130
- // Note: we cannot disable pointer events when there is an overlay.
131
- // That would be easy for styling, but it would start letting events through on disabled buttons
132
-
233
+ justifyContent: 'center'
234
+ }, !(0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && _objectSpread(_objectSpread({
133
235
  // Disabling visited styles (just using the base colors)
134
236
  '&:visited': _objectSpread({}, baseColors),
135
237
  '&:hover': _objectSpread(_objectSpread({}, getColors({
@@ -170,17 +272,33 @@ function getCss(_ref3) {
170
272
  })), {}, {
171
273
  cursor: 'not-allowed',
172
274
  textDecoration: 'none'
173
- }),
174
- '&[data-has-overlay="true"]': {
175
- cursor: 'default',
176
- textDecoration: 'none'
177
- },
275
+ })
276
+ }, hasOverlayStyles), {}, {
178
277
  // disabling hover and active color changes when there is an overlay, but the button is not disabled
179
278
  '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': _objectSpread({}, getColors({
180
279
  appearance: appearance,
181
280
  key: isSelected ? 'selected' : 'default',
182
281
  mode: mode
183
- })),
282
+ }))
283
+ })), (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && (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), {}, {
284
+ '&[disabled]': {
285
+ color: "var(--ds-text-disabled, #091E424F)",
286
+ backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
287
+ cursor: 'not-allowed',
288
+ textDecoration: 'none',
289
+ '&:hovered': {
290
+ backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
291
+ },
292
+ '&:active': {
293
+ backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
294
+ }
295
+ }
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
+ }))), {}, {
184
302
  '&::-moz-focus-inner': {
185
303
  border: 0,
186
304
  margin: 0,
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  const heights = {
10
10
  default: `${32 / 14}em`,
11
11
  compact: `${24 / 14}em`,
@@ -14,10 +14,12 @@ const heights = {
14
14
  import { SplitButtonContext } from './split-button-context';
15
15
  import { getActions } from './utils';
16
16
  const baseDividerStyles = css({
17
- display: 'inline-flex',
18
17
  width: "var(--ds-border-width, 1px)",
19
18
  position: 'relative',
20
- zIndex: 2
19
+ // This is 1 so it appears above buttons by default.
20
+ // When buttons are selected they have a zIndex of 2 applied.
21
+ // See use-button-base.tsx.
22
+ zIndex: 1
21
23
  });
22
24
  const defaultDividerStyles = css({
23
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -29,13 +31,12 @@ const compactDividerStyles = css({
29
31
  });
30
32
  const dividerDisabledStyles = css({
31
33
  backgroundColor: "var(--ds-text-disabled, #091E4224)",
32
- cursor: 'not-allowed'
34
+ cursor: 'not-allowed',
35
+ opacity: 0.51
33
36
  });
34
- const navigationDividerStyles = css({
35
- height: '16px',
36
- margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
37
- backgroundColor: "var(--ds-text-subtle, #0052cc)",
38
- opacity: 0.62
37
+ const dividerDisabledRefreshedStyles = css({
38
+ backgroundColor: "var(--ds-border-disabled, #091E4224)",
39
+ cursor: 'not-allowed'
39
40
  });
40
41
  const dividerAppearance = {
41
42
  default: css({
@@ -46,7 +47,12 @@ const dividerAppearance = {
46
47
  backgroundColor: "var(--ds-text-inverse, #FFF)",
47
48
  opacity: 0.64
48
49
  }),
49
- navigation: navigationDividerStyles
50
+ navigation: css({
51
+ height: '16px',
52
+ margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
53
+ backgroundColor: "var(--ds-text-subtle, #0052cc)",
54
+ opacity: 0.62
55
+ })
50
56
  };
51
57
  const dividerRefreshedOffsetStyles = css({
52
58
  marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
@@ -66,7 +72,7 @@ export const Divider = ({
66
72
  return (
67
73
  // I find it funny to provide a div for Divider
68
74
  jsx("div", {
69
- css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
75
+ css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
70
76
  })
71
77
  );
72
78
  };
@@ -103,10 +109,11 @@ const defaultAppearanceContainerStyles = css({
103
109
  */
104
110
  export const SplitButtonContainer = ({
105
111
  appearance,
106
- children
112
+ children,
113
+ isDisabled = false
107
114
  }) => {
108
115
  return jsx("div", {
109
- css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
116
+ css: [appearance === 'default' && !isDisabled && fg('platform.design-system-team.component-visual-refresh_t8zbo') && defaultAppearanceContainerStyles, splitButtonStyles]
110
117
  }, children);
111
118
  };
112
119
 
@@ -130,7 +137,8 @@ export const SplitButton = ({
130
137
  SecondaryAction
131
138
  } = getActions(children);
132
139
  return jsx(SplitButtonContainer, {
133
- appearance: appearance
140
+ appearance: appearance,
141
+ isDisabled: isDisabled
134
142
  }, jsx(SplitButtonContext.Provider, {
135
143
  value: {
136
144
  appearance,
@@ -147,8 +155,16 @@ export const SplitButton = ({
147
155
  css: secondaryButtonStyles
148
156
  }, SecondaryAction)));
149
157
  };
158
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
159
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
150
160
  /**
151
- * TODO: Decide on API
161
+ * __Split button with slots__
162
+ *
163
+ * A split button with slots {description}.
164
+ *
165
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
166
+ * - [Code](https://atlassian.design/components/{packageName}/code)
167
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
152
168
  */
153
169
  export const SplitButtonWithSlots = ({
154
170
  primaryAction,
@@ -158,7 +174,8 @@ export const SplitButtonWithSlots = ({
158
174
  isDisabled = false
159
175
  }) => {
160
176
  return jsx(SplitButtonContainer, {
161
- appearance: appearance
177
+ appearance: appearance,
178
+ isDisabled: isDisabled
162
179
  }, jsx(SplitButtonContext.Provider, {
163
180
  value: {
164
181
  appearance,
package/dist/es2019/new-button/variants/shared/use-button-base.js CHANGED
@@ -2,7 +2,7 @@ import React, { Fragment, useRef } from 'react';
2
2
  import { uid } from 'react-uid';
3
3
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
4
4
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
6
  import { Box, xcss } from '@atlaskit/primitives';
7
7
  import * as colors from '@atlaskit/theme/colors';
8
8
  import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -326,6 +326,12 @@ const selectedRefreshedStyles = xcss({
326
326
  color: 'color.text.selected'
327
327
  }
328
328
  });
329
+ const selectedInsideSplitButtonStyles = xcss({
330
+ // This is 2 so it appears above the split button divider when selected.
331
+ // See split-button.tsx.
332
+ // @ts-expect-error — We need a local zindex just for button.
333
+ zIndex: 2
334
+ });
329
335
  const selectedInteractiveStyles = xcss({
330
336
  ':hover': {
331
337
  // @ts-expect-error
@@ -532,7 +538,7 @@ const useButtonBase = ({
532
538
  const isSplitButton = Boolean(splitButtonContext);
533
539
  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
534
540
  const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
535
- const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
541
+ const appearance = isDefaultAppearanceSplitButton && fg('platform.design-system-team.component-visual-refresh_t8zbo') ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
536
542
  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
537
543
  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
538
544
  const isInteractive = !isDisabled && !isLoading;
@@ -542,13 +548,13 @@ const useButtonBase = ({
542
548
  useAutoFocus(localRef, autoFocus);
543
549
  return {
544
550
  ref: mergeRefs([localRef, ref]),
545
- xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
551
+ xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
546
552
  // TODO: remove me once we kill color fallbacks
547
553
  isSelected && appearance === 'danger' && selectedDangerStyles,
548
554
  // TODO: remove me once we kill color fallbacks
549
555
  isSelected && appearance === 'warning' && selectedWarningStyles,
550
556
  // TODO: remove me once we kill color fallbacks
551
- isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
557
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && fg('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
552
558
  isDisabled: isEffectivelyDisabled,
553
559
  children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
554
560
  as: "span",
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
119
119
  action: 'clicked',
120
120
  componentName: 'button',
121
121
  packageName: "@atlaskit/button",
122
- packageVersion: "18.1.0",
122
+ packageVersion: "18.3.0",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125