Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Breadcrumbs): add disabledCurrent prop #1959

Closed
wants to merge 1 commit into from
Closed

feat(Breadcrumbs): add disabledCurrent prop #1959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions src/components/lab/Breadcrumbs/BreadcrumbItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface BreadcrumbProps extends BreadcrumbsItemProps {
current?: boolean;
itemType?: 'link' | 'menu';
disabled?: boolean;
disabledLink?: boolean;
navigate?: (href: Href, routerOptions: RouterOptions | undefined) => void;
}
export function BreadcrumbItem(props: BreadcrumbProps) {
Expand All @@ -25,7 +26,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
}

const handleAction = (event: React.MouseEvent | React.KeyboardEvent) => {
if (props.disabled || props.current) {
if (props.disabled) {
event.preventDefault();
return;
}
Expand All @@ -43,11 +44,11 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
}
};

const isDisabled = props.disabled || props.current;
let linkProps: React.AnchorHTMLAttributes<HTMLElement> = {
title,
onClick: handleAction,
'aria-disabled': isDisabled ? true : undefined,
'aria-current': props.current ? 'page' : undefined,
'aria-disabled': props.disabled ? true : undefined,
};
if (Element === 'a') {
linkProps.href = props.href;
Expand All @@ -59,18 +60,14 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
linkProps.referrerPolicy = props.referrerPolicy;
} else {
linkProps.role = 'link';
linkProps.tabIndex = isDisabled ? undefined : 0;
linkProps.tabIndex = props.disabled ? undefined : 0;
linkProps.onKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleAction(event);
}
};
}

if (props.current) {
linkProps['aria-current'] = 'page';
}

if (props.itemType === 'menu') {
linkProps = {};
}
Expand All @@ -84,7 +81,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
? b('menu')
: b('link', {
'is-current': props.current,
'is-disabled': isDisabled && !props.current,
'is-disabled': props.disabledLink,
})
}
>
Expand Down
5 changes: 4 additions & 1 deletion src/components/lab/Breadcrumbs/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export interface BreadcrumbsProps extends DOMProps, AriaLabelingProps, QAProps {
children: React.ReactElement<BreadcrumbsItemProps> | React.ReactElement<BreadcrumbsItemProps>[];
navigate?: (href: Href, routerOptions: RouterOptions | undefined) => void;
disabled?: boolean;
disabledCurrent?: boolean;
onAction?: (key: Key) => void;
}

Expand Down Expand Up @@ -222,6 +223,7 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs(
}

const lastIndex = contents.length - 1;
const disabledCurrent = props.disabledCurrent ?? true;
const breadcrumbItems = contents.map((child, index) => {
const isCurrent = index === lastIndex;
const key = child.key ?? index;
Expand All @@ -237,7 +239,8 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs(
{...child.props}
key={key}
current={isCurrent}
disabled={props.disabled}
disabled={props.disabled || (isCurrent && disabledCurrent)}
disabledLink={props.disabled}
onAction={handleAction}
navigate={navigate}
>
Expand Down
35 changes: 18 additions & 17 deletions src/components/lab/Breadcrumbs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,23 +471,24 @@ LANDING_BLOCK-->

## Properties

| Name | Description | Type | Default |
| :--------------- | :-------------------------------------------------------------------- | :----------------------------------------- | :------ |
| children | Breadcrumb items. | `React.ReactElement<BreadcrumbsItemProps>` | |
| disabled | Whether the Breadcrumbs are disabled. | `boolean` | |
| showRoot | Whether to always show the root item if the items are collapsed. | `boolean` | |
| popupPlacement | Style of collapsed item popup. | `PopupPlacement` | |
| popupStyle | Style of collapsed item popup. | `"staircase"` | |
| qa | HTML `data-qa` attribute, used in tests. | `string` | |
| separator | Custom separator node. | `React.ReactNode` | "/" |
| action | `click` event handler. | `(id: Key) => void` | |
| navigate | client side navigation. | `(href: string) => void` | |
| id | The element's unique identifier. | `string` | |
| className | CSS class name for the element. | `string` | |
| style | Sets inline style for the element. | `CSSProperties` | |
| aria-label | Defines a string value that labels the current element. | `string` | |
| aria-labelledby | Identifies the element (or elements) that labels the current element. | `string` | |
| aria-describedby | Identifies the element (or elements) that describes the object. | `string` | |
| Name | Description | Type | Default |
| :--------------- | :------------------------------------------------------------------------------- | :----------------------------------------- | :------ |
| children | Breadcrumb items. | `React.ReactElement<BreadcrumbsItemProps>` | |
| disabled | Whether the Breadcrumbs are disabled. | `boolean` | |
| disabledCurrent | Whether to disable the last item (only if the component itself is not disabled). | `boolean` | `true` |
| showRoot | Whether to always show the root item if the items are collapsed. | `boolean` | |
| popupPlacement | Style of collapsed item popup. | `PopupPlacement` | |
| popupStyle | Style of collapsed item popup. | `"staircase"` | |
| qa | HTML `data-qa` attribute, used in tests. | `string` | |
| separator | Custom separator node. | `React.ReactNode` | "/" |
| action | `click` event handler. | `(id: Key) => void` | |
| navigate | client side navigation. | `(href: string) => void` | |
| id | The element's unique identifier. | `string` | |
| className | CSS class name for the element. | `string` | |
| style | Sets inline style for the element. | `CSSProperties` | |
| aria-label | Defines a string value that labels the current element. | `string` | |
| aria-labelledby | Identifies the element (or elements) that labels the current element. | `string` | |
| aria-describedby | Identifies the element (or elements) that describes the object. | `string` | |

### BreadcrumbsItemProps

Expand Down
34 changes: 34 additions & 0 deletions src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,3 +282,37 @@ it('should support RouterProvider', async () => {
await userEvent.click(items[1]);
expect(navigate).toHaveBeenCalledWith('/foo', {foo: 'foo'});
});

it('should disable all items', () => {
render(
<Breadcrumbs disabled>
<Breadcrumbs.Item>Folder 1</Breadcrumbs.Item>
<Breadcrumbs.Item>Folder 2</Breadcrumbs.Item>
<Breadcrumbs.Item>Folder 3</Breadcrumbs.Item>
</Breadcrumbs>,
);

const item1 = screen.getByText('Folder 1');
expect(item1.tabIndex).toBe(-1);
expect(item1).toHaveAttribute('aria-disabled', 'true');
const item2 = screen.getByText('Folder 2');
expect(item2.tabIndex).toBe(-1);
expect(item2).toHaveAttribute('aria-disabled', 'true');
const item3 = screen.getByText('Folder 3');
expect(item3.tabIndex).toBe(-1);
expect(item3).toHaveAttribute('aria-disabled', 'true');
});

it('should not disable current item', () => {
render(
<Breadcrumbs disabledCurrent={false}>
<Breadcrumbs.Item>Folder 1</Breadcrumbs.Item>
<Breadcrumbs.Item>Folder 2</Breadcrumbs.Item>
<Breadcrumbs.Item>Folder 3</Breadcrumbs.Item>
</Breadcrumbs>,
);

const item3 = screen.getByText('Folder 3');
expect(item3.tabIndex).toBe(0);
expect(item3).not.toHaveAttribute('aria-disabled');
});
Loading