microsoft · bheston · Jan 25, 2024 · Aug 7, 2023 · Aug 7, 2023
diff --git a/change/@microsoft-fast-foundation-775d9d2b-f1b0-48d0-a75a-83f738bd0ea8.json b/change/@microsoft-fast-foundation-775d9d2b-f1b0-48d0-a75a-83f738bd0ea8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update Badge and Breadcrumb templates (https://github.com/microsoft/fast/pull/6797)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
@@ -1,4 +1,4 @@
-<svg style="display: none;">
+<svg style="display: none">
     <symbol
         id="test-icon"
         width="20"
@@ -21,4 +21,26 @@
             d="M8.26 4.6a5.21 5.21 0 0 1 9.03 5.22l-.2.34a.5.5 0 0 1-.67.19l-3.47-2-1.93 3.38c1.34.4 2.5 1.33 3.31 2.52h-.09c-.34 0-.66.11-.92.31A4.9 4.9 0 0 0 9.5 12.5a4.9 4.9 0 0 0-3.82 2.06 1.5 1.5 0 0 0-1.01-.3 5.94 5.94 0 0 1 5.31-2.74l2.1-3.68-3.83-2.2a.5.5 0 0 1-.18-.7l.2-.33Zm.92.42 1.7.98.02-.02a8.08 8.08 0 0 1 3.27-2.74 4.22 4.22 0 0 0-4.99 1.78ZM14 7.8c.47-.82.7-1.46.77-2.09a5.8 5.8 0 0 0-.06-1.62 6.96 6.96 0 0 0-2.95 2.41L14 7.8Zm.87.5 1.61.93a4.22 4.22 0 0 0-.74-5.02c.07.56.09 1.1.02 1.63-.1.79-.38 1.56-.89 2.46Zm-9.63 7.3a.5.5 0 0 0-.96.03c-.17.7-.5 1.08-.86 1.3-.38.23-.87.32-1.42.32a.5.5 0 0 0 0 1c.64 0 1.33-.1 1.94-.47.34-.2.64-.5.88-.87a2.96 2.96 0 0 0 4.68-.01 2.96 2.96 0 0 0 4.74-.06c.64.9 1.7 1.41 2.76 1.41a.5.5 0 1 0 0-1c-.98 0-1.96-.64-2.29-1.65a.5.5 0 0 0-.95 0 1.98 1.98 0 0 1-3.79.07.5.5 0 0 0-.94 0 1.98 1.98 0 0 1-3.8-.08Z"
         />
     </symbol>
+    <symbol
+        id="chevron-left-icon"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M7.35 2.15c.2.2.2.5 0 .7L4.21 6l3.14 3.15a.5.5 0 1 1-.7.7l-3.5-3.5a.5.5 0 0 1 0-.7l3.5-3.5c.2-.2.5-.2.7 0Z"
+        />
+    </symbol>
+    <symbol
+        id="chevron-right-icon"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+        />
+    </symbol>
 </svg>
@@ -152,7 +152,10 @@ export const AxisScalingMode: {
 export type AxisScalingMode = ValuesOf<typeof AxisScalingMode>;
 
 // @public
-export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T>;
+export type BadgeOptions = StartEndOptions;
+
+// @public
+export function badgeTemplate<T extends FASTBadge>(options?: BadgeOptions): ElementViewTemplate<T>;
 
 // @public
 export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
@@ -163,7 +166,10 @@ export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
 export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(options?: BreadcrumbItemOptions): ElementViewTemplate<T>;
 
 // @public
-export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T>;
+export type BreadcrumbOptions = StartEndOptions;
+
+// @public
+export function breadcrumbTemplate<T extends FASTBreadcrumb>(options?: BreadcrumbOptions): ElementViewTemplate<T>;
 
 // @public
 export type ButtonOptions = StartEndOptions<FASTButton>;
@@ -786,10 +792,17 @@ export class FASTAnchoredRegion extends FASTElement {
 export class FASTAvatar extends FASTElement {
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBadge" because one of its declarations is marked as @internal
+//
 // @public
 export class FASTBadge extends FASTElement {
 }
 
+// @internal
+export interface FASTBadge extends StartEnd {
+}
+
 // @public
 export class FASTBaseProgress extends FASTElement {
     // @internal (undocumented)
@@ -807,6 +820,9 @@ export class FASTBaseProgress extends FASTElement {
     protected valueChanged(): void;
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumb" because one of its declarations is marked as @internal
+//
 // @public
 export class FASTBreadcrumb extends FASTElement {
     // @internal (undocumented)
@@ -815,6 +831,10 @@ export class FASTBreadcrumb extends FASTElement {
     protected slottedBreadcrumbItemsChanged(): void;
 }
 
+// @internal
+export interface FASTBreadcrumb extends StartEnd {
+}
+
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumbItem" because one of its declarations is marked as @internal
 //

@@ -55,15 +55,17 @@ export const myBadge = Badge.compose({
 
 #### CSS Parts
 
-| Name      | Description                                                      |
-| --------- | ---------------------------------------------------------------- |
-| `control` | The element representing the badge, which wraps the default slot |
+| Name      | Description                           |
+| --------- | ------------------------------------- |
+| `content` | The element wrapping the default slot |
 
 #### Slots
 
-| Name | Description                    |
-| ---- | ------------------------------ |
-|      | The default slot for the badge |
+| Name    | Description                                           |
+| ------- | ----------------------------------------------------- |
+| `start` | Content which can be provided before the default slot |
+| `end`   | Content which can be provided after the default slot  |
+|         | The default slot for the badge                        |
 
 <hr/>
 

@@ -1,14 +1,19 @@
 import { ElementViewTemplate, html } from "@microsoft/fast-element";
-import type { FASTBadge } from "./badge.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
+import type { BadgeOptions, FASTBadge } from "./badge.js";
 
 /**
- * The template for the {@link @microsoft/fast-foundation#FASTBadge} component.
+ * The template for the {@link @microsoft/fast-foundation#(FASTBadge:class)} component.
  * @public
  */
-export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T> {
+export function badgeTemplate<T extends FASTBadge>(
+    options: BadgeOptions = {}
+): ElementViewTemplate<T> {
     return html<T>`
-        <div class="control" part="control">
+        ${startSlotTemplate(options)}
+        <span class="content" part="content">
             <slot></slot>
-        </div>
+        </span>
+        ${endSlotTemplate(options)}
     `;
 }
@@ -1,10 +1,30 @@
 import { FASTElement } from "@microsoft/fast-element";
+import { StartEnd } from "../patterns/start-end.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+
+/**
+ * Badge configuration options
+ * @public
+ */
+export type BadgeOptions = StartEndOptions;
 
 /**
  * A Badge Custom HTML Element.
+ * @slot start - Content which can be provided before the default slot
+ * @slot end - Content which can be provided after the default slot
  * @slot - The default slot for the badge
- * @csspart control - The element representing the badge, which wraps the default slot
+ * @csspart content - The element wrapping the default slot
  *
  * @public
  */
 export class FASTBadge extends FASTElement {}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface FASTBadge extends StartEnd {}
+applyMixins(FASTBadge, StartEnd);
@@ -1,2 +1,2 @@
 export { badgeTemplate } from "./badge.template.js";
-export { FASTBadge } from "./badge.js";
+export { BadgeOptions, FASTBadge } from "./badge.js";
@@ -5,18 +5,27 @@ import { badgeTemplate } from "../badge.template.js";
 const styles = css`
     :host {
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         font: var(--type-ramp-minus-1-font-size) / var(--type-ramp-minus-1-line-height)
             var(--body-font);
-    }
-
-    .control {
         background: var(--accent-fill-rest);
         border: calc(var(--stroke-width) * 1px) solid transparent;
         border-radius: calc(var(--control-corner-radius) * 1px);
         color: var(--foreground-on-accent-rest);
+        fill: currentcolor;
         padding: 1px 3px;
     }
+
+    ::slotted([slot="start"]) {
+        display: flex;
+        margin-inline-end: 4px;
+    }
+
+    ::slotted([slot="end"]) {
+        display: flex;
+        margin-inline-start: 4px;
+    }
 `;
 
 FASTBadge.define({

@@ -18,3 +18,12 @@ export default {
 } as Meta<FASTBadge>;
 
 export const Badge: Story<FASTBadge> = renderComponent(storyTemplate).bind({});
+
+export const BadgeWithSlottedStartEnd: Story<FASTBadge> = Badge.bind({});
+BadgeWithSlottedStartEnd.args = {
+    storyContent: html`
+        <svg slot="start" width="12" height="12"><use href="#chevron-left-icon" /></svg>
+        Badge
+        <svg slot="end" width="12" height="12"><use href="#chevron-right-icon" /></svg>
+    `,
+};
@@ -33,7 +33,7 @@ test.describe("Breadcrumb item", () => {
             `;
         });
 
-        await expect(element.locator("> div")).toHaveAttribute("role", "listitem");
+        await expect(element).toHaveAttribute("role", "listitem");
     });
 
     test("should render an internal anchor when the `href` attribute is not provided", async () => {

@@ -11,7 +11,7 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
     options: BreadcrumbItemOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-        <div role="listitem" class="listitem" part="listitem">
+        <template role="listitem">
             ${anchorTemplate(options).inline()}
             ${when(
                 x => x.separator,
@@ -23,6 +23,6 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
                     </span>
                 `
             )}
-        </div>
+        </template>
     `;
 }
@@ -1,4 +1,5 @@
 import { css } from "@microsoft/fast-element";
+import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
 import { FASTBreadcrumbItem } from "../breadcrumb-item.js";
 import { breadcrumbItemTemplate } from "../breadcrumb-item.template.js";
 
@@ -14,9 +15,6 @@ const styles = css`
         min-width: calc(var(--height-number) * 1px);
         outline: none;
         color: var(--neutral-foreground-rest);
-    }
-
-    .listitem {
         display: flex;
         align-items: center;
         width: max-content;
@@ -106,6 +104,8 @@ const styles = css`
 
 FASTBreadcrumbItem.define({
     name: "fast-breadcrumb-item",
-    template: breadcrumbItemTemplate(),
+    template: breadcrumbItemTemplate({
+        separator: chevronRightIcon,
+    }),
     styles,
 });
@@ -122,9 +122,11 @@ This component is built with the expectation that focus is delegated to the anch
 
 #### Slots
 
-| Name | Description                               |
-| ---- | ----------------------------------------- |
-|      | The default slot for the breadcrumb items |
+| Name    | Description                                          |
+| ------- | ---------------------------------------------------- |
+| `start` | Content which can be provided before the breadcrumbs |
+| `end`   | Content which can be provided after the breadcrumbs  |
+|         | The default slot for the breadcrumb items            |
 
 <hr/>
 

@@ -1,18 +1,23 @@
 import { elements, ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
-import type { FASTBreadcrumb } from "./breadcrumb.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
+import type { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";
 
 /**
- * The template for the {@link @microsoft/fast-foundation#FASTBreadcrumb} component.
+ * The template for the {@link @microsoft/fast-foundation#(FASTBreadcrumb:class)} component.
  * @public
  */
-export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T> {
+export function breadcrumbTemplate<T extends FASTBreadcrumb>(
+    options: BreadcrumbOptions = {}
+): ElementViewTemplate<T> {
     return html<T>`
         <template role="navigation">
-            <div role="list" class="list" part="list">
+            ${startSlotTemplate(options)}
+            <span role="list" class="list" part="list">
                 <slot
                     ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
                 ></slot>
-            </div>
+            </span>
+            ${endSlotTemplate(options)}
         </template>
     `;
 }
@@ -1,8 +1,20 @@
 import { FASTElement, observable } from "@microsoft/fast-element";
 import { FASTBreadcrumbItem } from "../breadcrumb-item/breadcrumb-item.js";
+import { StartEnd } from "../patterns/start-end.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+
+/**
+ * Breadcrumb configuration options
+ * @public
+ */
+export type BreadcrumbOptions = StartEndOptions;
 
 /**
  * A Breadcrumb Custom HTML Element.
+ *
+ * @slot start - Content which can be provided before the breadcrumbs
+ * @slot end - Content which can be provided after the breadcrumbs
  * @slot - The default slot for the breadcrumb items
  * @csspart list - The element wrapping the slotted items
  *
@@ -67,3 +79,12 @@ export class FASTBreadcrumb extends FASTElement {
         }
     }
 }
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface FASTBreadcrumb extends StartEnd {}
+applyMixins(FASTBreadcrumb, StartEnd);
@@ -1,2 +1,2 @@
 export { breadcrumbTemplate } from "./breadcrumb.template.js";
-export { FASTBreadcrumb } from "./breadcrumb.js";
+export { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";
@@ -5,7 +5,8 @@ import { breadcrumbTemplate } from "../breadcrumb.template.js";
 const styles = css`
     :host {
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        gap: 12px;
         font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height)
             var(--body-font);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ test.describe("Breadcrumb item", () => { @@
                 `;
             });
-            await expect(element.locator("> div")).toHaveAttribute("role", "listitem");
+            await expect(element).toHaveAttribute("role", "listitem");
         });
         test("should render an internal anchor when the `href` attribute is not provided", async () => {
@@ Expand Down @@