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>
microsoft · Feb 10, 2022 · d2185e2 · d2185e2
1 parent 864abdc
commit d2185e2
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 20 deletions.
diff --git a/change/@microsoft-fast-components-31b7336b-21fd-4a8f-900b-3d4968476ff9.json 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"