Fix suggested actions scroll bar in Firefox and removes gaps

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1934](https://github.com/Microsoft/BotFramework-WebChat/issues/1934). Fix spacing of empty ConnectivityStatus component, by [@corinagum](https://github.com/corinagum) in PR [#1939](https://github.com/Microsoft/BotFramework-WebChat/pull/1939)
 - Fix [#1943](https://github.com/Microsoft/BotFramework-WebChat/issues/1943). Fix extra vertical padding in IE11 and Firefox, by [@compulim](https://github.com/compulim) in PR [#1949](https://github.com/Microsoft/BotFramework-WebChat/pull/1949)
 - Fix [#1945](https://github.com/Microsoft/BotFramework-WebChat/issues/1945). QA fixes for 4.4, by [@corinagum](https://github.com/johndoe) in PR [#1950](https://github.com/Microsoft/BotFramework-WebChat/pull/1950)
+- Fix [#1947](https://github.com/Microsoft/BotFramework-WebChat/issues/1947). Fix scrollbar in suggested action should be hidden in Firefox, remove gaps, and use style set for customizing `react-film`, by [@compulim](https://github.com/compulim) in PR [#1953](https://github.com/Microsoft/BotFramework-WebChat/pull/1953)
 
 ### Changed
 - Deployment: Bumps to [`blobxfer@1.7.1`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

packages/component/src/Styles/StyleSet/SuggestedActions.js

@@ -1,37 +1,4 @@
 export default function createSuggestedActionsStyle({
-  paddingRegular,
-  transcriptOverlayButtonBackground,
-  transcriptOverlayButtonBackgroundOnDisabled,
-  transcriptOverlayButtonBackgroundOnFocus,
-  transcriptOverlayButtonBackgroundOnHover,
-  transcriptOverlayButtonColor,
-  transcriptOverlayButtonColorOnDisabled,
-  transcriptOverlayButtonColorOnFocus,
-  transcriptOverlayButtonColorOnHover
 }) {
-  return {
-    paddingLeft: paddingRegular / 2,
-    paddingRight: paddingRegular / 2,
-
-    '& button > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackground,
-      color: transcriptOverlayButtonColor,
-      outline: 0
-    },
-
-    '& button:disabled > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnDisabled,
-      color: transcriptOverlayButtonColorOnDisabled
-    },
-
-    '& button:focus > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus
-    },
-
-    '& button:hover > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover
-    }
-  };
+  return {};
 }

packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js

@@ -1,12 +1,80 @@
+import { css } from 'glamor';
 import { createBasicStyleSet } from 'react-film';
 
-export default function createSuggestedActionsStyleSet() {
-  // This is not CSS, but options to create style set for react-film
-  return createBasicStyleSet({
+export default function createSuggestedActionsStyleSet({
+  paddingRegular,
+  transcriptOverlayButtonBackground,
+  transcriptOverlayButtonBackgroundOnDisabled,
+  transcriptOverlayButtonBackgroundOnFocus,
+  transcriptOverlayButtonBackgroundOnHover,
+  transcriptOverlayButtonColor,
+  transcriptOverlayButtonColorOnDisabled,
+  transcriptOverlayButtonColorOnFocus,
+  transcriptOverlayButtonColorOnHover
+}) {
+  const originalStyleSet = createBasicStyleSet({
     cursor: null,
     flipperBoxWidth: 40,
     flipperSize: 20,
     scrollBarHeight: 6,
     scrollBarMargin: 2
   });
+
+  const flipper = css({
+    '& > div.slider > div': {
+      background: transcriptOverlayButtonBackground,
+      color: transcriptOverlayButtonColor,
+      outline: 0
+    },
+
+    '&:disabled > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnDisabled,
+      color: transcriptOverlayButtonColorOnDisabled
+    },
+
+    '&:focus > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
+      color: transcriptOverlayButtonColorOnFocus
+    },
+
+    '&:hover > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
+      color: transcriptOverlayButtonColorOnHover
+    }
+  });
+
+  const leftFlipper = css(originalStyleSet.leftFlipper, flipper);
+  const rightFlipper = css(originalStyleSet.rightFlipper, flipper);
+  const carousel = css(originalStyleSet.carousel, {
+    '&:hover, &.scrolling': {
+      [`& .${ leftFlipper + '' } > div.slider, & .${ rightFlipper + '' } > div.slider`]: {
+        transitionDelay: '0s'
+      },
+      [`& .${ leftFlipper + '' } > div.slider`]: { left: 0 },
+      [`& .${ rightFlipper + '' } > div.slider`]: { right: 0 }
+    },
+
+    '& > div': {
+      scrollbarWidth: 'none',
+
+      '& > ul > li': {
+        '&:first-child': {
+          paddingLeft: paddingRegular / 2
+        },
+
+        '&:last-child': {
+          paddingRight: paddingRegular / 2
+        }
+      }
+    }
+  });
+
+  // This is not CSS, but options to create style set for react-film
+  return {
+    ...originalStyleSet,
+
+    carousel,
+    leftFlipper,
+    rightFlipper
+  };
 }