[Post 4.10.1] Fix suggested actions maxHeight

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#3431](https://github.com/microsoft/BotFramework-WebChat/issues/3431). Removed delay of first activity with `replyToId` pointing to a missing activity, by [@compulim](https://github.com/compulim) in PR [#3450](https://github.com/microsoft/BotFramework-WebChat/pull/3450)
+-  Fixes [#3444](https://github.com/microsoft/BotFramework-WebChat/issues/3444). Make suggested actions container height styleOption flexible, by [@corinagum](https://github.com/corinagum) in PR [#3456](https://github.com/microsoft/BotFramework-WebChat/pull/3456)
 
 ### Changed
 

__tests__/suggestedActions.js

@@ -226,7 +226,7 @@ describe('suggested-actions command', () => {
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
 
-  test('should show stacked suggested actions with height of 50 with overflow hidden', async () => {
+  test('should show stacked suggested actions with a max height of 50 with overflow hidden', async () => {
     const { driver, pageObjects } = await setupWebDriver({
       props: {
         styleOptions: {
@@ -248,7 +248,7 @@ describe('suggested-actions command', () => {
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
 
-  test('should show stacked suggested actions with height of 50 with overflow scroll', async () => {
+  test('should show stacked suggested actions with a max height of 50 with overflow scroll', async () => {
     const { driver, pageObjects } = await setupWebDriver({
       props: {
         styleOptions: {
@@ -269,4 +269,90 @@ describe('suggested-actions command', () => {
 
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
+
+  test('should show stacked suggested actions with height of 50 and scroll overflow if overflow is unassigned', 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);
+  });
+
+  test('should show stacked suggested actions with auto height if suggested actions do not need the assigned max height', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          suggestedActionLayout: 'stacked',
+          suggestedActionsStackedHeight: 1000
+        }
+      }
+    });
+
+    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 max-height ignored if it is set to 0', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          suggestedActionLayout: 'stacked',
+          suggestedActionsStackedHeight: 0
+        }
+      }
+    });
+
+    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, ignoring max-height: 0 and overflow: hidden', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          suggestedActionLayout: 'stacked',
+          suggestedActionsStackedHeight: 0,
+          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);
+  });
 });

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

@@ -54,7 +54,7 @@ export default function createSuggestedActionsStyle({
       },
 
       '& .webchat__suggested-actions__stack': {
-        height: suggestedActionsStackedHeight || 'auto',
+        maxHeight: suggestedActionsStackedHeight || 'auto',
         overflowY: suggestedActionsStackedOverflow || 'auto',
         paddingBottom: paddingRegular / 2,
         paddingLeft: paddingRegular / 2,

packages/component/src/Styles/defaultStyleOptions.js

@@ -121,7 +121,7 @@ const DEFAULT_OPTIONS = {
   suggestedActionsCarouselFlipperSize: 20, // Flipper visible size
 
   // Suggested actions stacked layout
-  suggestedActionsStackedHeight: undefined, // defaults to 'auto'
+  suggestedActionsStackedHeight: undefined, // sets the container's max height. defaults to 'auto'
   suggestedActionsStackedOverflow: undefined, // defaults to 'auto',
 
   // Timestamp