Merge pull request #36 from abusix/add-disabled-prop-to-single-combobox

feat(components): add disbaled state
abusix · Sep 7, 2023 · 8d9ce3d · 8d9ce3d
2 parents c1284a1 + 7ce9f45
commit 8d9ce3d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx
@@ -25,7 +25,7 @@ export const SingleComboboxInput = ({
                 placeholder={placeholder}
                 displayValue={() => displayValue}
                 onChange={onChange}
-                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200"
+                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300"
             />
             {showButton ? (
                 <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">

diff --git a/src/components/form-field/single-combobox/single-combobox.tsx b/src/components/form-field/single-combobox/single-combobox.tsx
@@ -11,11 +11,17 @@ export interface SingleComboboxProps<TValue> {
     value: TValue;
     onChange: (value: TValue) => void;
     children: React.ReactNode;
+    disabled?: boolean;
 }
 
-const SingleCombobox = <TValue,>({ value, onChange, children }: SingleComboboxProps<TValue>) => {
+const SingleCombobox = <TValue,>({
+    value,
+    onChange,
+    children,
+    disabled,
+}: SingleComboboxProps<TValue>) => {
     return (
-        <HeadlessCombobox value={value} onChange={onChange}>
+        <HeadlessCombobox value={value} onChange={onChange} disabled={disabled}>
             <div className="relative">{children}</div>
         </HeadlessCombobox>
     );