Add background-color to highlight being disabled. (#426)

AtB-AS · Nov 14, 2024 · 47b62dd · 47b62dd
1 parent 806f1c0
commit 47b62dd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/page-modules/contact/components/form/form.module.css b/src/page-modules/contact/components/form/form.module.css
@@ -387,6 +387,10 @@
   color: var(--static-background-background_2-text);
 }
 
+.searchable_select__input_disabled {
+  cursor: not-allowed;
+}
+
 .searchable_select__input::placeholder {
   color: var(--text-colors-secondary);
   opacity: 1;
@@ -405,6 +409,10 @@
   background-color: transparent;
 }
 
+.searchable_select__button:disabled {
+  cursor: not-allowed;
+}
+
 .select__popover,
 .searchable_select__popover {
   overflow: auto;

diff --git a/src/page-modules/contact/components/form/searchable-select/searchable-select.tsx b/src/page-modules/contact/components/form/searchable-select/searchable-select.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { MonoIcon } from '@atb/components/icon';
 import ErrorMessage from '../error-message';
 import style from '../form.module.css';
+import { andIf } from '@atb/utils/css';
 import {
   Key,
   Button,
@@ -91,11 +92,14 @@ export default function SearchableSelect<T>({
       onSelectionChange={handleSelectionChange}
       className={style.searchable_select__comboBox}
     >
-      <Label>{label}</Label>
+      <Label className={isDisabled ? style.label_disabled : ''}>{label}</Label>
       <Group className={style.searchable_select__group}>
         <Input
           placeholder={placeholder}
-          className={style.searchable_select__input}
+          className={andIf({
+            [style.searchable_select__input]: true,
+            [style.searchable_select__input_disabled]: !!isDisabled,
+          })}
           value={inputValue}
           onChange={(e) => handleInputChange(e.target.value)}
           onFocus={handleFocus}