Fix carousel layout (#1561)

* Fix carousel layout * Update snapshot * Add threshold to pixelmatch
microsoft · Jan 9, 2019 · e1f847e · e1f847e
1 parent 83b9956
commit e1f847e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - `connectCarouselFilmStrip`: Fixed `botAvatarInitials` and `userAvatarInitials` functionality from [recent name change](https://github.com/Microsoft/BotFramework-WebChat/pull/1486),
   - `BasicTranscript`: Fixed user activity should not be recreated after receive ACK from Direct Line,
   - by [@corinagum](https://github.com/corinagum) in PR [#1528](https://github.com/Microsoft/BotFramework-WebChat/pull/1528)
+- Fix [#1560](https://github.com/Microsoft/BotFramework-WebChat/issues/1560). Fixed carousel layout did not show date and alignment issues, by [@compulim](https://github.com/compulim) in PR [#1561](https://github.com/Microsoft/BotFramework-WebChat/pull/1561)
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png
diff --git a/__tests__/basic.js b/__tests__/basic.js
@@ -19,5 +19,8 @@ test('setup', async () => {
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect(base64PNG).toMatchImageSnapshot();
+  expect(base64PNG).toMatchImageSnapshot({
+    failureThreshold: 10,
+    failureThresholdType: 'pixel'
+  });
 }, 60000);
diff --git a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
@@ -6,23 +6,38 @@ export default function ({
   return {
     // Browser quirks: Firefox has no way to hide scrollbar and while keeping it in function
     // https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
-    marginBottom: -17,
-    paddingLeft: paddingRegular,
-    paddingRight: paddingRegular,
+    '@supports (-moz-appearance: none)': {
+      marginBottom: -17
+    },
 
     '& > .avatar': {
       marginRight: paddingRegular
     },
 
-    '& > .content > ul': {
-      '&:not(:first-child)': {
-        marginTop: paddingRegular
+    '& > .content': {
+      '& > .message': {
+        marginLeft: paddingRegular
+      },
+
+      '& > ul': {
+        '&:not(:first-child)': {
+          marginLeft: paddingRegular,
+          marginRight: paddingRegular,
+          marginTop: paddingRegular
+        },
+
+        '& > li': {
+          maxWidth: bubbleMaxWidth,
+          minWidth: bubbleMinWidth,
+
+          '&:not(:last-child)': {
+            marginRight: paddingRegular
+          }
+        }
       },
 
-      '& > li': {
-        marginRight: paddingRegular,
-        maxWidth: bubbleMaxWidth,
-        minWidth: bubbleMinWidth
+      '& > .row': {
+        marginLeft: paddingRegular
       }
     }
   };