Apply different paddings based on item size, matching the select button

WordPress · Jun 25, 2024 · 44855d9 · 44855d9
1 parent 195d6af
commit 44855d9
Showing 1 changed file with 38 additions and 11 deletions.
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -102,17 +102,44 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	}
 `;
 
-export const SelectItem = styled( Ariakit.SelectItem )`
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: ${ ITEM_PADDING };
-	font-size: ${ CONFIG.fontSize };
-	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
-	&[data-active-item] {
-		background-color: ${ COLORS.theme.gray[ 300 ] };
-	}
-`;
+export const SelectItem = styled( Ariakit.SelectItem )( ( {
+	size,
+}: {
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+} ) => {
+	const getSize = () => {
+		const sizes = {
+			compact: {
+				paddingInlineStart: space( 2 ),
+				paddingInlineEnd: space( 1 ),
+			},
+			default: {
+				paddingInlineStart: space( 4 ),
+				paddingInlineEnd: space( 3 ),
+			},
+			small: {
+				paddingInlineStart: space( 2 ),
+				paddingInlineEnd: space( 1 ),
+			},
+		};
+
+		return sizes[ size ] || sizes.default;
+	};
+
+	return css`
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: ${ ITEM_PADDING };
+		font-size: ${ CONFIG.fontSize };
+		line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
+		&[data-active-item] {
+			background-color: ${ COLORS.theme.gray[ 300 ] };
+		}
+
+		${ getSize() }
+	`;
+} );
 
 export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	display: flex;