chore(breadcrumb): change active color item

WTTJ · Jan 4, 2024 · c51ab20 · c51ab20
1 parent 2aac9e5
commit c51ab20
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 39 deletions.
diff --git a/docs/pages/components/breadcrumb.mdx b/docs/pages/components/breadcrumb.mdx
@@ -67,15 +67,15 @@ By default we removed clickable the last child. You can change this by set to fa
 </Breadcrumb>
 ```
 
-## Item disable
+## Items without link will be disable
 
-You can disable an item.
+We are looking for "href" prop. (or "to" prop for react-router)
 
 ```jsx
 <Breadcrumb>
-  <Breadcrumb.Item disabled>Introduction</Breadcrumb.Item>
-  <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
-  <Breadcrumb.Item href="/">Breadcrumb</Breadcrumb.Item>
+  <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
+  <Breadcrumb.Item>Disabled</Breadcrumb.Item>
+  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
 </Breadcrumb>
 ```
 

diff --git a/packages/Breadcrumb/src/Item.styles.ts b/packages/Breadcrumb/src/Item.styles.ts
@@ -1,35 +1,24 @@
-import styled, { css, th } from '@xstyled/styled-components'
-import { shouldForwardProp } from '@welcome-ui/system'
+import styled, { th } from '@xstyled/styled-components'
 
-interface ItemProps {
-  isActive: boolean
-}
-
-export const Item = styled.aBox.withConfig({ shouldForwardProp })<ItemProps>(
-  ({ isActive }) => css`
-    ${th('breadcrumbs.item.default')};
-    align-items: center;
-    transition: medium;
-    direction: initial;
+export const Item = styled.aBox`
+  ${th('breadcrumbs.item.default')};
+  align-items: center;
+  transition: medium;
+  direction: initial;
 
-    ${!isActive &&
-    css`
-      &:hover {
-        ${th('breadcrumbs.item.hover')};
-      }
-    `};
+  &:hover {
+    ${th('breadcrumbs.item.hover')};
+  }
 
-    &[aria-disabled='true'] {
-      pointer-events: none;
-      cursor: default;
-    }
+  &[aria-current='page'] {
+    ${th('breadcrumbs.item.active')};
+  }
 
-    ${isActive &&
-    css`
-      ${th('breadcrumbs.item.active')};
-    `}
-  `
-)
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    cursor: default;
+  }
+`
 
 export const Separator = styled.span`
   ${th('breadcrumbs.separator')};

diff --git a/packages/Breadcrumb/src/Item.tsx b/packages/Breadcrumb/src/Item.tsx
@@ -6,9 +6,10 @@ import * as S from './Item.styles'
 
 export interface ItemOptions {
   children: React.ReactNode
-  disabled?: boolean
   separator?: string | React.ReactNode
   isActive?: boolean
+  /* useful for react-router */
+  to?: string
 }
 
 export type ItemProps = CreateWuiProps<'a', ItemOptions>
@@ -17,7 +18,9 @@ export type ItemProps = CreateWuiProps<'a', ItemOptions>
  * @name Breadcrumb.Item
  */
 export const Item = forwardRef<'a', ItemProps>(
-  ({ children, dataTestId, disabled, isActive, separator, ...rest }, ref) => {
+  ({ children, dataTestId, isActive, separator, ...rest }, ref) => {
+    const isClickable = rest.href || rest.to
+
     return (
       <Box
         aria-label="breadcrumb"
@@ -30,8 +33,7 @@ export const Item = forwardRef<'a', ItemProps>(
         {separator && <S.Separator role="presentation">{separator}</S.Separator>}
         <S.Item
           aria-current={isActive ? 'page' : undefined}
-          aria-disabled={disabled}
-          isActive={isActive}
+          aria-disabled={!isClickable}
           {...rest}
           ref={ref}
         >

diff --git a/packages/Breadcrumb/src/index.tsx b/packages/Breadcrumb/src/index.tsx
@@ -58,7 +58,6 @@ export const BreadcrumbComponent = forwardRef<'div', BreadcrumbProps>(
         key: `breadcrumb-${index}`,
         separator: isLastChild ? undefined : separator,
         isActive,
-        as: !!isActive && 'span',
         ...child.props,
       })
     })

diff --git a/packages/Core/src/theme/breadcrumbs.ts b/packages/Core/src/theme/breadcrumbs.ts
@@ -29,7 +29,7 @@ export const getBreadcrumbs = (theme: WuiTheme): ThemeBreadcrumbs => {
         color: colors['dark-700'],
       },
       active: {
-        color: colors['dark-900'],
+        color: colors['dark-700'],
       },
     },
     separator: {