Merge pull request #5917 from pat270/LPD-46380

fix(@clay/css): LPD-46380 Labels in dropdown-item are slightly misaligned
liferay · Jan 22, 2025 · aa3c008 · aa3c008
2 parents f5719b4 + b46a14e
commit aa3c008
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss b/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss
@@ -163,6 +163,7 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			line-height: $cadmin-dropdown-font-size * $cadmin-line-height-base,
 		),
 		'&.autofit-row': (
+			align-items: center,
 			padding-left: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
 			padding-right: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
 			autofit-col: (
@@ -171,6 +172,7 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			),
 		),
 		autofit-row: (
+			align-items: center,
 			margin-left: -4px,
 			margin-right: -4px,
 			width: auto,
@@ -179,6 +181,17 @@ $cadmin-dropdown-item-base: map-deep-merge(
 				padding-right: 4px,
 			),
 		),
+		inline-item: (
+			line-height: 1,
+			lexicon-icon: (
+				font-size: 16px,
+				margin-top: 0,
+			),
+		),
+		label: (
+			margin-bottom: 0,
+			margin-top: 5px,
+		),
 	),
 	$cadmin-dropdown-item-base
 );
@@ -408,6 +421,7 @@ $cadmin-dropdown-item-indicator-start: map-deep-merge(
 			),
 		width: $cadmin-dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 16px,
 			margin-top: 0,
 		),
 	),
@@ -455,6 +469,7 @@ $cadmin-dropdown-item-indicator-end: map-deep-merge(
 			),
 		width: $cadmin-dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 16px,
 			margin-top: 0,
 		),
 	),
@@ -812,10 +827,6 @@ $cadmin-dropdown-menu-palette: map-deep-merge(
 				padding-left: 28px,
 				padding-right: 8px,
 				padding-top: 5px,
-				'&.autofit-row': (
-					padding-left: 24px,
-					padding-right: 8px,
-				),
 			),
 			dropdown-item-scroll: (
 				font-size: 16px,
@@ -872,13 +883,11 @@ $cadmin-dropdown-menu-palette: map-deep-merge(
 			dropdown-menu-indicator-start: (
 				dropdown-item-indicator-start: (
 					left: 8px,
-					top: 8px,
 				),
 			),
 			dropdown-menu-indicator-end: (
 				dropdown-item-indicator-end: (
 					right: 8px,
-					top: 8px,
 				),
 			),
 		),

diff --git a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss
@@ -830,6 +830,20 @@
 			.custom-control-label {
 				font-weight: map-get($map, font-weight);
 			}
+
+			.inline-item {
+				$_inline-item: setter(map-get($map, inline-item), ());
+
+				@include clay-css($_inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($_inline-item, lexicon-icon));
+				}
+			}
+
+			.label {
+				@include clay-label-variant(map-get($map, label));
+			}
 		}
 	}
 }
diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss
@@ -217,6 +217,7 @@ $dropdown-item-base: map-deep-merge(
 			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
+			align-items: center,
 			padding-left: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			padding-right: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			autofit-col: (
@@ -225,6 +226,7 @@ $dropdown-item-base: map-deep-merge(
 			),
 		),
 		autofit-row: (
+			align-items: center,
 			margin-left: -0.25rem,
 			margin-right: -0.25rem,
 			width: auto,
@@ -233,6 +235,17 @@ $dropdown-item-base: map-deep-merge(
 				padding-right: 0.25rem,
 			),
 		),
+		inline-item: (
+			line-height: 1,
+			lexicon-icon: (
+				font-size: 1rem,
+				margin-top: 0,
+			),
+		),
+		label: (
+			margin-bottom: 0,
+			margin-top: 0.3125rem,
+		),
 	),
 	$dropdown-item-base
 );
@@ -502,6 +515,7 @@ $dropdown-item-indicator-start: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 1rem,
 			margin-top: 0,
 		),
 	),
@@ -548,6 +562,7 @@ $dropdown-item-indicator-end: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 16px,
 			margin-top: 0,
 		),
 	),
@@ -963,10 +978,6 @@ $dropdown-menu-palette: map-deep-merge(
 				padding-left: 1.75rem,
 				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
-				'&.autofit-row': (
-					padding-left: 1.5rem,
-					padding-right: 0.5rem,
-				),
 			),
 			dropdown-item-scroll: (
 				font-size: 1rem,
@@ -1023,13 +1034,11 @@ $dropdown-menu-palette: map-deep-merge(
 			dropdown-menu-indicator-start: (
 				dropdown-item-indicator-start: (
 					left: 0.5rem,
-					top: 0.5rem,
 				),
 			),
 			dropdown-menu-indicator-end: (
 				dropdown-item-indicator-end: (
 					right: 0.5rem,
-					top: 0.5rem,
 				),
 			),
 		),