Fluent: align suggested actions and attachments fonts (#5275)

* Fix: suggested actions and attachments fonts

* Snapshots

* Changelog

* Sort

Co-authored-by: William Wong <[email protected]>

---------

Co-authored-by: William Wong <[email protected]>

CHANGELOG.md

@@ -51,6 +51,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Updated `useSuggestedActions` to return the activity the suggested actions originated from, in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/5255), by [@compulim](https://github.com/compulim)
 -  Improved focus trap implementation by preserving focus state and removing sentinels, in PR [#5243](https://github.com/microsoft/BotFramework-WebChat/pull/5243), by [@OEvgeny](https://github.com/OEvgeny)
 -  Reworked pre-chat activity layout to use author entity for improved consistency and flexibility, in PR [#5274](https://github.com/microsoft/BotFramework-WebChat/pull/5274), by [@OEvgeny](https://github.com/OEvgeny)
+-  Updated styles for suggested actions and attachments in Fluent theme to improve readability and consistency, in PR [#5275](https://github.com/microsoft/BotFramework-WebChat/pull/5275), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

__tests__/html/fluentTheme/side-by-side.wide.dark.html

@@ -13,7 +13,6 @@
     body {
       /* The background is a decorative "Endless Clouds" pattern from https://www.heropatterns.com/ under CC BY 4.0. */
       background: #070707 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23111111' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
-
     }
 
     #webchat {
@@ -116,15 +115,34 @@
         },
         {
           timestamp: timestamp(),
-          channelData: { state: 'sent' },
           from: { role: 'user' },
           id: '4.0',
-          text: 'Onboarding Checklist.doc',
+          text: '',
+          channelData: {
+            state: 'sent',
+            attachmentSizes: [65 * 1024]
+          },
+          attachments: [
+            {
+              contentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              name: 'Onboarding Checklist.doc'
+            }
+          ],
           type: 'message'
         },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
+          suggestedActions: {
+            actions: [
+              {
+                displayText: 'What else should I say?',
+                text: 'What else should I say?',
+                title: 'What else should I say?',
+                type: 'messageBack'
+              },
+            ]
+          },
           "entities": [
             {
               "@context": "https://schema.org",
@@ -367,6 +385,16 @@
             }
           ],
           from: { name: 'Onboarding Buddy', role: 'bot' },
+          suggestedActions: {
+            actions: [
+                {
+                  displayText: 'Tell me more about onboarding process',
+                  text: 'Tell me more about onboarding process',
+                  title: 'Tell me more about onboarding process',
+                  type: 'messageBack'
+                }
+            ]
+          },
           "id": "7.1",
           "text": `I'm glad I could help! For your first day, here are some tips[1]:
 

__tests__/html/fluentTheme/side-by-side.wide.html

@@ -25,6 +25,7 @@
       --colorBrandForeground2Pressed: hsl(237, 26%, 27%);
       --colorBrandStroke2Pressed: hsl(237, 49%, 57%);
       --colorBrandBackground2Pressed: hsl(237, 87%, 85%);
+      --colorBrandStroke2: hsl(237, 53%, 68%);
       --shadow2: 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%);
     }
 
@@ -123,15 +124,34 @@
         },
         {
           timestamp: timestamp(),
-          channelData: { state: 'sent' },
           from: { role: 'user' },
           id: '4.0',
-          text: 'Onboarding Checklist.doc',
+          text: '',
+          channelData: {
+            state: 'sent',
+            attachmentSizes: [65 * 1024]
+          },
+          attachments: [
+            {
+              contentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              name: 'Onboarding Checklist.doc'
+            }
+          ],
           type: 'message'
         },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
+          suggestedActions: {
+            actions: [
+              {
+                displayText: 'What else should I say?',
+                text: 'What else should I say?',
+                title: 'What else should I say?',
+                type: 'messageBack'
+              },
+            ]
+          },
           "entities": [
             {
               "@context": "https://schema.org",
@@ -374,6 +394,16 @@
             }
           ],
           from: { name: 'Onboarding Buddy', role: 'bot' },
+          suggestedActions: {
+            actions: [
+                {
+                  displayText: 'Tell me more about onboarding process',
+                  text: 'Tell me more about onboarding process',
+                  title: 'Tell me more about onboarding process',
+                  type: 'messageBack'
+                }
+            ]
+          },
           "id": "7.1",
           "text": `I'm glad I could help! For your first day, here are some tips[1]:
 

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -118,6 +118,22 @@
   position: absolute;
 }
 
+/* Message bubble attachment content */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
+  cursor: default;
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
+
+  :global(.webchat__fileContent__fileName) {
+    color: var(--webchat-colorBrandForegroundLink);
+    font-family: inherit;
+  }
+  :global(.webchat__fileContent__size) {
+    color: var(--webchat-colorNeutralForeground2);
+    font-family: inherit;
+  }
+}
+
 /* Markdown links and citation links */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
   color: var(--webchat-colorBrandForegroundLink);

packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css

@@ -1,16 +1,17 @@
 :global(.webchat-fluent) .suggested-action {
   align-items: center;
   background: transparent;
-  border-radius: 8px;
-  border: 1px solid var(--webchat-colorBrandStroke2);
+  border-radius: var(--webchat-borderRadiusXLarge);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandStroke2);
   color: currentColor;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
-  gap: 4px;
-  padding: 4px 8px 4px;
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat-fontSizeBase200);
+  gap: var(--webchat-spacingHorizontalXS);
+  padding: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalS);
   text-align: start;
-  transition: all .15s ease-out;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 
   @media (hover: hover) {
     &:not([aria-disabled="true"]):hover {
@@ -29,7 +30,7 @@
 }
 
 :global(.webchat-fluent) .suggested-action__image {
-  font-size: 12px;
+  font-size: var(--webchat-fontSizeBase200);
   height: 1em;
   width: 1em;
 }