components: Style FormSelect details

dolthub · Mar 18, 2024 · 729fca4 · 729fca4
1 parent 71a7185
commit 729fca4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/packages/components/src/FormSelect/components/CustomOption.tsx b/packages/components/src/FormSelect/components/CustomOption.tsx
@@ -12,8 +12,8 @@ export default function CustomOption<T, OptionType extends Option<T>>(
   props: Props<OptionType>,
 ) {
   return (
-    <span
-      className={cx({ [css.withIconPath]: !!props.data.iconPath })}
+    <div
+      className={cx({ [css.optionWithIconPath]: !!props.data.iconPath })}
       aria-label={String(props.data.value)}
       data-cy={`${props.dataCyPrefix}-${props.data.value}`}
     >
@@ -22,7 +22,9 @@ export default function CustomOption<T, OptionType extends Option<T>>(
       )}
       {props.data.icon}
       <span>{props.data.label}</span>
-      {props.data.details}
-    </span>
+      {props.data.details && (
+        <div className={css.optionDetails}>{props.data.details}</div>
+      )}
+    </div>
   );
 }
diff --git a/packages/components/src/FormSelect/components/index.module.css b/packages/components/src/FormSelect/components/index.module.css
@@ -67,14 +67,18 @@
   @apply invisible;
 }
 
-.withIconPath {
+.optionWithIconPath {
   @apply flex items-center;
 
   img {
     @apply h-7 w-7 rounded-full mr-2;
   }
 }
 
+.optionDetails {
+  @apply text-acc-darkgrey text-xs mt-1 mb-1;
+}
+
 .menuList {
   @apply py-0;
 }

diff --git a/packages/components/src/__stories__/FormSelect.stories.tsx b/packages/components/src/__stories__/FormSelect.stories.tsx
@@ -160,33 +160,25 @@ export const ForMobileDark: Story = {
   },
 };
 
-function Details({ text }: { text: string }) {
-  return (
-    <div className="text-gray-500 text-xs mt-1 mb-1">
-      <span>{text}</span>
-    </div>
-  );
-}
-
 export const WithDetails: Story = {
   args: {
     label: "Label",
     options: [
       {
         value: "one",
         label: "One",
-        details: <Details text="info about one" />,
+        details: <span>info about one</span>,
       },
       {
         value: "two",
         label: "Two",
-        details: <Details text="info about two" />,
+        details: <span>info about two</span>,
       },
       {
         value: "three",
         label: "Three",
         isDisabled: true,
-        details: <Details text="info about three but it's disabled" />,
+        details: <span>info about three but it is disabled</span>,
       },
     ],
     val: "one",
@@ -222,19 +214,19 @@ export const WithIconsAndDetails: Story = {
         value: "one",
         label: "One",
         icon: <Icon icon="🍎" />,
-        details: <Details text="info about one" />,
+        details: <span>info about one</span>,
       },
       {
         value: "two",
         label: "Two",
         icon: <Icon icon="🍌" />,
-        details: <Details text="info about two" />,
+        details: <span>info about two</span>,
       },
       {
         value: "three",
         label: "Three",
         icon: <Icon icon="🍊" />,
-        details: <Details text="info about three" />,
+        details: <span>info about three</span>,
         isDisabled: true,
       },
     ],

diff --git a/packages/components/src/__stories__/FormSelectGrouped.stories.tsx b/packages/components/src/__stories__/FormSelectGrouped.stories.tsx
@@ -124,11 +124,7 @@ const optionsWithDetails = options.map(o => {
     options: o.options.map(option => {
       return {
         ...option,
-        details: (
-          <div className="text-gray-500 text-xs mt-1 mb-1">
-            Details about option {option.label}
-          </div>
-        ),
+        details: <div>Details about option {option.label}</div>,
       };
     }),
   };