Fluent: make icons customizable (#5413)

* Fluent: make icons customizable * Cleanup * Tests * Changelog * fix failing * Fix nit
microsoft · Jan 24, 2025 · ba7ba0f · ba7ba0f
1 parent 4df27b8
commit ba7ba0f
Show file tree

Hide file tree

Showing 163 changed files with 196 additions and 166 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -102,6 +102,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Bumped dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#5385](https://github.com/microsoft/BotFramework-WebChat/pull/5385) and [#5400](https://github.com/microsoft/BotFramework-WebChat/pull/5400)
    -  Production dependencies
       -  [`[email protected]`](https://npmjs.com/package/web-speech-cognitive-services)
+-  Enabled icon customization in Fluent theme through CSS variables, in PR [#5413](https://github.com/microsoft/BotFramework-WebChat/pull/5413), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png
diff --git a/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png b/...plied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png
diff --git a/...rk-theme-applied-side-by-side-left-transcript-right-pre-chat-message-2-snap.png b/...rk-theme-applied-side-by-side-left-transcript-right-pre-chat-message-2-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png
diff --git a/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png b/...-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-1-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-1-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-2-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-2-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-3-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-3-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-4-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-4-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-6-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-6-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-8-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-8-snap.png
diff --git a/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-9-snap.png b/...nt-theme-applied-side-by-side-left-transcript-right-pre-chat-message-9-snap.png
diff --git a/...-fluent-theme-applied-ui-state-should-display-properly-in-dark-theme-5-snap.png b/...-fluent-theme-applied-ui-state-should-display-properly-in-dark-theme-5-snap.png
diff --git a/...-fluent-theme-applied-ui-state-should-display-properly-in-dark-theme-7-snap.png b/...-fluent-theme-applied-ui-state-should-display-properly-in-dark-theme-7-snap.png
diff --git a/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-4-snap.png b/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-4-snap.png
diff --git a/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-5-snap.png b/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-5-snap.png
diff --git a/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-7-snap.png b/...theme-applied-ui-state-should-display-properly-in-dark-theme-and-rtl-7-snap.png
diff --git a/...fluent-theme-applied-ui-state-should-display-properly-in-light-theme-5-snap.png b/...fluent-theme-applied-ui-state-should-display-properly-in-light-theme-5-snap.png
diff --git a/...fluent-theme-applied-ui-state-should-display-properly-in-light-theme-7-snap.png b/...fluent-theme-applied-ui-state-should-display-properly-in-light-theme-7-snap.png
diff --git a/__tests__/html/customElement/shadowRoot.html b/__tests__/html/customElement/shadowRoot.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/customElement/slotted.html b/__tests__/html/customElement/slotted.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/...ts__/html/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html b/...ts__/html/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html
@@ -3,7 +3,7 @@
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
     <link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html b/__tests__/html/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html
@@ -3,7 +3,7 @@
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
     <link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/accessibility.sendBox.alertOffline.sendButton.html b/__tests__/html/fluentTheme/accessibility.sendBox.alertOffline.sendButton.html
@@ -3,7 +3,7 @@
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
     <link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/attachFile.html b/__tests__/html/fluentTheme/attachFile.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/attachMultipleFiles.html b/__tests__/html/fluentTheme/attachMultipleFiles.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/autoResize.html b/__tests__/html/fluentTheme/autoResize.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/connectivityStatus.html b/__tests__/html/fluentTheme/connectivityStatus.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/customElement/shadowRoot.html b/__tests__/html/fluentTheme/customElement/shadowRoot.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/customElement/slotted.html b/__tests__/html/fluentTheme/customElement/slotted.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/dragAndDrop.effect.html b/__tests__/html/fluentTheme/dragAndDrop.effect.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/dragAndDrop.upload.html b/__tests__/html/fluentTheme/dragAndDrop.upload.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/fluentThemeFallback.dark.html b/__tests__/html/fluentTheme/fluentThemeFallback.dark.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.26.5/babel.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>
     <script crossorigin="anonymous" src="/test-page-object.js"></script>
     <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.js"></script>

diff --git a/__tests__/html/fluentTheme/fluentThemeFallback.html b/__tests__/html/fluentTheme/fluentThemeFallback.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>
     <script crossorigin="anonymous" src="/test-page-object.js"></script>
     <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.js"></script>

diff --git a/__tests__/html/fluentTheme/focusBack.html b/__tests__/html/fluentTheme/focusBack.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/focusBack.multiple.html b/__tests__/html/fluentTheme/focusBack.multiple.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/focusManagement.backToSendBox.html b/__tests__/html/fluentTheme/focusManagement.backToSendBox.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/grid.html b/__tests__/html/fluentTheme/grid.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/hideAttachFileButton.html b/__tests__/html/fluentTheme/hideAttachFileButton.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/maxMessageLength.html b/__tests__/html/fluentTheme/maxMessageLength.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/maxMessageLength.infinity.html b/__tests__/html/fluentTheme/maxMessageLength.infinity.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/sendBox.primaryBehavior.html b/__tests__/html/fluentTheme/sendBox.primaryBehavior.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/sendOnEnter.html b/__tests__/html/fluentTheme/sendOnEnter.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/sendOnSendButtonClick.html b/__tests__/html/fluentTheme/sendOnSendButtonClick.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.html b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
@@ -3,7 +3,7 @@
 
 <head>
   <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
   <script crossorigin="anonymous" src="/test-harness.js"></script>
   <script crossorigin="anonymous" src="/test-page-object.js"></script>
   <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.js"></script>

diff --git a/__tests__/html/fluentTheme/side-by-side.wide.html b/__tests__/html/fluentTheme/side-by-side.wide.html
@@ -3,7 +3,7 @@
 
 <head>
   <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
   <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
   <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
   <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/simple.coarsePointer.html b/__tests__/html/fluentTheme/simple.coarsePointer.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/simple.html b/__tests__/html/fluentTheme/simple.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/suggestedActions.focus.html b/__tests__/html/fluentTheme/suggestedActions.focus.html
@@ -3,7 +3,7 @@
 
 <head>
   <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
   <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
   <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
   <script crossorigin="anonymous" src="/test-harness.js"></script>

diff --git a/__tests__/html/fluentTheme/suggestedActions.html b/__tests__/html/fluentTheme/suggestedActions.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
     <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>