Fix #1835 to verical stacking for SuggestedActions

CHANGELOG.md

@@ -52,6 +52,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Bring your own Adaptive Cards package by specifying `adaptiveCardsPackage` prop, by [@compulim](https://github.com/compulim) in PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543)
 -  Fixes [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598)
 -  `component`: Fixes [#2331](https://github.com/microsoft/BotFramework-WebChat/issues/2331). Updated timer to use React Hooks, by [@spyip](https://github.com/spyip) in PR [#2546](https://github.com/microsoft/BotFramework-WebChat/pull/2546)
+-  Resolves [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598)
+-  Adds `suggestedActionLayout` to `defaultStyleOptions`, by [@spyip](https://github.com/spyip), in PR [#2596](https://github.com/microsoft/BotFramework-WebChat/pull/2596)
+-  Resolves [#2331](https://github.com/microsoft/BotFramework-WebChat/issues/2331). Updated timer to use React Hooks, by [@spyip](https://github.com/spyip) in PR [#2546](https://github.com/microsoft/BotFramework-WebChat/pull/2546)
 
 ### Changed
 

__tests__/setup/conditions/suggestedActionsShown.js

@@ -1,5 +1,5 @@
 import { By, until } from 'selenium-webdriver';
 
 export default function suggestedActionsShown() {
-  return until.elementLocated(By.css('[role="form"] ul'));
+  return until.elementLocated(By.css('[role="form"] > :not(.main) button'));
 }

__tests__/suggestedActions.js

@@ -28,6 +28,22 @@ describe('suggested-actions command', () => {
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
 
+  test('should show correctly formatted buttons when suggested actions are displayed as stacked', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: { styleOptions: { suggestedActionLayout: 'stacked' } }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('suggested-actions', { waitForSend: true });
+
+    await driver.wait(suggestedActionsShown(), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), 2000);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
   test('should show response from bot and no text from user on imback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
@@ -174,4 +190,23 @@ describe('suggested-actions command', () => {
 
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
+
+  test('should show suggested actions with larger images as stacked', async () => {
+    const styleOptions = {
+      suggestedActionHeight: 80,
+      suggestedActionImageHeight: 60,
+      suggestedActionLayout: 'stacked'
+    };
+    const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions } });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('emptycard', { waitForSend: true });
+
+    await driver.wait(suggestedActionsShown(), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), 2000);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
 });

packages/component/src/SendBox/SuggestedAction.js

@@ -11,11 +11,13 @@ import useStyleSet from '../hooks/useStyleSet';
 import useSuggestedActions from '../hooks/useSuggestedActions';
 
 const SUGGESTED_ACTION_CSS = css({
-  display: 'inline-block',
+  display: 'flex',
+  flexDirection: 'column',
   whiteSpace: 'initial',
 
   '& > button': {
-    display: 'flex'
+    display: 'flex',
+    overflow: 'hidden'
   }
 });
 

packages/component/src/SendBox/SuggestedActions.js

@@ -1,5 +1,6 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { css } from 'glamor';
 import BasicFilm from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -12,6 +13,11 @@ import useLocalize from '../hooks/useLocalize';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
 
+const SUGGESTED_ACTION_STACKED_CSS = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
+
 function suggestedActionText({ displayText, title, type, value }) {
   if (type === 'messageBack') {
     return title || displayText;
@@ -35,37 +41,52 @@ const connectSuggestedActions = (...selectors) =>
 
 const SuggestedActions = ({ className, suggestedActions = [] }) => {
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
-  const [{ suggestedActionsStyleSet: suggestedActionsStyleSetForReactFilm }] = useStyleOptions();
+  const [{ suggestedActionLayout, suggestedActionsStyleSet: suggestedActionsStyleSetForReactFilm }] = useStyleOptions();
   const suggestedActionsContentText = useLocalize('SuggestedActionsContent');
   const suggestedActionsEmptyText = useLocalize('SuggestedActionsEmpty');
   const suggestedActionsContainerText =
     useLocalize('SuggestedActionsContainer') +
     (suggestedActions.length ? suggestedActionsContentText : suggestedActionsEmptyText);
 
+  if (!suggestedActions.length) {
+    return false;
+  }
+
+  const children = suggestedActions.map(({ displayText, image, text, title, type, value }, index) => (
+    <SuggestedAction
+      ariaHidden={true}
+      buttonText={suggestedActionText({ displayText, title, type, value })}
+      displayText={displayText}
+      image={image}
+      key={index}
+      text={text}
+      type={type}
+      value={value}
+    />
+  ));
+
+  if (suggestedActionLayout === 'stacked') {
+    return (
+      <div aria-label=" " aria-live="polite" role="status">
+        <ScreenReaderText text={suggestedActionsContainerText} />
+        <div className={classNames(suggestedActionsStyleSet + '', SUGGESTED_ACTION_STACKED_CSS + '', className + '')}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div aria-label=" " aria-live="polite" role="status">
       <ScreenReaderText text={suggestedActionsContainerText} />
-      {!!suggestedActions.length && (
-        <BasicFilm
-          autoCenter={false}
-          className={classNames(suggestedActionsStyleSet + '', className + '')}
-          showDots={false}
-          styleSet={suggestedActionsStyleSetForReactFilm}
-        >
-          {suggestedActions.map(({ displayText, image, text, title, type, value }, index) => (
-            <SuggestedAction
-              ariaHidden={true}
-              buttonText={suggestedActionText({ displayText, title, type, value })}
-              displayText={displayText}
-              image={image}
-              key={index}
-              text={text}
-              type={type}
-              value={value}
-            />
-          ))}
-        </BasicFilm>
-      )}
+      <BasicFilm
+        autoCenter={false}
+        className={classNames(suggestedActionsStyleSet + '', className + '')}
+        showDots={false}
+        styleSet={suggestedActionsStyleSetForReactFilm}
+      >
+        {children}
+      </BasicFilm>
     </div>
   );
 };

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

@@ -21,17 +21,18 @@ export default function createSuggestedActionStyle({
   subtle
 }) {
   return {
-    paddingBottom: paddingRegular,
+    paddingBottom: paddingRegular / 2,
     paddingLeft: paddingRegular / 2,
     paddingRight: paddingRegular / 2,
-    paddingTop: paddingRegular,
+    paddingTop: paddingRegular / 2,
 
     '& > button': {
       alignItems: 'center',
       borderRadius: suggestedActionBorderRadius,
       fontFamily: primaryFont,
       fontSize: 'inherit',
       height: suggestedActionHeight,
+      justifyContent: 'center',
       paddingLeft: paddingWide,
       paddingRight: paddingWide,
 
@@ -54,6 +55,11 @@ export default function createSuggestedActionStyle({
       '& > img': {
         height: suggestedActionImageHeight,
         paddingRight: paddingRegular
+      },
+
+      '& > nobr': {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
       }
     }
   };

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

@@ -1,5 +1,18 @@
 /* eslint no-empty-pattern: "off" */
+/* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
-export default function createSuggestedActionsStyle({}) {
-  return {};
+export default function createSuggestedActionsStyle({ paddingRegular, suggestedActionLayout }) {
+  if (suggestedActionLayout === 'stacked') {
+    return {
+      paddingBottom: paddingRegular / 2,
+      paddingLeft: paddingRegular / 2,
+      paddingRight: paddingRegular / 2,
+      paddingTop: paddingRegular / 2
+    };
+  }
+
+  return {
+    paddingBottom: paddingRegular / 2,
+    paddingTop: paddingRegular / 2
+  };
 }

packages/component/src/Styles/defaultStyleOptions.js

@@ -98,18 +98,19 @@ const DEFAULT_OPTIONS = {
   suggestedActionBackground: 'White',
   suggestedActionBorder: undefined, // split into 3, null
   suggestedActionBorderColor: undefined, // defaults to accent
+  suggestedActionBorderRadius: 0,
   suggestedActionBorderStyle: 'solid',
   suggestedActionBorderWidth: 2,
-  suggestedActionBorderRadius: 0,
-  suggestedActionImageHeight: 20,
-  suggestedActionTextColor: null,
   suggestedActionDisabledBackground: undefined, // defaults to suggestedActionBackground
   suggestedActionDisabledBorder: null,
   suggestedActionDisabledBorderColor: '#E6E6E6',
   suggestedActionDisabledBorderStyle: 'solid',
   suggestedActionDisabledBorderWidth: 2,
   suggestedActionDisabledTextColor: undefined, // defaults to subtle
   suggestedActionHeight: 40,
+  suggestedActionImageHeight: 20,
+  suggestedActionLayout: 'carousel', // either "carousel" or "stacked"
+  suggestedActionTextColor: null,
 
   // Timestamp
   timestampColor: undefined, // defaults to subtle