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

COMPONENT_INDEX.md

@@ -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 |
+None.
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
 
 ## `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                             |
+| 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> | --       |
+| --        | Yes     | <code>{props?: Pick<AriaAttributes, "aria-current"> & { class: "bx--link"; }} </code> | --       |
 
 ### Events
 
@@ -325,12 +319,7 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+None.
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
 
 ## `Breakpoint`
 

docs/src/COMPONENT_API.json

@@ -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": [
+      "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"
-        }
-      ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
+      "rest_props": { "type": "Element", "name": "nav" }
-      "extends": {
-        "interface": "BreadcrumbSkeletonProps",
-        "import": "\"./BreadcrumbSkeleton.svelte\""
-      }
     },
     {
       "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": "click", "element": "Link" },
-        { "type": "forwarded", "name": "mouseover", "element": "li" },
+        { "type": "forwarded", "name": "mouseover", "element": "Link" },
-        { "type": "forwarded", "name": "mouseenter", "element": "li" },
+        { "type": "forwarded", "name": "mouseenter", "element": "Link" },
-        { "type": "forwarded", "name": "mouseleave", "element": "li" }
+        { "type": "forwarded", "name": "mouseleave", "element": "Link" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "li" }
@@ -373,12 +336,7 @@
       ],
       "moduleExports": [],
       "slots": [],
-      "events": [
+      "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" }
-      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },

docs/src/pages/components/Breadcrumb.svx

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

src/Breadcrumb/Breadcrumb.svelte

@@ -1,35 +1,11 @@
 <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 -->
+<nav aria-label="Breadcrumb" {...$$restProps}>
-{#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
-  >
   <ol
     class:bx--breadcrumb="{true}"
     class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
@@ -37,4 +13,3 @@
     <slot />
   </ol>
 </nav>
-{/if}

src/Breadcrumb/BreadcrumbItem.svelte

@@ -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 &&
+  class:bx--breadcrumb-item--current="{current}"
-    $$restProps['aria-current'] !== 'page'}"
   {...$$restProps}
+  aria-current={undefined}
+>
+  {#if href}
+    <Link
+      href="{href}"
+      aria-current="{ariaCurrent}"
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-  {#if href}
-    <Link href="{href}" aria-current="{$$restProps['aria-current']}">
       <slot />
     </Link>
   {:else}
     <slot
       props="{{
-        'aria-current': $$restProps['aria-current'],
+        'aria-current': ariaCurrent,
         class: 'bx--link',
       }}"
     />

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -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>

tests/Breadcrumb.test.svelte

@@ -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>
+<BreadcrumbSkeleton noTrailingSlash count="{3}" />
-  <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
-</Breadcrumb>
-
-<Breadcrumb noTrailingSlash skeleton count="{3}" />

types/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -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;
 
-  /**
+  [key: `data-${string}`]: any;
-   * Set to `true` to display skeleton state
-   * @default false
-   */
-  skeleton?: boolean;
 }
 
 export default class Breadcrumb extends SvelteComponentTyped<
   BreadcrumbProps,
-  {
+  Record<string, any>,
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
   { default: {} }
 > {}

types/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -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" };
+    };
+  }
 > {}

types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts

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