Enabled dropdown icons support in Breadcrumbs drop menu (#804)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
minio · May 22, 2024 · 64329d3 · 64329d3
1 parent b0b8cba
commit 64329d3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Breadcrumbs/BreadcrumbButton.tsx b/src/components/Breadcrumbs/BreadcrumbButton.tsx
@@ -181,10 +181,12 @@ const BreadcrumbButton: FC<
         })}
         compact
       >
-        {subOptions.map((option) => (
+        {subOptions.map((option, index) => (
           <ExpandMenuOption
+            key={`expand-opt-${option.label}-${index}`}
             id={`expandOption-${option.label}`}
             onClick={() => clickFunction(option)}
+            icon={option.icon}
           >
             {option.label}
           </ExpandMenuOption>

diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -91,9 +91,9 @@ const subMenuOptions: BreadcrumbsOption[] = [
           console.log("clicked", dt);
         },
       },
-      { label: "SubLevel 2", to: "/lol" },
+      { label: "SubLevel 2", to: "/lol", icon: <TestIcon /> },
       { label: "SubLevel 3", to: "/lol" },
-      { label: "SubLevel 4", to: "/lol" },
+      { label: "SubLevel 4", to: "/lol", icon: <TestIcon /> },
       { label: "SubLevel 5", to: "/lol" },
     ],
   },

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -143,8 +143,9 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
         dropArrow={false}
         compact
       >
-        {colOpts.map((option) => (
+        {colOpts.map((option, index) => (
           <ExpandMenuOption
+            key={`expandOption-${option.label}-${index}`}
             id={`expandOption-${option.label}`}
             onClick={() => clickFunction(option)}
           >
@@ -191,7 +192,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
               const lastItem = index === itSlide.length - 1;
 
               return (
-                <Fragment>
+                <Fragment key={`expandOption-${itm.label}-${index}`}>
                   {index !== 0 && <Divider />}
                   <BreadcrumbButton
                     id={`breadcrumb-option-${itm.label}`}
@@ -211,7 +212,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
               const lastItem = index === options.length - 1;
 
               return (
-                <Fragment>
+                <Fragment key={`expandOption-${itm.label}-${index}`}>
                   {index !== 0 && <Divider />}
                   <BreadcrumbButton
                     id={`breadcrumb-option-${itm.label}`}