diff --git a/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx b/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx index e7c32c5f24..4d6a1f7b31 100644 --- a/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx +++ b/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx @@ -25,7 +25,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) { } const handleAction = (event: React.MouseEvent | React.KeyboardEvent) => { - if (props.disabled || props.current) { + if (props.disabled) { event.preventDefault(); return; } @@ -43,7 +43,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) { } }; - const isDisabled = props.disabled || props.current; + const isDisabled = props.disabled; let linkProps: React.AnchorHTMLAttributes = { title, onClick: handleAction, @@ -68,7 +68,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) { } if (props.current) { - linkProps['aria-current'] = 'page'; + linkProps['aria-current'] = props['aria-current'] ?? 'page'; } if (props.itemType === 'menu') { diff --git a/src/components/lab/Breadcrumbs/Breadcrumbs.tsx b/src/components/lab/Breadcrumbs/Breadcrumbs.tsx index 8cd6ef2120..c3cf01be45 100644 --- a/src/components/lab/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/lab/Breadcrumbs/Breadcrumbs.tsx @@ -27,7 +27,9 @@ export interface BreadcrumbsItemProps { ping?: string; referrerPolicy?: React.HTMLAttributeReferrerPolicy; 'aria-label'?: string; + 'aria-current'?: React.AriaAttributes['aria-current']; routerOptions?: RouterOptions; + disabled?: boolean; } function Item(_props: BreadcrumbsItemProps): React.ReactElement | null { @@ -237,7 +239,7 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs( {...child.props} key={key} current={isCurrent} - disabled={props.disabled} + disabled={props.disabled || child.props.disabled} onAction={handleAction} navigate={navigate} > diff --git a/src/components/lab/Breadcrumbs/README.md b/src/components/lab/Breadcrumbs/README.md index b3e3683234..cb5b69bb39 100644 --- a/src/components/lab/Breadcrumbs/README.md +++ b/src/components/lab/Breadcrumbs/README.md @@ -469,6 +469,62 @@ LANDING_BLOCK--> +### Disabled items + + + + + +```jsx + + Region + + Country + + City + District + + Street + + +``` + + + + + + + ## Properties | Name | Description | Type | Default | @@ -499,3 +555,4 @@ LANDING_BLOCK--> | href | A URL to link to. | `string` | | | target | The target window for the link. | `React.HTMLAttributeAnchorTarget` | | | rel | The relationship between the linked resource and the current page. | `string` | | +| disabled | Whether the BreadcrumbsItem is disabled. | `boolean` | | diff --git a/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx b/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx index 59b90c69c3..16a967c1c3 100644 --- a/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx +++ b/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx @@ -136,3 +136,19 @@ export const WithIcons = { export const Landmarks = { render: (args) => , } satisfies Story; + +export const DisabledItems = { + render: (args) => ( + + Region + + Country + + City + District + + Street + + + ), +} satisfies Story; diff --git a/src/components/lab/Breadcrumbs/__stories__/Docs.mdx b/src/components/lab/Breadcrumbs/__stories__/Docs.mdx index 12225aef2b..6de1aa1485 100644 --- a/src/components/lab/Breadcrumbs/__stories__/Docs.mdx +++ b/src/components/lab/Breadcrumbs/__stories__/Docs.mdx @@ -16,6 +16,7 @@ export const BreadcrumbsRootContext = () => ; export const BreadcrumbsWithIcons = () => ; export const BreadcrumbsLandmarks = () => ; +export const BreadcrumbsDisabledItems = () => ; @@ -32,6 +33,7 @@ export const BreadcrumbsLandmarks = () =>