fix(tooltip): Change class hierarchy of responsive classes to properl…

…y to directionality
telus · Nov 27, 2017 · 01ee4d2 · 01ee4d2
1 parent 0a5db9f
commit 01ee4d2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 29 deletions.
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
@@ -96,39 +96,22 @@ class Tooltip extends React.Component {
     )
   }
 
-  renderResponsiveBubble(id, direction, open, content) {
-    return (
-      <div>
-        <Responsive maxWidth="sm">
-          {matches => {
-            const size = 'bubbleXsmall'
-            return matches && this.renderBubble(id, direction, open, content, size)
-          }}
-        </Responsive>
-        <Responsive minWidth="sm" maxWidth="md">
-          {matches => {
-            const size = 'bubbleSmall'
-            return matches && this.renderBubble(id, direction, open, content, size)
-          }}
-        </Responsive>
-        <Responsive minWidth="md">
-          {matches => {
-            const size = 'bubbleDesktop'
-            return matches && this.renderBubble(id, direction, open, content, size)
-          }}
-        </Responsive>
-      </div>
-    )
-  }
-
   render() {
     const { direction, connectedFieldLabel, children, ...rest } = this.props
 
     const { bubbleId, triggerId } = getIds(connectedFieldLabel)
 
     return (
       <div {...safeRest(rest)} className={iconWrapperStyles.fixLineHeight}>
-        {this.renderResponsiveBubble(bubbleId, direction, this.state.open, children)}
+        <Responsive maxWidth="sm">
+          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleXsmall')}
+        </Responsive>
+        <Responsive minWidth="sm" maxWidth="md">
+          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleSmall')}
+        </Responsive>
+        <Responsive minWidth="md">
+          {this.renderBubble(bubbleId, direction, this.state.open, children, 'bubbleDesktop')}
+        </Responsive>
 
         <StandaloneIcon
           symbol="questionMarkCircle"

diff --git a/src/components/Tooltip/Tooltip.modules.scss b/src/components/Tooltip/Tooltip.modules.scss
@@ -59,23 +59,23 @@ $bubble-triangle-position: $bubble-triangle-width + 5px;
 .bubbleXsmall {
   width: 100%;
 
-  .right {
+  &.right {
     @include left-bubble;
   }
 }
 
 .bubbleSmall {
   width: 50%;
 
-  .right {
+  &.right {
     @include left-bubble;
   }
 }
 
 .bubbleDesktop {
   width: 25%;
 
-  .right {
+  &.right {
     left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
 
     &::before {