Add word-wrap to messageActivity

microsoft · Mar 21, 2019 · 41bde7d · 41bde7d
1 parent 1512fe6
commit 41bde7d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 - Fix [#1423](https://github.com/Microsoft/BotFramework-WebChat/issues/1423). Added sample for hosting WebChat in Angular, by [@omarsourour](https://github.com/omarsourour) in PR [#1813](https://github.com/Microsoft/BotFramework-WebChat/pull/1813)
 - Fix [#1767](https://github.com/Microsoft/BotFramework-WebChat/issues/1767). Remove `cursor: pointer` from buttons, by [@corinagum](https://github.com/corinagum) in PR [#1819](https://github.com/Microsoft/BotFramework-WebChat/pull/1819)
+- Fix [#1774](https://github.com/Microsoft/BotFramework-WebChat/issues/1774). Add `styleSetOption` to allow word break. Default to `break-word` , by [@corinagum](https://github.com/corinagum) in PR [#zzz](https://github.com/Microsoft/BotFramework-WebChat/pull/zzz)
 
 ## [4.3.0] - 2019-03-04
 

diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-long-urls-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-long-urls-1-snap.png
diff --git a/__tests__/basic.js b/__tests__/basic.js
@@ -20,3 +20,16 @@ test('setup', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('long urls', async () => {
+  const { driver, pageObjects} = await setupWebDriver();
+
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
diff --git a/packages/component/src/Styles/StyleSet/Bubble.js b/packages/component/src/Styles/StyleSet/Bubble.js
@@ -8,11 +8,13 @@ export default function createBubbleStyle({
   bubbleFromUserTextColor,
   bubbleMaxWidth,
   bubbleMinHeight,
-  bubbleTextColor
+  bubbleTextColor,
+  messageActivityWordBreak
 }) {
   return {
     maxWidth: bubbleMaxWidth,
     minHeight: bubbleMinHeight,
+    wordBreak: messageActivityWordBreak,
 
     '&:not(.from-user)': {
       background: bubbleBackground,

diff --git a/packages/component/src/Styles/defaultStyleSetOptions.js b/packages/component/src/Styles/defaultStyleSetOptions.js
@@ -14,6 +14,9 @@ const DEFAULT_OPTIONS = {
   paddingWide: 20,
   subtle: DEFAULT_SUBTLE,
 
+  // Word break
+  messageActivityWordBreak: 'break-word', // 'normal' || 'break-all' || 'break-word' || 'keep-all'
+
   // fonts
   primaryFont: fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif']),
   monospaceFont: fontFamily(['Consolas', 'Courier New', 'monospace']),
@@ -43,7 +46,7 @@ const DEFAULT_OPTIONS = {
   // Root
   rootHeight: '100%',
   rootWidth: '100%',
-  
+
   // Send box
   hideSendBox: false,
   hideUploadButton: false,