Add properties for stacked suggested actions height and overflow

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Resolves [#3205](https://github.com/microsoft/BotFramework-WebChat/issues/3205). Added Direct Line App Service Extension protocol, by [@compulim](https://github.com/compulim) in PR [#3206](https://github.com/microsoft/BotFramework-WebChat/pull/3206)
 -  Resolves [#3225](https://github.com/microsoft/BotFramework-WebChat/issues/3225). Support allowed scheme with `openUrl` card action, by [@compulim](https://github.com/compulim) in PR [#3226](https://github.com/microsoft/BotFramework-WebChat/pull/3226)
+-  Resolves [#3182](https://github.com/microsoft/BotFramework-WebChat/issues/3182). Added stacked suggested actions height properties, by [@corinagum](https://github.com/corinagum), in PR [#3235](https://github.com/microsoft/BotFramework-WebChat/pull/3235)
 
 ### Fixed
 

__tests__/suggestedActions.js

@@ -209,4 +209,64 @@ describe('suggested-actions command', () => {
 
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
+
+  test('should show stacked suggested actions with height of 50', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: { styleOptions: { suggestedActionLayout: 'stacked', suggestedActionsStackedHeight: 50 } }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('suggested-actions', { waitForSend: true });
+
+    await driver.wait(suggestedActionsShown(), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetchImage);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('should show stacked suggested actions with height of 50 with overflow hidden', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          suggestedActionLayout: 'stacked',
+          suggestedActionsStackedHeight: 50,
+          suggestedActionsStackedOverflow: 'hidden'
+        }
+      }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('suggested-actions', { waitForSend: true });
+
+    await driver.wait(suggestedActionsShown(), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetchImage);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('should show stacked suggested actions with height of 50 with overflow scroll', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          suggestedActionLayout: 'stacked',
+          suggestedActionsStackedHeight: 50,
+          suggestedActionsStackedOverflow: 'scroll'
+        }
+      }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('suggested-actions', { waitForSend: true });
+
+    await driver.wait(suggestedActionsShown(), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetchImage);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
 });

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

@@ -1,9 +1,16 @@
 /* eslint no-empty-pattern: "off" */
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
-export default function createSuggestedActionsStyle({ paddingRegular, suggestedActionLayout }) {
+export default function createSuggestedActionsStyle({
+  paddingRegular,
+  suggestedActionLayout,
+  suggestedActionsStackedHeight,
+  suggestedActionsStackedOverflow
+}) {
   if (suggestedActionLayout === 'stacked') {
     return {
+      height: suggestedActionsStackedHeight || 'auto',
+      overflowY: suggestedActionsStackedOverflow,
       paddingBottom: paddingRegular / 2,
       paddingLeft: paddingRegular / 2,
       paddingRight: paddingRegular / 2,

packages/component/src/Styles/defaultStyleOptions.js

@@ -111,9 +111,13 @@ const DEFAULT_OPTIONS = {
   suggestedActionDisabledTextColor: undefined, // defaults to subtle
   suggestedActionHeight: 40,
   suggestedActionImageHeight: 20,
-  suggestedActionLayout: 'carousel', // either "carousel" or "stacked"
+  suggestedActionLayout: 'carousel', // either 'carousel' or 'stacked'
   suggestedActionTextColor: null,
 
+  // Suggested actions 'stacked' layout
+  suggestedActionsStackedHeight: undefined, // defaults to 'auto'
+  suggestedActionsStackedOverflow: null,
+
   // Timestamp
   groupTimestamp: true,
   sendTimeout: 20000,