@atlaskit/flag 14.7.2 → 15.0.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 (57) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/auto-dismiss-flag.js +1 -1
  3. package/dist/cjs/flag-actions.js +18 -37
  4. package/dist/cjs/flag-group.js +15 -9
  5. package/dist/cjs/flag.js +62 -69
  6. package/dist/cjs/internal/dismiss-button.js +25 -38
  7. package/dist/cjs/internal/expander.js +25 -26
  8. package/dist/cjs/internal/index.js +0 -16
  9. package/dist/cjs/theme.js +50 -169
  10. package/dist/cjs/version.json +1 -1
  11. package/dist/es2019/auto-dismiss-flag.js +1 -1
  12. package/dist/es2019/flag-actions.js +18 -38
  13. package/dist/es2019/flag-group.js +14 -8
  14. package/dist/es2019/flag.js +62 -67
  15. package/dist/es2019/internal/dismiss-button.js +26 -36
  16. package/dist/es2019/internal/expander.js +20 -23
  17. package/dist/es2019/internal/index.js +0 -2
  18. package/dist/es2019/theme.js +47 -141
  19. package/dist/es2019/version.json +1 -1
  20. package/dist/esm/auto-dismiss-flag.js +1 -1
  21. package/dist/esm/flag-actions.js +18 -38
  22. package/dist/esm/flag-group.js +14 -8
  23. package/dist/esm/flag.js +62 -68
  24. package/dist/esm/internal/dismiss-button.js +26 -37
  25. package/dist/esm/internal/expander.js +21 -24
  26. package/dist/esm/internal/index.js +0 -2
  27. package/dist/esm/theme.js +49 -155
  28. package/dist/esm/version.json +1 -1
  29. package/dist/types/flag-actions.d.ts +2 -5
  30. package/dist/types/flag.d.ts +3 -2
  31. package/dist/types/internal/expander.d.ts +2 -3
  32. package/dist/types/internal/index.d.ts +0 -2
  33. package/dist/types/theme.d.ts +14 -9
  34. package/package.json +9 -15
  35. package/report.api.md +62 -148
  36. package/dist/cjs/internal/description.js +0 -34
  37. package/dist/cjs/internal/title.js +0 -30
  38. package/dist/es2019/internal/description.js +0 -24
  39. package/dist/es2019/internal/title.js +0 -20
  40. package/dist/esm/internal/description.js +0 -25
  41. package/dist/esm/internal/title.js +0 -21
  42. package/dist/types/internal/description.d.ts +0 -8
  43. package/dist/types/internal/title.d.ts +0 -6
  44. package/dist/types-ts4.0/auto-dismiss-flag.d.ts +0 -13
  45. package/dist/types-ts4.0/constants.d.ts +0 -2
  46. package/dist/types-ts4.0/flag-actions.d.ts +0 -15
  47. package/dist/types-ts4.0/flag-group.d.ts +0 -45
  48. package/dist/types-ts4.0/flag-provider.d.ts +0 -33
  49. package/dist/types-ts4.0/flag.d.ts +0 -14
  50. package/dist/types-ts4.0/index.d.ts +0 -6
  51. package/dist/types-ts4.0/internal/description.d.ts +0 -8
  52. package/dist/types-ts4.0/internal/dismiss-button.d.ts +0 -12
  53. package/dist/types-ts4.0/internal/expander.d.ts +0 -8
  54. package/dist/types-ts4.0/internal/index.d.ts +0 -4
  55. package/dist/types-ts4.0/internal/title.d.ts +0 -6
  56. package/dist/types-ts4.0/theme.d.ts +0 -10
  57. package/dist/types-ts4.0/types.d.ts +0 -101
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/flag
2
2
 
3
+ ## 15.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`f7b2dbd6eba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7b2dbd6eba) - BREAKING CHANGE: We have removed support for legacy light and dark themes. Previously, Flag used the `useGlobalTheme` hook to detect 'light' or 'dark' modes and apply suitable styles accordingly. This functionality has been removed in favor of supporting token-based light and dark themes as well as including fallbacks for non-token environments.
8
+
9
+ Other changes include:
10
+
11
+ - Flag shadow is now the same across normal and bold flags and has been made consistent with overlay shadows in other components.
12
+ - Dismiss button is better aligned within the Flag and has a more consistent hit target.
13
+ - Flag icon is better aligned with content.
14
+ - Internal change to the way styles are applied.
15
+
16
+ ### Patch Changes
17
+
18
+ - [`a1af6f8bb99`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1af6f8bb99) - Fixes a regression that could cause Flag description or actions to display incorrectly or not at all.
19
+ - [`373f54c8212`](https://bitbucket.org/atlassian/atlassian-frontend/commits/373f54c8212) - Fixed an issue where Flag title or description could overflow its container if a single word exceeded the length of the container (for example, long filenames).
20
+ - [`bbd4e296a68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bbd4e296a68) - Fixes a regression that could cause Flag description or actions to display incorrectly or not at all.
21
+ - Updated dependencies
22
+
23
+ ## 14.7.3
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
3
29
  ## 14.7.2
4
30
 
5
31
  ### Patch Changes
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
27
 
28
28
  var packageName = "@atlaskit/flag";
29
- var packageVersion = "14.7.2";
29
+ var packageVersion = "15.0.0";
30
30
  var AUTO_DISMISS_SECONDS = 8;
31
31
  /**
32
32
  * __Auto dismiss flag__
@@ -11,6 +11,8 @@ var _react = require("@emotion/react");
11
11
 
12
12
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
13
13
 
14
+ var _dsExplorations = require("@atlaskit/ds-explorations");
15
+
14
16
  var _constants = require("@atlaskit/theme/constants");
15
17
 
16
18
  var _constants2 = require("./constants");
@@ -21,26 +23,8 @@ var _theme = require("./theme");
21
23
 
22
24
  /** @jsx jsx */
23
25
  var gridSize = (0, _constants.gridSize)();
24
- var separatorWidth = gridSize * 2;
25
- var defaultAppearanceTranslate = gridSize / 4;
26
- var separatorStyles = (0, _react.css)({
27
- display: 'inline-block',
28
- width: separatorWidth,
29
- textAlign: 'center'
30
- });
31
- var actionContainerStyles = (0, _react.css)({
32
- display: 'flex',
33
- paddingTop: gridSize,
34
- alignItems: 'center',
35
- flexWrap: 'wrap',
36
- transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
37
- });
38
- var boldActionContainerStyles = (0, _react.css)({
39
- transform: 0
40
- });
41
26
  var buttonStyles = (0, _react.css)({
42
27
  '&&, a&&': {
43
- marginLeft: 0,
44
28
  padding: "0 ".concat(gridSize, "px !important"),
45
29
  background: "var(--bg-color)",
46
30
  color: "var(--color) !important",
@@ -53,16 +37,11 @@ var buttonStyles = (0, _react.css)({
53
37
  textDecoration: 'underline'
54
38
  }
55
39
  });
56
- var appeanceNormalButtonStyles = (0, _react.css)({
40
+ var appearanceNormalButtonStyles = (0, _react.css)({
57
41
  '&&, a&&': {
58
42
  padding: '0 !important'
59
43
  }
60
44
  });
61
- var isBoldButtonStyles = (0, _react.css)({
62
- '&&, a&&': {
63
- marginRight: gridSize
64
- }
65
- });
66
45
 
67
46
  var FlagActions = function FlagActions(props) {
68
47
  var _props$appearance = props.appearance,
@@ -70,7 +49,6 @@ var FlagActions = function FlagActions(props) {
70
49
  _props$actions = props.actions,
71
50
  actions = _props$actions === void 0 ? [] : _props$actions,
72
51
  linkComponent = props.linkComponent,
73
- mode = props.mode,
74
52
  testId = props.testId;
75
53
 
76
54
  if (!actions.length) {
@@ -78,14 +56,17 @@ var FlagActions = function FlagActions(props) {
78
56
  }
79
57
 
80
58
  var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
81
- return (0, _react.jsx)("div", {
82
- css: [actionContainerStyles, isBold && boldActionContainerStyles],
83
- "data-testid": testId && "".concat(testId, "-actions")
59
+ return (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
60
+ gap: "scale.100",
61
+ flexWrap: "wrap",
62
+ alignItems: "center",
63
+ divider: isBold ? null : '·',
64
+ UNSAFE_style: isBold ? undefined : {
65
+ transform: "translateX(-2px)"
66
+ },
67
+ testId: testId && "".concat(testId, "-actions")
84
68
  }, actions.map(function (action, index) {
85
- return [index && !isBold ? (0, _react.jsx)("div", {
86
- css: separatorStyles,
87
- key: index + 0.5
88
- }, "\xB7") : '', (0, _react.jsx)(_customThemeButton.default, {
69
+ return (0, _react.jsx)(_customThemeButton.default, {
89
70
  onClick: action.onClick,
90
71
  href: action.href,
91
72
  target: action.target,
@@ -95,12 +76,12 @@ var FlagActions = function FlagActions(props) {
95
76
  testId: action.testId,
96
77
  key: index,
97
78
  style: {
98
- '--color': (0, _theme.getActionColor)(appearance, mode),
99
- '--bg-color': (0, _theme.getActionBackground)(appearance, mode),
100
- '--focus-color': (0, _theme.getFlagFocusRingColor)(appearance, mode)
79
+ '--color': _theme.actionTextColor[appearance],
80
+ '--bg-color': _theme.actionBackgroundColor[appearance],
81
+ '--focus-color': _theme.flagFocusRingColor[appearance]
101
82
  },
102
- css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
103
- }, action.content)];
83
+ css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
84
+ }, action.content);
104
85
  }));
105
86
  }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
106
87
 
@@ -8,14 +8,14 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.flagWidth = exports.flagAnimationTime = exports.default = exports.FlagGroupContext = void 0;
9
9
  exports.useFlagGroup = useFlagGroup;
10
10
 
11
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
-
13
11
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
14
12
 
15
13
  var _react = require("react");
16
14
 
17
15
  var _react2 = require("@emotion/react");
18
16
 
17
+ var _dsExplorations = require("@atlaskit/ds-explorations");
18
+
19
19
  var _motion = require("@atlaskit/motion");
20
20
 
21
21
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -51,7 +51,6 @@ function useFlagGroup() {
51
51
 
52
52
  var baseStyles = (0, _react2.css)({
53
53
  width: flagWidth,
54
- position: 'absolute',
55
54
  bottom: 0,
56
55
  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
57
56
  '@media (max-width: 560px)': {
@@ -85,7 +84,6 @@ var dismissAllowedStyles = (0, _react2.css)({
85
84
  }
86
85
  });
87
86
  var flagGroupContainerStyles = (0, _react2.css)({
88
- position: 'fixed',
89
87
  zIndex: _constants.layers.flag(),
90
88
  bottom: flagBottom,
91
89
  left: flagLeft,
@@ -130,10 +128,16 @@ var FlagGroup = function FlagGroup(props) {
130
128
  animationTimingFunction: function animationTimingFunction() {
131
129
  return _motion.easeIn;
132
130
  }
133
- }, function (props) {
134
- return (0, _react2.jsx)("div", (0, _extends2.default)({}, props, {
135
- css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
136
- }), (0, _react2.jsx)(FlagGroupContext.Provider, {
131
+ }, function (_ref) {
132
+ var className = _ref.className,
133
+ ref = _ref.ref;
134
+ return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
135
+ display: "block",
136
+ position: "absolute",
137
+ css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
138
+ className: className,
139
+ ref: ref
140
+ }, (0, _react2.jsx)(FlagGroupContext.Provider, {
137
141
  value: // Only the first flag should be able to be dismissed.
138
142
  isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
139
143
  }, flag));
@@ -143,7 +147,9 @@ var FlagGroup = function FlagGroup(props) {
143
147
 
144
148
  return (0, _react2.jsx)(_portal.default, {
145
149
  zIndex: _constants.layers.flag()
146
- }, (0, _react2.jsx)("div", {
150
+ }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
151
+ display: "block",
152
+ position: "fixed",
147
153
  id: id,
148
154
  css: flagGroupContainerStyles
149
155
  }, hasFlags ? (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(LabelTag, null, label)) : null, (0, _react2.jsx)(_motion.ExitingPersistence, {
package/dist/cjs/flag.js CHANGED
@@ -17,9 +17,7 @@ var _react = require("react");
17
17
 
18
18
  var _react2 = require("@emotion/react");
19
19
 
20
- var _components = require("@atlaskit/theme/components");
21
-
22
- var _constants = require("@atlaskit/theme/constants");
20
+ var _dsExplorations = require("@atlaskit/ds-explorations");
23
21
 
24
22
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
25
23
 
@@ -27,7 +25,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
27
25
 
28
26
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
29
27
 
30
- var _constants2 = require("./constants");
28
+ var _constants = require("./constants");
31
29
 
32
30
  var _theme = require("./theme");
33
31
 
@@ -44,32 +42,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
44
42
  var analyticsAttributes = {
45
43
  componentName: 'flag',
46
44
  packageName: "@atlaskit/flag",
47
- packageVersion: "14.7.2"
45
+ packageVersion: "15.0.0"
48
46
  };
49
- var gridSize = (0, _constants.gridSize)();
50
- var doubleGridSize = gridSize * 2;
51
- var titleGroupStyles = (0, _react2.css)({
52
- display: 'flex',
53
- alignItems: 'start'
54
- });
55
- var iconTitleStyles = (0, _react2.css)({
56
- display: 'flex',
57
- paddingTop: "".concat(gridSize / 2, "px"),
58
- alignItems: 'start',
59
- flex: 1
60
- });
61
- var flagHeaderStyles = (0, _react2.css)({
62
- boxSizing: 'border-box',
63
- width: '100%',
64
- padding: doubleGridSize,
65
- borderRadius: (0, _constants.borderRadius)()
66
- });
67
- var flagContainerStyles = (0, _react2.css)({
68
- width: '100%',
69
- zIndex: _constants.layers.flag(),
70
- borderRadius: (0, _constants.borderRadius)(),
71
- transition: 'background-color 200ms'
72
- });
73
47
  /**
74
48
  * __Flag__
75
49
  *
@@ -85,7 +59,7 @@ var Flag = function Flag(props) {
85
59
  var _props$actions = props.actions,
86
60
  actions = _props$actions === void 0 ? [] : _props$actions,
87
61
  _props$appearance = props.appearance,
88
- appearance = _props$appearance === void 0 ? _constants2.DEFAULT_APPEARANCE : _props$appearance,
62
+ appearance = _props$appearance === void 0 ? _constants.DEFAULT_APPEARANCE : _props$appearance,
89
63
  icon = props.icon,
90
64
  title = props.title,
91
65
  description = props.description,
@@ -121,7 +95,7 @@ var Flag = function Flag(props) {
121
95
  action: 'dismissed',
122
96
  analyticsData: analyticsContext
123
97
  }, analyticsAttributes));
124
- var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
98
+ var isBold = appearance !== _constants.DEFAULT_APPEARANCE;
125
99
  var toggleExpand = (0, _react.useCallback)(function () {
126
100
  setIsExpanded(function (previous) {
127
101
  return !previous;
@@ -154,42 +128,55 @@ var Flag = function Flag(props) {
154
128
  onMouseOut: onMouseOut,
155
129
  onBlur: onBlurAnalytics
156
130
  };
157
- var boxShadowValue = "0 20px 32px -8px ".concat(_theme.flagShadowColor);
158
-
159
- if (!isBold) {
160
- boxShadowValue = "0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadowValue);
161
- }
162
-
163
- var boxShadow = "var(--ds-shadow-overlay, ".concat(boxShadowValue, ")");
164
-
165
- var _useGlobalTheme = (0, _components.useGlobalTheme)(),
166
- mode = _useGlobalTheme.mode;
167
-
168
- var textColor = (0, _theme.getFlagTextColor)(appearance, mode);
169
- var iconColor = (0, _theme.getFlagIconColor)(appearance, mode);
131
+ var textColor = _theme.flagTextColor[appearance];
132
+ var iconColor = _theme.flagIconColor[appearance];
170
133
  var isDismissable = isBold || isDismissAllowed;
171
- return (0, _react2.jsx)("div", (0, _extends2.default)({
172
- style: {
173
- color: textColor,
174
- backgroundColor: (0, _theme.getFlagBackgroundColor)(appearance, mode),
175
- boxShadow: boxShadow
134
+ var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
135
+ return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
136
+ display: "block",
137
+ backgroundColor: _theme.flagBackgroundColor[appearance],
138
+ shadow: "overlay",
139
+ padding: "scale.200",
140
+ borderRadius: "normal",
141
+ overflow: "hidden",
142
+ layer: "flag",
143
+ UNSAFE_style: {
144
+ width: '100%',
145
+ transition: 'background-color 200ms'
176
146
  },
177
- css: flagContainerStyles,
178
147
  role: "alert",
179
- "data-testid": testId
180
- }, autoDismissProps), (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("div", {
181
- css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
148
+ tabIndex: 0,
149
+ testId: testId
150
+ }, autoDismissProps), (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
151
+ gap: "scale.200"
152
+ }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
153
+ alignItems: "start",
154
+ UNSAFE_style: {
155
+ color: iconColor,
156
+ flexShrink: 0
157
+ }
158
+ }, icon), (0, _react2.jsx)(_dsExplorations.UNSAFE_Stack, {
159
+ gap: shouldRenderGap ? 'scale.100' : 'scale.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
182
160
  ,
183
- tabIndex: 0
184
- }, (0, _react2.jsx)("div", {
185
- style: {
186
- color: iconColor
187
- },
188
- css: titleGroupStyles
189
- }, (0, _react2.jsx)("div", {
190
- css: iconTitleStyles
191
- }, icon, (0, _react2.jsx)(_internal.Title, {
192
- color: textColor
161
+ UNSAFE_style: {
162
+ flexGrow: 1,
163
+ transition: "gap 0.3s"
164
+ }
165
+ }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
166
+ gap: "scale.100",
167
+ justifyContent: "spaceBetween"
168
+ }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
169
+ display: "block",
170
+ UNSAFE_style: {
171
+ paddingTop: 2
172
+ }
173
+ }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
174
+ color: textColor,
175
+ fontWeight: "600",
176
+ UNSAFE_style: {
177
+ overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
178
+
179
+ }
193
180
  }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
194
181
  testId: testId,
195
182
  appearance: appearance,
@@ -199,17 +186,23 @@ var Flag = function Flag(props) {
199
186
  }) : null), (0, _react2.jsx)(_internal.Expander, {
200
187
  isExpanded: !isBold || isExpanded,
201
188
  testId: testId
202
- }, description && (0, _react2.jsx)(_internal.Description, {
203
- testId: testId && "".concat(testId, "-description"),
189
+ }, description && (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
190
+ as: "div",
204
191
  color: textColor,
205
- isBold: isBold
192
+ UNSAFE_style: {
193
+ maxHeight: 100,
194
+ // height is defined as 5 lines maximum by design
195
+ overflow: 'auto',
196
+ overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
197
+
198
+ },
199
+ testId: testId && "".concat(testId, "-description")
206
200
  }, description), (0, _react2.jsx)(_flagActions.default, {
207
201
  actions: actions,
208
202
  appearance: appearance,
209
203
  linkComponent: linkComponent,
210
- testId: testId,
211
- mode: mode
212
- })))));
204
+ testId: testId
205
+ }))))));
213
206
  };
214
207
 
215
208
  var _default = Flag;
@@ -11,49 +11,25 @@ var _react = require("react");
11
11
 
12
12
  var _react2 = require("@emotion/react");
13
13
 
14
+ var _dsExplorations = require("@atlaskit/ds-explorations");
15
+
14
16
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
15
17
 
16
- var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
18
+ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
17
19
 
18
- var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
20
+ var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
19
21
 
20
22
  var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
21
23
 
22
- var _constants = require("@atlaskit/theme/constants");
23
-
24
- var _components = require("@atlaskit/theme/components");
25
-
26
24
  var _theme = require("../theme");
27
25
 
28
26
  /** @jsx jsx */
29
- var gridSize = (0, _constants.gridSize)();
30
- var borderRadius = (0, _constants.borderRadius)();
31
- var dismissButtonStyles = (0, _react2.css)({
32
- marginLeft: gridSize,
33
- padding: 0,
34
- flex: '0 0 auto',
35
- appearance: 'none',
36
- background: 'none',
37
- border: 'none',
38
- borderRadius: borderRadius,
39
- cursor: 'pointer',
40
- lineHeight: '1',
41
- whiteSpace: 'nowrap'
42
- });
43
- var crossIconStyles = (0, _react2.css)({
44
- paddingTop: "".concat(gridSize, "px")
45
- });
46
-
47
27
  var DismissButton = function DismissButton(_ref) {
48
28
  var appearance = _ref.appearance,
49
29
  onClick = _ref.onClick,
50
30
  isBold = _ref.isBold,
51
31
  isExpanded = _ref.isExpanded,
52
32
  testId = _ref.testId;
53
-
54
- var _useGlobalTheme = (0, _components.useGlobalTheme)(),
55
- mode = _useGlobalTheme.mode;
56
-
57
33
  var ButtonIcon = _cross.default;
58
34
  var buttonLabel = 'Dismiss';
59
35
  var size = 'small';
@@ -62,22 +38,33 @@ var DismissButton = function DismissButton(_ref) {
62
38
  if (isBold) {
63
39
  ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
64
40
  buttonLabel = isExpanded ? 'Collapse' : 'Expand';
65
- size = 'large';
41
+ size = 'medium';
66
42
  buttonTestId = testId && "".concat(testId, "-toggle");
67
43
  }
68
44
 
69
- return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", {
70
- style: {
71
- color: (0, _theme.getFlagTextColor)(appearance, mode)
72
- },
73
- css: [dismissButtonStyles, !isBold && crossIconStyles],
74
- onClick: onClick,
75
- "data-testid": buttonTestId,
45
+ return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
46
+ as: "button",
76
47
  type: "button",
77
- "aria-expanded": isBold ? isExpanded : undefined
48
+ justifyContent: "center",
49
+ alignItems: "center",
50
+ borderStyle: "none",
51
+ borderRadius: "normal",
52
+ padding: "scale.0",
53
+ width: "size.200",
54
+ height: "size.200",
55
+ onClick: onClick,
56
+ "aria-expanded": isBold ? isExpanded : undefined,
57
+ UNSAFE_style: {
58
+ flex: '0 0 auto',
59
+ background: 'none',
60
+ cursor: 'pointer',
61
+ whiteSpace: 'nowrap'
62
+ },
63
+ testId: buttonTestId
78
64
  }, (0, _react2.jsx)(ButtonIcon, {
79
65
  label: buttonLabel,
80
- size: size
66
+ size: size,
67
+ primaryColor: _theme.flagTextColorToken[appearance]
81
68
  })));
82
69
  };
83
70
 
@@ -1,32 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
9
 
8
- var _react = require("@emotion/react");
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
11
 
10
- var _motion = require("@atlaskit/motion");
12
+ var _react = _interopRequireDefault(require("react"));
11
13
 
12
- var _constants = require("@atlaskit/theme/constants");
13
-
14
- /** @jsx jsx */
15
- var gridSize = (0, _constants.gridSize)();
16
- var paddingLeft = gridSize * 5;
17
- var expanderStyles = (0, _react.css)({
18
- display: 'flex',
19
- minWidth: 0,
20
- maxHeight: 0,
21
- padding: "0 0 0 ".concat(paddingLeft, "px"),
22
- justifyContent: 'center',
23
- flex: '1 1 100%',
24
- flexDirection: 'column',
25
- transition: "max-height 0.3s"
26
- });
27
- var expandedStyles = (0, _react.css)({
28
- maxHeight: 150
29
- });
14
+ var _dsExplorations = require("@atlaskit/ds-explorations");
15
+
16
+ var _motion = require("@atlaskit/motion");
30
17
 
31
18
  var Expander = function Expander(_ref) {
32
19
  var children = _ref.children,
@@ -35,14 +22,26 @@ var Expander = function Expander(_ref) {
35
22
  // Need to always render the ExpanderInternal otherwise the
36
23
  // reveal transition doesn't happen. We can't use CSS animation for
37
24
  // the the reveal because we don't know the height of the content.
38
- return (0, _react.jsx)("div", {
25
+ return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
26
+ UNSAFE_style: {
27
+ minWidth: 0,
28
+ maxHeight: isExpanded ? 150 : 0,
29
+ flex: '1 1 100%',
30
+ transition: "max-height 0.3s"
31
+ },
39
32
  "aria-hidden": !isExpanded,
40
- css: [expanderStyles, isExpanded && expandedStyles],
41
- "data-testid": testId && "".concat(testId, "-expander")
42
- }, (0, _react.jsx)(_motion.ExitingPersistence, {
33
+ testId: testId && "".concat(testId, "-expander")
34
+ }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
43
35
  appear: true
44
- }, isExpanded && (0, _react.jsx)(_motion.FadeIn, null, function (props) {
45
- return (0, _react.jsx)("div", props, children);
36
+ }, isExpanded && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, null, function (props) {
37
+ return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
38
+ display: "block",
39
+ UNSAFE_style: {
40
+ width: '100%'
41
+ }
42
+ }, props), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Stack, {
43
+ gap: "scale.100"
44
+ }, children));
46
45
  })));
47
46
  }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
48
47
 
@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "Description", {
9
- enumerable: true,
10
- get: function get() {
11
- return _description.default;
12
- }
13
- });
14
8
  Object.defineProperty(exports, "DismissButton", {
15
9
  enumerable: true,
16
10
  get: function get() {
@@ -23,16 +17,6 @@ Object.defineProperty(exports, "Expander", {
23
17
  return _expander.default;
24
18
  }
25
19
  });
26
- Object.defineProperty(exports, "Title", {
27
- enumerable: true,
28
- get: function get() {
29
- return _title.default;
30
- }
31
- });
32
-
33
- var _title = _interopRequireDefault(require("./title"));
34
-
35
- var _description = _interopRequireDefault(require("./description"));
36
20
 
37
21
  var _expander = _interopRequireDefault(require("./expander"));
38
22