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 <[email protected]>
microsoft · May 31, 2022 · fd1a827 · fd1a827
1 parent 4685bc4
commit fd1a827
Show file tree

Hide file tree

Showing 13 changed files with 16 additions and 20 deletions.
diff --git a/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json 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": "[email protected]",
+  "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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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