From fd1a827f3c917129c27ef4dd17d6c07261d29464 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 13:00:35 -0700
Subject: [PATCH] remove classes and parts from slots on `fast-foundation`
 templates (#5946)

* fixes build-break caused by rebase

* feat: update private change handlers to protected (#5872)

* update attribute and observable change handlers with internal logic to be protected instead of private

* Change files

* udpate api docs

* fixing build / test after rebase

* remove class and part names from slots in fast foundation templates

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...st-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json | 7 +++++++
 .../src/accordion-item/accordion-item.template.ts          | 4 ++--
 .../fast-foundation/src/accordion-item/accordion-item.ts   | 2 --
 .../web-components/fast-foundation/src/accordion/README.md | 2 --
 .../web-components/fast-foundation/src/avatar/README.md    | 1 -
 .../fast-foundation/src/avatar/avatar.template.ts          | 6 +++---
 .../web-components/fast-foundation/src/avatar/avatar.ts    | 1 -
 .../fast-foundation/src/directives/reflect-attributes.ts   | 1 -
 .../src/progress-ring/progress-ring.template.ts            | 2 +-
 .../fast-foundation/src/progress/progress.template.ts      | 2 +-
 packages/web-components/fast-foundation/src/tabs/README.md | 2 --
 .../fast-foundation/src/tabs/tabs.template.ts              | 4 ++--
 packages/web-components/fast-foundation/src/tabs/tabs.ts   | 2 --
 13 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json

diff --git a/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json b/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json
new file mode 100644
index 00000000000..4bad6fdfbce
--- /dev/null
+++ b/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "remove class and part names from slots in fast foundation templates",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
index feb010d0131..c9340bbd839 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
@@ -35,10 +35,10 @@ export const accordionItemTemplate: FoundationElementTemplate<
             ${startSlotTemplate(context, definition)}
             ${endSlotTemplate(context, definition)}
             <span class="icon" part="icon" aria-hidden="true">
-                <slot name="expanded-icon" part="expanded-icon">
+                <slot name="expanded-icon">
                     ${definition.expandedIcon || ""}
                 </slot>
-                <slot name="collapsed-icon" part="collapsed-icon">
+                <slot name="collapsed-icon">
                     ${definition.collapsedIcon || ""}
                 </slot>
             <span>
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
index c75cb84f59f..134d55faedb 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
@@ -34,8 +34,6 @@ export type AccordionItemOptions = FoundationElementDefinition &
  * @csspart button - The button which serves to invoke the item
  * @csspart heading-content - Wraps the slot for the heading content within the button
  * @csspart icon - The icon container
- * @csspart expanded-icon - The expanded icon slot
- * @csspart collapsed-icon - The collapsed icon
  * @csspart region - The wrapper for the accordion item content
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
index e3091a2af11..1073dea3b27 100644
--- a/packages/web-components/fast-foundation/src/accordion/README.md
+++ b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -206,8 +206,6 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 | `button`          | The button which serves to invoke the item               |
 | `heading-content` | Wraps the slot for the heading content within the button |
 | `icon`            | The icon container                                       |
-| `expanded-icon`   | The expanded icon slot                                   |
-| `collapsed-icon`  | The collapsed icon                                       |
 | `region`          | The wrapper for the accordion item content               |
 
 #### Slots
diff --git a/packages/web-components/fast-foundation/src/avatar/README.md b/packages/web-components/fast-foundation/src/avatar/README.md
index 36519df50a8..20a54166157 100644
--- a/packages/web-components/fast-foundation/src/avatar/README.md
+++ b/packages/web-components/fast-foundation/src/avatar/README.md
@@ -165,7 +165,6 @@ This component is built with the expectation that focus is delegated to the anch
 | ----------- | ------------------------------------- |
 | `backplate` | The wrapping container for the avatar |
 | `link`      | The avatar link                       |
-| `media`     | The media slot                        |
 | `content`   | The default slot                      |
 
 #### Slots
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
index 40727c731f2..546804dfeea 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
@@ -23,9 +23,9 @@ export const avatarTemplate: FoundationElementTemplate<
             href="${x => (x.link ? x.link : void 0)}"
             style="${x => (x.color ? `color: var(--avatar-color-${x.color});` : void 0)}"
         >
-            <slot name="media" part="media">${definition.media || ""}</slot>
-            <slot class="content" part="content"><slot>
+            <slot name="media">${definition.media || ""}</slot>
+            <slot><slot>
         </a>
     </div>
-    <slot name="badge" part="badge"></slot>
+    <slot name="badge"></slot>
 `;
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.ts b/packages/web-components/fast-foundation/src/avatar/avatar.ts
index 843e3371539..171752c7583 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.ts
@@ -22,7 +22,6 @@ export type AvatarOptions = FoundationElementDefinition & {
  * @slot badge - Used to provide a badge, such as a status badge
  * @csspart backplate - The wrapping container for the avatar
  * @csspart link - The avatar link
- * @csspart media - The media slot
  * @csspart content - The default slot
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
index cf2e32d7739..f42e9d9c7c8 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
@@ -77,7 +77,6 @@ class ReflectAttributesDirective extends StatelessAttachedAttributeDirective<str
      * The attributes the behavior is reflecting
      */
     public attributes: Readonly<string[]>;
-
     constructor(attributes: string[]) {
         super(attributes);
         this.attributes = Object.freeze(attributes);
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
index 2da6ae80e37..e9a485a00ff 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
@@ -52,7 +52,7 @@ export const progressRingTemplate: FoundationElementTemplate<
         ${when(
             x => typeof x.value !== "number",
             html<BaseProgress>`
-                <slot name="indeterminate" slot="indeterminate">
+                <slot name="indeterminate">
                     ${definition.indeterminateIndicator || ""}
                 </slot>
             `
diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
index afeef212cc7..ca3dda045d8 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -34,7 +34,7 @@ export const progressTemplate: FoundationElementTemplate<
             x => typeof x.value !== "number",
             html<BaseProgress>`
                 <div class="progress" part="progress" slot="indeterminate">
-                    <slot class="indeterminate" name="indeterminate">
+                    <slot name="indeterminate">
                         ${defintion.indeterminateIndicator1 || ""}
                         ${defintion.indeterminateIndicator2 || ""}
                     </slot>
diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
index 58f5cf1aee9..33d881d8f6a 100644
--- a/packages/web-components/fast-foundation/src/tabs/README.md
+++ b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -153,9 +153,7 @@ export const myTabs = Tabs.compose({
 | Name              | Description                       |
 | ----------------- | --------------------------------- |
 | `tablist`         | The element wrapping for the tabs |
-| `tab`             | The tab slot                      |
 | `activeIndicator` | The visual indicator              |
-| `tabpanel`        | The tabpanel slot                 |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
index a159e2f82da..6bbb0dcb5e9 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
@@ -15,7 +15,7 @@ export const tabsTemplate: FoundationElementTemplate<ViewTemplate<Tabs>, TabsOpt
     <template class="${x => x.orientation}">
         ${startSlotTemplate(context, definition)}
         <div class="tablist" part="tablist" role="tablist">
-            <slot class="tab" name="tab" part="tab" ${slotted("tabs")}></slot>
+            <slot name="tab" ${slotted("tabs")}></slot>
 
             ${when(
                 x => x.showActiveIndicator,
@@ -30,7 +30,7 @@ export const tabsTemplate: FoundationElementTemplate<ViewTemplate<Tabs>, TabsOpt
         </div>
         ${endSlotTemplate(context, definition)}
         <div class="tabpanel">
-            <slot name="tabpanel" part="tabpanel" ${slotted("tabpanels")}></slot>
+            <slot name="tabpanel" ${slotted("tabpanels")}></slot>
         </div>
     </template>
 `;
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 2a7625ff44b..991ab0e3fd0 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -46,9 +46,7 @@ export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientatio
  * @slot tab - The slot for tabs
  * @slot tabpanel - The slot for tabpanels
  * @csspart tablist - The element wrapping for the tabs
- * @csspart tab - The tab slot
  * @csspart activeIndicator - The visual indicator
- * @csspart tabpanel - The tabpanel slot
  * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
  *
  * @public