Update Select component to appear more similar to the SearchableSelec…

…t component.
AtB-AS · Oct 30, 2024 · 1e5cdc5 · 1e5cdc5
1 parent cb76219
commit 1e5cdc5
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 47 deletions.
diff --git a/src/page-modules/contact/components/form/form.module.css b/src/page-modules/contact/components/form/form.module.css
@@ -236,20 +236,6 @@
   ) !important;
 }
 
-/** select */
-
-.select {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacings-small);
-}
-
-.select__select {
-  border: var(--border-width-slim) solid var(--text-colors-primary);
-  border-radius: var(--border-radius-small);
-  padding: var(--spacings-small);
-}
-
 /* error message */
 
 .errorMessage {
@@ -346,12 +332,12 @@
   justify-content: space-between;
 }
 
-/* searchable-select*/
+/* select and searchable-select*/
+.select__select_container,
 .searchable_select__comboBox {
   display: flex;
   flex-direction: column;
   gap: var(--spacings-small);
-  width: 100%;
 }
 
 .searchable_select__input_container {
@@ -410,6 +396,7 @@
   background-color: transparent;
 }
 
+.select__popover,
 .searchable_select__popover {
   overflow: auto;
   max-height: 16rem;
@@ -432,6 +419,7 @@
   }
 }
 
+.select__listBox,
 .searchable_select__listBox {
   max-height: 16rem;
   overflow-y: auto;
@@ -444,30 +432,77 @@
   white-space: nowrap;
 }
 
+.select__listBoxItem,
 .searchable_select__listBoxItem {
   display: flex;
   align-items: center;
   cursor: default;
   color: var(--static-background-background_0-text);
   border-radius: var(--border-radius-small);
+  border-bottom: 1px solid var(--static-background-background_2-background);
   z-index: 1;
 }
 
+.select__item,
 .searchable_select__item {
   width: 100%;
-  gap: var(--spacings-small);
-
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  gap: var(--spacings-small);
   padding: var(--spacings-small);
 }
 
+.select__highlight,
 .searchable_select__highlight {
   position: relative;
-  padding: var(--spacings-small);
   border-radius: var(--border-radius-small);
-  color: var(--interactive-interactive_2-hover-text);
   background-color: var(--interactive-interactive_2-hover-background);
   z-index: 2;
 }
+
+.select__button {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacings-small);
+  color: var(--text-colors-primary);
+  background-color: transparent;
+  border-radius: var(--border-radius-small);
+  border: var(--border-width-slim) solid var(--text-colors-primary);
+}
+
+.select__button:focus-within {
+  outline: 0;
+  box-shadow: inset 0 0 0 var(--border-width-slim)
+    var(--interactive-interactive_2-outline-background);
+}
+
+.select__item:focus,
+.select__listBoxItem:focus {
+  outline: 0;
+  border-radius: var(--border-radius-small);
+}
+
+.select__placholder {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+@media (max-width: 600px) {
+  .select,
+  .select__label,
+  .select__placholder,
+  .select__listBoxItem,
+  .searchable_select__comboBox,
+  .searchable_select__listBoxItem,
+  .searchable_select__input:not(:focus):placeholder-shown {
+    font-size: 1.25rem;
+  }
+  .select__popover,
+  .searchable_select__popover {
+    overflow-y: auto;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
+  }
+}
diff --git a/src/page-modules/contact/components/form/select.tsx b/src/page-modules/contact/components/form/select.tsx
@@ -1,8 +1,16 @@
 import { useId } from 'react';
 import ErrorMessage from './error-message';
-import { Typo } from '@atb/components/typography';
-
+import { MonoIcon } from '@atb/components/icon';
 import style from './form.module.css';
+import {
+  Button,
+  Key,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select,
+} from 'react-aria-components';
 
 export type SelectProps<T> = {
   label: string;
@@ -16,7 +24,7 @@ export type SelectProps<T> = {
   disabled?: boolean;
 };
 
-export default function Select<T>({
+export default function CustomeSelect<T>({
   label,
   onChange,
   error,
@@ -30,36 +38,72 @@ export default function Select<T>({
   const id = useId();
   const showError = !!error;
 
-  const findItemFromOptions = (id: string) =>
-    options.find((opt) => valueToId(opt) == id);
+  const findItemFromOptions = (key: string) =>
+    options.find((option) => valueToId(option) === key.toLowerCase());
 
-  const onChangeInternal = (val: string) => {
-    onChange(findItemFromOptions(val));
+  const onChangeInternal = (key: Key | null) => {
+    if (key === null) return;
+    onChange(findItemFromOptions(key.toString()));
   };
 
   return (
-    <div className={style.select}>
-      <label>
-        <Typo.span textType="body__primary">{label}</Typo.span>
-      </label>
-      <select
+    <div className={style.select__select_container}>
+      <Label>{label}</Label>
+      <Select
         id={`select-${id}`}
-        onChange={(e) => onChangeInternal(e.target.value)}
-        value={value ? valueToId(value) : placeholder}
-        className={style.select__select}
-        disabled={disabled}
+        onSelectionChange={onChangeInternal}
+        isDisabled={disabled}
       >
-        {placeholder && (
-          <option value={placeholder} disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option key={valueToId(option)} value={valueToId(option)}>
-            {valueToText(option)}
-          </option>
-        ))}
-      </select>
+        <Button className={style.select__button}>
+          {value ? (
+            <span>{valueToText(value)}</span>
+          ) : (
+            <span className={style.select__placholder}>{placeholder}</span>
+          )}
+          <MonoIcon icon={'navigation/ExpandMore'} />
+        </Button>
+        <Popover className={style.select__popover}>
+          <ListBox className={style.select__listBox}>
+            <ListBoxItem
+              isDisabled
+              textValue={placeholder}
+              className={style.select__listBoxItem}
+            >
+              <div className={style.select__item}>
+                <span>
+                  {!value ? <MonoIcon icon={'actions/Confirm'} /> : '\u00A0'}
+                </span>
+                <span>{placeholder}</span>
+              </div>
+            </ListBoxItem>
+            {options.map((option) => (
+              <ListBoxItem
+                id={`${valueToId(option)}`}
+                key={`key-option-${valueToId(option)}`}
+                textValue={valueToText(option)}
+                className={style.select__listBoxItem}
+              >
+                {({ isSelected, isFocused }) => (
+                  <div
+                    className={`${style.select__item} ${
+                      isFocused ? style.select__highlight : ''
+                    }`}
+                  >
+                    <span>
+                      {value && isSelected ? (
+                        <MonoIcon icon={'actions/Confirm'} />
+                      ) : (
+                        '\u00A0'
+                      )}
+                    </span>
+                    <span>{valueToText(option)}</span>
+                  </div>
+                )}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </Select>
       {showError && <ErrorMessage message={error} />}
     </div>
   );