Clean up CSS

microsoft · Jul 18, 2019 · 484c677 · 484c677
1 parent 898d4c1
commit 484c677
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 44 deletions.
diff --git a/packages/component/src/Activity/Bubble.js b/packages/component/src/Activity/Bubble.js
@@ -8,12 +8,12 @@ import connectToWebChat from '../connectToWebChat';
 const ROOT_CSS = css({
   position: 'relative',
 
-  '& > .content': {
+  '& > .webchat__bubble__content': {
     // This is for hiding content outside of the bubble, for example, content outside of border radius
     overflow: 'hidden'
   },
 
-  '& > .nub': {
+  '& > .webchat__bubble__nub': {
     position: 'absolute'
   }
 });
@@ -24,13 +24,13 @@ const Bubble = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub,
     className={classNames(
       ROOT_CSS + '',
       styleSet.bubble + '',
-      { 'from-user': fromUser, indent: !nub, 'has-nub': nub },
+      { 'from-user': fromUser, webchat__bubble_has_nub: nub },
       className + '' || ''
     )}
   >
-    <div className="content">{children}</div>
+    <div className="webchat__bubble__content">{children}</div>
     {nub && !!(fromUser ? styleSet.options.bubbleFromUserNubSize : styleSet.options.bubbleNubSize) && (
-      <div className="nub" />
+      <div className="webchat__bubble__nub" />
     )}
   </div>
 );

diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -107,8 +107,7 @@ const WebChatCarouselFilmStrip = ({
   return (
     <div
       className={classNames(ROOT_CSS + '', styleSet.carouselFilmStrip + '', className + '', {
-        'indented-content': avatarInitials && !indented,
-        'indented-right': !styleSet.options.userAvatarInitials && !!styleSet.options.bubbleFromUserNubSize
+        webchat__carousel_indented_content: avatarInitials && !indented
       })}
       ref={scrollableRef}
     >
@@ -128,7 +127,7 @@ const WebChatCarouselFilmStrip = ({
             <div className="filler" />
           </div>
         )}
-        <ul className={classNames({ indented })} ref={itemContainerRef}>
+        <ul className={classNames({ webchat__carousel__item_indented: indented })} ref={itemContainerRef}>
           {attachments.map((attachment, index) => (
             <li key={index}>
               <Bubble fromUser={fromUser} key={index} nub={false}>
@@ -137,7 +136,7 @@ const WebChatCarouselFilmStrip = ({
             </li>
           ))}
         </ul>
-        <div className={classNames('webchat__row', { indented })}>
+        <div className={classNames({ webchat__carousel__item_indented: indented })}>
           {state === SENDING || state === SEND_FAILED ? (
             <SendStatus activity={activity} />
           ) : (

diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
@@ -108,11 +108,12 @@ const StackedLayout = ({ activity, avatarInitials, children, language, styleSet,
   return (
     <div
       className={classNames(ROOT_CSS + '', styleSet.stackedLayout + '', {
-        'extra-left-indent': fromUser && !styleSet.options.botAvatarInitials && styleSet.options.bubbleNubSize,
-        'extra-right-indent':
-          !fromUser && !styleSet.options.userAvatarInitials && styleSet.options.bubbleFromUserNubSize,
         'from-user': fromUser,
-        'indented-content': avatarInitials && !indented
+        webchat__stacked_extra_left_indent:
+          fromUser && !styleSet.options.botAvatarInitials && styleSet.options.bubbleNubSize,
+        webchat__stacked_extra_right_indent:
+          !fromUser && !styleSet.options.userAvatarInitials && styleSet.options.bubbleFromUserNubSize,
+        webchat__stacked_indented_content: avatarInitials && !indented
       })}
     >
       {!avatarInitials && !!(fromUser ? styleSet.options.bubbleFromUserNubSize : styleSet.options.bubbleNubSize) && (
@@ -145,13 +146,16 @@ const StackedLayout = ({ activity, avatarInitials, children, language, styleSet,
           )
         )}
         {attachments.map((attachment, index) => (
-          <div className={classNames('webchat__row attachment', { indented })} key={index}>
+          <div
+            className={classNames('webchat__row attachment', { webchat__stacked_item_indented: indented })}
+            key={index}
+          >
             <Bubble aria-hidden={true} className="attachment bubble" fromUser={fromUser} key={index} nub={false}>
               {children({ attachment })}
             </Bubble>
           </div>
         ))}
-        <div className={classNames('webchat__row', { indented })}>
+        <div className={classNames('webchat__row', { webchat__stacked_item_indented: indented })}>
           {showSendStatus ? (
             <SendStatus activity={activity} className="timestamp" />
           ) : (

diff --git a/packages/component/src/Styles/StyleSet/Bubble.js b/packages/component/src/Styles/StyleSet/Bubble.js
@@ -87,16 +87,16 @@ export default function createBubbleStyle({
   const userNubCornerRadius = Math.min(bubbleFromUserBorderRadius, Math.abs(bubbleFromUserNubOffset));
 
   return {
-    '& > .content': {
+    '& > .webchat__bubble__content': {
       wordBreak: messageActivityWordBreak
     },
 
     '&:not(.from-user)': {
-      '&.has-nub': {
-        '& > .content': bubbleNubSize ? { marginLeft: paddingRegular } : {}
+      '&.webchat__bubble_has_nub': {
+        '& > .webchat__bubble__content': bubbleNubSize ? { marginLeft: paddingRegular } : {}
       },
 
-      '& > .content': {
+      '& > .webchat__bubble__content': {
         background: bubbleBackground,
         borderColor: bubbleBorderColor,
         borderRadius: bubbleBorderRadius,
@@ -106,13 +106,13 @@ export default function createBubbleStyle({
         minHeight: bubbleMinHeight - bubbleBorderWidth * 2
       },
 
-      '&.has-nub > .content': {
+      '&.webchat__bubble_has_nub > .webchat__bubble__content': {
         // Hide border radius if there is a nub on the top/bottom left corner
         ...(bubbleNubSize && botNubUpSideDown ? { borderBottomLeftRadius: botNubCornerRadius } : {}),
         ...(bubbleNubSize && !botNubUpSideDown ? { borderTopLeftRadius: botNubCornerRadius } : {})
       },
 
-      '& > .nub': {
+      '& > .webchat__bubble__nub': {
         backgroundImage: `url("${svgToDataURI(botNubSVG).replace(/"/gu, "'")}")`,
         bottom: isPositive(bubbleNubOffset) ? undefined : -bubbleNubOffset,
         height: bubbleNubSize,
@@ -123,11 +123,11 @@ export default function createBubbleStyle({
     },
 
     '&.from-user': {
-      '&.has-nub': {
-        '& > .content': bubbleNubSize ? { marginRight: paddingRegular } : {}
+      '&.webchat__bubble_has_nub': {
+        '& > .webchat__bubble__content': bubbleNubSize ? { marginRight: paddingRegular } : {}
       },
 
-      '& > .content': {
+      '& > .webchat__bubble__content': {
         background: bubbleFromUserBackground,
         borderColor: bubbleFromUserBorderColor,
         borderRadius: bubbleFromUserBorderRadius,
@@ -137,13 +137,13 @@ export default function createBubbleStyle({
         minHeight: bubbleMinHeight - bubbleFromUserBorderWidth * 2
       },
 
-      '&.has-nub > .content': {
+      '&.webchat__bubble_has_nub > .webchat__bubble__content': {
         // Hide border radius if there is a nub on the top/bottom right corner
         ...(bubbleFromUserNubSize && userNubUpSideDown ? { borderBottomRightRadius: userNubCornerRadius } : {}),
         ...(bubbleFromUserNubSize && !userNubUpSideDown ? { borderTopRightRadius: userNubCornerRadius } : {})
       },
 
-      '& > .nub': {
+      '& > .webchat__bubble__nub': {
         backgroundImage: `url("${svgToDataURI(userNubSVG).replace(/"/gu, "'")}")`,
         height: bubbleFromUserNubSize,
         right: bubbleFromUserBorderWidth - bubbleFromUserNubSize + paddingRegular,

diff --git a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
@@ -10,19 +10,13 @@ export default function CarouselFilmStrip({ bubbleMaxWidth, bubbleMinWidth, padd
 
     paddingLeft: paddingRegular,
 
-    '&.indented-content > .content': {
+    '&.webchat__carousel_indented_content > .content': {
       marginLeft: paddingRegular
     },
 
-    '&.extra-right-indent > .content': {
-      paddingRight: paddingRegular * 2
-    },
-
-    '&:not(.extra-right-indent) > .content': {
-      paddingRight: paddingRegular
-    },
-
     '& > .content': {
+      paddingRight: paddingRegular,
+
       '& > ul': {
         '&:not(:first-child)': {
           marginTop: paddingRegular
@@ -38,7 +32,7 @@ export default function CarouselFilmStrip({ bubbleMaxWidth, bubbleMinWidth, padd
         }
       },
 
-      '& > .indented': {
+      '& > .webchat__carousel__item_indented': {
         marginLeft: paddingRegular
       }
     }

diff --git a/packages/component/src/Styles/StyleSet/StackedLayout.js b/packages/component/src/Styles/StyleSet/StackedLayout.js
@@ -2,38 +2,38 @@
 
 export default function createStackedLayoutStyle({ bubbleMaxWidth, bubbleMinWidth, paddingRegular }) {
   return {
-    '&.extra-left-indent': {
+    '&.webchat__stacked_extra_left_indent': {
       marginLeft: paddingRegular * 2
     },
 
-    '&:not(.extra-left-indent)': {
+    '&:not(.webchat__stacked_extra_left_indent)': {
       marginLeft: paddingRegular
     },
 
-    '&.extra-right-indent': {
+    '&.webchat__stacked_extra_right_indent': {
       marginRight: paddingRegular * 2
     },
 
-    '&:not(.extra-right-indent)': {
+    '&:not(.webchat__stacked_extra_right_indent)': {
       marginRight: paddingRegular
     },
 
     '&:not(.from-user)': {
-      '&.indented-content > .avatar': {
+      '&.webchat__stacked_indented_content > .avatar': {
         marginRight: paddingRegular
       },
 
-      '& > .content > .indented': {
+      '& > .content > .webchat__stacked_item_indented': {
         marginLeft: paddingRegular
       }
     },
 
     '&.from-user': {
-      '&.indented-content > .avatar': {
+      '&.webchat__stacked_indented_content > .avatar': {
         marginLeft: paddingRegular
       },
 
-      '& > .content > .indented': {
+      '& > .content > .webchat__stacked_item_indented': {
         marginRight: paddingRegular
       }
     },