fix(components): adjust ListBox styles (#1296)

launchdarkly · May 15, 2024 · 13a75c9 · 13a75c9
1 parent e09bb72
commit 13a75c9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/.changeset/metal-cougars-tease.md b/.changeset/metal-cougars-tease.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Adjust `ListBox` styles
diff --git a/packages/components/src/ListBox.tsx b/packages/components/src/ListBox.tsx
@@ -53,7 +53,11 @@ const _ListBoxItem = <T extends object>(
 			{composeRenderProps(props.children, (children, { isSelected }) => (
 				<>
 					{children}
-					{isSelected && <Icon name="check" size="medium" className={styles.check} />}
+					{isSelected ? (
+						<Icon name="check" size="medium" className={styles.check} />
+					) : (
+						<div className={styles.icon} slot="check" />
+					)}
 				</>
 			))}
 		</AriaListBoxItem>

diff --git a/packages/components/src/styles/ListBox.module.css b/packages/components/src/styles/ListBox.module.css
@@ -5,13 +5,14 @@
 
 .item {
   composes: item from './Menu.module.css';
+  justify-content: space-between;
 
   &:has([slot='label']) {
     &[data-selection-mode] {
       grid-template-areas:
         'label check'
         'desc check';
-      grid-template-columns: max-content 1fr;
+      grid-template-columns: 1fr min-content;
     }
   }
 
@@ -26,5 +27,9 @@
 
 .check {
   grid-area: check;
-  margin-left: auto;
 }
+
+.icon {
+  height: var(--lp-size-20);
+  width: var(--lp-size-20);
+}
diff --git a/packages/components/src/styles/Select.module.css b/packages/components/src/styles/Select.module.css
@@ -13,7 +13,7 @@
     color: var(--lp-color-text-field-placeholder);
   }
 
-  & [slot='description'] {
+  & :is([slot='description'], [slot='check']) {
     display: none;
   }
 }