Skip to content

Commit 7c31d8c

Browse files
hasyed-akamaihasyed-akamai
authored
fix: [M3-10083] - Broken Spacing in Dropdown Component (#12314)
* fix: [M3-10083] - Broken Spacing in Dropdown Component * Added changeset: Broken spacing in Dropdown component * remove the static height of the Stack and revert back the changes from box to stack. * removed redundant styles from Autocomplete popper
1 parent 643dab0 commit 7c31d8c

File tree

3 files changed

+48
-83
lines changed

3 files changed

+48
-83
lines changed

‎packages/manager/.changeset/pr-12314-fixed-1748938803077.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Fixed
3+
---
4+
5+
Broken spacing in Dropdown component ([#12314](https://github.com/linode/manager/pull/12314))

‎packages/ui/src/foundations/themes/dark.ts‎

Lines changed: 22 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -258,11 +258,6 @@ export const darkTheme: ThemeOptions = {
258258
paddingTop: Spacing.S4,
259259
paddingBottom: Spacing.S4,
260260
backgroundColor: Component.Dropdown.Background.Default,
261-
// Override padding when noOptions is present
262-
'&:has(.MuiAutocomplete-noOptions)': {
263-
paddingTop: Spacing.S0,
264-
paddingBottom: Spacing.S0,
265-
},
266261
},
267262
listbox: {
268263
backgroundColor: Select.Default.Background,
@@ -287,12 +282,8 @@ export const darkTheme: ThemeOptions = {
287282
},
288283
},
289284
noOptions: {
290-
color: Select.Default.Icon,
291-
border: '0px !important',
292-
boxShadow: Alias.Elevation.S,
293-
height: Spacing.S32,
294-
display: 'flex',
295-
alignItems: 'center',
285+
padding: `${Spacing.S8} ${Spacing.S12} !important`,
286+
lineHeight: 1.143,
296287
},
297288
option: {
298289
'&.Mui-focused': {
@@ -309,47 +300,37 @@ export const darkTheme: ThemeOptions = {
309300
backgroundSize: 'cover',
310301
boxShadow: 'none',
311302
},
303+
padding: `${Spacing.S6} ${Spacing.S12} !important`,
312304
},
313305
popper: {
306+
// To remove the double border of listbox and input
314307
'&.MuiAutocomplete-popper': {
308+
'&[data-popper-placement="bottom"], &[data-popper-placement="top"]':
309+
{
310+
'.MuiAutocomplete-listbox': {
311+
padding: 0,
312+
'& .MuiAutocomplete-groupLabel': {
313+
color: Dropdown.Text.Default,
314+
font: Typography.Heading.Overline,
315+
textTransform: Typography.Heading.OverlineTextCase,
316+
},
317+
},
318+
'.MuiAutocomplete-option': {
319+
padding: `${Spacing.S6} ${Spacing.S12} !important`,
320+
svg: {
321+
height: Spacing.S16,
322+
width: Spacing.S16,
323+
},
324+
},
325+
},
315326
'&[data-popper-placement="bottom"]': {
316327
'.MuiAutocomplete-listbox': {
317328
borderTop: 0,
318-
padding: 0,
319-
'& .MuiAutocomplete-groupLabel': {
320-
fontSize: Font.FontSize.Xxxs,
321-
lineHeight: Font.LineHeight.Xxxs,
322-
fontWeight: Font.FontWeight.Bold,
323-
color: Dropdown.Text.Default,
324-
textTransform: 'uppercase',
325-
},
326-
},
327-
'.MuiAutocomplete-option': {
328-
height: Spacing.S32,
329-
svg: {
330-
height: Spacing.S20,
331-
width: Spacing.S20,
332-
},
333329
},
334330
},
335331
'&[data-popper-placement="top"]': {
336332
'.MuiAutocomplete-listbox': {
337333
borderBottom: 0,
338-
padding: 0,
339-
'& .MuiAutocomplete-groupLabel': {
340-
fontSize: Font.FontSize.Xxxs,
341-
lineHeight: Font.LineHeight.Xxxs,
342-
fontWeight: Font.FontWeight.Bold,
343-
color: Dropdown.Text.Default,
344-
textTransform: 'uppercase',
345-
},
346-
},
347-
'.MuiAutocomplete-option': {
348-
height: Spacing.S32,
349-
svg: {
350-
height: Spacing.S20,
351-
width: Spacing.S20,
352-
},
353334
},
354335
},
355336
},

‎packages/ui/src/foundations/themes/light.ts‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -398,11 +398,6 @@ export const lightTheme: ThemeOptions = {
398398
marginTop: Spacing.S4,
399399
paddingTop: Spacing.S4,
400400
paddingBottom: Spacing.S4,
401-
// Override padding when noOptions is present
402-
'&:has(.MuiAutocomplete-noOptions)': {
403-
paddingTop: Spacing.S0,
404-
paddingBottom: Spacing.S0,
405-
},
406401
},
407402
listbox: {
408403
backgroundColor: Select.Default.Background,
@@ -419,12 +414,8 @@ export const lightTheme: ThemeOptions = {
419414
boxShadow: Alias.Elevation.S,
420415
},
421416
noOptions: {
422-
borderTop: 0,
423-
border: '0px !important',
424-
boxShadow: Alias.Elevation.S,
425-
height: Spacing.S32,
426-
display: 'flex',
427-
alignItems: 'center',
417+
padding: `${Spacing.S8} ${Spacing.S12} !important`,
418+
lineHeight: 1.143,
428419
},
429420
option: {
430421
'&.Mui-focused': {
@@ -436,56 +427,44 @@ export const lightTheme: ThemeOptions = {
436427
transition: 'background-color 0.2s',
437428
},
438429
fontSize: '0.9rem',
439-
padding: '10px !important',
440430
'& .fi': {
441431
width: Spacing.S28,
442432
height: Spacing.S20,
443433
borderRadius: '3px',
444434
backgroundSize: 'cover',
445435
boxShadow: 'none',
446436
},
437+
padding: `${Spacing.S6} ${Spacing.S12} !important`,
447438
},
448439
popper: {
449440
// To remove the double border of listbox and input
450441
'&.MuiAutocomplete-popper': {
442+
'&[data-popper-placement="bottom"], &[data-popper-placement="top"]':
443+
{
444+
'.MuiAutocomplete-listbox': {
445+
padding: 0,
446+
'& .MuiAutocomplete-groupLabel': {
447+
color: Dropdown.Text.Default,
448+
font: Typography.Heading.Overline,
449+
textTransform: Typography.Heading.OverlineTextCase,
450+
},
451+
},
452+
'.MuiAutocomplete-option': {
453+
padding: `${Spacing.S6} ${Spacing.S12} !important`,
454+
svg: {
455+
height: Spacing.S16,
456+
width: Spacing.S16,
457+
},
458+
},
459+
},
451460
'&[data-popper-placement="bottom"]': {
452461
'.MuiAutocomplete-listbox': {
453462
borderTop: 0,
454-
padding: 0,
455-
'& .MuiAutocomplete-groupLabel': {
456-
fontSize: Font.FontSize.Xxxs,
457-
lineHeight: Font.LineHeight.Xxxs,
458-
fontWeight: Font.FontWeight.Bold,
459-
color: Dropdown.Text.Default,
460-
textTransform: 'uppercase',
461-
},
462-
},
463-
'.MuiAutocomplete-option': {
464-
height: Spacing.S32,
465-
svg: {
466-
height: Spacing.S20,
467-
width: Spacing.S20,
468-
},
469463
},
470464
},
471465
'&[data-popper-placement="top"]': {
472466
'.MuiAutocomplete-listbox': {
473467
borderBottom: 0,
474-
padding: 0,
475-
'& .MuiAutocomplete-groupLabel': {
476-
fontSize: Font.FontSize.Xxxs,
477-
lineHeight: Font.LineHeight.Xxxs,
478-
fontWeight: Font.FontWeight.Bold,
479-
color: Dropdown.Text.Default,
480-
textTransform: 'uppercase',
481-
},
482-
},
483-
'.MuiAutocomplete-option': {
484-
height: Spacing.S32,
485-
svg: {
486-
height: Spacing.S20,
487-
width: Spacing.S20,
488-
},
489468
},
490469
},
491470
},

0 commit comments

Comments
 (0)