Fluent: add sendbox focus animation (#5143)

* Fluent: add sendbox focus animation

* Update snapshots

* Add entry

---------

Co-authored-by: William Wong <compulim@users.noreply.github.com>

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Disabled send button and hid message length when telephone keypad is shown, in PR [#5136](https://github.com/microsoft/BotFramework-WebChat/pull/5136)
    -  Added dark theme support, in PR [#5138](https://github.com/microsoft/BotFramework-WebChat/pull/5138)
    -  Added an information message to the telephone keypad, in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
+   -  Added animation to focus indicator and pixel-perfected, in PR [#5143](https://github.com/microsoft/BotFramework-WebChat/pull/5143)
 -  (Experimental) Added `<LocalizeString />` component which can be used to localize strings, by [@OEvgeny](https://github.com/OEvgeny) in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)

packages/fluent-theme/src/components/Theme.module.css

@@ -62,4 +62,19 @@
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
   --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
+
+  --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
+
+  --webchat-durationUltraFast: var(--durationUltraFast, 0);
+  --webchat-durationNormal: var(--durationNormal, 200ms);
+
+  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
+  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
+}
+
+@media (prefers-reduced-motion) {
+  :global(.webchat-fluent).theme {
+    --webchat-durationUltraFast: 0.01ms;
+    --webchat-durationNormal: 0.01ms;
+  }
 }

packages/fluent-theme/src/components/sendbox/index.module.css

@@ -5,11 +5,12 @@
   text-rendering: optimizeLegibility;
 
   --webchat-sendbox-attachment-area-active: ;
+  --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);
 }
 
 :global(.webchat-fluent) .sendbox__sendbox {
   background-color: var(--webchat-colorNeutralBackground1);
-  border-radius: var(--webchat-borderRadiusLarge);
+  border-radius: var(--webchat-sendbox-border-radius);
   border: 1px solid var(--webchat-colorNeutralStroke1);
   display: grid;
   font-family: var(--webchat-fontFamilyBase);
@@ -30,11 +31,25 @@
 
   &:focus-within {
     border-color: var(--webchat-colorNeutralStroke1Selected);
-    /* TODO clarify with design the color:
-      - Teams is using colorCompoundBrandForeground1
-      - Fluent is using colorCompoundBrandStroke
-      - we are using colorCompoundBrandForeground1Hover */
-    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);
+  }
+
+  &::after {
+    border-bottom-left-radius: var(--webchat-sendbox-border-radius);
+    border-bottom-right-radius: var(--webchat-sendbox-border-radius);
+    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
+    bottom: -1px;
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+    content: "";
+    height: var(--webchat-sendbox-border-radius);
+    left: -1px;
+    position: absolute;
+    right: -1px;
+    transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);
+  }
+
+  &:focus-within::after {
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   }
 
   > .sendbox__text-area--in-grid {

packages/test/harness/src/browser/globals/run.js

@@ -37,6 +37,12 @@ export default function () {
           .sendDevToolsCommand('Emulation.setEmulatedMedia', {
             features: [{ name: 'forced-colors', value: '' }]
           })
+          // Prefer reduced motion, so animations don't affect tests.
+          .then(() =>
+            host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+              features: [{ name: 'prefers-reduced-motion', value: 'reduce' }]
+            })
+          )
           // Some tests may have changed the time zone, we should unset it.
           .then(() => host.sendDevToolsCommand('Emulation.setTimezoneOverride', { timezoneId: 'Etc/UTC' }))
           .catch(error =>