StyleInput: implement custom dropdown with example icons

src/components/StyleInput/StyleInput.css

@@ -18,6 +18,7 @@
 .react-dropdown-select {
   width: 176px !important;
   height: 48px !important;
+  justify-content: flex-start;
   margin: 0 4px;
   padding: 0 24px !important;
   color: white;
@@ -27,8 +28,14 @@
   border: none !important;
 }
 
-.react-dropdown-select-content span {
-  box-sizing: initial !important;
+.react-dropdown-select-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.react-dropdown-select-content svg {
+  margin: 0 12px 0 0;
 }
 
 .react-dropdown-select:focus-within {
@@ -46,14 +53,22 @@
 .react-dropdown-select-dropdown-handle {
   /* color: #fff; */
 }
+
 .react-dropdown-select-option {
   /* border: 1px solid #000; */
 }
+
 .react-dropdown-select-item {
   color: #333;
-  height: 100% !important;
-
+  height: 40px !important;
+  display: flex;
+  align-items: center;
 }
+
+.react-dropdown-select-item svg {
+  margin: 0 12px 0 24px;
+}
+
 .react-dropdown-select-input {
   color: #fff;
 }
@@ -65,7 +80,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  border-radius: 8px;
+  border-radius: 8px !important;
   max-height: 300px;
   overflow: auto;
   z-index: 9;
@@ -76,7 +91,6 @@
   color: black;
 }
 .react-dropdown-select-item:hover {
-  /* color: white; */
   background-color: #ffd171 !important;
 }
 
@@ -84,9 +98,13 @@
 .react-dropdown-select-item.react-dropdown-select-item-active {
   color: black !important;
   background-color: #ffd171 !important;
-  /* border-bottom: 1px solid #333; */
-  font-weight: bold;
 }
+
+.react-dropdown-select-item:focus {
+  color: black !important;
+  background-color: #ffd171 !important;
+}
+
 .react-dropdown-select-item.react-dropdown-select-item-disabled {
   background: #777;
   color: #ccc;

src/components/StyleInput/StyleInput.tsx

@@ -5,22 +5,38 @@ import Select from "react-dropdown-select";
 import { styleQueryAtom } from "../../state/atoms";
 import { IconStyle } from "../../lib";
 import "./StyleInput.css";
-import { Heart } from "phosphor-react";
+import { PencilLine } from "phosphor-react";
 
 const options = [
-  { key: "Thin", value: IconStyle.THIN, icon: <Heart weight="thin" /> },
-  { key: "Light", value: IconStyle.LIGHT, icon: <Heart weight="light" /> },
+  {
+    key: "Thin",
+    value: IconStyle.THIN,
+    icon: <PencilLine size={24} weight="thin" />,
+  },
+  {
+    key: "Light",
+    value: IconStyle.LIGHT,
+    icon: <PencilLine size={24} weight="light" />,
+  },
   {
     key: "Regular",
     value: IconStyle.REGULAR,
-    icon: <Heart weight="regular" />,
+    icon: <PencilLine size={24} weight="regular" />,
+  },
+  {
+    key: "Bold",
+    value: IconStyle.BOLD,
+    icon: <PencilLine size={24} weight="bold" />,
+  },
+  {
+    key: "Fill",
+    value: IconStyle.FILL,
+    icon: <PencilLine size={24} weight="fill" />,
   },
-  { key: "Bold", value: IconStyle.BOLD, icon: <Heart weight="bold" /> },
-  { key: "Fill", value: IconStyle.FILL, icon: <Heart weight="fill" /> },
   {
     key: "Duotone",
     value: IconStyle.DUOTONE,
-    icon: <Heart weight="duotone" />,
+    icon: <PencilLine size={24} weight="duotone" />,
   },
 ];
 
@@ -36,21 +52,29 @@ const StyleInput: React.FC<StyleInputProps> = () => {
 
   return (
     <Select
-      style={{ height: 48 }}
       options={options}
       values={[options[2]]}
       searchable={false}
       labelField="key"
       onChange={(values) => setStyle(values[0].value as IconStyle)}
-      // itemRenderer={({ item, methods }) => (
-      //   <div
-      //     className="react-dropdown-select-item"
-      //     onClick={() => methods.addItem(item)}
-      //   >
-      //     {item.icon}
-      //     {item.key}
-      //   </div>
-      // )}
+      itemRenderer={({ item, itemIndex, state: { cursor, values }, methods }) => (
+        <span
+          role="option"
+          aria-selected={item.key === values[0].key}
+          className={`react-dropdown-select-item ${itemIndex === cursor ? "react-dropdown-select-item-active" : ""}`}
+          tabIndex={-1}
+          onClick={() => methods.addItem(item)}
+        >
+          {item.icon}
+          {item.key}
+        </span>
+      )}
+      contentRenderer={({ state: { values }, methods }) => (
+        <div className="react-dropdown-select-content" {...methods}>
+          {values[0].icon}
+          {values[0].key}
+        </div>
+      )}
     />
   );
 };