fix: remove breadcrumbList

significa · Oct 30, 2024 · f6d944d · f6d944d
1 parent d357ddd
commit f6d944d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 71 deletions.
diff --git a/src/components/foundations/Breadcrumb/Breadcrumb.tsx b/src/components/foundations/Breadcrumb/Breadcrumb.tsx
@@ -6,23 +6,20 @@ const Breadcrumb = forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode;
+    className?: string;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = 'Breadcrumb';
-
-const BreadcrumbList = forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
-  ({ className, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
+  <nav ref={ref} aria-label="breadcrumb">
     <ol
-      ref={ref}
       className={cn(
         'flex flex-wrap items-center gap-1.5 break-words text-sm font-medium text-primary/50 sm:gap-2.5',
         className
       )}
       {...props}
     />
-  )
-);
-BreadcrumbList.displayName = 'BreadcrumbList';
+  </nav>
+));
+Breadcrumb.displayName = 'Breadcrumb';
 
 const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
   ({ className, ...props }, ref) => (
@@ -74,7 +71,6 @@ BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
 
 export {
   Breadcrumb,
-  BreadcrumbList,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbPage,

diff --git a/src/components/foundations/Breadcrumb/examples/WithBadge.tsx b/src/components/foundations/Breadcrumb/examples/WithBadge.tsx
@@ -1,25 +1,17 @@
 import { PlusCircle } from 'lucide-react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator
-} from '../Breadcrumb';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '../Breadcrumb';
 
 export function WithBadge() {
   return (
     <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/journeys">Journeys</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/journeys/new">New journey</BreadcrumbLink>
-          <PlusCircle size={14} />
-        </BreadcrumbItem>
-      </BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/journeys">Journeys</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/journeys/new">New journey</BreadcrumbLink>
+        <PlusCircle size={14} />
+      </BreadcrumbItem>
     </Breadcrumb>
   );
 }
diff --git a/src/components/foundations/Breadcrumb/examples/WithEllipsis.tsx b/src/components/foundations/Breadcrumb/examples/WithEllipsis.tsx
@@ -3,31 +3,28 @@ import {
   BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
-  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator
 } from '../Breadcrumb';
 
 export function WithEllipsis() {
   return (
     <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Laptops</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Laptops</BreadcrumbPage>
+      </BreadcrumbItem>
     </Breadcrumb>
   );
 }
diff --git a/src/pages/components/breadcrumb.mdx b/src/pages/components/breadcrumb.mdx
@@ -3,8 +3,7 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
-  BreadcrumbPage,
-  BreadcrumbList
+  BreadcrumbPage
 } from 'components/foundations/Breadcrumb';
 import { PreviewBox } from 'components/PreviewBox';
 import { FileCode } from 'components/FileCode';
@@ -16,19 +15,17 @@ A breadcrumb navigation component that helps users understand their current loca
 
 <PreviewBox>
   <Breadcrumb>
-    <BreadcrumbList>
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">Home</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Laptops</BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/contacts">Contacts</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Laptops</BreadcrumbPage>
+    </BreadcrumbItem>
   </Breadcrumb>
 </PreviewBox>
 
@@ -66,24 +63,21 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
-  BreadcrumbPage,
-  BreadcrumbList
+  BreadcrumbPage
 } from '[path]/Breadcrumb';
 ```
 
 Basic example of a breadcrumb navigation:
 
 ```tsx copy
 <Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
-    </BreadcrumbItem>
-  </BreadcrumbList>
+  <BreadcrumbItem>
+    <BreadcrumbLink href="/">Home</BreadcrumbLink>
+  </BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem>
+    <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+  </BreadcrumbItem>
 </Breadcrumb>
 ```