Skip to content

Commit daff330

Browse files
bhestonbheston
authored
Foundation: Update Badge and Breadcrumb templates (#6797)
1 parent 961ebd2 commit daff330

19 files changed

+173
-38
lines changed

‎change/@microsoft-fast-foundation-775d9d2b-f1b0-48d0-a75a-83f738bd0ea8.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Update Badge and Breadcrumb templates (https://github.com/microsoft/fast/pull/6797)",
4+
"packageName": "@microsoft/fast-foundation",
5+
"email": "[email protected]",
6+
"dependentChangeType": "prerelease"
7+
}

‎packages/web-components/fast-foundation/.storybook/preview-body.html

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svg style="display: none;">
1+
<svg style="display: none">
22
<symbol
33
id="test-icon"
44
width="20"
@@ -21,4 +21,26 @@
2121
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"
2222
/>
2323
</symbol>
24+
<symbol
25+
id="chevron-left-icon"
26+
width="12"
27+
height="12"
28+
viewBox="0 0 12 12"
29+
xmlns="http://www.w3.org/2000/svg"
30+
>
31+
<path
32+
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"
33+
/>
34+
</symbol>
35+
<symbol
36+
id="chevron-right-icon"
37+
width="12"
38+
height="12"
39+
viewBox="0 0 12 12"
40+
xmlns="http://www.w3.org/2000/svg"
41+
>
42+
<path
43+
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"
44+
/>
45+
</symbol>
2446
</svg>

‎packages/web-components/fast-foundation/docs/api-report.md

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,10 @@ export const AxisScalingMode: {
152152
export type AxisScalingMode = ValuesOf<typeof AxisScalingMode>;
153153

154154
// @public
155-
export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T>;
155+
export type BadgeOptions = StartEndOptions;
156+
157+
// @public
158+
export function badgeTemplate<T extends FASTBadge>(options?: BadgeOptions): ElementViewTemplate<T>;
156159

157160
// @public
158161
export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
@@ -163,7 +166,10 @@ export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
163166
export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(options?: BreadcrumbItemOptions): ElementViewTemplate<T>;
164167

165168
// @public
166-
export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T>;
169+
export type BreadcrumbOptions = StartEndOptions;
170+
171+
// @public
172+
export function breadcrumbTemplate<T extends FASTBreadcrumb>(options?: BreadcrumbOptions): ElementViewTemplate<T>;
167173

168174
// @public
169175
export type ButtonOptions = StartEndOptions<FASTButton>;
@@ -786,10 +792,17 @@ export class FASTAnchoredRegion extends FASTElement {
786792
export class FASTAvatar extends FASTElement {
787793
}
788794

795+
// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
796+
// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBadge" because one of its declarations is marked as @internal
797+
//
789798
// @public
790799
export class FASTBadge extends FASTElement {
791800
}
792801

802+
// @internal
803+
export interface FASTBadge extends StartEnd {
804+
}
805+
793806
// @public
794807
export class FASTBaseProgress extends FASTElement {
795808
// @internal (undocumented)
@@ -807,6 +820,9 @@ export class FASTBaseProgress extends FASTElement {
807820
protected valueChanged(): void;
808821
}
809822

823+
// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
824+
// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumb" because one of its declarations is marked as @internal
825+
//
810826
// @public
811827
export class FASTBreadcrumb extends FASTElement {
812828
// @internal (undocumented)
@@ -815,6 +831,10 @@ export class FASTBreadcrumb extends FASTElement {
815831
protected slottedBreadcrumbItemsChanged(): void;
816832
}
817833

834+
// @internal
835+
export interface FASTBreadcrumb extends StartEnd {
836+
}
837+
818838
// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
819839
// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumbItem" because one of its declarations is marked as @internal
820840
//

‎packages/web-components/fast-foundation/src/badge/README.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,17 @@ export const myBadge = Badge.compose({
5555

5656
#### CSS Parts
5757

58-
| Name | Description |
59-
| --------- | ---------------------------------------------------------------- |
60-
| `control` | The element representing the badge, which wraps the default slot |
58+
| Name | Description |
59+
| --------- | ------------------------------------- |
60+
| `content` | The element wrapping the default slot |
6161

6262
#### Slots
6363

64-
| Name | Description |
65-
| ---- | ------------------------------ |
66-
| | The default slot for the badge |
64+
| Name | Description |
65+
| ------- | ----------------------------------------------------- |
66+
| `start` | Content which can be provided before the default slot |
67+
| `end` | Content which can be provided after the default slot |
68+
| | The default slot for the badge |
6769

6870
<hr/>
6971

‎packages/web-components/fast-foundation/src/badge/badge.template.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import { ElementViewTemplate, html } from "@microsoft/fast-element";
2-
import type { FASTBadge } from "./badge.js";
2+
import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
3+
import type { BadgeOptions, FASTBadge } from "./badge.js";
34

45
/**
5-
* The template for the {@link @microsoft/fast-foundation#FASTBadge} component.
6+
* The template for the {@link @microsoft/fast-foundation#(FASTBadge:class)} component.
67
* @public
78
*/
8-
export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T> {
9+
export function badgeTemplate<T extends FASTBadge>(
10+
options: BadgeOptions = {}
11+
): ElementViewTemplate<T> {
912
return html<T>`
10-
<div class="control" part="control">
13+
${startSlotTemplate(options)}
14+
<span class="content" part="content">
1115
<slot></slot>
12-
</div>
16+
</span>
17+
${endSlotTemplate(options)}
1318
`;
1419
}

‎packages/web-components/fast-foundation/src/badge/badge.ts

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,30 @@
11
import { FASTElement } from "@microsoft/fast-element";
2+
import { StartEnd } from "../patterns/start-end.js";
3+
import type { StartEndOptions } from "../patterns/start-end.js";
4+
import { applyMixins } from "../utilities/apply-mixins.js";
5+
6+
/**
7+
* Badge configuration options
8+
* @public
9+
*/
10+
export type BadgeOptions = StartEndOptions;
211

312
/**
413
* A Badge Custom HTML Element.
14+
* @slot start - Content which can be provided before the default slot
15+
* @slot end - Content which can be provided after the default slot
516
* @slot - The default slot for the badge
6-
* @csspart control - The element representing the badge, which wraps the default slot
17+
* @csspart content - The element wrapping the default slot
718
*
819
* @public
920
*/
1021
export class FASTBadge extends FASTElement {}
22+
23+
/**
24+
* Mark internal because exporting class and interface of the same name
25+
* confuses API documenter.
26+
* TODO: https://github.com/microsoft/fast/issues/3317
27+
* @internal
28+
*/
29+
export interface FASTBadge extends StartEnd {}
30+
applyMixins(FASTBadge, StartEnd);

‎packages/web-components/fast-foundation/src/badge/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export { badgeTemplate } from "./badge.template.js";
2-
export { FASTBadge } from "./badge.js";
2+
export { BadgeOptions, FASTBadge } from "./badge.js";

‎packages/web-components/fast-foundation/src/badge/stories/badge.register.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,27 @@ import { badgeTemplate } from "../badge.template.js";
55
const styles = css`
66
:host {
77
box-sizing: border-box;
8-
display: inline-block;
8+
display: inline-flex;
9+
align-items: center;
910
font: var(--type-ramp-minus-1-font-size) / var(--type-ramp-minus-1-line-height)
1011
var(--body-font);
11-
}
12-
13-
.control {
1412
background: var(--accent-fill-rest);
1513
border: calc(var(--stroke-width) * 1px) solid transparent;
1614
border-radius: calc(var(--control-corner-radius) * 1px);
1715
color: var(--foreground-on-accent-rest);
16+
fill: currentcolor;
1817
padding: 1px 3px;
1918
}
19+
20+
::slotted([slot="start"]) {
21+
display: flex;
22+
margin-inline-end: 4px;
23+
}
24+
25+
::slotted([slot="end"]) {
26+
display: flex;
27+
margin-inline-start: 4px;
28+
}
2029
`;
2130

2231
FASTBadge.define({

‎packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,12 @@ export default {
1818
} as Meta<FASTBadge>;
1919

2020
export const Badge: Story<FASTBadge> = renderComponent(storyTemplate).bind({});
21+
22+
export const BadgeWithSlottedStartEnd: Story<FASTBadge> = Badge.bind({});
23+
BadgeWithSlottedStartEnd.args = {
24+
storyContent: html`
25+
<svg slot="start" width="12" height="12"><use href="#chevron-left-icon" /></svg>
26+
Badge
27+
<svg slot="end" width="12" height="12"><use href="#chevron-right-icon" /></svg>
28+
`,
29+
};

‎packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ test.describe("Breadcrumb item", () => {
3333
`;
3434
});
3535

36-
await expect(element.locator("> div")).toHaveAttribute("role", "listitem");
36+
await expect(element).toHaveAttribute("role", "listitem");
3737
});
3838

3939
test("should render an internal anchor when the `href` attribute is not provided", async () => {

‎packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
1111
options: BreadcrumbItemOptions = {}
1212
): ElementViewTemplate<T> {
1313
return html<T>`
14-
<div role="listitem" class="listitem" part="listitem">
14+
<template role="listitem">
1515
${anchorTemplate(options).inline()}
1616
${when(
1717
x => x.separator,
@@ -23,6 +23,6 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
2323
</span>
2424
`
2525
)}
26-
</div>
26+
</template>
2727
`;
2828
}

‎packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { css } from "@microsoft/fast-element";
2+
import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
23
import { FASTBreadcrumbItem } from "../breadcrumb-item.js";
34
import { breadcrumbItemTemplate } from "../breadcrumb-item.template.js";
45

@@ -14,9 +15,6 @@ const styles = css`
1415
min-width: calc(var(--height-number) * 1px);
1516
outline: none;
1617
color: var(--neutral-foreground-rest);
17-
}
18-
19-
.listitem {
2018
display: flex;
2119
align-items: center;
2220
width: max-content;
@@ -106,6 +104,8 @@ const styles = css`
106104

107105
FASTBreadcrumbItem.define({
108106
name: "fast-breadcrumb-item",
109-
template: breadcrumbItemTemplate(),
107+
template: breadcrumbItemTemplate({
108+
separator: chevronRightIcon,
109+
}),
110110
styles,
111111
});

‎packages/web-components/fast-foundation/src/breadcrumb/README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,11 @@ This component is built with the expectation that focus is delegated to the anch
122122

123123
#### Slots
124124

125-
| Name | Description |
126-
| ---- | ----------------------------------------- |
127-
| | The default slot for the breadcrumb items |
125+
| Name | Description |
126+
| ------- | ---------------------------------------------------- |
127+
| `start` | Content which can be provided before the breadcrumbs |
128+
| `end` | Content which can be provided after the breadcrumbs |
129+
| | The default slot for the breadcrumb items |
128130

129131
<hr/>
130132

‎packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import { elements, ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
2-
import type { FASTBreadcrumb } from "./breadcrumb.js";
2+
import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
3+
import type { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";
34

45
/**
5-
* The template for the {@link @microsoft/fast-foundation#FASTBreadcrumb} component.
6+
* The template for the {@link @microsoft/fast-foundation#(FASTBreadcrumb:class)} component.
67
* @public
78
*/
8-
export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T> {
9+
export function breadcrumbTemplate<T extends FASTBreadcrumb>(
10+
options: BreadcrumbOptions = {}
11+
): ElementViewTemplate<T> {
912
return html<T>`
1013
<template role="navigation">
11-
<div role="list" class="list" part="list">
14+
${startSlotTemplate(options)}
15+
<span role="list" class="list" part="list">
1216
<slot
1317
${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
1418
></slot>
15-
</div>
19+
</span>
20+
${endSlotTemplate(options)}
1621
</template>
1722
`;
1823
}

‎packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import { FASTElement, observable } from "@microsoft/fast-element";
22
import { FASTBreadcrumbItem } from "../breadcrumb-item/breadcrumb-item.js";
3+
import { StartEnd } from "../patterns/start-end.js";
4+
import type { StartEndOptions } from "../patterns/start-end.js";
5+
import { applyMixins } from "../utilities/apply-mixins.js";
6+
7+
/**
8+
* Breadcrumb configuration options
9+
* @public
10+
*/
11+
export type BreadcrumbOptions = StartEndOptions;
312

413
/**
514
* A Breadcrumb Custom HTML Element.
15+
*
16+
* @slot start - Content which can be provided before the breadcrumbs
17+
* @slot end - Content which can be provided after the breadcrumbs
618
* @slot - The default slot for the breadcrumb items
719
* @csspart list - The element wrapping the slotted items
820
*
@@ -67,3 +79,12 @@ export class FASTBreadcrumb extends FASTElement {
6779
}
6880
}
6981
}
82+
83+
/**
84+
* Mark internal because exporting class and interface of the same name
85+
* confuses API documenter.
86+
* TODO: https://github.com/microsoft/fast/issues/3317
87+
* @internal
88+
*/
89+
export interface FASTBreadcrumb extends StartEnd {}
90+
applyMixins(FASTBreadcrumb, StartEnd);

‎packages/web-components/fast-foundation/src/breadcrumb/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export { breadcrumbTemplate } from "./breadcrumb.template.js";
2-
export { FASTBreadcrumb } from "./breadcrumb.js";
2+
export { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";

‎packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { breadcrumbTemplate } from "../breadcrumb.template.js";
55
const styles = css`
66
:host {
77
box-sizing: border-box;
8-
display: inline-block;
8+
display: inline-flex;
9+
gap: 12px;
910
font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height)
1011
var(--body-font);
1112
}

0 commit comments

Comments
 (0)