feat(Breadcrunbs): allow items to be disabled independently (#1962)

gravity-ui · Nov 27, 2024 · 301e4ab · 301e4ab
1 parent 2be5eb8
commit 301e4ab
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 5 deletions.
diff --git 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<HTMLElement> = {
         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
@@ -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
@@ -469,6 +469,62 @@ LANDING_BLOCK-->
 
 <!--/GITHUB_BLOCK-->
 
+### Disabled items
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<Breadcrumbs>
+    <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#Country" disabled>
+        Country
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#Street" disabled>
+        Street
+    </Breadcrumbs.Item>
+</Breadcrumbs>
+`}
+>
+    <UIKit.Breadcrumbs>
+        <UIKit.Breadcrumbs.Item href="#Region">Region</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#Country" disabled>
+            Country
+        </UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#City">City</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#District">District</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#Street" disabled>
+            Street
+        </UIKit.Breadcrumbs.Item>
+    </UIKit.Breadcrumbs>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```jsx
+<Breadcrumbs>
+  <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#Country" disabled>
+    Country
+  </Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#Street" disabled>
+    Street
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+<!-- Storybook example -->
+
+<BreadcrumbsDisabledItems />
+
+<!--/GITHUB_BLOCK-->
+
 ## 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
@@ -136,3 +136,19 @@ export const WithIcons = {
 export const Landmarks = {
     render: (args) => <nav aria-label="Breadcrumb">{Links.render(args)}</nav>,
 } satisfies Story;
+
+export const DisabledItems = {
+    render: (args) => (
+        <Breadcrumbs {...args}>
+            <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#Country" disabled>
+                Country
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#Street" disabled>
+                Street
+            </Breadcrumbs.Item>
+        </Breadcrumbs>
+    ),
+} satisfies Story;
diff --git a/src/components/lab/Breadcrumbs/__stories__/Docs.mdx b/src/components/lab/Breadcrumbs/__stories__/Docs.mdx
@@ -16,6 +16,7 @@ export const BreadcrumbsRootContext = () => <Canvas of={Stories.RootContext} sou
 export const BreadcrumbsSeparator = () => <Canvas of={Stories.Separator} sourceState="none" />;
 export const BreadcrumbsWithIcons = () => <Canvas of={Stories.WithIcons} sourceState="none" />;
 export const BreadcrumbsLandmarks = () => <Canvas of={Stories.Landmarks} sourceState="none" />;
+export const BreadcrumbsDisabledItems = () => <Canvas of={Stories.DisabledItems} sourceState="none" />;
 
 <Meta of={Stories} />
 
@@ -32,6 +33,7 @@ export const BreadcrumbsLandmarks = () => <Canvas of={Stories.Landmarks} sourceS
             BreadcrumbsSeparator,
             BreadcrumbsWithIcons,
             BreadcrumbsLandmarks,
+            BreadcrumbsDisabledItems,
         },
     }}
 >

diff --git a/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -21,7 +21,7 @@ it('handles multiple items', () => {
         <Breadcrumbs>
             <Breadcrumbs.Item>Folder 1</Breadcrumbs.Item>
             <Breadcrumbs.Item>Folder 2</Breadcrumbs.Item>
-            <Breadcrumbs.Item>Folder 3</Breadcrumbs.Item>
+            <Breadcrumbs.Item disabled>Folder 3</Breadcrumbs.Item>
         </Breadcrumbs>,
     );
     const item1 = screen.getByText('Folder 1');
@@ -32,6 +32,7 @@ it('handles multiple items', () => {
     expect(item2).not.toHaveAttribute('aria-current');
     const item3 = screen.getByText('Folder 3');
     expect(item3.tabIndex).toBe(-1);
+    expect(item3).toHaveAttribute('aria-disabled', 'true');
     expect(item3).toHaveAttribute('aria-current', 'page');
 });