fix: breadcrumb class override (#884)

qwikifiers · Jul 13, 2024 · 79d3b31 · 79d3b31
1 parent 85e7d15
commit 79d3b31
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/apps/website/src/routes/docs/styled/breadcrumb/index.mdx b/apps/website/src/routes/docs/styled/breadcrumb/index.mdx
@@ -37,11 +37,11 @@ const Root = component$<BreadcrumbProps>(() => {
 const List = component$<PropsOf<'ol'>>((props) => {
   return (
     <ol
+      {...props}
       class={cn(
         ' flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
         props.class,
       )}
-      {...props}
     >
       <Slot />
     </ol>
@@ -50,7 +50,7 @@ const List = component$<PropsOf<'ol'>>((props) => {
 
 const Item = component$<PropsOf<'li'>>((props) => {
   return (
-    <li class={cn('inline-flex items-center gap-1.5', props.class)} {...props}>
+    <li {...props} class={cn('inline-flex items-center gap-1.5', props.class)}>
       <Slot />
     </li>
   );
@@ -60,11 +60,11 @@ const Link = component$<PropsOf<'a'> & { asChild?: boolean }>((props) => {
   const Comp = props.asChild ? Slot : 'a';
   return (
     <Comp
+      {...props}
       class={cn(
         'text-muted-foreground transition-colors hover:text-foreground',
         props.class,
       )}
-      {...props}
     >
       {!props.asChild && <Slot />}
     </Comp>
@@ -85,8 +85,8 @@ const Page = component$<PropsOf<'span'>>((props) => {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      class={cn('font-normal text-foreground', props.class)}
       {...props}
+      class={cn('font-normal text-foreground', props.class)}
     >
       <Slot />
     </span>

diff --git a/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx b/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx
@@ -14,11 +14,11 @@ const Root = component$<BreadcrumbProps>(() => {
 const List = component$<PropsOf<'ol'>>((props) => {
   return (
     <ol
+      {...props}
       class={cn(
         ' flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
         props.class,
       )}
-      {...props}
     >
       <Slot />
     </ol>
@@ -27,7 +27,7 @@ const List = component$<PropsOf<'ol'>>((props) => {
 
 const Item = component$<PropsOf<'li'>>((props) => {
   return (
-    <li class={cn('inline-flex items-center gap-1.5', props.class)} {...props}>
+    <li {...props} class={cn('inline-flex items-center gap-1.5', props.class)}>
       <Slot />
     </li>
   );
@@ -37,11 +37,11 @@ const Link = component$<PropsOf<'a'> & { asChild?: boolean }>((props) => {
   const Comp = props.asChild ? Slot : 'a';
   return (
     <Comp
+      {...props}
       class={cn(
         'text-muted-foreground transition-colors hover:text-foreground',
         props.class,
       )}
-      {...props}
     >
       {!props.asChild && <Slot />}
     </Comp>
@@ -62,8 +62,8 @@ const Page = component$<PropsOf<'span'>>((props) => {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      class={cn('font-normal text-foreground', props.class)}
       {...props}
+      class={cn('font-normal text-foreground', props.class)}
     >
       <Slot />
     </span>