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(breadcrumb)!: integrate Breadcrumb with v11 #1956

Merged
merged 1 commit into from
Apr 21, 2024
Merged

feat(breadcrumb)!: integrate Breadcrumb with v11 #1956

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
29 changes: 9 additions & 20 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,6 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- |
| noTrailingSlash | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the breadcrumb trailing slash |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display skeleton state |

### Slots

Expand All @@ -279,27 +278,22 @@ None.

### Events

| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

## `BreadcrumbItem`

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------- |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| isCurrentPage | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the breadcrumb item represents the current page |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------------------------------------------- |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link.<br />The `Link` component is used if `href` is set. |
| isCurrentPage | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the breadcrumb item represents the current page |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{props?: Pick<AriaAttributes, "aria-current"> & { class: "bx--link"; }} </code> | -- |

### Events

Expand All @@ -325,12 +319,7 @@ None.

### Events

| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

## `Breakpoint`

Expand Down
60 changes: 9 additions & 51 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,50 +252,13 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",
"description": "Set to `true` to display skeleton state",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "forwarded",
"name": "click",
"element": "BreadcrumbSkeleton"
},
{
"type": "forwarded",
"name": "mouseover",
"element": "BreadcrumbSkeleton"
},
{
"type": "forwarded",
"name": "mouseenter",
"element": "BreadcrumbSkeleton"
},
{
"type": "forwarded",
"name": "mouseleave",
"element": "BreadcrumbSkeleton"
}
],
"events": [],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
"extends": {
"interface": "BreadcrumbSkeletonProps",
"import": "\"./BreadcrumbSkeleton.svelte\""
}
"rest_props": { "type": "Element", "name": "nav" }
},
{
"moduleName": "BreadcrumbItem",
Expand All @@ -304,7 +267,7 @@
{
"name": "href",
"kind": "let",
"description": "Set the `href` to use an anchor link",
"description": "Set the `href` to use an anchor link.\nThe `Link` component is used if `href` is set.",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
Expand All @@ -330,14 +293,14 @@
{
"name": "__default__",
"default": true,
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
"slot_props": "{props?: Pick<AriaAttributes, \"aria-current\"> & { class: \"bx--link\"; }}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
{ "type": "forwarded", "name": "click", "element": "Link" },
{ "type": "forwarded", "name": "mouseover", "element": "Link" },
{ "type": "forwarded", "name": "mouseenter", "element": "Link" },
{ "type": "forwarded", "name": "mouseleave", "element": "Link" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
Expand Down Expand Up @@ -373,12 +336,7 @@
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
Expand Down
30 changes: 27 additions & 3 deletions docs/src/pages/components/Breadcrumb.svx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
---
components: ["Breadcrumb", "BreadcrumbItem"]
components: ["Breadcrumb", "BreadcrumbItem", "BreadcrumbSkeleton"]
---

<script>
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbSkeleton,
OverflowMenu,
OverflowMenuItem
} from "carbon-components-svelte";
Expand All @@ -27,10 +28,23 @@ components: ["Breadcrumb", "BreadcrumbItem"]
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>

## Overflow menu
## Custom breadcrumb item

By default, if `href` is provided, the breadcrumb item will render a [Link](/components/Link).

Use a slot to render a custom component. Link attributes can be spread via `let:props`.

<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem isCurrentPage let:props>
<a href="/profile" {...props}>Profile</a>
</BreadcrumbItem>
</Breadcrumb>

## Overflow menu

<Breadcrumb>
<BreadcrumbItem href="/" aria-current='page'>Home</BreadcrumbItem>
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
<BreadcrumbItem>
<OverflowMenu>
Expand All @@ -47,4 +61,14 @@ components: ["Breadcrumb", "BreadcrumbItem"]

## Skeleton

<Breadcrumb noTrailingSlash skeleton count={3} />
<BreadcrumbSkeleton />

## Skeleton (custom number of items)

By default, the number of skeleton items is 3.

<BreadcrumbSkeleton count={5} />

## Skeelton (no trailing slash)

<BreadcrumbSkeleton noTrailingSlash />
41 changes: 8 additions & 33 deletions src/Breadcrumb/Breadcrumb.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,15 @@
<script>
/** @extends {"./BreadcrumbSkeleton.svelte"} BreadcrumbSkeletonProps */
// @ts-check

/** Set to `true` to hide the breadcrumb trailing slash */
export let noTrailingSlash = false;

/** Set to `true` to display skeleton state */
export let skeleton = false;

import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton}
<BreadcrumbSkeleton
noTrailingSlash="{noTrailingSlash}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
/>
{:else}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<nav
aria-label="Breadcrumb"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
<nav aria-label="Breadcrumb" {...$$restProps}>
<ol
class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
>
<ol
class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
>
<slot />
</ol>
</nav>
{/if}
<slot />
</ol>
</nav>
31 changes: 19 additions & 12 deletions src/Breadcrumb/BreadcrumbItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<script>
// @ts-check

/**
* @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
* @slot {{props?: Pick<AriaAttributes, "aria-current"> & { class: "bx--link"; }}}
*/

/**
* Set the `href` to use an anchor link
* Set the `href` to use an anchor link.
* The `Link` component is used if `href` is set.
* @type {string}
*/
export let href = undefined;
Expand All @@ -17,28 +20,32 @@
import { setContext } from "svelte";

setContext("BreadcrumbItem", {});

$: ariaCurrent = $$props["aria-current"];
$: current = isCurrentPage && ariaCurrent !== "page";
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class:bx--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current="{isCurrentPage &&
$$restProps['aria-current'] !== 'page'}"
class:bx--breadcrumb-item--current="{current}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
aria-current={undefined}
>
{#if href}
<Link href="{href}" aria-current="{$$restProps['aria-current']}">
<Link
href="{href}"
aria-current="{ariaCurrent}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<slot />
</Link>
{:else}
<slot
props="{{
'aria-current': $$restProps['aria-current'],
'aria-current': ariaCurrent,
class: 'bx--link',
}}"
/>
Expand Down
10 changes: 3 additions & 7 deletions src/Breadcrumb/BreadcrumbSkeleton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
<script>
// @ts-check

/** Set to `true` to hide the breadcrumb trailing slash */
export let noTrailingSlash = false;

/** Specify the number of breadcrumb items to render */
export let count = 3;
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--skeleton="{true}"
class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
{#each Array.from({ length: count }, (_, i) => i) as item (item)}
{#each Array.from({ length: count }) as item}
<div class:bx--breadcrumb-item="{true}">
<span class:bx--link="{true}">&nbsp;</span>
</div>
Expand Down
12 changes: 5 additions & 7 deletions tests/Breadcrumb.test.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<script lang="ts">
import { Breadcrumb, BreadcrumbItem } from "../types";
import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "../types";
</script>

<Breadcrumb>
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
<BreadcrumbItem let:props>
<a {...props} href="/reports/2019/q1">Q1</a>
</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb noTrailingSlash>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb noTrailingSlash skeleton count="{3}" />
<BreadcrumbSkeleton noTrailingSlash count="{3}" />
Loading
Loading