Updated Select and SelectItem

Part of this was combining PictureSelectItem and SelectItem, so the former has been removed.

components/common/PictureSelectItem/index.module.scss

@@ -1,42 +0,0 @@
-.SelectItem.Picture {
-  display: flex;
-  flex-direction: row;
-  gap: $unit;
-  align-items: center;
-
-  .preview {
-    $diameter: $unit-4x;
-    border-radius: $unit-2x;
-    width: $diameter;
-    height: $diameter;
-
-    img {
-      width: $diameter;
-      height: auto;
-    }
-
-    &.fire {
-      background: $fire-bg-20;
-    }
-
-    &.water {
-      background: $water-bg-20;
-    }
-
-    &.wind {
-      background: $wind-bg-20;
-    }
-
-    &.earth {
-      background: $earth-bg-20;
-    }
-
-    &.dark {
-      background: $dark-bg-10;
-    }
-
-    &.light {
-      background: $light-bg-20;
-    }
-  }
-}

components/common/PictureSelectItem/index.tsx

@@ -1,35 +0,0 @@
-import React, { ComponentProps } from 'react'
-import * as Select from '@radix-ui/react-select'
-
-import styles from './index.module.scss'
-import classNames from 'classnames'
-
-interface Props extends ComponentProps<'div'> {
-  src: string[]
-  element: string
-  value: string
-}
-
-const PictureSelectItem = React.forwardRef<HTMLDivElement, Props>(
-  function selectItem({ children, ...props }, forwardedRef) {
-    return (
-      <Select.Item
-        className={classNames('SelectItem Picture', props.className)}
-        {...props}
-        ref={forwardedRef}
-        value={`${props.value}`}
-      >
-        <div className={`preview ${props.element}`}>
-          <img
-            alt={`${props.value}`}
-            src={props.src[0]}
-            srcSet={props.src.join(', ')}
-          />
-        </div>
-        <Select.ItemText>{children}</Select.ItemText>
-      </Select.Item>
-    )
-  }
-)
-
-export default PictureSelectItem

components/common/Select/index.module.scss

@@ -27,36 +27,6 @@
     }
   }
 
-  &.hidden {
-    display: none;
-  }
-
-  &:hover {
-    background-color: var(--input-bg-hover);
-    cursor: pointer;
-
-    span:not(.SelectIcon),
-    &[data-placeholder] > span:not(.SelectIcon) {
-      color: var(--text-primary);
-    }
-  }
-
-  &.disabled:hover {
-    background-color: var(--input-bg);
-    cursor: not-allowed;
-  }
-
-  &[data-placeholder='true'] > span:not(.SelectIcon) {
-    color: var(--text-secondary);
-  }
-
-  & > span:not(.SelectIcon) {
-    color: var(--text-primary);
-    flex-grow: 1;
-    font-size: $font-regular;
-    text-align: left;
-  }
-
   &.bound {
     background-color: var(--select-contained-bg);
 
@@ -65,10 +35,44 @@
     }
   }
 
-  &.Table {
+  &.table {
     min-width: $unit * 30;
   }
 
+  &.hidden {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--input-bg-hover);
+    cursor: pointer;
+
+    span:not(.icon),
+    &[data-placeholder] > span:not(.icon) {
+      color: var(--text-primary);
+    }
+
+    .icon svg {
+      fill: var(--text-primary);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: var(--input-bg);
+    cursor: not-allowed;
+  }
+
+  &[data-placeholder='true'] > span:not(.icon) {
+    color: var(--text-secondary);
+  }
+
+  & > span:not(.icon) {
+    color: var(--text-primary);
+    flex-grow: 1;
+    font-size: $font-regular;
+    text-align: left;
+  }
+
   img {
     width: $unit-4x;
     height: auto;
@@ -82,10 +86,6 @@
       fill: var(--icon-secondary);
     }
   }
-
-  span:not(.icon) {
-    color: var(--text-secondary);
-  }
 }
 
 .select {
@@ -98,6 +98,10 @@
   max-height: 40vh;
   z-index: 40;
 
+  &.bound {
+    background-color: var(--select-content-contained-bg);
+  }
+
   .scroll.up,
   .scroll.down {
     padding: $unit 0;

components/common/Select/index.tsx

@@ -32,27 +32,34 @@ interface Props
   overlayVisible?: boolean
 }
 
-const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
+const Select = React.forwardRef<HTMLButtonElement, Props>(function select(
   props: Props,
   forwardedRef
 ) {
   const [open, setOpen] = useState(false)
   const [value, setValue] = useState('')
 
-  const triggerClasses = classNames({
+  const triggerClasses = classNames(
-    [styles.trigger]: true,
+    {
-    [styles.disabled]: props.disabled,
+      [styles.trigger]: true,
-    [styles.bound]: props.trigger ? props.trigger.bound : false,
+      [styles.disabled]: props.disabled,
-    [styles.small]: props.trigger?.size === 'small',
+      [styles.bound]: props.trigger ? props.trigger.bound : false,
-    [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
+      [styles.small]: props.trigger?.size === 'small',
-    [styles.large]: props.trigger?.size === 'large',
+      [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
-  })
+      [styles.large]: props.trigger?.size === 'large',
+    },
+    props.trigger?.className?.split(' ').map((className) => {
+      console.log('className', className)
+      return styles[className]
+    })
+  )
 
   const selectClasses = classNames(
     {
       [styles.select]: true,
+      [styles.bound]: props.trigger ? props.trigger.bound : false,
     },
-    props.className
+    props.className?.split(' ').map((className) => styles[className])
   )
 
   useEffect(() => {

components/common/SelectItem/index.module.scss

@@ -29,8 +29,39 @@
     margin-bottom: $unit;
   }
 
-  img {
+  .preview {
-    width: $unit-4x;
+    $diameter: $unit-4x;
-    height: auto;
+    border-radius: $unit-2x;
+    width: $diameter;
+    height: $diameter;
+
+    img {
+      width: $diameter;
+      height: auto;
+    }
+
+    &.fire {
+      background: $fire-bg-20;
+    }
+
+    &.water {
+      background: $water-bg-20;
+    }
+
+    &.wind {
+      background: $wind-bg-20;
+    }
+
+    &.earth {
+      background: $earth-bg-20;
+    }
+
+    &.dark {
+      background: $dark-bg-10;
+    }
+
+    &.light {
+      background: $light-bg-20;
+    }
   }
 }

components/common/SelectItem/index.tsx

@@ -6,8 +6,9 @@ import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
   value: string | number
+  element?: string
   icon?: {
-    src: string
+    src: string[]
     alt: string
   }
 }
@@ -16,19 +17,32 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
   { icon, value, children, ...props },
   forwardedRef
 ) {
+  const itemClasses = classNames(
+    {
+      [styles.item]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
+
+  const wrapperClasses = classNames(
+    {
+      [styles.preview]: true,
+    },
+    props.element && styles[props.element]
+  )
+
   return (
     <Select.Item
       {...props}
-      className={classNames(
+      className={itemClasses}
-        {
-          [styles.item]: true,
-        },
-        props.className
-      )}
       ref={forwardedRef}
       value={`${value}`}
     >
-      {icon ? <img alt={icon.alt} src={icon.src} /> : ''}
+      {icon && (
+        <div className={wrapperClasses}>
+          <img alt={icon.alt} src={icon.src[0]} srcSet={icon.src.join(', ')} />
+        </div>
+      )}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )