Fix CSS collisions with Bootstrap and bump memoize-one (#1884)

* Add webchat prefix to row class * Bump memoize-one * Update CHANGELOG.md * Update webchat__row to BEM naming convention
microsoft · Apr 9, 2019 · c2f9021 · c2f9021
1 parent e561bc4
commit c2f9021
Show file tree

Hide file tree

Showing 13 changed files with 676 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1768](https://github.com/Microsoft/BotFramework-WebChat/issues/1768). Add style option to modify all Send Box borders, by [@corinagum](https://github.com/corinagum) in PR [#1871](https://github.com/Microsoft/BotFramework-WebChat/pull/1871)
 - Fix [#1827](https://github.com/Microsoft/BotFramework-WebChat/issues/1827). Remove renderer for unknown activities, by [@corinagum](https://github.com/corinagum) in PR [#1873](https://github.com/Microsoft/BotFramework-WebChat/pull/1873)
 - Fix [#1586](https://github.com/Microsoft/BotFramework-WebChat/issues/1586). Fix theming of suggested actions buttons, by [@corinagum](https://github.com/corinagum) in PR [#1883](https://github.com/Microsoft/BotFramework-WebChat/pull/1883)
+- Fix [#1837](https://github.com/Microsoft/BotFramework-WebChat/issues/1837), [#1643](https://github.com/Microsoft/BotFramework-WebChat/issues/1643). Fix style conflicts with bootstrap and bump `memoize-one`, by [@corinagum](https://github.com/corinagum) in PR [#1884](https://github.com/Microsoft/BotFramework-WebChat/pull/1884)
 
 ## [4.3.0] - 2019-03-04
 

diff --git a/packages/bundle/package-lock.json b/packages/bundle/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -39,7 +39,7 @@
     "core-js": "^2.5.7",
     "markdown-it": "^8.4.2",
     "markdown-it-for-inline": "^0.1.1",
-    "memoize-one": "^4.0.2",
+    "memoize-one": "^5.0.2",
     "microsoft-speech-browser-sdk": "^0.0.12",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",

diff --git a/packages/component/package-lock.json b/packages/component/package-lock.json
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -48,7 +48,7 @@
     "bytes": "^3.0.0",
     "classnames": "^2.2.6",
     "glamor": "^2.20.40",
-    "memoize-one": "^3.1.1",
+    "memoize-one": "^5.0.2",
     "react-dictate-button": "^1.1.3",
     "react-film": "~1.1.2",
     "react-redux": "^5.0.7",

diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -157,7 +157,7 @@ const ConnectedCarouselFilmStrip = connectCarouselFilmStrip(
           </ul>
           <div
             aria-hidden={ true }
-            className="row"
+            className="webchat__row"
           >
             {(
               activity.channelData

diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
@@ -25,7 +25,7 @@ const ROOT_CSS = css({
     flexGrow: 1,
     overflow: 'hidden',
 
-    '& > .row': {
+    '& > .webchat__row': {
       display: 'flex',
 
       '& > .bubble, & > .timestamp': {
@@ -47,7 +47,7 @@ const ROOT_CSS = css({
   '&.from-user': {
     flexDirection: 'row-reverse',
 
-    '& > .content > .row': {
+    '& > .content > .webchat__row': {
       flexDirection: 'row-reverse'
     }
   }
@@ -119,7 +119,7 @@ export default connectStackedLayout(
         <div className="content">
           {
             activity.type === 'typing' ?
-              <div className="row typing">
+              <div className="webchat__row typing">
                 {
                   children({
                     activity,
@@ -129,7 +129,7 @@ export default connectStackedLayout(
                 <div className="filler" />
               </div>
             : !!activityDisplayText &&
-              <div className="row message">
+              <div className="webchat__row message">
                 <Bubble
                   aria-label={ ariaLabel }
                   className="bubble"
@@ -150,7 +150,7 @@ export default connectStackedLayout(
           }
           {
             (activity.attachments || []).map((attachment, index) =>
-              <div className="row attachment" key={ index }>
+              <div className="webchat__row attachment" key={ index }>
                 <Bubble
                   className="attachment bubble"
                   fromUser={ fromUser }
@@ -163,7 +163,7 @@ export default connectStackedLayout(
           }
           <div
             aria-hidden={ true }
-            className="row"
+            className="webchat__row"
           >
             { showSendStatus ?
                 <SendStatus activity={ activity } className="timestamp" />

diff --git a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
@@ -37,7 +37,7 @@ export default function ({
         }
       },
 
-      '& > .row': {
+      '& > .webchat__row': {
         marginLeft: paddingRegular
       }
     }

diff --git a/packages/component/src/Styles/StyleSet/StackedLayout.js b/packages/component/src/Styles/StyleSet/StackedLayout.js
@@ -8,7 +8,7 @@ export default function ({
     marginRight: paddingRegular,
 
     '& > .content': {
-      '& > .row': {
+      '& > .webchat__row': {
         '& > .bubble, & > .timestamp': {
           maxWidth: bubbleMaxWidth
         },

diff --git a/packages/playground/package-lock.json b/packages/playground/package-lock.json
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -19,7 +19,7 @@
     "glamor": "^2.20.40",
     "markdown-it": "^8.4.1",
     "markdown-it-for-inline": "^0.1.1",
-    "memoize-one": "^4.0.2",
+    "memoize-one": "^5.0.2",
     "microsoft-speech-browser-sdk": "^0.0.12",
     "on-error-resume-next": "^1.0.0",
     "react": "^16.4.1",