Skip to content

Commit

Permalink
Merge pull request #2372 from WTTJ/feat-disable-breadcrumb-item
Browse files Browse the repository at this point in the history
feat(breadcrumb): items without link must be disabled
  • Loading branch information
mleralec authored Jan 4, 2024
2 parents c1b3ed3 + c51ab20 commit 20989fa
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 26 deletions.
12 changes: 12 additions & 0 deletions docs/pages/components/breadcrumb.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,18 @@ By default we removed clickable the last child. You can change this by set to fa
</Breadcrumb>
```

## Items without link will be disable

We are looking for "href" prop. (or "to" prop for react-router)

```jsx
<Breadcrumb>
<Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
<Breadcrumb.Item>Disabled</Breadcrumb.Item>
<Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>
```

## Properties

### Breadcrumb
Expand Down
40 changes: 17 additions & 23 deletions packages/Breadcrumb/src/Item.styles.ts
Original file line number Diff line number Diff line change
@@ -1,30 +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`
${th('breadcrumbs.item.default')};
align-items: center;
transition: medium;
direction: initial;
export const Item = styled.aBox.withConfig({ shouldForwardProp })<ItemProps>(
({ isActive }) => css`
${th('breadcrumbs.item.default')};
align-items: center;
transition: medium;
direction: initial;
&:hover {
${th('breadcrumbs.item.hover')};
}
${!isActive &&
css`
&:hover {
${th('breadcrumbs.item.hover')};
}
`};
&[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')};
Expand Down
6 changes: 5 additions & 1 deletion packages/Breadcrumb/src/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export interface ItemOptions {
children: React.ReactNode
separator?: string | React.ReactNode
isActive?: boolean
/* useful for react-router */
to?: string
}

export type ItemProps = CreateWuiProps<'a', ItemOptions>
Expand All @@ -17,6 +19,8 @@ export type ItemProps = CreateWuiProps<'a', ItemOptions>
*/
export const Item = forwardRef<'a', ItemProps>(
({ children, dataTestId, isActive, separator, ...rest }, ref) => {
const isClickable = rest.href || rest.to

return (
<Box
aria-label="breadcrumb"
Expand All @@ -29,7 +33,7 @@ export const Item = forwardRef<'a', ItemProps>(
{separator && <S.Separator role="presentation">{separator}</S.Separator>}
<S.Item
aria-current={isActive ? 'page' : undefined}
isActive={isActive}
aria-disabled={!isClickable}
{...rest}
ref={ref}
>
Expand Down
1 change: 0 additions & 1 deletion packages/Breadcrumb/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export const BreadcrumbComponent = forwardRef<'div', BreadcrumbProps>(
key: `breadcrumb-${index}`,
separator: isLastChild ? undefined : separator,
isActive,
as: !!isActive && 'span',
...child.props,
})
})
Expand Down
2 changes: 1 addition & 1 deletion packages/Core/src/theme/breadcrumbs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const getBreadcrumbs = (theme: WuiTheme): ThemeBreadcrumbs => {
color: colors['dark-700'],
},
active: {
color: colors['dark-900'],
color: colors['dark-700'],
},
},
separator: {
Expand Down

0 comments on commit 20989fa

Please sign in to comment.