@atlaskit/menu 1.11.1 → 2.0.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 (5) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/internal/components/menu-item-primitive.js +15 -27
  3. package/dist/es2019/internal/components/menu-item-primitive.js +15 -27
  4. package/dist/esm/internal/components/menu-item-primitive.js +15 -27
  5. package/package.json +2 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/menu
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
8
+
9
+ ## 2.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - [#41355](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41355) [`cd1c813da18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd1c813da18) - Menu items now have a secondary selected state (border or notch), this was previously feature flagged for Atlassian experiences and is now available for everyone.
14
+
15
+ This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
16
+
17
+ For example the below code code previously the `div` would be positioned relatively to the menu group element. Now, it is positioned relatively to the button item element.
18
+
19
+ ```jsx
20
+ <MenuGroup>
21
+ <ButtonItem>
22
+ <div style={{ position: 'absolute', top: '100%' }} />
23
+ </ButtonItem>
24
+ </MenuGroup>
25
+ ```
26
+
27
+ As a path forward you should not be leaning on this behaviour. If you need a popup experience use `@atlaskit/dropdown-menu` or `@atlaskit/popup`.
28
+
3
29
  ## 1.11.1
4
30
 
5
31
  ### Patch Changes
package/dist/cjs/internal/components/menu-item-primitive.js CHANGED
@@ -34,34 +34,22 @@ var contentStyles = (0, _react2.css)({
34
34
  flexGrow: 1,
35
35
  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
36
36
  outline: 'none',
37
- textAlign: 'left',
38
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
39
- '@supports not (overflow-x: clip)': {
40
- overflow: 'hidden'
41
- },
42
- '@supports (overflow-x: clip)': {
43
- overflowX: 'clip'
44
- }
37
+ overflow: 'hidden',
38
+ textAlign: 'left'
45
39
  });
46
40
  var truncateStyles = (0, _react2.css)({
47
41
  display: 'block',
42
+ overflow: 'hidden',
48
43
  textOverflow: 'ellipsis',
49
- whiteSpace: 'nowrap',
50
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
51
- '@supports not (overflow-x: clip)': {
52
- overflow: 'hidden'
53
- },
54
- '@supports (overflow-x: clip)': {
55
- overflowX: 'clip'
56
- }
44
+ whiteSpace: 'nowrap'
57
45
  });
58
46
  var wordBreakStyles = (0, _react2.css)({
59
47
  wordBreak: 'break-word'
60
48
  });
61
49
  var descriptionStyles = (0, _react2.css)({
50
+ marginTop: "var(--ds-space-050, 4px)",
62
51
  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
63
- fontSize: "var(--ds-font-size-075, 12px)",
64
- marginBlockStart: "var(--ds-space-050, 4px)"
52
+ fontSize: "var(--ds-font-size-075, 12px)"
65
53
  });
66
54
  var disabledDescriptionStyles = (0, _react2.css)({
67
55
  color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -131,23 +119,23 @@ var selectedBorderStyles = (0, _react2.css)({
131
119
  '&::before': {
132
120
  width: 2,
133
121
  position: 'absolute',
122
+ top: 0,
123
+ bottom: 0,
124
+ left: 0,
134
125
  background: "var(--ds-border-selected, transparent)",
135
- content: '""',
136
- insetBlockEnd: 0,
137
- insetBlockStart: 0,
138
- insetInlineStart: 0
126
+ content: '""'
139
127
  }
140
128
  });
141
129
  var selectedNotchStyles = (0, _react2.css)({
142
130
  '&::before': {
143
131
  width: 4,
144
132
  position: 'absolute',
133
+ top: "var(--ds-space-150, 12px)",
134
+ bottom: "var(--ds-space-150, 12px)",
135
+ left: 0,
145
136
  background: "var(--ds-border-selected, transparent)",
146
137
  borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
147
- content: '""',
148
- insetBlockEnd: "var(--ds-space-150, 12px)",
149
- insetBlockStart: "var(--ds-space-150, 12px)",
150
- insetInlineStart: 0
138
+ content: '""'
151
139
  }
152
140
  });
153
141
  var selectedStyles = (0, _react2.css)({
@@ -214,7 +202,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
214
202
  return (0, _react2.jsx)(_focusRing.default, {
215
203
  isInset: true
216
204
  }, children({
217
- className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
205
+ className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
218
206
  children: (0, _react2.jsx)(_inline.default, {
219
207
  as: "span",
220
208
  spread: "space-between",
package/dist/es2019/internal/components/menu-item-primitive.js CHANGED
@@ -23,34 +23,22 @@ const contentStyles = css({
23
23
  flexGrow: 1,
24
24
  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
25
25
  outline: 'none',
26
- textAlign: 'left',
27
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
28
- '@supports not (overflow-x: clip)': {
29
- overflow: 'hidden'
30
- },
31
- '@supports (overflow-x: clip)': {
32
- overflowX: 'clip'
33
- }
26
+ overflow: 'hidden',
27
+ textAlign: 'left'
34
28
  });
35
29
  const truncateStyles = css({
36
30
  display: 'block',
31
+ overflow: 'hidden',
37
32
  textOverflow: 'ellipsis',
38
- whiteSpace: 'nowrap',
39
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
40
- '@supports not (overflow-x: clip)': {
41
- overflow: 'hidden'
42
- },
43
- '@supports (overflow-x: clip)': {
44
- overflowX: 'clip'
45
- }
33
+ whiteSpace: 'nowrap'
46
34
  });
47
35
  const wordBreakStyles = css({
48
36
  wordBreak: 'break-word'
49
37
  });
50
38
  const descriptionStyles = css({
39
+ marginTop: "var(--ds-space-050, 4px)",
51
40
  color: `var(--ds-text-subtlest, ${N200})`,
52
- fontSize: "var(--ds-font-size-075, 12px)",
53
- marginBlockStart: "var(--ds-space-050, 4px)"
41
+ fontSize: "var(--ds-font-size-075, 12px)"
54
42
  });
55
43
  const disabledDescriptionStyles = css({
56
44
  color: `var(--ds-text-disabled, ${N200})`
@@ -120,23 +108,23 @@ const selectedBorderStyles = css({
120
108
  '&::before': {
121
109
  width: 2,
122
110
  position: 'absolute',
111
+ top: 0,
112
+ bottom: 0,
113
+ left: 0,
123
114
  background: "var(--ds-border-selected, transparent)",
124
- content: '""',
125
- insetBlockEnd: 0,
126
- insetBlockStart: 0,
127
- insetInlineStart: 0
115
+ content: '""'
128
116
  }
129
117
  });
130
118
  const selectedNotchStyles = css({
131
119
  '&::before': {
132
120
  width: 4,
133
121
  position: 'absolute',
122
+ top: "var(--ds-space-150, 12px)",
123
+ bottom: "var(--ds-space-150, 12px)",
124
+ left: 0,
134
125
  background: "var(--ds-border-selected, transparent)",
135
126
  borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
136
- content: '""',
137
- insetBlockEnd: "var(--ds-space-150, 12px)",
138
- insetBlockStart: "var(--ds-space-150, 12px)",
139
- insetInlineStart: 0
127
+ content: '""'
140
128
  }
141
129
  });
142
130
  const selectedStyles = css({
@@ -201,7 +189,7 @@ const MenuItemPrimitive = ({
201
189
  return jsx(FocusRing, {
202
190
  isInset: true
203
191
  }, children({
204
- className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
192
+ className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
205
193
  children: jsx(Inline, {
206
194
  as: "span",
207
195
  spread: "space-between",
package/dist/esm/internal/components/menu-item-primitive.js CHANGED
@@ -26,34 +26,22 @@ var contentStyles = css({
26
26
  flexGrow: 1,
27
27
  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
28
28
  outline: 'none',
29
- textAlign: 'left',
30
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
31
- '@supports not (overflow-x: clip)': {
32
- overflow: 'hidden'
33
- },
34
- '@supports (overflow-x: clip)': {
35
- overflowX: 'clip'
36
- }
29
+ overflow: 'hidden',
30
+ textAlign: 'left'
37
31
  });
38
32
  var truncateStyles = css({
39
33
  display: 'block',
34
+ overflow: 'hidden',
40
35
  textOverflow: 'ellipsis',
41
- whiteSpace: 'nowrap',
42
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
43
- '@supports not (overflow-x: clip)': {
44
- overflow: 'hidden'
45
- },
46
- '@supports (overflow-x: clip)': {
47
- overflowX: 'clip'
48
- }
36
+ whiteSpace: 'nowrap'
49
37
  });
50
38
  var wordBreakStyles = css({
51
39
  wordBreak: 'break-word'
52
40
  });
53
41
  var descriptionStyles = css({
42
+ marginTop: "var(--ds-space-050, 4px)",
54
43
  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
55
- fontSize: "var(--ds-font-size-075, 12px)",
56
- marginBlockStart: "var(--ds-space-050, 4px)"
44
+ fontSize: "var(--ds-font-size-075, 12px)"
57
45
  });
58
46
  var disabledDescriptionStyles = css({
59
47
  color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -123,23 +111,23 @@ var selectedBorderStyles = css({
123
111
  '&::before': {
124
112
  width: 2,
125
113
  position: 'absolute',
114
+ top: 0,
115
+ bottom: 0,
116
+ left: 0,
126
117
  background: "var(--ds-border-selected, transparent)",
127
- content: '""',
128
- insetBlockEnd: 0,
129
- insetBlockStart: 0,
130
- insetInlineStart: 0
118
+ content: '""'
131
119
  }
132
120
  });
133
121
  var selectedNotchStyles = css({
134
122
  '&::before': {
135
123
  width: 4,
136
124
  position: 'absolute',
125
+ top: "var(--ds-space-150, 12px)",
126
+ bottom: "var(--ds-space-150, 12px)",
127
+ left: 0,
137
128
  background: "var(--ds-border-selected, transparent)",
138
129
  borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
139
- content: '""',
140
- insetBlockEnd: "var(--ds-space-150, 12px)",
141
- insetBlockStart: "var(--ds-space-150, 12px)",
142
- insetInlineStart: 0
130
+ content: '""'
143
131
  }
144
132
  });
145
133
  var selectedStyles = css({
@@ -206,7 +194,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
206
194
  return jsx(FocusRing, {
207
195
  isInset: true
208
196
  }, children({
209
- className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
197
+ className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
210
198
  children: jsx(Inline, {
211
199
  as: "span",
212
200
  spread: "space-between",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.11.1",
3
+ "version": "2.0.1",
4
4
  "description": "A collection of composable menu components that can be used anywhere.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/platform-feature-flags": "^0.2.0",
32
32
  "@atlaskit/primitives": "^1.6.0",
33
33
  "@atlaskit/theme": "^12.6.0",
34
- "@atlaskit/tokens": "^1.25.0",
34
+ "@atlaskit/tokens": "^1.26.0",
35
35
  "@babel/runtime": "^7.0.0",
36
36
  "@emotion/react": "^11.7.1"
37
37
  },
@@ -104,9 +104,6 @@
104
104
  ".": "./src/index.tsx"
105
105
  },
106
106
  "platform-feature-flags": {
107
- "platform.design-system-team.menu-selected-state-change_0see9": {
108
- "type": "boolean"
109
- },
110
107
  "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
111
108
  "type": "boolean"
112
109
  }