Doc updates and minor cleanup

microsoft · Dec 13, 2023 · ca299ed · ca299ed
1 parent 66091ec
commit ca299ed
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 24 deletions.
diff --git 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
@@ -11,7 +11,7 @@ export function badgeTemplate<T extends FASTBadge>(
 ): ElementViewTemplate<T> {
     return html<T>`
         ${startSlotTemplate(options)}
-        <span class="control" part="control">
+        <span class="content" part="content">
             <slot></slot>
         </span>
         ${endSlotTemplate(options)}

diff --git 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
@@ -18,9 +18,10 @@ export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
  *
  * @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
@@ -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()
 <fast-breadcrumb>
     <fast-breadcrumb-item href="#">Breadcrumb item 1</fast-breadcrumb-item>
     <fast-breadcrumb-item href="#">Breadcrumb item 2</fast-breadcrumb-item>
-    <fast-breadcrumb-item >Breadcrumb item 3</fast-breadcrumb-item>
+    <fast-breadcrumb-item>Breadcrumb item 3</fast-breadcrumb-item>
 </fast-breadcrumb>
 ```
 
@@ -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                   |
 
 <hr/>
 

diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
@@ -54,15 +54,17 @@ 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 {
         if (node.childElementCount > 0) {
             return node.querySelector("a");
         } else if (node.shadowRoot?.childElementCount) {
             return node.shadowRoot?.querySelector("a");
-        } else return node;
+        } else {
+            return node;
+        }
     }
 
     /**