carbon-react 141.0.3 → 141.0.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.
@@ -30,8 +30,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
30
30
  hasInput
31
31
  }) => css`
32
32
  ${!inFullscreenView && css`
33
- ${padding}
34
- `}
33
+ ${padding}
34
+ `}
35
+
35
36
  display: inline-block;
36
37
  font-size: 14px;
37
38
  font-weight: 700;
@@ -44,67 +45,73 @@ const StyledMenuItemWrapper = styled.a.attrs({
44
45
  cursor: pointer;
45
46
  }
46
47
 
47
- a:focus,
48
- button:focus {
49
- ${({
48
+ a:focus,
49
+ button:focus {
50
+ ${({
50
51
  theme
51
- }) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}`}
52
- }
52
+ }) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
53
+ `}
54
+ }
55
+
56
+ a button:not(.search-button) {
57
+ position: relative;
58
+ top: -1px;
53
59
  }
54
60
 
55
61
  ${!overrideColor && css`
56
- background-color: ${menuConfigVariants[menuType].background};
57
- `}
62
+ background-color: ${menuConfigVariants[menuType].background};
63
+ `}
58
64
 
59
65
  ${overrideColor && css`
60
- &&&& {
61
- background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
62
- }
63
- `}
66
+ &&&& {
67
+ background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
68
+ }
69
+ `}
64
70
 
65
71
  ${!inFullscreenView && css`
66
- max-width: inherit;
67
-
68
- && {
69
- a:focus,
70
- button:focus {
71
- background-color: ${menuConfigVariants[menuType].background};
72
- color: ${menuConfigVariants[menuType].color};
73
- z-index: 1;
74
- position: relative;
75
- }
76
- }
72
+ max-width: inherit;
77
73
 
78
- &&& {
79
- a,
80
- button {
81
- ${maxWidth && css`
82
- box-sizing: border-box;
83
- max-width: inherit;
84
- text-overflow: ellipsis;
85
- overflow: hidden;
86
- white-space: nowrap;
87
- vertical-align: bottom;
88
- `}
89
- }
74
+ && {
75
+ a:focus,
76
+ button:focus {
77
+ background-color: ${menuConfigVariants[menuType].background};
78
+ color: ${menuConfigVariants[menuType].color};
79
+ z-index: 1;
80
+ position: relative;
81
+ }
82
+ }
90
83
 
91
- a:hover,
92
- button:hover {
93
- ${!asDiv && css`
94
- background-color: var(--colorsComponentsMenuAutumnStandard600);
95
- color: var(--colorsComponentsMenuYang100);
84
+ &&& {
85
+ a,
86
+ button {
87
+ ${maxWidth && css`
88
+ box-sizing: border-box;
89
+ max-width: inherit;
90
+ text-overflow: ellipsis;
91
+ overflow: hidden;
92
+ white-space: nowrap;
93
+ vertical-align: bottom;
94
+ `}
95
+ height: 40px;
96
+ }
96
97
 
97
- [data-component="icon"] {
98
- color: var(--colorsComponentsMenuYang100);
99
- }
100
- `}
98
+ a:hover,
99
+ button:hover {
100
+ ${!asDiv && css`
101
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
102
+ color: var(--colorsComponentsMenuYang100);
101
103
 
102
- ::before {
103
- border-top-color: var(--colorsComponentsMenuYang100);
104
+ [data-component="icon"] {
105
+ color: var(--colorsComponentsMenuYang100);
104
106
  }
107
+ `}
108
+
109
+ ::before {
110
+ border-top-color: var(--colorsComponentsMenuYang100);
105
111
  }
106
112
  }
107
- `}
113
+ }
114
+ `}
108
115
 
109
116
  ${asPassiveItem ? `
110
117
  ${StyledIconButton} {
@@ -137,9 +144,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
137
144
  text-align: left;
138
145
 
139
146
  ${inFullscreenView && css`
140
- height: auto;
141
- white-space: normal;
142
- `}
147
+ height: auto;
148
+ white-space: normal;
149
+ `}
143
150
  }
144
151
 
145
152
  &&& {
@@ -155,127 +162,127 @@ const StyledMenuItemWrapper = styled.a.attrs({
155
162
  }
156
163
 
157
164
  ${!inFullscreenView && css`
158
- a > ${StyledIcon}, button > ${StyledIcon} {
159
- display: inline-block;
160
- }
161
- `}
165
+ a > ${StyledIcon}, button > ${StyledIcon} {
166
+ display: inline-block;
167
+ }
168
+ `}
162
169
  }
163
170
 
164
171
  ${selected && css`
172
+ background-color: ${menuConfigVariants[menuType].selected};
173
+
174
+ a:focus,
175
+ button:focus {
165
176
  background-color: ${menuConfigVariants[menuType].selected};
177
+ }
166
178
 
167
- a:focus,
168
- button:focus {
169
- background-color: ${menuConfigVariants[menuType].selected};
170
- }
179
+ a:hover,
180
+ button:hover {
181
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
182
+ }
183
+ `}
171
184
 
172
- a:hover,
173
- button:hover {
174
- background-color: var(--colorsComponentsMenuAutumnStandard600);
185
+ ${variant === "alternate" && !inFullscreenView && css`
186
+ &&& {
187
+ background-color: ${menuConfigVariants[menuType].alternate};
188
+ }
189
+
190
+ &&& a:focus,
191
+ &&& button:focus {
192
+ background-color: ${menuConfigVariants[menuType].alternate};
193
+ }
194
+
195
+ ${!hasInput && css`
196
+ &&& a:hover,
197
+ &&& button:hover {
198
+ background-color: ${menuConfigVariants[menuType].alternateHover};
175
199
  }
176
200
  `}
201
+ `}
177
202
 
178
- ${variant === "alternate" && !inFullscreenView && css`
179
- &&& {
180
- background-color: ${menuConfigVariants[menuType].alternate};
181
- }
203
+ ${isOpen && css`
204
+ a,
205
+ button {
206
+ background-color: ${menuConfigVariants[menuType].submenuItemBackground};
207
+ color: ${menuConfigVariants[menuType].color};
208
+ }
209
+ `}
210
+
211
+ ${hasSubmenu && css`
212
+ background-color: ${menuConfigVariants[menuType].submenuBackground};
213
+
214
+ a:focus,
215
+ button:focus {
216
+ background-color: ${menuConfigVariants[menuType].submenuBackground};
217
+ color: ${menuConfigVariants[menuType].color};
182
218
 
183
- &&& a:focus,
184
- &&& button:focus {
185
- background-color: ${menuConfigVariants[menuType].alternate};
219
+ [data-component="icon"] {
220
+ color: ${menuConfigVariants[menuType].color};
186
221
  }
187
222
 
188
- ${!hasInput && css`
189
- &&& a:hover,
190
- &&& button:hover {
191
- background-color: ${menuConfigVariants[menuType].alternateHover};
192
- }
223
+ ${clickToOpen && isOpen && css`
224
+ background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
193
225
  `}
194
- `}
226
+ }
195
227
 
196
- ${isOpen && css`
197
- a,
198
- button {
228
+ a:hover,
229
+ button:hover {
230
+ background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
231
+ color: var(--colorsComponentsMenuYang100);
232
+
233
+ ${!(href || clickToOpen) && css`
234
+ cursor: default;
199
235
  background-color: ${menuConfigVariants[menuType].submenuItemBackground};
200
236
  color: ${menuConfigVariants[menuType].color};
237
+ `}
238
+
239
+ [data-component="icon"] {
240
+ color: ${menuConfigVariants[menuType].color};
201
241
  }
202
- `}
242
+ }
203
243
 
204
- ${hasSubmenu && css`
205
- background-color: ${menuConfigVariants[menuType].submenuBackground};
244
+ ${selected && css`
245
+ background-color: ${menuConfigVariants[menuType].submenuSelected};
206
246
 
207
247
  a:focus,
208
248
  button:focus {
209
- background-color: ${menuConfigVariants[menuType].submenuBackground};
210
- color: ${menuConfigVariants[menuType].color};
211
-
212
- [data-component="icon"] {
213
- color: ${menuConfigVariants[menuType].color};
214
- }
215
-
216
- ${clickToOpen && isOpen && css`
217
- background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
218
- `}
249
+ background-color: ${menuConfigVariants[menuType].submenuSelected};
219
250
  }
220
251
 
221
252
  a:hover,
222
253
  button:hover {
223
- background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
254
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
224
255
  color: var(--colorsComponentsMenuYang100);
225
-
226
- ${!(href || clickToOpen) && css`
227
- cursor: default;
228
- background-color: ${menuConfigVariants[menuType].submenuItemBackground};
229
- color: ${menuConfigVariants[menuType].color};
230
- `}
231
-
232
- [data-component="icon"] {
233
- color: ${menuConfigVariants[menuType].color};
234
- }
235
256
  }
257
+ `}
236
258
 
237
- ${selected && css`
238
- background-color: ${menuConfigVariants[menuType].submenuSelected};
239
-
240
- a:focus,
241
- button:focus {
242
- background-color: ${menuConfigVariants[menuType].submenuSelected};
243
- }
244
-
245
- a:hover,
246
- button:hover {
247
- background-color: var(--colorsComponentsMenuAutumnStandard600);
248
- color: var(--colorsComponentsMenuYang100);
249
- }
250
- `}
251
-
252
- ${showDropdownArrow && css`
253
- > a,
254
- > button:not(${StyledIconButton}) {
255
- padding-right: 32px;
256
- }
259
+ ${showDropdownArrow && css`
260
+ > a,
261
+ > button:not(${StyledIconButton}) {
262
+ padding-right: 32px;
263
+ }
257
264
 
258
- a::before,
259
- button::before {
260
- display: block;
261
- margin-top: -2px;
262
- pointer-events: none;
263
- position: absolute;
264
- right: 16px;
265
- top: 50%;
266
- z-index: 2;
267
- content: "";
268
- width: 0;
269
- height: 0;
270
- border-width: 5px 4px 4px;
271
- border-style: solid;
272
- border-top-color: initial;
273
- border-right-color: transparent;
274
- border-bottom-color: transparent;
275
- border-left-color: transparent;
276
- }
277
- `}
265
+ a::before,
266
+ button::before {
267
+ display: block;
268
+ margin-top: -2px;
269
+ pointer-events: none;
270
+ position: absolute;
271
+ right: 16px;
272
+ top: 50%;
273
+ z-index: 2;
274
+ content: "";
275
+ width: 0;
276
+ height: 0;
277
+ border-width: 5px 4px 4px;
278
+ border-style: solid;
279
+ border-top-color: initial;
280
+ border-right-color: transparent;
281
+ border-bottom-color: transparent;
282
+ border-left-color: transparent;
283
+ }
278
284
  `}
285
+ `}
279
286
 
280
287
  ${inFullscreenView && css`
281
288
  ${asDiv && css`
@@ -39,8 +39,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
39
39
  hasInput
40
40
  }) => (0, _styledComponents.css)`
41
41
  ${!inFullscreenView && (0, _styledComponents.css)`
42
- ${_styledSystem.padding}
43
- `}
42
+ ${_styledSystem.padding}
43
+ `}
44
+
44
45
  display: inline-block;
45
46
  font-size: 14px;
46
47
  font-weight: 700;
@@ -53,67 +54,73 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
53
54
  cursor: pointer;
54
55
  }
55
56
 
56
- a:focus,
57
- button:focus {
58
- ${({
57
+ a:focus,
58
+ button:focus {
59
+ ${({
59
60
  theme
60
- }) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}`}
61
- }
61
+ }) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
62
+ `}
63
+ }
64
+
65
+ a button:not(.search-button) {
66
+ position: relative;
67
+ top: -1px;
62
68
  }
63
69
 
64
70
  ${!overrideColor && (0, _styledComponents.css)`
65
- background-color: ${_menu.default[menuType].background};
66
- `}
71
+ background-color: ${_menu.default[menuType].background};
72
+ `}
67
73
 
68
74
  ${overrideColor && (0, _styledComponents.css)`
69
- &&&& {
70
- background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
71
- }
72
- `}
75
+ &&&& {
76
+ background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
77
+ }
78
+ `}
73
79
 
74
80
  ${!inFullscreenView && (0, _styledComponents.css)`
75
- max-width: inherit;
76
-
77
- && {
78
- a:focus,
79
- button:focus {
80
- background-color: ${_menu.default[menuType].background};
81
- color: ${_menu.default[menuType].color};
82
- z-index: 1;
83
- position: relative;
84
- }
85
- }
81
+ max-width: inherit;
86
82
 
87
- &&& {
88
- a,
89
- button {
90
- ${maxWidth && (0, _styledComponents.css)`
91
- box-sizing: border-box;
92
- max-width: inherit;
93
- text-overflow: ellipsis;
94
- overflow: hidden;
95
- white-space: nowrap;
96
- vertical-align: bottom;
97
- `}
98
- }
83
+ && {
84
+ a:focus,
85
+ button:focus {
86
+ background-color: ${_menu.default[menuType].background};
87
+ color: ${_menu.default[menuType].color};
88
+ z-index: 1;
89
+ position: relative;
90
+ }
91
+ }
99
92
 
100
- a:hover,
101
- button:hover {
102
- ${!asDiv && (0, _styledComponents.css)`
103
- background-color: var(--colorsComponentsMenuAutumnStandard600);
104
- color: var(--colorsComponentsMenuYang100);
93
+ &&& {
94
+ a,
95
+ button {
96
+ ${maxWidth && (0, _styledComponents.css)`
97
+ box-sizing: border-box;
98
+ max-width: inherit;
99
+ text-overflow: ellipsis;
100
+ overflow: hidden;
101
+ white-space: nowrap;
102
+ vertical-align: bottom;
103
+ `}
104
+ height: 40px;
105
+ }
105
106
 
106
- [data-component="icon"] {
107
- color: var(--colorsComponentsMenuYang100);
108
- }
109
- `}
107
+ a:hover,
108
+ button:hover {
109
+ ${!asDiv && (0, _styledComponents.css)`
110
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
111
+ color: var(--colorsComponentsMenuYang100);
110
112
 
111
- ::before {
112
- border-top-color: var(--colorsComponentsMenuYang100);
113
+ [data-component="icon"] {
114
+ color: var(--colorsComponentsMenuYang100);
113
115
  }
116
+ `}
117
+
118
+ ::before {
119
+ border-top-color: var(--colorsComponentsMenuYang100);
114
120
  }
115
121
  }
116
- `}
122
+ }
123
+ `}
117
124
 
118
125
  ${asPassiveItem ? `
119
126
  ${_iconButton.default} {
@@ -146,9 +153,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
146
153
  text-align: left;
147
154
 
148
155
  ${inFullscreenView && (0, _styledComponents.css)`
149
- height: auto;
150
- white-space: normal;
151
- `}
156
+ height: auto;
157
+ white-space: normal;
158
+ `}
152
159
  }
153
160
 
154
161
  &&& {
@@ -164,127 +171,127 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
164
171
  }
165
172
 
166
173
  ${!inFullscreenView && (0, _styledComponents.css)`
167
- a > ${_icon.default}, button > ${_icon.default} {
168
- display: inline-block;
169
- }
170
- `}
174
+ a > ${_icon.default}, button > ${_icon.default} {
175
+ display: inline-block;
176
+ }
177
+ `}
171
178
  }
172
179
 
173
180
  ${selected && (0, _styledComponents.css)`
181
+ background-color: ${_menu.default[menuType].selected};
182
+
183
+ a:focus,
184
+ button:focus {
174
185
  background-color: ${_menu.default[menuType].selected};
186
+ }
175
187
 
176
- a:focus,
177
- button:focus {
178
- background-color: ${_menu.default[menuType].selected};
179
- }
188
+ a:hover,
189
+ button:hover {
190
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
191
+ }
192
+ `}
180
193
 
181
- a:hover,
182
- button:hover {
183
- background-color: var(--colorsComponentsMenuAutumnStandard600);
194
+ ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
195
+ &&& {
196
+ background-color: ${_menu.default[menuType].alternate};
197
+ }
198
+
199
+ &&& a:focus,
200
+ &&& button:focus {
201
+ background-color: ${_menu.default[menuType].alternate};
202
+ }
203
+
204
+ ${!hasInput && (0, _styledComponents.css)`
205
+ &&& a:hover,
206
+ &&& button:hover {
207
+ background-color: ${_menu.default[menuType].alternateHover};
184
208
  }
185
209
  `}
210
+ `}
186
211
 
187
- ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
188
- &&& {
189
- background-color: ${_menu.default[menuType].alternate};
190
- }
212
+ ${isOpen && (0, _styledComponents.css)`
213
+ a,
214
+ button {
215
+ background-color: ${_menu.default[menuType].submenuItemBackground};
216
+ color: ${_menu.default[menuType].color};
217
+ }
218
+ `}
219
+
220
+ ${hasSubmenu && (0, _styledComponents.css)`
221
+ background-color: ${_menu.default[menuType].submenuBackground};
222
+
223
+ a:focus,
224
+ button:focus {
225
+ background-color: ${_menu.default[menuType].submenuBackground};
226
+ color: ${_menu.default[menuType].color};
191
227
 
192
- &&& a:focus,
193
- &&& button:focus {
194
- background-color: ${_menu.default[menuType].alternate};
228
+ [data-component="icon"] {
229
+ color: ${_menu.default[menuType].color};
195
230
  }
196
231
 
197
- ${!hasInput && (0, _styledComponents.css)`
198
- &&& a:hover,
199
- &&& button:hover {
200
- background-color: ${_menu.default[menuType].alternateHover};
201
- }
232
+ ${clickToOpen && isOpen && (0, _styledComponents.css)`
233
+ background-color: ${_menu.default[menuType].submenuOpenedBackground};
202
234
  `}
203
- `}
235
+ }
204
236
 
205
- ${isOpen && (0, _styledComponents.css)`
206
- a,
207
- button {
237
+ a:hover,
238
+ button:hover {
239
+ background-color: ${_menu.default[menuType].submenuOpenedBackground};
240
+ color: var(--colorsComponentsMenuYang100);
241
+
242
+ ${!(href || clickToOpen) && (0, _styledComponents.css)`
243
+ cursor: default;
208
244
  background-color: ${_menu.default[menuType].submenuItemBackground};
209
245
  color: ${_menu.default[menuType].color};
246
+ `}
247
+
248
+ [data-component="icon"] {
249
+ color: ${_menu.default[menuType].color};
210
250
  }
211
- `}
251
+ }
212
252
 
213
- ${hasSubmenu && (0, _styledComponents.css)`
214
- background-color: ${_menu.default[menuType].submenuBackground};
253
+ ${selected && (0, _styledComponents.css)`
254
+ background-color: ${_menu.default[menuType].submenuSelected};
215
255
 
216
256
  a:focus,
217
257
  button:focus {
218
- background-color: ${_menu.default[menuType].submenuBackground};
219
- color: ${_menu.default[menuType].color};
220
-
221
- [data-component="icon"] {
222
- color: ${_menu.default[menuType].color};
223
- }
224
-
225
- ${clickToOpen && isOpen && (0, _styledComponents.css)`
226
- background-color: ${_menu.default[menuType].submenuOpenedBackground};
227
- `}
258
+ background-color: ${_menu.default[menuType].submenuSelected};
228
259
  }
229
260
 
230
261
  a:hover,
231
262
  button:hover {
232
- background-color: ${_menu.default[menuType].submenuOpenedBackground};
263
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
233
264
  color: var(--colorsComponentsMenuYang100);
234
-
235
- ${!(href || clickToOpen) && (0, _styledComponents.css)`
236
- cursor: default;
237
- background-color: ${_menu.default[menuType].submenuItemBackground};
238
- color: ${_menu.default[menuType].color};
239
- `}
240
-
241
- [data-component="icon"] {
242
- color: ${_menu.default[menuType].color};
243
- }
244
265
  }
266
+ `}
245
267
 
246
- ${selected && (0, _styledComponents.css)`
247
- background-color: ${_menu.default[menuType].submenuSelected};
248
-
249
- a:focus,
250
- button:focus {
251
- background-color: ${_menu.default[menuType].submenuSelected};
252
- }
253
-
254
- a:hover,
255
- button:hover {
256
- background-color: var(--colorsComponentsMenuAutumnStandard600);
257
- color: var(--colorsComponentsMenuYang100);
258
- }
259
- `}
260
-
261
- ${showDropdownArrow && (0, _styledComponents.css)`
262
- > a,
263
- > button:not(${_iconButton.default}) {
264
- padding-right: 32px;
265
- }
268
+ ${showDropdownArrow && (0, _styledComponents.css)`
269
+ > a,
270
+ > button:not(${_iconButton.default}) {
271
+ padding-right: 32px;
272
+ }
266
273
 
267
- a::before,
268
- button::before {
269
- display: block;
270
- margin-top: -2px;
271
- pointer-events: none;
272
- position: absolute;
273
- right: 16px;
274
- top: 50%;
275
- z-index: 2;
276
- content: "";
277
- width: 0;
278
- height: 0;
279
- border-width: 5px 4px 4px;
280
- border-style: solid;
281
- border-top-color: initial;
282
- border-right-color: transparent;
283
- border-bottom-color: transparent;
284
- border-left-color: transparent;
285
- }
286
- `}
274
+ a::before,
275
+ button::before {
276
+ display: block;
277
+ margin-top: -2px;
278
+ pointer-events: none;
279
+ position: absolute;
280
+ right: 16px;
281
+ top: 50%;
282
+ z-index: 2;
283
+ content: "";
284
+ width: 0;
285
+ height: 0;
286
+ border-width: 5px 4px 4px;
287
+ border-style: solid;
288
+ border-top-color: initial;
289
+ border-right-color: transparent;
290
+ border-bottom-color: transparent;
291
+ border-left-color: transparent;
292
+ }
287
293
  `}
294
+ `}
288
295
 
289
296
  ${inFullscreenView && (0, _styledComponents.css)`
290
297
  ${asDiv && (0, _styledComponents.css)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "141.0.3",
3
+ "version": "141.0.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",