From ca299ed6f4c11cb8bc59a4ef8970baf7ae56cc65 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Tue, 12 Dec 2023 20:59:53 -0800 Subject: [PATCH] Doc updates and minor cleanup --- .../fast-foundation/src/badge/README.md | 8 ++--- .../src/badge/badge.template.ts | 2 +- .../fast-foundation/src/badge/badge.ts | 2 +- .../src/breadcrumb-item/breadcrumb-item.ts | 5 ++-- .../fast-foundation/src/breadcrumb/README.md | 29 ++++++++++--------- .../src/breadcrumb/breadcrumb.ts | 6 ++-- 6 files changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md index 6d81781b2c7..4bd5c0af34f 100644 --- a/packages/web-components/fast-foundation/src/badge/README.md +++ b/packages/web-components/fast-foundation/src/badge/README.md @@ -3,7 +3,7 @@ id: badge title: fast-badge sidebar_label: badge custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/badge/README.md -description: fast-badge is a web component used to highlight an item and attract attention or flag status. +description: fast-badge is used to highlight an item and attract attention or flag status. --- The `fast-badge` component is used to highlight an item and attract attention or flag status. @@ -55,9 +55,9 @@ 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 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 620f67c053c..9aa579e98ce 100644 --- a/packages/web-components/fast-foundation/src/badge/badge.template.ts +++ b/packages/web-components/fast-foundation/src/badge/badge.template.ts @@ -11,7 +11,7 @@ export function badgeTemplate( ): 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 90e411c97c3..45855ada296 100644 --- a/packages/web-components/fast-foundation/src/badge/badge.ts +++ b/packages/web-components/fast-foundation/src/badge/badge.ts @@ -14,7 +14,7 @@ export type BadgeOptions = StartEndOptions; * @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 */ diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.ts index 03ebdf15a58..ec26d80b9b3 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.ts @@ -18,9 +18,10 @@ export type BreadcrumbItemOptions = StartEndOptions & { * * @slot start - Content which can be provided before the breadcrumb content * @slot end - Content which can be provided after the breadcrumb content - * @slot - The default slot for when no href is provided or for providing your own custom elements + * @slot - The default slot for breadcrumb item content * @slot separator - The slot for providing a custom separator - * @csspart listitem - The wrapping container for the item, represents a semantic listitem + * @csspart control - The anchor element + * @csspart content - The element wrapping the default slot * @csspart separator - The wrapping element for the separator * * @public diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md index 454c046f8bc..eab80a5627c 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/README.md +++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md @@ -3,10 +3,10 @@ id: breadcrumb title: fast-breadcrumb sidebar_label: breadcrumb custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/breadcrumb/README.md -description: fast-breadcrumb is a web component used as a navigational aid. +description: fast-breadcrumb is used as a navigational aid. --- -As defined by the [W3C](https://w3c.github.io/aria-practices/#breadcrumb): +As defined by the [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): > A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content. @@ -41,7 +41,7 @@ provideFASTDesignSystem() .register( fastBreadcrumb(), fastBreadcrumbItem({ - separator: " -> " + separator: "->" }) ); ``` @@ -52,7 +52,7 @@ provideFASTDesignSystem() Breadcrumb item 1 Breadcrumb item 2 - Breadcrumb item 3 + Breadcrumb item 3 ``` @@ -169,19 +169,20 @@ This component is built with the expectation that focus is delegated to the anch #### CSS Parts -| Name | Description | -| ----------- | ------------------------------------------------------------------- | -| `listitem` | The wrapping container for the item, represents a semantic listitem | -| `separator` | The wrapping element for the separator | +| Name | Description | +| ----------- | -------------------------------------- | +| `control` | The anchor element | +| `content` | The element wrapping the default slot | +| `separator` | The wrapping element for the separator | #### Slots -| Name | Description | -| ----------- | --------------------------------------------------------------------------------------- | -| `start` | Content which can be provided before the breadcrumb content | -| `end` | Content which can be provided after the breadcrumb content | -| | The default slot for when no href is provided or for providing your own custom elements | -| `separator` | The slot for providing a custom separator | +| Name | Description | +| ----------- | ----------------------------------------------------------- | +| `start` | Content which can be provided before the breadcrumb content | +| `end` | Content which can be provided after the breadcrumb content | +| | The default slot for breadcrumb item content | +| `separator` | The slot for providing a custom separator |
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts index 1850baf3da9..30207561e30 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts @@ -54,7 +54,7 @@ export class FASTBreadcrumb extends FASTElement { } /** - * Finds anchor childnodes in the light DOM or shadow DOM. + * Finds anchor child nodes in the light DOM or shadow DOM. * We look in the shadow DOM because we use an anchor inside the breadcrumb-item template. */ private findChildAnchor(node: HTMLElement): HTMLElement | null { @@ -62,7 +62,9 @@ export class FASTBreadcrumb extends FASTElement { return node.querySelector("a"); } else if (node.shadowRoot?.childElementCount) { return node.shadowRoot?.querySelector("a"); - } else return node; + } else { + return node; + } } /**