Fix select classes

components/common/Select/index.module.scss

@@ -1,4 +1,4 @@
-.SelectTrigger {
+.trigger {
   align-items: center;
   background-color: var(--input-bg);
   border-radius: $input-corner;
@@ -7,6 +7,18 @@
   gap: $unit;
   padding: ($unit * 1.5) $unit-2x;
 
+  &.small > span:not(.icon) {
+    font-size: $font-small;
+    margin: 0;
+    max-width: 200px;
+
+    @include breakpoint(tablet) {
+      width: 100%;
+      max-width: inherit;
+      text-align: center;
+    }
+  }
+
   &.modal {
     background-color: var(--select-modal-bg);
 
@@ -29,7 +41,7 @@
     }
   }
 
-  &.Disabled:hover {
+  &.disabled:hover {
     background-color: var(--input-bg);
     cursor: not-allowed;
   }
@@ -45,7 +57,7 @@
     text-align: left;
   }
 
-  &.Bound {
+  &.bound {
     background-color: var(--select-contained-bg);
 
     &:hover {
@@ -62,7 +74,7 @@
     height: auto;
   }
 
-  .SelectIcon {
+  .icon {
     display: flex;
     align-items: center;
 
@@ -71,12 +83,12 @@
     }
   }
 
-  span:not(.SelectIcon) {
+  span:not(.icon) {
     color: var(--text-secondary);
   }
 }
 
-.Select {
+.select {
   background: var(--dialog-bg);
   border-radius: $card-corner;
   border: 1px solid rgba(0, 0, 0, 0.24);
@@ -86,8 +98,8 @@
   max-height: 40vh;
   z-index: 40;
 
-  .Scroll.Up,
+  .scroll.up,
-  .Scroll.Down {
+  .scroll.down {
     padding: $unit 0;
     text-align: center;
 
@@ -100,7 +112,7 @@
     }
   }
 
-  .Scroll.Up {
+  .scroll.up {
     transform: scale(1, -1);
   }
 }

components/common/Select/index.tsx

@@ -14,15 +14,21 @@ interface Props
     React.SelectHTMLAttributes<HTMLSelectElement>,
     HTMLSelectElement
   > {
-  altText?: string
-  iconSrc?: string
   open: boolean
-  trigger?: React.ReactNode
+  icon?: {
+    src: string
+    alt: string
+  }
+  trigger?: {
+    bound?: boolean
+    className?: string
+    placeholder?: string
+    size?: 'small' | 'medium' | 'large'
+  }
   children?: React.ReactNode
   onOpenChange?: () => void
   onValueChange?: (value: string) => void
   onClose?: () => void
-  triggerClass?: string
   overlayVisible?: boolean
 }
 
@@ -33,12 +39,20 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
   const [open, setOpen] = useState(false)
   const [value, setValue] = useState('')
 
-  const triggerClasses = classNames(
+  const triggerClasses = classNames({
+    [styles.trigger]: true,
+    [styles.disabled]: props.disabled,
+    [styles.bound]: props.trigger ? props.trigger.bound : false,
+    [styles.small]: props.trigger?.size === 'small',
+    [styles.medium]: !props.trigger || props.trigger?.size === 'medium',
+    [styles.large]: props.trigger?.size === 'large',
+  })
+
+  const selectClasses = classNames(
     {
-      SelectTrigger: true,
+      [styles.select]: true,
-      Disabled: props.disabled,
     },
-    props.triggerClass
+    props.className
   )
 
   useEffect(() => {
@@ -82,10 +96,10 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
         placeholder={props.placeholder}
         ref={forwardedRef}
       >
-        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
+        {props.icon ? <img alt={props.icon.alt} src={props.icon.src} /> : ''}
-        <RadixSelect.Value placeholder={props.placeholder} />
+        <RadixSelect.Value placeholder={props.trigger?.placeholder} />
         {!props.disabled ? (
-          <RadixSelect.Icon className="SelectIcon">
+          <RadixSelect.Icon className={styles.icon}>
             <ChevronIcon />
           </RadixSelect.Icon>
         ) : (
@@ -93,7 +107,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
         )}
       </RadixSelect.Trigger>
 
-      <RadixSelect.Portal className="SelectPortal">
+      <RadixSelect.Portal>
         <>
           <Overlay
             open={open}
@@ -101,18 +115,28 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
           />
 
           <RadixSelect.Content
-            className={classNames({ Select: true }, props.className)}
+            className={selectClasses}
             position="popper"
             sideOffset={6}
             onCloseAutoFocus={onCloseAutoFocus}
             onEscapeKeyDown={onEscapeKeyDown}
             onPointerDownOutside={onPointerDownOutside}
           >
-            <RadixSelect.ScrollUpButton className="Scroll Up">
+            <RadixSelect.ScrollUpButton
+              className={classNames({
+                [styles.scroll]: true,
+                [styles.up]: true,
+              })}
+            >
               <ChevronIcon />
             </RadixSelect.ScrollUpButton>
             <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
-            <RadixSelect.ScrollDownButton className="Scroll Down">
+            <RadixSelect.ScrollDownButton
+              className={classNames({
+                [styles.scroll]: true,
+                [styles.down]: true,
+              })}
+            >
               <ChevronIcon />
             </RadixSelect.ScrollDownButton>
           </RadixSelect.Content>