@atlaskit/menu 1.4.3 → 1.4.4

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 (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/internal/components/menu-item-primitive.js +14 -12
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/internal/components/menu-item-primitive.js +15 -13
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/internal/components/menu-item-primitive.js +15 -13
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
  9. package/report.api.md +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/menu
2
2
 
3
+ ## 1.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f96f3ebd861`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f96f3ebd861) - [ux] Use color.background.neutral.subtle token to represent transparent background.
8
+ - [`981faeea2ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/981faeea2ff) - Application of spacing tokens for some internal styles of `MenuPrimitive`.
9
+ - [`bcbd0c5b5bf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bcbd0c5b5bf) - Fix text color styling of disabled descriptions in menu and link items
10
+
3
11
  ## 1.4.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/internal/components/menu-item-primitive.js CHANGED
@@ -26,22 +26,17 @@ var defaultRender = function defaultRender(Component, props) {
26
26
  );
27
27
  };
28
28
 
29
- var gridSize = (0, _constants.gridSize)();
30
29
  var fontSize = (0, _constants.fontSize)();
31
- var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
32
- var itemSidePadding = "var(--ds-scale-250, 20px)";
33
- var itemElemSpacing = "var(--ds-scale-150, 12px)";
34
- var itemDescriptionSpacing = gridSize * 0.375;
35
30
  var itemMinHeight = "var(--ds-scale-500, 40px)";
36
31
  var beforeElementStyles = (0, _react2.css)({
37
32
  display: 'flex',
38
- marginRight: itemElemSpacing,
33
+ marginRight: "var(--ds-scale-150, 12px)",
39
34
  alignItems: 'center',
40
35
  flexShrink: 0
41
36
  });
42
37
  var afterElementStyles = (0, _react2.css)({
43
38
  display: 'flex',
44
- marginLeft: itemElemSpacing,
39
+ marginLeft: "var(--ds-scale-150, 12px)",
45
40
  alignItems: 'center',
46
41
  flexShrink: 0
47
42
  });
@@ -51,6 +46,7 @@ var contentStyles = (0, _react2.css)({
51
46
  flexDirection: 'column',
52
47
  flexGrow: 1,
53
48
  // Fix - avoid clipped text descenders when using standard 16px line-height
49
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
54
50
  lineHeight: 1.22,
55
51
  outline: 'none',
56
52
  overflow: 'hidden',
@@ -66,10 +62,14 @@ var wordBreakStyles = (0, _react2.css)({
66
62
  wordBreak: 'break-word'
67
63
  });
68
64
  var descriptionStyles = (0, _react2.css)({
69
- marginTop: itemDescriptionSpacing,
65
+ marginTop: "var(--ds-scale-050, 3px)",
70
66
  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
67
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
71
68
  fontSize: _typography.headingSizes.h200.size
72
69
  });
70
+ var disabledDescriptionStyles = (0, _react2.css)({
71
+ color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
72
+ });
73
73
  var primitiveStyles = (0, _react2.css)({
74
74
  display: 'flex',
75
75
  boxSizing: 'border-box',
@@ -77,9 +77,11 @@ var primitiveStyles = (0, _react2.css)({
77
77
  minHeight: itemMinHeight,
78
78
  // TODO Delete this comment after verifying spacing token -> previous value `0`
79
79
  margin: "var(--ds-scale-0, 0px)",
80
- padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
80
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
81
+ padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-250, 20px)"),
81
82
  alignItems: 'center',
82
83
  border: 0,
84
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
83
85
  fontSize: fontSize,
84
86
  outline: 0,
85
87
  textDecoration: 'none',
@@ -95,7 +97,7 @@ var interactiveStyles = (0, _react2.css)({
95
97
  cursor: 'pointer'
96
98
  });
97
99
  var unselectedStyles = (0, _react2.css)({
98
- backgroundColor: 'transparent',
100
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
99
101
  color: 'currentColor',
100
102
  ':visited': {
101
103
  color: 'currentColor'
@@ -113,7 +115,7 @@ var unselectedStyles = (0, _react2.css)({
113
115
  var disabledStyles = (0, _react2.css)({
114
116
  cursor: 'not-allowed',
115
117
  '&, :hover, :active': {
116
- backgroundColor: 'transparent',
118
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
117
119
  color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
118
120
  }
119
121
  });
@@ -183,7 +185,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
183
185
  'data-item-title': true
184
186
  }), description && (0, _react2.jsx)("span", {
185
187
  "data-item-description": true,
186
- css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
188
+ css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
187
189
  }, description)), iconAfter && (0, _react2.jsx)("span", {
188
190
  "data-item-elem-after": true,
189
191
  css: afterElementStyles
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/internal/components/menu-item-primitive.js CHANGED
@@ -3,28 +3,23 @@ import { Fragment } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/react';
4
4
  import FocusRing from '@atlaskit/focus-ring';
5
5
  import { N20, N200, N30 } from '@atlaskit/theme/colors';
6
- import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
6
+ import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
7
7
  import { headingSizes } from '@atlaskit/theme/typography';
8
8
 
9
9
  const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
10
10
  jsx(Component, props);
11
11
 
12
- const gridSize = gridSizeFn();
13
12
  const fontSize = fontSizeFn();
14
- const itemTopBottomPadding = "var(--ds-scale-100, 8px)";
15
- const itemSidePadding = "var(--ds-scale-250, 20px)";
16
- const itemElemSpacing = "var(--ds-scale-150, 12px)";
17
- const itemDescriptionSpacing = gridSize * 0.375;
18
13
  const itemMinHeight = "var(--ds-scale-500, 40px)";
19
14
  const beforeElementStyles = css({
20
15
  display: 'flex',
21
- marginRight: itemElemSpacing,
16
+ marginRight: "var(--ds-scale-150, 12px)",
22
17
  alignItems: 'center',
23
18
  flexShrink: 0
24
19
  });
25
20
  const afterElementStyles = css({
26
21
  display: 'flex',
27
- marginLeft: itemElemSpacing,
22
+ marginLeft: "var(--ds-scale-150, 12px)",
28
23
  alignItems: 'center',
29
24
  flexShrink: 0
30
25
  });
@@ -34,6 +29,7 @@ const contentStyles = css({
34
29
  flexDirection: 'column',
35
30
  flexGrow: 1,
36
31
  // Fix - avoid clipped text descenders when using standard 16px line-height
32
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
37
33
  lineHeight: 1.22,
38
34
  outline: 'none',
39
35
  overflow: 'hidden',
@@ -49,10 +45,14 @@ const wordBreakStyles = css({
49
45
  wordBreak: 'break-word'
50
46
  });
51
47
  const descriptionStyles = css({
52
- marginTop: itemDescriptionSpacing,
48
+ marginTop: "var(--ds-scale-050, 3px)",
53
49
  color: `var(--ds-text-subtlest, ${N200})`,
50
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
54
51
  fontSize: headingSizes.h200.size
55
52
  });
53
+ const disabledDescriptionStyles = css({
54
+ color: `var(--ds-text-disabled, ${N200})`
55
+ });
56
56
  const primitiveStyles = css({
57
57
  display: 'flex',
58
58
  boxSizing: 'border-box',
@@ -60,9 +60,11 @@ const primitiveStyles = css({
60
60
  minHeight: itemMinHeight,
61
61
  // TODO Delete this comment after verifying spacing token -> previous value `0`
62
62
  margin: "var(--ds-scale-0, 0px)",
63
- padding: `${itemTopBottomPadding} ${itemSidePadding}`,
63
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
64
+ padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-250, 20px)"}`,
64
65
  alignItems: 'center',
65
66
  border: 0,
67
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
66
68
  fontSize: fontSize,
67
69
  outline: 0,
68
70
  textDecoration: 'none',
@@ -78,7 +80,7 @@ const interactiveStyles = css({
78
80
  cursor: 'pointer'
79
81
  });
80
82
  const unselectedStyles = css({
81
- backgroundColor: 'transparent',
83
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
82
84
  color: 'currentColor',
83
85
  ':visited': {
84
86
  color: 'currentColor'
@@ -96,7 +98,7 @@ const unselectedStyles = css({
96
98
  const disabledStyles = css({
97
99
  cursor: 'not-allowed',
98
100
  '&, :hover, :active': {
99
- backgroundColor: 'transparent',
101
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
100
102
  color: `var(--ds-text-disabled, ${N200})`
101
103
  }
102
104
  });
@@ -164,7 +166,7 @@ const MenuItemPrimitive = ({
164
166
  'data-item-title': true
165
167
  }), description && jsx("span", {
166
168
  "data-item-description": true,
167
- css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
169
+ css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
168
170
  }, description)), iconAfter && jsx("span", {
169
171
  "data-item-elem-after": true,
170
172
  css: afterElementStyles
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/internal/components/menu-item-primitive.js CHANGED
@@ -3,7 +3,7 @@ import { Fragment } from 'react';
3
3
  import { ClassNames, css, jsx } from '@emotion/react';
4
4
  import FocusRing from '@atlaskit/focus-ring';
5
5
  import { N20, N200, N30 } from '@atlaskit/theme/colors';
6
- import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
6
+ import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
7
7
  import { headingSizes } from '@atlaskit/theme/typography';
8
8
 
9
9
  var defaultRender = function defaultRender(Component, props) {
@@ -12,22 +12,17 @@ var defaultRender = function defaultRender(Component, props) {
12
12
  );
13
13
  };
14
14
 
15
- var gridSize = gridSizeFn();
16
15
  var fontSize = fontSizeFn();
17
- var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
18
- var itemSidePadding = "var(--ds-scale-250, 20px)";
19
- var itemElemSpacing = "var(--ds-scale-150, 12px)";
20
- var itemDescriptionSpacing = gridSize * 0.375;
21
16
  var itemMinHeight = "var(--ds-scale-500, 40px)";
22
17
  var beforeElementStyles = css({
23
18
  display: 'flex',
24
- marginRight: itemElemSpacing,
19
+ marginRight: "var(--ds-scale-150, 12px)",
25
20
  alignItems: 'center',
26
21
  flexShrink: 0
27
22
  });
28
23
  var afterElementStyles = css({
29
24
  display: 'flex',
30
- marginLeft: itemElemSpacing,
25
+ marginLeft: "var(--ds-scale-150, 12px)",
31
26
  alignItems: 'center',
32
27
  flexShrink: 0
33
28
  });
@@ -37,6 +32,7 @@ var contentStyles = css({
37
32
  flexDirection: 'column',
38
33
  flexGrow: 1,
39
34
  // Fix - avoid clipped text descenders when using standard 16px line-height
35
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
40
36
  lineHeight: 1.22,
41
37
  outline: 'none',
42
38
  overflow: 'hidden',
@@ -52,10 +48,14 @@ var wordBreakStyles = css({
52
48
  wordBreak: 'break-word'
53
49
  });
54
50
  var descriptionStyles = css({
55
- marginTop: itemDescriptionSpacing,
51
+ marginTop: "var(--ds-scale-050, 3px)",
56
52
  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
53
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
57
54
  fontSize: headingSizes.h200.size
58
55
  });
56
+ var disabledDescriptionStyles = css({
57
+ color: "var(--ds-text-disabled, ".concat(N200, ")")
58
+ });
59
59
  var primitiveStyles = css({
60
60
  display: 'flex',
61
61
  boxSizing: 'border-box',
@@ -63,9 +63,11 @@ var primitiveStyles = css({
63
63
  minHeight: itemMinHeight,
64
64
  // TODO Delete this comment after verifying spacing token -> previous value `0`
65
65
  margin: "var(--ds-scale-0, 0px)",
66
- padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
66
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
67
+ padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-250, 20px)"),
67
68
  alignItems: 'center',
68
69
  border: 0,
70
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
69
71
  fontSize: fontSize,
70
72
  outline: 0,
71
73
  textDecoration: 'none',
@@ -81,7 +83,7 @@ var interactiveStyles = css({
81
83
  cursor: 'pointer'
82
84
  });
83
85
  var unselectedStyles = css({
84
- backgroundColor: 'transparent',
86
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
85
87
  color: 'currentColor',
86
88
  ':visited': {
87
89
  color: 'currentColor'
@@ -99,7 +101,7 @@ var unselectedStyles = css({
99
101
  var disabledStyles = css({
100
102
  cursor: 'not-allowed',
101
103
  '&, :hover, :active': {
102
- backgroundColor: 'transparent',
104
+ backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
103
105
  color: "var(--ds-text-disabled, ".concat(N200, ")")
104
106
  }
105
107
  });
@@ -169,7 +171,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
169
171
  'data-item-title': true
170
172
  }), description && jsx("span", {
171
173
  "data-item-description": true,
172
- css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
174
+ css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
173
175
  }, description)), iconAfter && jsx("span", {
174
176
  "data-item-elem-after": true,
175
177
  css: afterElementStyles
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "description": "A collection of composable menu components that can be used anywhere.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/menu"
4
4