feat(tooltip): Add WithPadding to bubble

telus · Oct 2, 2017 · 65615a2 · 65615a2
1 parent bfbbcf4
commit 65615a2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
@@ -25,7 +25,7 @@ was correct, or highlight errors that must be corrected.
 
 ```
 <div>
-  <Input label="Username" value="guest12345" feedback="success" />
+  <Input label="Username" value="guest12345" feedback="success" tooltip={<Tooltip>This is some random text</Tooltip>} />
   <Input
     label="Email" value="guest@telus.com" feedback="error"
     error="That email is already associated with another account. Choose another one."

diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
@@ -6,6 +6,7 @@ import joinClassNames from '../../utils/joinClassNames'
 
 import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 import Text from '../Typography/Text/Text'
+import WithPadding from '../Spacing/WithPadding/WithPadding'
 
 import styles from './Tooltip.modules.scss'
 
@@ -36,7 +37,11 @@ class Tooltip extends React.Component {
 
     return (
       <span className={bubbleClasses}>
-        <Text size="small">{children}</Text>
+        <WithPadding location="vertical" scale={3}>
+          <WithPadding location="horizontal" scale={4}>
+            <Text size="small">{children}</Text>
+          </WithPadding>
+        </WithPadding>
       </span>
     )
   }

diff --git a/src/components/Tooltip/Tooltip.modules.scss b/src/components/Tooltip/Tooltip.modules.scss
@@ -1,8 +1,7 @@
 @import '../../scss/settings/colours';
 
 .wrapper {
-  background: $color-panache;
-  display: inline-block;
+  position: relative;
 }
 
 .trigger {
@@ -24,9 +23,9 @@
 
 .baseBubble {
   position: absolute;
-  // top: -10px;
-  // right: 5px;
-  max-width: 400px; // TODO: check what the value should be
+  top: -10px;
+  min-width: 200px;
+  max-width: 600px; // TODO: check what the value should be
   background-color: $color-white;
   box-shadow: 0 0 2px 0 $color-shark, 0 3px 2px 0 rgba(84, 89, 95, 0.25);
   border-radius: 4px;
@@ -40,29 +39,52 @@
   position: absolute;
 }
 
-.baseBubble::before {
+.left {
+  composes: baseBubble;
+
+  right: 12px;
+}
+
+.left::before {
   box-shadow: 2px 2px 3px 0 rgba(42, 42, 44, 0.4);
-  background-color: white;
+  background-color: $color-white;
   bottom: -7px;
   right: 12px;
   border-width: 7px;
   border-style: solid;
-  border-color: transparent white white transparent;
+  border-color: transparent $color-white $color-white transparent;
   transform: rotate(45deg);
 }
 
-.baseBubble::after {
+.left::after {
   bottom: 0;
   right: 5px;
   width: 27px;
   height: 14px;
-  background: white;
+  background: $color-white;
 }
 
-.left {
+.right {
   composes: baseBubble;
+
+  left: -17px;
 }
 
-.right {
-  composes: baseBubble;
+.right::before {
+  box-shadow: 2px 2px 3px 0 rgba(42, 42, 44, 0.4);
+  background-color: $color-white;
+  bottom: -7px;
+  left: 12px;
+  border-width: 7px;
+  border-style: solid;
+  border-color: transparent $color-white $color-white transparent;
+  transform: rotate(45deg);
+}
+
+.right::after {
+  bottom: 0;
+  left: 5px;
+  width: 27px;
+  height: 14px;
+  background: $color-white;
 }