From d2185e297f3786787e548b7137953f27045ae96f Mon Sep 17 00:00:00 2001
From: Mathieu Lavoie <44816587+m4thieulavoie@users.noreply.github.com>
Date: Thu, 10 Feb 2022 12:43:17 -0500
Subject: [PATCH] Components use html templates (#5496)

* use html instead of string templating

* Change files

* rollback to comment highlighting

Co-authored-by: Chris Holt <chhol@microsoft.com>
Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>
Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
---
 ...st-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json | 7 +++++++
 .../fast-components/src/accordion-item/index.ts            | 4 ++--
 .../web-components/fast-components/src/checkbox/index.ts   | 4 ++--
 .../web-components/fast-components/src/combobox/index.ts   | 2 +-
 .../web-components/fast-components/src/flipper/index.ts    | 4 ++--
 .../web-components/fast-components/src/menu-item/index.ts  | 6 +++---
 .../fast-components/src/number-field/index.ts              | 4 ++--
 .../fast-components/src/progress-ring/index.ts             | 2 +-
 .../web-components/fast-components/src/progress/index.ts   | 4 ++--
 packages/web-components/fast-components/src/radio/index.ts | 2 +-
 .../web-components/fast-components/src/select/index.ts     | 2 +-
 .../web-components/fast-components/src/slider/index.ts     | 2 +-
 .../web-components/fast-components/src/switch/index.ts     | 2 +-
 .../web-components/fast-components/src/tree-item/index.ts  | 2 +-
 14 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 change/@microsoft-fast-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json

diff --git a/change/@microsoft-fast-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json b/change/@microsoft-fast-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json
new file mode 100644
index 00000000000..2953269cf1c
--- /dev/null
+++ b/change/@microsoft-fast-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use html instead of string templating",
+  "packageName": "@microsoft/fast-components",
+  "email": "mathieulavoie94@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/accordion-item/index.ts b/packages/web-components/fast-components/src/accordion-item/index.ts
index 71f6f22828d..4b1a0f2e1d3 100644
--- a/packages/web-components/fast-components/src/accordion-item/index.ts
+++ b/packages/web-components/fast-components/src/accordion-item/index.ts
@@ -18,7 +18,7 @@ export const fastAccordionItem = AccordionItem.compose<AccordionItemOptions>({
     baseName: "accordion-item",
     template,
     styles,
-    collapsedIcon: `
+    collapsedIcon: /* html */ `
         <svg
             width="20"
             height="20"
@@ -32,7 +32,7 @@ export const fastAccordionItem = AccordionItem.compose<AccordionItemOptions>({
             />
         </svg>
     `,
-    expandedIcon: `
+    expandedIcon: /* html */ `
         <svg
             width="20"
             height="20"
diff --git a/packages/web-components/fast-components/src/checkbox/index.ts b/packages/web-components/fast-components/src/checkbox/index.ts
index 255a71a09bf..84ceff8f404 100644
--- a/packages/web-components/fast-components/src/checkbox/index.ts
+++ b/packages/web-components/fast-components/src/checkbox/index.ts
@@ -18,7 +18,7 @@ export const fastCheckbox = Checkbox.compose<CheckboxOptions>({
     baseName: "checkbox",
     template,
     styles,
-    checkedIndicator: `
+    checkedIndicator: /* html */ `
         <svg
             part="checked-indicator"
             class="checked-indicator"
@@ -32,7 +32,7 @@ export const fastCheckbox = Checkbox.compose<CheckboxOptions>({
             />
         </svg>
     `,
-    indeterminateIndicator: `
+    indeterminateIndicator: /* html */ `
         <div part="indeterminate-indicator" class="indeterminate-indicator"></div>
     `,
 });
diff --git a/packages/web-components/fast-components/src/combobox/index.ts b/packages/web-components/fast-components/src/combobox/index.ts
index d935e6715db..b45c5705ecf 100644
--- a/packages/web-components/fast-components/src/combobox/index.ts
+++ b/packages/web-components/fast-components/src/combobox/index.ts
@@ -21,7 +21,7 @@ export const fastCombobox = Combobox.compose<ComboboxOptions>({
     shadowOptions: {
         delegatesFocus: true,
     },
-    indicator: `
+    indicator: /* html */ `
         <svg
             class="select-indicator"
             part="select-indicator"
diff --git a/packages/web-components/fast-components/src/flipper/index.ts b/packages/web-components/fast-components/src/flipper/index.ts
index 07c38643887..9e121f4b068 100644
--- a/packages/web-components/fast-components/src/flipper/index.ts
+++ b/packages/web-components/fast-components/src/flipper/index.ts
@@ -18,14 +18,14 @@ export const fastFlipper = Flipper.compose<FlipperOptions>({
     baseName: "flipper",
     template,
     styles,
-    next: `
+    next: /* html */ `
         <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"
             />
         </svg>
     `,
-    previous: `
+    previous: /* html */ `
         <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M11.273 15.977L3.29 8 11.273.023l.704.704L4.71 8l7.266 7.273-.704.704z"
diff --git a/packages/web-components/fast-components/src/menu-item/index.ts b/packages/web-components/fast-components/src/menu-item/index.ts
index b9f7a4c77ff..e0fe827e019 100644
--- a/packages/web-components/fast-components/src/menu-item/index.ts
+++ b/packages/web-components/fast-components/src/menu-item/index.ts
@@ -18,7 +18,7 @@ export const fastMenuItem = MenuItem.compose<MenuItemOptions>({
     baseName: "menu-item",
     template,
     styles,
-    checkboxIndicator: `
+    checkboxIndicator: /* html */ `
         <svg
             part="checkbox-indicator"
             class="checkbox-indicator"
@@ -32,7 +32,7 @@ export const fastMenuItem = MenuItem.compose<MenuItemOptions>({
             />
         </svg>
     `,
-    expandCollapseGlyph: `
+    expandCollapseGlyph: /* html */ `
         <svg
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@ export const fastMenuItem = MenuItem.compose<MenuItemOptions>({
             />
         </svg>
     `,
-    radioIndicator: `
+    radioIndicator: /* html */ `
         <span part="radio-indicator" class="radio-indicator"></span>
     `,
 });
diff --git a/packages/web-components/fast-components/src/number-field/index.ts b/packages/web-components/fast-components/src/number-field/index.ts
index e3b68d62514..27c5abfc852 100644
--- a/packages/web-components/fast-components/src/number-field/index.ts
+++ b/packages/web-components/fast-components/src/number-field/index.ts
@@ -46,10 +46,10 @@ export const fastNumberField = NumberField.compose<NumberFieldOptions>({
     shadowOptions: {
         delegatesFocus: true,
     },
-    stepDownGlyph: `
+    stepDownGlyph: /* html */ `
         <span class="step-down-glyph" part="step-down-glyph"></span>
     `,
-    stepUpGlyph: `
+    stepUpGlyph: /* html */ `
         <span class="step-up-glyph" part="step-up-glyph"></span>
     `,
 });
diff --git a/packages/web-components/fast-components/src/progress-ring/index.ts b/packages/web-components/fast-components/src/progress-ring/index.ts
index 47409101b0f..8c1a5127e38 100644
--- a/packages/web-components/fast-components/src/progress-ring/index.ts
+++ b/packages/web-components/fast-components/src/progress-ring/index.ts
@@ -18,7 +18,7 @@ export const fastProgressRing = ProgressRing.compose<ProgressRingOptions>({
     baseName: "progress-ring",
     template,
     styles,
-    indeterminateIndicator: `
+    indeterminateIndicator: /* html */ `
         <svg class="progress" part="progress" viewBox="0 0 16 16">
             <circle
                 class="background"
diff --git a/packages/web-components/fast-components/src/progress/index.ts b/packages/web-components/fast-components/src/progress/index.ts
index 3857d6c6146..9f02a395468 100644
--- a/packages/web-components/fast-components/src/progress/index.ts
+++ b/packages/web-components/fast-components/src/progress/index.ts
@@ -18,10 +18,10 @@ export const fastProgress = Progress.compose<ProgressOptions>({
     baseName: "progress",
     template,
     styles,
-    indeterminateIndicator1: `
+    indeterminateIndicator1: /* html */ `
         <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
     `,
-    indeterminateIndicator2: `
+    indeterminateIndicator2: /* html */ `
         <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
     `,
 });
diff --git a/packages/web-components/fast-components/src/radio/index.ts b/packages/web-components/fast-components/src/radio/index.ts
index 3a2b10674ec..57d4ee4af63 100644
--- a/packages/web-components/fast-components/src/radio/index.ts
+++ b/packages/web-components/fast-components/src/radio/index.ts
@@ -18,7 +18,7 @@ export const fastRadio = Radio.compose<RadioOptions>({
     baseName: "radio",
     template,
     styles,
-    checkedIndicator: `
+    checkedIndicator: /* html */ `
         <div part="checked-indicator" class="checked-indicator"></div>
     `,
 });
diff --git a/packages/web-components/fast-components/src/select/index.ts b/packages/web-components/fast-components/src/select/index.ts
index c79d7ab6419..077816d3792 100644
--- a/packages/web-components/fast-components/src/select/index.ts
+++ b/packages/web-components/fast-components/src/select/index.ts
@@ -19,7 +19,7 @@ export const fastSelect = Select.compose<SelectOptions>({
     baseName: "select",
     template,
     styles,
-    indicator: `
+    indicator: /* html */ `
         <svg
             class="select-indicator"
             part="select-indicator"
diff --git a/packages/web-components/fast-components/src/slider/index.ts b/packages/web-components/fast-components/src/slider/index.ts
index 63ba17e10d4..1361f15f9d4 100644
--- a/packages/web-components/fast-components/src/slider/index.ts
+++ b/packages/web-components/fast-components/src/slider/index.ts
@@ -18,7 +18,7 @@ export const fastSlider = Slider.compose<SliderOptions>({
     baseName: "slider",
     template,
     styles,
-    thumb: `
+    thumb: /* html */ `
         <div class="thumb-cursor"></div>
     `,
 });
diff --git a/packages/web-components/fast-components/src/switch/index.ts b/packages/web-components/fast-components/src/switch/index.ts
index 26a80abb881..6faa44ab9c5 100644
--- a/packages/web-components/fast-components/src/switch/index.ts
+++ b/packages/web-components/fast-components/src/switch/index.ts
@@ -18,7 +18,7 @@ export const fastSwitch = Switch.compose<SwitchOptions>({
     baseName: "switch",
     template,
     styles,
-    switch: `
+    switch: /* html */ `
         <span class="checked-indicator" part="checked-indicator"></span>
     `,
 });
diff --git a/packages/web-components/fast-components/src/tree-item/index.ts b/packages/web-components/fast-components/src/tree-item/index.ts
index 6ae7559671f..95784a611b7 100644
--- a/packages/web-components/fast-components/src/tree-item/index.ts
+++ b/packages/web-components/fast-components/src/tree-item/index.ts
@@ -19,7 +19,7 @@ export const fastTreeItem = TreeItem.compose<TreeItemOptions>({
     baseName: "tree-item",
     template,
     styles,
-    expandCollapseGlyph: `
+    expandCollapseGlyph: /* html */ `
         <svg
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"