Adds disabled state to option field (#282)

parcelvoy · Oct 13, 2023 · a87e510 · a87e510
1 parent 5c21c26
commit a87e510
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/apps/ui/src/ui/form/OptionField.css b/apps/ui/src/ui/form/OptionField.css
@@ -13,7 +13,6 @@
 }
 
 .options-group .option {
-    /* border: 1px solid var(--color-grey); */
     flex-grow: 1;
     border-radius: var(--border-radius-inner);
     padding: 8px 10px;
@@ -28,7 +27,7 @@
     display: block;
 }
 
-.options-group .option:hover {
+.options-group .option:hover:not(.disabled) {
     background: var(--color-grey-soft);
     border-color: var(--color-grey-hard);
 }
@@ -37,4 +36,8 @@
     background: var(--color-primary);
     color: var(--color-on-primary);
     border-color: var(--color-primary);
+}
+
+.options-group .option.disabled {
+    cursor: not-allowed;
 }
diff --git a/apps/ui/src/ui/form/OptionField.tsx b/apps/ui/src/ui/form/OptionField.tsx
@@ -4,6 +4,7 @@ import { RadioGroup } from '@headlessui/react'
 import { FieldProps, FieldOption } from './Field'
 import './OptionField.css'
 import { snakeToTitle } from '../../utils'
+import clsx from 'clsx'
 
 interface OptionFieldProps<X extends FieldValues, P extends FieldPath<X>> extends FieldProps<X, P> {
     options: FieldOption[]
@@ -51,10 +52,9 @@ export default function OptionField<X extends FieldValues, P extends FieldPath<X
                     <RadioGroup.Option
                         key={key}
                         value={key}
-                        className={({ active, checked }) =>
-                            `option ${active ? 'active' : ''}
-                            ${checked ? 'selected' : ''}`
-                        }>{label}</RadioGroup.Option>
+                        className={({ active, checked, disabled }) => clsx(
+                            'option', { selected: checked, active, disabled },
+                        )}>{label}</RadioGroup.Option>
                 ))}
             </div>
         </RadioGroup>