feat(Breadcrunbs): allow items to be disabled independently

gravity-ui · Nov 26, 2024 · 971d435 · 971d435
1 parent 704f53b
commit 971d435
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 4 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,
         },
     }}
 >