💄(frontend) reserve left padding for select options

Extra padding should be reserved for select options that
display a checkmark when an option is selected.
This commit is contained in:
lebaudantoine
2024-08-21 19:17:24 +02:00
committed by aleb_the_flash
parent 9782eb8c7c
commit 0e2c805b41
2 changed files with 6 additions and 3 deletions

View File

@@ -72,7 +72,7 @@ export const Select = <T extends string | number>({
<ListBox>
{items.map((item) => (
<ListBoxItem
className={menuItemRecipe()}
className={menuItemRecipe({ extraPadding: true })}
id={item.value}
key={item.value}
>

View File

@@ -10,7 +10,6 @@ export const menuItemRecipe = cva({
base: {
paddingY: 0.125,
paddingX: 0.5,
paddingLeft: 1.5,
textAlign: 'left',
width: 'full',
borderRadius: 4,
@@ -44,7 +43,11 @@ export const menuItemRecipe = cva({
alignItems: 'center',
gap: '1rem',
paddingY: '0.4rem',
paddingLeft: 0.5,
},
},
extraPadding: {
true: {
paddingLeft: 1.5,
},
},
},