diff --git a/change/@microsoft-fast-foundation-775d9d2b-f1b0-48d0-a75a-83f738bd0ea8.json b/change/@microsoft-fast-foundation-775d9d2b-f1b0-48d0-a75a-83f738bd0ea8.json new file mode 100644 index 00000000000..97c25fde7ed --- /dev/null +++ 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": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "prerelease" +} diff --git a/packages/web-components/fast-foundation/.storybook/preview-body.html b/packages/web-components/fast-foundation/.storybook/preview-body.html index cb2a12730d2..d87a8e39307 100644 --- a/packages/web-components/fast-foundation/.storybook/preview-body.html +++ b/packages/web-components/fast-foundation/.storybook/preview-body.html @@ -1,4 +1,4 @@ - + + + + + + + diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 6c297230a42..3e92a91d4ae 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -152,7 +152,10 @@ export const AxisScalingMode: { export type AxisScalingMode = ValuesOf; // @public -export function badgeTemplate(): ElementViewTemplate; +export type BadgeOptions = StartEndOptions; + +// @public +export function badgeTemplate(options?: BadgeOptions): ElementViewTemplate; // @public export type BreadcrumbItemOptions = StartEndOptions & { @@ -163,7 +166,10 @@ export type BreadcrumbItemOptions = StartEndOptions & { export function breadcrumbItemTemplate(options?: BreadcrumbItemOptions): ElementViewTemplate; // @public -export function breadcrumbTemplate(): ElementViewTemplate; +export type BreadcrumbOptions = StartEndOptions; + +// @public +export function breadcrumbTemplate(options?: BreadcrumbOptions): ElementViewTemplate; // @public export type ButtonOptions = StartEndOptions; @@ -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 // diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md index c481b3906ac..d604783a3cd 100644 --- a/packages/web-components/fast-foundation/src/badge/README.md +++ b/packages/web-components/fast-foundation/src/badge/README.md @@ -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 |
diff --git a/packages/web-components/fast-foundation/src/badge/badge.template.ts b/packages/web-components/fast-foundation/src/badge/badge.template.ts index 7a00369c3eb..9aa579e98ce 100644 --- a/packages/web-components/fast-foundation/src/badge/badge.template.ts +++ b/packages/web-components/fast-foundation/src/badge/badge.template.ts @@ -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(): ElementViewTemplate { +export function badgeTemplate( + options: BadgeOptions = {} +): ElementViewTemplate { return html` -
+ ${startSlotTemplate(options)} + -
+ + ${endSlotTemplate(options)} `; } diff --git a/packages/web-components/fast-foundation/src/badge/badge.ts b/packages/web-components/fast-foundation/src/badge/badge.ts index 95c7a3b320f..45855ada296 100644 --- a/packages/web-components/fast-foundation/src/badge/badge.ts +++ b/packages/web-components/fast-foundation/src/badge/badge.ts @@ -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); diff --git a/packages/web-components/fast-foundation/src/badge/index.ts b/packages/web-components/fast-foundation/src/badge/index.ts index 26623a6be37..2e2528c9708 100644 --- a/packages/web-components/fast-foundation/src/badge/index.ts +++ b/packages/web-components/fast-foundation/src/badge/index.ts @@ -1,2 +1,2 @@ export { badgeTemplate } from "./badge.template.js"; -export { FASTBadge } from "./badge.js"; +export { BadgeOptions, FASTBadge } from "./badge.js"; diff --git a/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts b/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts index ccfc0b5aa7b..c9830f0bc0e 100644 --- a/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts +++ b/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts @@ -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({ diff --git a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts index dc1acb44b75..fe07f016aa7 100644 --- a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts +++ b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts @@ -18,3 +18,12 @@ export default { } as Meta; export const Badge: Story = renderComponent(storyTemplate).bind({}); + +export const BadgeWithSlottedStartEnd: Story = Badge.bind({}); +BadgeWithSlottedStartEnd.args = { + storyContent: html` + + Badge + + `, +}; diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts index fb69c1fff29..0cabe575da0 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts @@ -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 () => { diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts index cd0cbb43e01..17369c59c2b 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts @@ -11,7 +11,7 @@ export function breadcrumbItemTemplate( options: BreadcrumbItemOptions = {} ): ElementViewTemplate { return html` -
+ `; } diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts index 315afd16ff4..34fca2d78ca 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts @@ -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, }); diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md index ceecee4cccd..454c046f8bc 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/README.md +++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md @@ -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 |
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts index 608108d6efc..bd122237c1d 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts @@ -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(): ElementViewTemplate { +export function breadcrumbTemplate( + options: BreadcrumbOptions = {} +): ElementViewTemplate { return html` `; } diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts index 72dddc7633f..1850baf3da9 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts @@ -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); diff --git a/packages/web-components/fast-foundation/src/breadcrumb/index.ts b/packages/web-components/fast-foundation/src/breadcrumb/index.ts index 46901558777..bab06ca3bc4 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/index.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/index.ts @@ -1,2 +1,2 @@ export { breadcrumbTemplate } from "./breadcrumb.template.js"; -export { FASTBreadcrumb } from "./breadcrumb.js"; +export { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js"; diff --git a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts index 1109077d84c..e9022a36fa5 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts @@ -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); } diff --git a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts index c6cdd60f0d3..abfef043d3b 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts @@ -19,7 +19,7 @@ Breadcrumb.args = { storyContent: html` Breadcrumb Item 1 Breadcrumb Item 2 - Breadcrumb Item 3 + Breadcrumb Item 3 `, }; @@ -41,6 +41,17 @@ BreadcrumbWithSlottedSeparator.args = { `, }; +export const BreadcrumbWithSlottedStartEnd: Story = Breadcrumb.bind({}); +BreadcrumbWithSlottedStartEnd.args = { + storyContent: html` + + Breadcrumb Item 1 + Breadcrumb Item 2 + Breadcrumb Item 3 + + `, +}; + export const BreadcrumbWithAnchors: Story = Breadcrumb.bind({}); BreadcrumbWithAnchors.args = { storyContent: html` diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg new file mode 100644 index 00000000000..da10f911e8c --- /dev/null +++ b/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg @@ -0,0 +1 @@ +