Snaps and nits

microsoft · Dec 5, 2024 · c9e6f63 · c9e6f63
1 parent ca2f16d
commit c9e6f63
Show file tree

Hide file tree

Showing 45 changed files with 28 additions and 162 deletions.
diff --git a/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png b/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png
diff --git a/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png b/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png
diff --git a/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png b/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png
diff --git a/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png b/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png
diff --git a/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png b/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png
diff --git a/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png b/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png
diff --git a/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png b/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png
diff --git a/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png b/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png
diff --git a/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png b/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png b/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png b/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png b/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png b/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png b/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png
diff --git a/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png b/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png
diff --git a/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png b/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png
diff --git a/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png b/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-45-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-45-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png
diff --git a/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html b/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html
diff --git a/__tests__/html/transcript.activityGrouping.html b/__tests__/html/transcript.activityGrouping.html
@@ -36,14 +36,13 @@
         }
       } = window;
 
-      run = fn => fn();
       run(async function () {
         const params = new URLSearchParams(location.hash.replace(/^#/u, ''));
 
         const height = params.get('ch');
         const width = params.get('cw');
 
-        // await host.windowSize(width, height, document.getElementById('webchat'));
+        await host.windowSize(width, height, document.getElementById('webchat'));
 
         const TestHarness = () => {
           const { activityMiddleware, directLine, rtl, styleOptions, wide } = useContext(ActivityGroupingContext);
@@ -76,11 +75,11 @@
           document.getElementById('webchat')
         );
 
-      //   await pageConditions.uiConnected();
-      //   await pageConditions.allImagesLoaded();
-      //   await pageConditions.scrollToBottomCompleted();
+        await pageConditions.uiConnected();
+        await pageConditions.allImagesLoaded();
+        await pageConditions.scrollToBottomCompleted();
 
-      //   await host.snapshot();
+        await host.snapshot();
       });
     </script>
   </body>

diff --git a/__tests__/html2/activity/viewCodeButton.html.snap-2.png b/__tests__/html2/activity/viewCodeButton.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlock/layout.html b/__tests__/html2/markdown/codeBlock/layout.html
@@ -41,7 +41,7 @@
         const params = new URLSearchParams(location.search);
 
         renderWebChat({
-          directLine, 
+          directLine,
           store,
           styleOptions: {
             codeBlockTheme: params.get('code-block-theme') ?? 'github-light-default'

diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/fluent/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/fluent/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/layout.html.snap-1.png
diff --git a/packages/component/src/Styles/CustomPropertyNames.ts b/packages/component/src/Styles/CustomPropertyNames.ts
@@ -1,26 +1,25 @@
 const CustomPropertyNames = Object.freeze({
   // Make sure key names does not have JavaScript forbidden names.
+  BackgroundCodeBlock: '--webchat__background--code-block',
   BorderAnimationColor1: '--webchat__border-animation--color-1',
   BorderAnimationColor2: '--webchat__border-animation--color-2',
   BorderAnimationColor3: '--webchat__border-animation--color-3',
   ColorAccent: '--webchat__color--accent',
+  ColorCodeBlock: '--webchat__color--code-block',
   ColorSubtle: '--webchat__color--subtle',
   ColorTimestamp: '--webchat__color--timestamp',
   FontPrimary: '--webchat__font--primary',
   FontSizeSmall: '--webchat__font-size--small',
   IconURLExternalLink: '--webchat__icon-url--external-link',
   MaxHeightImageBubble: '--webchat__max-height--image-bubble',
   MaxWidthAttachmentBubble: '--webchat__max-width--attachment-bubble',
-  MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble',
   MaxWidthMessageBubble: '--webchat__max-width--message-bubble',
-  MinWidthMessageBubble: '--webchat__min-width--message-bubble',
   MinHeightBubble: '--webchat__min-height--bubble',
   MinHeightImageBubble: '--webchat__min-height--image-bubble',
+  MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble',
+  MinWidthMessageBubble: '--webchat__min-width--message-bubble',
   PaddingRegular: '--webchat__padding--regular',
   SizeAvatar: '--webchat__size--avatar'
-});
-
-// This is for type-checking only to make sure the CSS custom property names is `--webchat__${string}`.
-const _TypeChecking: Readonly<Record<string, `--webchat__${string}`>> = CustomPropertyNames;
+}) satisfies Readonly<Record<string, `--webchat__${string}`>>;
 
 export default CustomPropertyNames;
diff --git a/packages/component/src/Styles/StyleSet/CodeBlock.ts b/packages/component/src/Styles/StyleSet/CodeBlock.ts
@@ -1,21 +1,25 @@
+import CustomPropertyNames from '../CustomPropertyNames';
+
 export default function createCodeBlockStyle() {
   return {
     '&.webchat__code-block': {
-      margin: '16px 0',
+      background: `var(${CustomPropertyNames.BackgroundCodeBlock}, inherit)`,
+      border: '1px solid #d1d1d1',
+      borderRadius: '4px',
+      color: `var(${CustomPropertyNames.ColorCodeBlock}, currentColor)`,
       display: 'block',
+      margin: '16px 0',
       overflow: 'hidden',
       padding: '4px',
-      borderRadius: '4px',
-      border: '1px solid #d1d1d1',
 
       ':has(> .github-dark-default)': {
-        backgroundColor: 'var(--webchat__code-block--background, #0d1117)',
-        color: 'var(--webchat__code-block--color, #e6edf3)'
+        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #0d1117)`,
+        color: `var(${CustomPropertyNames.ColorCodeBlock}, #e6edf3)`
       },
 
       ':has(> .github-light-default)': {
-        backgroundColor: 'var(--webchat__code-block--background, inherit)',
-        color: 'var(--webchat__code-block--color, currentColor)'
+        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #ffffff)`,
+        color: `var(${CustomPropertyNames.ColorCodeBlock}, #1f2328)`
       },
 
       ':has(.webchat__code-block__body:focus-visible):focus-within': {

diff --git a/packages/component/src/Styles/StyleSet/RenderMarkdown.ts b/packages/component/src/Styles/StyleSet/RenderMarkdown.ts
@@ -91,10 +91,6 @@ export default function createMarkdownStyle() {
 
       '& :is([data-math-type=block], [data-math-type=inline]) > span': {
         display: 'contents'
-      },
-
-      '& .webchat__render-markdown__code-block': {
-        whiteSpace: 'pre-wrap'
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts b/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts
@@ -45,7 +45,6 @@ export default function createViewCodeDialogStyle() {
       '& .webchat__view-code-dialog__body': {
         border: 'none',
         borderRadius: 0,
-        display: 'flex',
         overflow: 'auto',
         height: '100%',
 

diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
@@ -443,20 +443,20 @@
   }
 
   &:global(:has(> .github-dark-default)) {
+    --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey8));
     --webchat__code-block__copy-button--background: var(
       --codeBlockCopyButtonBackgroundPressed,
       var(--webchat-colorGrey14)
     );
-    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonColor, var(--webchat__code-block--color));
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey8));
-    --webchat__code-block--color: var(--codeBlockColor, var(--webchat-colorGrey98));
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey98));
   }
 
   &:global(:has(> .github-light-default)) {
+    --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey98));
     --webchat__code-block__copy-button--background: var(--codeBlockBackgroundPressed, var(--webchat-colorGrey92));
-    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonColor, var(--webchat__code-block--color));
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey98));
-    --webchat__code-block--color: var(--codeBlockColor, var(--webchat-colorGrey8));
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey8));
   }
 }
 
@@ -482,7 +482,6 @@
     --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
 
     margin-block-start: var(--webchat-spacingVerticalS);
-    opacity: 1;
     position: absolute;
     right: 32px;
     top: 0;