feat: added disabled option/styles to listboxes

abusix · Aug 15, 2024 · 8fe13af · 8fe13af
1 parent c37b7b9
commit 8fe13af
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/src/components/form-field/listbox/listbox-button.tsx b/src/components/form-field/listbox/listbox-button.tsx
@@ -3,15 +3,25 @@ import React from "react";
 import { CaretDownIcon } from "../../../icons";
 import { ListboxButtonBadgeValue } from "./listbox-button-badge-value";
 import { ListboxButtonTextValue } from "./listbox-button-text-value";
+import { classNames } from "../../../util/class-names";
 
 export interface ListboxButtonProps {
     children: React.ReactNode;
+    disabled?: boolean;
 }
 
-const ListboxButton = ({ children }: ListboxButtonProps) => {
+const ListboxButton = ({ children, disabled }: ListboxButtonProps) => {
     return (
-        <HeadlessUiListboxButton className="group flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 bg-neutral-0 py-2 pl-3 pr-8 outline-none hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200">
+        <HeadlessUiListboxButton
+            disabled={disabled}
+            className={classNames(
+                "group flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 bg-neutral-0 py-2 pl-3 pr-8 outline-none hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200",
+                disabled &&
+                    "cursor-not-allowed border-neutral-300 bg-neutral-100 text-neutral-600 hover:border-neutral-300"
+            )}
+        >
             {children}
+
             <div className="absolute inset-y-0 right-0 flex items-center px-1.5">
                 <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100  focus:outline-none">
                     <CaretDownIcon className="h-3 w-3 fill-neutral-600" aria-hidden="true" />

diff --git a/src/components/form-field/listbox/listbox.stories.tsx b/src/components/form-field/listbox/listbox.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import React, { FC } from "react";
 import { FormField } from "../form-field";
 
 const meta: Meta<typeof FormField.Listbox> = {
@@ -60,7 +60,7 @@ const ListboxTextWithHooks = () => {
     );
 };
 
-const ListboxBadgeWithHooks = () => {
+const ListboxBadgeWithHooks: FC<{ disabled?: boolean }> = ({ disabled }) => {
     const [selectedPerson, setSelectedPerson] = React.useState<null | Person>(null);
 
     return (
@@ -69,13 +69,15 @@ const ListboxBadgeWithHooks = () => {
                 <FormField.Label htmlFor="value">Label</FormField.Label>
                 <FormField.Description id="value-description">Description</FormField.Description>
             </FormField.LabelGroup>
+
             <FormField.Listbox value={selectedPerson} onChange={setSelectedPerson}>
-                <FormField.Listbox.Button>
+                <FormField.Listbox.Button disabled={disabled}>
                     <FormField.Listbox.Button.BadgeValue
                         value={selectedPerson?.name ?? null}
-                        placeholder="Select..."
+                        placeholder="Select …"
                     />
                 </FormField.Listbox.Button>
+
                 <FormField.Listbox.Options>
                     {people.map((person) => (
                         <FormField.Listbox.Option value={person} key={person.id}>
@@ -105,3 +107,11 @@ export const Badge: Story = {
         </div>
     ),
 };
+
+export const Disabled: Story = {
+    render: () => (
+        <div className="w-72">
+            <ListboxBadgeWithHooks disabled />
+        </div>
+    ),
+};