Skip to content

Commit

Permalink
Foundation: Update Badge and Breadcrumb templates (#6797)
Browse files Browse the repository at this point in the history
  • Loading branch information
bheston authored Jan 25, 2024
1 parent 961ebd2 commit daff330
Show file tree
Hide file tree
Showing 19 changed files with 173 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -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"
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<svg style="display: none;">
<svg style="display: none">
<symbol
id="test-icon"
width="20"
Expand All @@ -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>
24 changes: 22 additions & 2 deletions packages/web-components/fast-foundation/docs/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -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> & {
Expand All @@ -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>;
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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
//
Expand Down
14 changes: 8 additions & 6 deletions packages/web-components/fast-foundation/src/badge/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/>

Expand Down
Original file line number Diff line number Diff line change
@@ -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)}
`;
}
22 changes: 21 additions & 1 deletion packages/web-components/fast-foundation/src/badge/badge.ts
Original file line number Diff line number Diff line change
@@ -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);
2 changes: 1 addition & 1 deletion packages/web-components/fast-foundation/src/badge/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { badgeTemplate } from "./badge.template.js";
export { FASTBadge } from "./badge.js";
export { BadgeOptions, FASTBadge } from "./badge.js";
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
};
Original file line number Diff 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
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -23,6 +23,6 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
</span>
`
)}
</div>
</template>
`;
}
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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;
Expand Down Expand Up @@ -106,6 +104,8 @@ const styles = css`

FASTBreadcrumbItem.define({
name: "fast-breadcrumb-item",
template: breadcrumbItemTemplate(),
template: breadcrumbItemTemplate({
separator: chevronRightIcon,
}),
styles,
});
Original file line number Diff line number Diff line change
Expand Up @@ -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/>

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;
}
Original file line number Diff line number Diff line change
@@ -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
*
Expand Down Expand Up @@ -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);
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { breadcrumbTemplate } from "./breadcrumb.template.js";
export { FASTBreadcrumb } from "./breadcrumb.js";
export { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit daff330

Please sign in to comment.