@atlaskit/menu 3.0.0 → 3.1.1

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 +15 -0
  2. package/dist/cjs/internal/components/menu-item-primitive.js +13 -4
  3. package/dist/cjs/menu-item/heading-item.js +1 -1
  4. package/dist/es2019/internal/components/menu-item-primitive.js +13 -4
  5. package/dist/es2019/menu-item/heading-item.js +1 -1
  6. package/dist/esm/internal/components/menu-item-primitive.js +13 -4
  7. package/dist/esm/menu-item/heading-item.js +1 -1
  8. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/menu
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#118691](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118691)
14
+ [`fe3551cf3dd67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe3551cf3dd67) -
15
+ We are testing improvements behind a feature flag. Menu items will support icons regardless of
16
+ their spacing. If this fix is successful it will be available in a later release.
17
+
3
18
  ## 3.0.0
4
19
 
5
20
  ### Major Changes
package/dist/cjs/internal/components/menu-item-primitive.js CHANGED
@@ -9,6 +9,7 @@ var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
11
11
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _primitives = require("@atlaskit/primitives");
13
14
  var _colors = require("@atlaskit/theme/colors");
14
15
  var _menuContext = require("./menu-context");
@@ -25,8 +26,16 @@ var defaultRender = function defaultRender(Component, props) {
25
26
  (0, _react2.jsx)(Component, props)
26
27
  );
27
28
  };
29
+ var beforeAfterElementStylesOld = (0, _react2.css)({
30
+ display: 'flex',
31
+ alignItems: 'center',
32
+ justifyContent: 'center',
33
+ flexShrink: 0
34
+ });
28
35
  var beforeAfterElementStyles = (0, _react2.css)({
29
36
  display: 'flex',
37
+ minWidth: 24,
38
+ minHeight: 24,
30
39
  alignItems: 'center',
31
40
  justifyContent: 'center',
32
41
  flexShrink: 0
@@ -43,14 +52,14 @@ var truncateStyles = (0, _react2.css)({
43
52
  whiteSpace: 'nowrap'
44
53
  });
45
54
  var titleStyles = (0, _react2.css)({
46
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
55
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
47
56
  });
48
57
  var wordBreakStyles = (0, _react2.css)({
49
58
  wordBreak: 'break-word'
50
59
  });
51
60
  var descriptionStyles = (0, _react2.css)({
52
61
  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
53
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
62
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
54
63
  });
55
64
  var disabledDescriptionStyles = (0, _react2.css)({
56
65
  color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -214,7 +223,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
214
223
  testId: testId && "".concat(testId, "--container")
215
224
  }, iconBefore && (0, _react2.jsx)("span", {
216
225
  "data-item-elem-before": true,
217
- css: beforeAfterElementStyles,
226
+ css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
218
227
  "data-testid": testId && "".concat(testId, "--icon-before")
219
228
  }, iconBefore), title && (0, _react2.jsx)(_primitives.Stack, {
220
229
  alignBlock: "center",
@@ -229,7 +238,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
229
238
  css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
230
239
  }, description)), iconAfter && (0, _react2.jsx)("span", {
231
240
  "data-item-elem-after": true,
232
- css: beforeAfterElementStyles,
241
+ css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
233
242
  "data-testid": testId && "".concat(testId, "--icon-after")
234
243
  }, iconAfter))
235
244
  }));
package/dist/cjs/menu-item/heading-item.js CHANGED
@@ -20,7 +20,7 @@ var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className
20
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
21
  var headingStyles = (0, _react2.css)({
22
22
  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
23
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
23
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
24
24
  paddingBlock: "var(--ds-space-0, 0px)",
25
25
  paddingInline: "var(--ds-space-200, 16px)"
26
26
  });
package/dist/es2019/internal/components/menu-item-primitive.js CHANGED
@@ -8,14 +8,23 @@ import { useContext } from 'react';
8
8
  import { ClassNames, css, jsx } from '@emotion/react';
9
9
  import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
10
10
  import FocusRing from '@atlaskit/focus-ring';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { Inline, Stack, xcss } from '@atlaskit/primitives';
12
13
  import { N20, N200, N30 } from '@atlaskit/theme/colors';
13
14
  import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
14
15
  const defaultRender = (Component, props) =>
15
16
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
16
17
  jsx(Component, props);
18
+ const beforeAfterElementStylesOld = css({
19
+ display: 'flex',
20
+ alignItems: 'center',
21
+ justifyContent: 'center',
22
+ flexShrink: 0
23
+ });
17
24
  const beforeAfterElementStyles = css({
18
25
  display: 'flex',
26
+ minWidth: 24,
27
+ minHeight: 24,
19
28
  alignItems: 'center',
20
29
  justifyContent: 'center',
21
30
  flexShrink: 0
@@ -32,14 +41,14 @@ const truncateStyles = css({
32
41
  whiteSpace: 'nowrap'
33
42
  });
34
43
  const titleStyles = css({
35
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
44
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
36
45
  });
37
46
  const wordBreakStyles = css({
38
47
  wordBreak: 'break-word'
39
48
  });
40
49
  const descriptionStyles = css({
41
50
  color: `var(--ds-text-subtlest, ${N200})`,
42
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
51
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
43
52
  });
44
53
  const disabledDescriptionStyles = css({
45
54
  color: `var(--ds-text-disabled, ${N200})`
@@ -201,7 +210,7 @@ const MenuItemPrimitive = ({
201
210
  testId: testId && `${testId}--container`
202
211
  }, iconBefore && jsx("span", {
203
212
  "data-item-elem-before": true,
204
- css: beforeAfterElementStyles,
213
+ css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
205
214
  "data-testid": testId && `${testId}--icon-before`
206
215
  }, iconBefore), title && jsx(Stack, {
207
216
  alignBlock: "center",
@@ -216,7 +225,7 @@ const MenuItemPrimitive = ({
216
225
  css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
217
226
  }, description)), iconAfter && jsx("span", {
218
227
  "data-item-elem-after": true,
219
- css: beforeAfterElementStyles,
228
+ css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
220
229
  "data-testid": testId && `${testId}--icon-after`
221
230
  }, iconAfter))
222
231
  }));
package/dist/es2019/menu-item/heading-item.js CHANGED
@@ -12,7 +12,7 @@ import noop from '@atlaskit/ds-lib/noop';
12
12
  import { N300 } from '@atlaskit/theme/colors';
13
13
  const headingStyles = css({
14
14
  color: `var(--ds-text-subtle, ${N300})`,
15
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
15
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
16
16
  paddingBlock: "var(--ds-space-0, 0px)",
17
17
  paddingInline: "var(--ds-space-200, 16px)"
18
18
  });
package/dist/esm/internal/components/menu-item-primitive.js CHANGED
@@ -8,6 +8,7 @@ import { useContext } from 'react';
8
8
  import { ClassNames, css, jsx } from '@emotion/react';
9
9
  import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
10
10
  import FocusRing from '@atlaskit/focus-ring';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { Inline, Stack, xcss } from '@atlaskit/primitives';
12
13
  import { N20, N200, N30 } from '@atlaskit/theme/colors';
13
14
  import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
@@ -17,8 +18,16 @@ var defaultRender = function defaultRender(Component, props) {
17
18
  jsx(Component, props)
18
19
  );
19
20
  };
21
+ var beforeAfterElementStylesOld = css({
22
+ display: 'flex',
23
+ alignItems: 'center',
24
+ justifyContent: 'center',
25
+ flexShrink: 0
26
+ });
20
27
  var beforeAfterElementStyles = css({
21
28
  display: 'flex',
29
+ minWidth: 24,
30
+ minHeight: 24,
22
31
  alignItems: 'center',
23
32
  justifyContent: 'center',
24
33
  flexShrink: 0
@@ -35,14 +44,14 @@ var truncateStyles = css({
35
44
  whiteSpace: 'nowrap'
36
45
  });
37
46
  var titleStyles = css({
38
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
47
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
39
48
  });
40
49
  var wordBreakStyles = css({
41
50
  wordBreak: 'break-word'
42
51
  });
43
52
  var descriptionStyles = css({
44
53
  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
45
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
54
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
46
55
  });
47
56
  var disabledDescriptionStyles = css({
48
57
  color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -206,7 +215,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
206
215
  testId: testId && "".concat(testId, "--container")
207
216
  }, iconBefore && jsx("span", {
208
217
  "data-item-elem-before": true,
209
- css: beforeAfterElementStyles,
218
+ css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
210
219
  "data-testid": testId && "".concat(testId, "--icon-before")
211
220
  }, iconBefore), title && jsx(Stack, {
212
221
  alignBlock: "center",
@@ -221,7 +230,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
221
230
  css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
222
231
  }, description)), iconAfter && jsx("span", {
223
232
  "data-item-elem-after": true,
224
- css: beforeAfterElementStyles,
233
+ css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
225
234
  "data-testid": testId && "".concat(testId, "--icon-after")
226
235
  }, iconAfter))
227
236
  }));
package/dist/esm/menu-item/heading-item.js CHANGED
@@ -14,7 +14,7 @@ import noop from '@atlaskit/ds-lib/noop';
14
14
  import { N300 } from '@atlaskit/theme/colors';
15
15
  var headingStyles = css({
16
16
  color: "var(--ds-text-subtle, ".concat(N300, ")"),
17
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
17
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
18
18
  paddingBlock: "var(--ds-space-0, 0px)",
19
19
  paddingInline: "var(--ds-space-200, 16px)"
20
20
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "3.0.0",
3
+ "version": "3.1.1",
4
4
  "description": "A list of options to help users navigate, or perform actions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
46
46
  "@atlaskit/focus-ring": "^3.0.0",
47
47
  "@atlaskit/interaction-context": "^3.0.0",
48
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
- "@atlaskit/primitives": "^14.0.0",
50
- "@atlaskit/theme": "^17.0.0",
51
- "@atlaskit/tokens": "^4.0.0",
49
+ "@atlaskit/primitives": "^14.1.0",
50
+ "@atlaskit/theme": "^18.0.0",
51
+ "@atlaskit/tokens": "^4.3.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@emotion/react": "^11.7.1"
54
54
  },
@@ -60,9 +60,9 @@
60
60
  "@af/accessibility-testing": "*",
61
61
  "@af/integration-testing": "*",
62
62
  "@af/visual-regression": "*",
63
- "@atlaskit/button": "^21.0.0",
63
+ "@atlaskit/button": "^21.1.0",
64
64
  "@atlaskit/docs": "*",
65
- "@atlaskit/icon": "^24.0.0",
65
+ "@atlaskit/icon": "^24.1.0",
66
66
  "@atlaskit/icon-file-type": "^7.0.0",
67
67
  "@atlaskit/icon-object": "^7.0.0",
68
68
  "@atlaskit/link": "*",
@@ -121,6 +121,9 @@
121
121
  ".": "./src/index.tsx"
122
122
  },
123
123
  "platform-feature-flags": {
124
+ "platform_ads_component_no_icon_spacing_support": {
125
+ "type": "boolean"
126
+ },
124
127
  "platform_button_item-add-ufo-metrics": {
125
128
  "type": "boolean"
126
129
  }