From 95360a76ccb4ec40b2623dc01b55ea123d522b62 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Mon, 15 Jun 2020 13:26:52 -0700
Subject: [PATCH] fix: ensure all component internals have part names (#3306)

* fix: ensure all component internals have part names

* ensure badge styles do not break
---
 .../fast-components-msft/src/badge/badge.styles.ts          | 2 +-
 .../fast-components/src/badge/badge.styles.ts               | 6 +++---
 .../src/accordion/accordion-item/accordion-item.template.ts | 1 +
 .../fast-foundation/src/anchor/anchor.template.ts           | 1 +
 .../fast-foundation/src/badge/badge.template.ts             | 3 ++-
 .../fast-foundation/src/button/button.template.ts           | 1 +
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
index d3beca1dc40..9dc73da76ca 100644
--- a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
+++ b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
@@ -15,7 +15,7 @@ export const BadgeStyles = css`
         line-height: var(--type-ramp-minus-1-height);
     }
 
-    .badge {
+    .control {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
     }
diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts
index d95f65f3e3b..cccbc987e3f 100644
--- a/packages/web-components/fast-components/src/badge/badge.styles.ts
+++ b/packages/web-components/fast-components/src/badge/badge.styles.ts
@@ -10,18 +10,18 @@ export const BadgeStyles = css`
         line-height: var(--type-ramp-minus-1-height);
     }
 
-    .badge {
+    .control {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
         color: ${accentForegroundRestBehavior.var};
         font-weight: 600;
     }
 
-    .badge[style] {
+    .control[style] {
         font-weight: 400;
     }
 
-    :host(.circular) .badge {
+    :host(.circular) .control {
         border-radius: 100px;
         padding: 0 calc(var(--design-unit) * 1px);
         ${
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
index 6bb2974a9f4..0dc7da98646 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts
@@ -35,6 +35,7 @@ export const AccordionItemTemplate = html<AccordionItem>`
         </div>
         <div
             class="region"
+            part="region"
             id="${x => x.id}-panel"
             role="region"
             aria-labelledby="${x => x.id}"
diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.template.ts b/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
index 38f7a60b680..d8f941a59f0 100644
--- a/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
+++ b/packages/web-components/fast-foundation/src/anchor/anchor.template.ts
@@ -6,6 +6,7 @@ export const AnchorTemplate = html<Anchor>`
     <template class="${x => x.appearance}">
         <a
             class="control"
+            part="control"
             download="${x => x.download}"
             href="${x => x.href}"
             hreflang="${x => x.hreflang}"
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 337f9c26c04..9ed6744fc5d 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.template.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.template.ts
@@ -4,7 +4,8 @@ import { Badge } from "./badge";
 export const BadgeTemplate = html<Badge>`
     <template class="${x => (x.circular ? "circular" : "")}">
         <div
-            class="badge"
+            class="control"
+            part="control"
             style="${x =>
                 x.fill || x.color
                     ? `background-color: var(--badge-fill-${x.fill}); color: var(--badge-color-${x.color})`
diff --git a/packages/web-components/fast-foundation/src/button/button.template.ts b/packages/web-components/fast-foundation/src/button/button.template.ts
index 53271735ca0..c945081d920 100644
--- a/packages/web-components/fast-foundation/src/button/button.template.ts
+++ b/packages/web-components/fast-foundation/src/button/button.template.ts
@@ -6,6 +6,7 @@ export const ButtonTemplate = html<Button>`
     <template class="${x => x.appearance}">
         <button
             class="control"
+            part="control"
             ?autofocus=${x => x.autofocus}
             ?disabled=${x => x.disabled}
             form=${x => x.formId}