mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Eric Liu 2024-04-21 12:14:51 -07:00 • committed by GitHub
commit 1600308614
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 94 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

29
COMPONENT_INDEX.md
View file

@ -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
@ -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
@ -325,12 +319,7 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.
## `Breakpoint`

60
docs/src/COMPONENT_API.json
View file

@ -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",
@ -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,
@ -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" }
@ -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" }
},

30
docs/src/pages/components/Breadcrumb.svx
View file

@ -1,11 +1,12 @@
---
components: ["Breadcrumb", "BreadcrumbItem"]
components: ["Breadcrumb", "BreadcrumbItem", "BreadcrumbSkeleton"]
---
<script>
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbSkeleton,
OverflowMenu,
OverflowMenuItem
} from "carbon-components-svelte";
@ -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>
@ -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
src/Breadcrumb/Breadcrumb.svelte
View file

@ -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
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -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;
@ -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',
}}"
/>

10
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

@ -1,4 +1,6 @@
<script>
// @ts-check
/** Set to `true` to hide the breadcrumb trailing slash */
export let noTrailingSlash = false;
@ -6,19 +8,13 @@
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>

12
tests/Breadcrumb.test.svelte
View file

@ -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}" />

19
types/Breadcrumb/Breadcrumb.svelte.d.ts vendored
View file

@ -1,27 +1,20 @@
import type { SvelteComponentTyped } from "svelte";
import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte";
import type { SvelteHTMLElements } from "svelte/elements";
export interface BreadcrumbProps extends BreadcrumbSkeletonProps {
type RestProps = SvelteHTMLElements["nav"];
export interface BreadcrumbProps extends RestProps {
/**
* Set to `true` to hide the breadcrumb trailing slash
* @default false
*/
noTrailingSlash?: boolean;
/**
* Set to `true` to display skeleton state
* @default false
*/
skeleton?: boolean;
[key: `data-${string}`]: any;
}
export default class Breadcrumb extends SvelteComponentTyped<
BreadcrumbProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{ default: {} }
> {}

9
types/Breadcrumb/BreadcrumbItem.svelte.d.ts vendored
View file

@ -5,7 +5,8 @@ type RestProps = SvelteHTMLElements["li"];
export interface BreadcrumbItemProps extends RestProps {
/**
* 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.
* @default undefined
*/
href?: string;
@ -27,5 +28,9 @@ export default class BreadcrumbItem extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: { props?: { ["aria-current"]?: string; class: "bx--link" } } }
{
default: {
props?: Pick<AriaAttributes, "aria-current"> & { class: "bx--link" };
};
}
> {}

7
types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts vendored
View file

@ -21,11 +21,6 @@ export interface BreadcrumbSkeletonProps extends RestProps {
export default class BreadcrumbSkeleton extends SvelteComponentTyped<
BreadcrumbSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{}
> {}