Select Component Tweaks

demo/src/examples/SelectExample.tsx

@@ -11,8 +11,27 @@ const options = [
   { value: 'trinity', label: 'Trinity' },
 ];
 
+const manyOptions = [
+  { value: 'ash', label: 'Ash' },
+  { value: 'banshee', label: 'Banshee' },
+  { value: 'ember', label: 'Ember' },
+  { value: 'frost', label: 'Frost' },
+  { value: 'hydroid', label: 'Hydroid' },
+  { value: 'loki', label: 'Loki' },
+  { value: 'mesa', label: 'Mesa' },
+  { value: 'nekros', label: 'Nekros' },
+  { value: 'nova', label: 'Nova' },
+  { value: 'nyx', label: 'Nyx' },
+  { value: 'oberon', label: 'Oberon' },
+  { value: 'saryn', label: 'Saryn' },
+  { value: 'vauban', label: 'Vauban' },
+  { value: 'wisp', label: 'Wisp' },
+  { value: 'zephyr', label: 'Zephyr' },
+];
+
 export default function SelectExample() {
   const [value, setValue] = useState('excalibur');
+  const [scrollValue, setScrollValue] = useState('ash');
 
   return (
     <section id="select" className={styles.section}>
@@ -29,23 +48,29 @@ export default function SelectExample() {
             placeholder="Choose a warframe..."
           />
         </div>
-        <Code>{`import { Select } from '@milkybytes/warframe-ui';
-
-const options = [
-  { value: 'excalibur', label: 'Excalibur' },
-  { value: 'mag', label: 'Mag' },
-  { value: 'volt', label: 'Volt' },
-  { value: 'rhino', label: 'Rhino' },
-  { value: 'trinity', label: 'Trinity' },
-];
-
-const [value, setValue] = useState('excalibur');
-
-<Select
+        <Code>{`<Select
   options={options}
   value={value}
   onChange={(v) => setValue(v)}
   placeholder="Choose a warframe..."
+/>`}</Code>
+      </div>
+      <div className={styles.example}>
+        <div className={styles.preview}>
+          <Select
+            options={manyOptions}
+            value={scrollValue}
+            onChange={(v) => setScrollValue(v)}
+            visibleOptions={5}
+            placeholder="Choose a warframe..."
+          />
+        </div>
+        <Code>{`<Select
+  options={manyOptions}
+  value={scrollValue}
+  onChange={(v) => setScrollValue(v)}
+  visibleOptions={5}
+  placeholder="Choose a warframe..."
 />`}</Code>
       </div>
     </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkybytes/warframe-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Warframe-themed React UI components with CSS variable theming",
   "license": "MIT",
   "keywords": [

src/Select/Select.module.css

@@ -14,19 +14,40 @@
   font-family: inherit;
   color: rgba(from var(--wfui-text-interactive) R G B / 0.8);
   background-color: var(--wfui-surface);
+  box-shadow: inset 0 0 0 1px rgba(from var(--wfui-bg) R G B / 0.3);
   border: none;
   border-radius: 0px;
   cursor: pointer;
-  transition: color 0.2s;
+  transition: color 0.2s, box-shadow 0.2s;
   display: flex;
   align-items: center;
   justify-content: space-between;
   user-select: none;
   overflow: hidden;
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
-.select::before {
+.select:hover::after {
   content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(10%);
+  width: 200%;
+  height: 100%;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at 50% 100%,
+    rgba(from var(--wfui-accent) R G B / 0.8) 0%,
+    rgba(from var(--wfui-accent) R G B / 0.45) 20%,
+    rgba(from var(--wfui-accent) R G B / 0.2) 35%,
+    transparent 75%
+  );
+  z-index: 1;
+}
+
+.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -36,7 +57,7 @@
   pointer-events: none;
 }
 
-.select::after {
+.bottom::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -49,41 +70,24 @@
   pointer-events: none;
 }
 
-.select:hover {
-  color: var(--wfui-accent);
-}
-
-.select:hover::after {
+.select:hover .bottom::after {
   width: 100%;
 }
 
-.select:focus {
-  outline: none;
+.select:hover {
   color: var(--wfui-accent);
-}
-
-.select:focus::after {
-  width: 100%;
+  box-shadow: inset 0 0 0 1px rgba(from var(--wfui-accent) R G B / 0.15);
 }
 
 .select.disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.select.disabled::before,
 .select.disabled::after {
   display: none;
 }
 
-.select.open {
-  color: var(--wfui-accent);
-}
-
-.select.open::after {
-  width: 100%;
-}
-
 .selectValue {
   flex: 1;
   overflow: hidden;
@@ -96,36 +100,90 @@
 }
 
 .selectArrow {
-  font-size: 12px;
-  color: inherit;
-  transition: transform 0.2s, color 0.2s;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 9px solid currentColor;
+  transition: color 0.2s;
   margin-left: 8px;
-  min-width: 12px;
-  text-align: center;
   z-index: 2;
   position: relative;
+  transform-origin: center center;
+}
+
+.select.open .selectArrow {
+  transform: rotate(180deg);
 }
 
 .optionsDropdown {
   position: absolute;
   top: calc(100%);
   left: 0;
   right: 0;
-  background-color: var(--wfui-surface-alt);
-  max-height: 250px;
+  background-color: rgba(from var(--wfui-surface-alt) R G B / 0.98);
   overflow-y: auto;
   z-index: 1000;
-  box-shadow: var(--wfui-shadow)
 }
 
 .option {
   padding: 10px 12px;
   font-size: 14px;
-  color: var(--wfui-text);
+  color: var(--wfui-text-interactive);
   cursor: pointer;
-  transition: background-color 0.15s;
+  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
+  position: relative;
+  overflow: hidden;
+  text-transform: uppercase;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: inset 0 0 0 1px rgba(from var(--wfui-bg) R G B / 0.3);
+}
+
+.checkIcon {
+  fill: var(--wfui-text-interactive);
+  flex-shrink: 0;
+  margin-left: 8px;
+  transition: fill 0.15s;
+}
+
+.option:hover .checkIcon {
+  fill: var(--wfui-accent);
 }
 
 .option:hover {
-  background-color: var(--wfui-bg);
+  color: var(--wfui-accent);
+  box-shadow: inset 0 0 0 1px rgba(from var(--wfui-accent) R G B / 0.15);
+}
+
+.option:hover::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--wfui-accent);
+  pointer-events: none;
+}
+
+.option:hover::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(10%);
+  width: 200%;
+  height: 100%;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at 50% 100%,
+    rgba(from var(--wfui-accent) R G B / 0.8) 0%,
+    rgba(from var(--wfui-accent) R G B / 0.45) 20%,
+    rgba(from var(--wfui-accent) R G B / 0.2) 35%,
+    transparent 75%
+  );
+  z-index: 1;
 }

src/Select/Select.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import styles from './Select.module.css';
+import CheckIcon from '../icons/CheckIcon';
 
 export interface SelectOption {
   value: string;
@@ -16,6 +17,7 @@ export interface SelectProps {
   placeholder?: string;
   id?: string;
   required?: boolean;
+  visibleOptions?: number;
 }
 
 const Select = ({
@@ -28,6 +30,7 @@ const Select = ({
   placeholder = 'Select...',
   id,
   required,
+  visibleOptions,
 }: SelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(value);
@@ -96,23 +99,29 @@ const Select = ({
           }
         }}
       >
+        <span className={styles.bottom} />
         <span className={styles.selectValue}>
           {selectedOption ? selectedOption.label : placeholder}
         </span>
-        <span className={styles.selectArrow}>🞃</span>
+        <span className={styles.selectArrow} />
       </div>
 
       {isOpen && (
-        <div className={styles.optionsDropdown} role="listbox">
+        <div
+          className={styles.optionsDropdown}
+          role="listbox"
+          style={visibleOptions ? { maxHeight: `${visibleOptions * 39}px` } : undefined}
+        >
           {parsedOptions.map((option) => (
             <div
               key={option.value}
-              className={styles.option}
+              className={`${styles.option} ${option.value === selectedValue ? styles.selected : ''}`}
               onClick={() => handleSelect(option.value)}
               role="option"
               aria-selected={option.value === selectedValue}
             >
               {option.label}
+              {option.value === selectedValue && <CheckIcon size={18} className={styles.checkIcon} />}
             </div>
           ))}
         </div>