Skip to content

Commit

Permalink
Showing 4 changed files with 45 additions and 8 deletions.
6 changes: 6 additions & 0 deletions packages/components/breadcrumb/src/Breadcrumb.doc.mdx
Original file line number Diff line number Diff line change
@@ -60,3 +60,9 @@ import { Breadcrumb } from '@spark-ui/breadcrumb'
Use the `children` property of `Breadcrumb.Separator` to use a different icon for the separator. You can also use raw text.

<Canvas of={stories.CustomSeparator} />

### Truncate

Apply a maximum width on an element to truncate it automatically.

<Canvas of={stories.Truncate} />
24 changes: 23 additions & 1 deletion packages/components/breadcrumb/src/Breadcrumb.stories.tsx
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ export const Default: StoryFn = _args => (
<Breadcrumb.Separator />

<Breadcrumb.Item>
<Breadcrumb.CurrentPage>Breadcrumb</Breadcrumb.CurrentPage>
<Breadcrumb.CurrentPage aria-disabled>Breadcrumb</Breadcrumb.CurrentPage>
</Breadcrumb.Item>
</Breadcrumb>
)
@@ -62,3 +62,25 @@ export const CustomSeparator: StoryFn = _args => (
</Breadcrumb.Item>
</Breadcrumb>
)

export const Truncate: StoryFn = _args => (
<Breadcrumb aria-label="Breadcrumb">
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>

<Breadcrumb.Separator />

<Breadcrumb.Item>
<Breadcrumb.Link href="/?path=/docs/experimental-breadcrumb--docs" className="max-w-[100px]">
Components list - Feel free to use them
</Breadcrumb.Link>
</Breadcrumb.Item>

<Breadcrumb.Separator />

<Breadcrumb.Item>
<Breadcrumb.CurrentPage>Breadcrumb</Breadcrumb.CurrentPage>
</Breadcrumb.Item>
</Breadcrumb>
)
20 changes: 14 additions & 6 deletions packages/components/breadcrumb/src/BreadcrumbCurrentPage.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
import { Slot } from '@spark-ui/slot'
import { TextLink } from '@spark-ui/text-link'
import { cx } from 'class-variance-authority'
import { ComponentPropsWithoutRef, forwardRef } from 'react'

export interface CurrentPageProps extends ComponentPropsWithoutRef<'span'> {
export interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {
asChild?: boolean
className?: string
}

export const CurrentPage = forwardRef<HTMLSpanElement, CurrentPageProps>(
({ asChild = false, className, ...rest }, ref) => {
const Component = asChild ? Slot : 'span'
export const CurrentPage = forwardRef<HTMLAnchorElement, CurrentPageProps>(
(
{ asChild = false, className, bold = true, intent = 'current', underline = false, ...rest },
ref
) => {
const Component = asChild ? Slot : TextLink

return (
<Component
data-spark-component="breadcrumb-current-page"
role="link"
href=""
aria-current="page"
aria-disabled
className={className}
className={cx('!inline overflow-hidden text-ellipsis whitespace-nowrap', className)}
bold={bold}
intent={intent}
underline={underline}
ref={ref}
{...rest}
/>
3 changes: 2 additions & 1 deletion packages/components/breadcrumb/src/BreadcrumbLink.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Slot } from '@spark-ui/slot'
import { TextLink } from '@spark-ui/text-link'
import { cx } from 'class-variance-authority'
import { ComponentPropsWithoutRef, forwardRef } from 'react'

export interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
@@ -28,7 +29,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
data-spark-component="breadcrumb-link"
href={href}
ref={ref}
className={className}
className={cx('!inline overflow-hidden text-ellipsis whitespace-nowrap', className)}
bold={bold}
intent={intent}
underline={underline}

0 comments on commit 8890b7e

Please sign in to comment.