fix(components): refactor ListBoxItem and MenuItem styles (#1303)

* fix(components): refactor `ListBoxItem` and `MenuItem` styles * fix: whitespace
launchdarkly · May 17, 2024 · 0f73f3a · 0f73f3a
1 parent 2d63dda
commit 0f73f3a
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 73 deletions.
diff --git a/.changeset/plenty-bikes-hide.md b/.changeset/plenty-bikes-hide.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Refactor `ListBoxItem` and `MenuItem` styles
diff --git a/packages/components/src/ListBox.tsx b/packages/components/src/ListBox.tsx
@@ -52,12 +52,8 @@ const _ListBoxItem = <T extends object>(
 		>
 			{composeRenderProps(props.children, (children, { isSelected }) => (
 				<>
-					{children}
-					{isSelected ? (
-						<Icon name="check" size="medium" className={styles.check} />
-					) : (
-						<div className={styles.icon} slot="check" />
-					)}
+					<span className={styles.content}>{children}</span>
+					{isSelected && <Icon name="check" size="medium" />}
 				</>
 			))}
 		</AriaListBoxItem>

diff --git a/packages/components/src/Menu.tsx b/packages/components/src/Menu.tsx
@@ -71,23 +71,20 @@ const _MenuItem = <T extends object>(
 					<>
 						{selectionMode === 'multiple' && (
 							<div
-								className={checkbox({ className: styles.check })}
+								className={checkbox()}
 								data-selected={isSelected || undefined}
 								data-disabled={isDisabled || undefined}
 							>
 								<CheckboxInner isSelected={isSelected} />
 							</div>
 						)}
 						{selectionMode === 'single' && (
-							<div
-								className={radio({ className: styles.check })}
-								data-disabled={isDisabled || undefined}
-							>
+							<div className={radio()} data-disabled={isDisabled || undefined}>
 								<RadioInner isSelected={isSelected} />
 							</div>
 						)}
-						{children}
-						{hasSubmenu && <Icon name="chevron-right" size="small" className={styles.submenu} />}
+						<span className={styles.content}>{children}</span>
+						{hasSubmenu && <Icon name="chevron-right" size="small" />}
 					</>
 				),
 			)}

diff --git a/packages/components/src/styles/ListBox.module.css b/packages/components/src/styles/ListBox.module.css
@@ -5,31 +5,8 @@
 
 .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: 1fr min-content;
-    }
-  }
-
-  & [slot='label'] {
-    grid-area: label;
-  }
-
-  & [slot='description'] {
-    grid-area: desc;
-  }
 }
 
-.check {
-  grid-area: check;
+.content {
+  composes: content from './Menu.module.css';
 }
-
-.icon {
-  height: var(--lp-size-20);
-  width: var(--lp-size-20);
-}
diff --git a/packages/components/src/styles/Menu.module.css b/packages/components/src/styles/Menu.module.css
@@ -46,35 +46,27 @@
     cursor: not-allowed;
   }
 
-  &:has([slot='label']) {
-    display: grid;
-    grid-template-areas:
-      'label'
-      'desc';
-
-    &[data-has-submenu] {
-      grid-template-areas:
-        'label submenu'
-        'desc submenu';
-    }
+  & .content {
+    display: flex;
+    align-items: center;
+    column-gap: var(--lp-spacing-300);
+    flex: 1;
+  }
 
-    &[data-selection-mode] {
+  &:has([slot='label']) {
+    & .content {
+      display: grid;
       grid-template-areas:
-        'check label'
-        'check desc';
-      grid-template-columns: min-content 1fr;
+        'label'
+        'desc';
     }
 
     &:has(kbd) {
-      grid-template-areas:
-        'label kbd'
-        'desc kbd';
-
-      &[data-selection-mode] {
+      & .content {
         grid-template-areas:
-          'check label kbd'
-          'check desc  kbd';
-        grid-template-columns: min-content 1fr min-content;
+          'label kbd'
+          'desc kbd';
+        grid-template-columns: 1fr min-content;
       }
     }
   }
@@ -93,19 +85,9 @@
   & kbd {
     grid-area: kbd;
     font: var(--lp-code-1-regular);
-    text-align: end;
   }
 }
 
-.check {
-  grid-area: check;
-}
-
-.submenu {
-  grid-area: submenu;
-  margin-left: auto;
-}
-
 .default {
 }
 

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);
   }
 
-  & :is([slot='description'], [slot='check']) {
+  & :is([slot='description']) {
     display: none;
   }
 }
diff --git a/packages/components/stories/ListBox.stories.tsx b/packages/components/stories/ListBox.stories.tsx
@@ -2,10 +2,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import type { Selection as AriaSelection } from 'react-aria-components';
 
+import { Icon } from '@launchpad-ui/icons';
 import { fireEvent, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
-import { Header, ListBox, ListBoxItem, Section } from '../src';
+import { Header, ListBox, ListBoxItem, Section, Text } from '../src';
 
 const meta: Meta<typeof ListBox> = {
 	component: ListBox,
@@ -78,6 +79,51 @@ export const Selection: Story = {
 	},
 };
 
+export const Descriptions: Story = {
+	args: {
+		children: (
+			<>
+				<ListBoxItem>
+					<Text slot="label">Read</Text>
+					<Text slot="description">Read only</Text>
+				</ListBoxItem>
+				<ListBoxItem>
+					<Text slot="label">Write</Text>
+					<Text slot="description">Read and write only</Text>
+				</ListBoxItem>
+				<ListBoxItem>
+					<Text slot="label">Admin</Text>
+					<Text slot="description">Full access</Text>
+				</ListBoxItem>
+			</>
+		),
+		'aria-label': 'Items',
+		selectionMode: 'single',
+	},
+};
+
+export const Icons: Story = {
+	args: {
+		children: (
+			<>
+				<ListBoxItem>
+					<Text slot="label">
+						<Icon name="add" size="small" /> Add
+					</Text>
+				</ListBoxItem>
+				<ListBoxItem>
+					<Icon name="edit" size="small" /> Edit
+				</ListBoxItem>
+				<ListBoxItem>
+					<Icon name="delete" size="small" /> Delete
+				</ListBoxItem>
+			</>
+		),
+		'aria-label': 'Items',
+		selectionMode: 'single',
+	},
+};
+
 export const States: Story = {
 	args: {
 		children: (