Merge pull request #68 from rtCamp/fix/components

Fix: UI/UX component issues

Author: mohdsayed

packages/frappe-ui-react/src/components/breadcrumbs/breadcrumbs.tsx

@@ -73,7 +73,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
   return (
     <div className="flex min-w-0 items-center">
       {dropdownItems.length > 0 && (
-        <div className="h-7">
+        <div className="h-7 flex items-center">
           <Dropdown options={dropdownItems as unknown as DropdownOptions}>
             <Button variant="ghost">
               <ThreeDotsIcon />

packages/frappe-ui-react/src/components/circularProgressBar/circularProgressBar.tsx

@@ -176,7 +176,7 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
   return (
     <div
-      className={`progressbar ${completedClass} ${variantClass} text-ink-gray-3`}
+      className={`progressbar ${completedClass} ${variantClass} dark:text-ink-gray-3`}
       role="progressbar"
       aria-valuenow={progress}
       aria-valuemin={0}

packages/frappe-ui-react/src/components/combobox/combobox.stories.tsx

@@ -7,7 +7,13 @@ const meta: Meta<typeof Combobox> = {
   title: "Components/Combobox",
   tags: ["autodocs"],
   component: Combobox,
-  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+      story: { height: "300px" },
+    },
+    layout: "centered",
+  },
   argTypes: {
     options: {
       control: "object",

packages/frappe-ui-react/src/components/combobox/combobox.tsx

@@ -51,8 +51,8 @@ export const Combobox: React.FC<ComboboxProps> = ({
   }, [value, allOptionsFlat]);
 
   const filteredOptions = useMemo(() => {
-    if (!query) {
-      return options;
+		if (!query) {
+			return options;
     }
 
     return options
@@ -66,10 +66,12 @@ export const Combobox: React.FC<ComboboxProps> = ({
       )
       .filter((opt) =>
         typeof opt === "string"
-          ? opt
+          ? opt.toLowerCase().includes(query.toLowerCase())
           : "group" in opt
-          ? opt.options.length
-          : opt
+          ? opt.options.some((o) =>
+							getLabel(o).toLowerCase().includes(query.toLowerCase())
+						)
+          : opt.label.toLowerCase().includes(query.toLowerCase())
       );
   }, [options, query]);
 
@@ -138,8 +140,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
         </ComboboxButton>
         <ComboboxOptions
           className={`
-            absolute z-[100] mt-1 w-full bg-surface-white border border-surface-gray-2 rounded shadow-xl min-w-[160px]
-            animate-fade-in
+            absolute z-[100] mt-1 w-full bg-surface-white border border-surface-gray-2 rounded shadow-xl min-w-[160px] max-h-50 animate-fade-in overflow-auto
           `}
         >
           {filteredOptions.length === 0 && (