From ae0d27dc6ca7f5b53ec6c900d191b5d1b1ebf898 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Wed, 18 Nov 2020 10:13:24 +0000
Subject: [PATCH 1/5] feat: add align to tooltip

---
 .../src/components/tooltip/_tooltip.scss      | 48 ++++++++++++++++++-
 .../src/components/Tooltip/Tooltip-story.js   | 10 ++++
 .../react/src/components/Tooltip/Tooltip.js   | 14 +++++-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index ddb604499e8b..817e61d7e388 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -368,7 +368,7 @@
   }
 
   .#{$prefix}--tooltip {
-    @include box-shadow;
+    // @include box-shadow;
     @include reset;
 
     position: absolute;
@@ -380,7 +380,7 @@
     padding: $carbon--spacing-05;
     color: $inverse-01;
     word-wrap: break-word;
-    background: $inverse-02;
+    // background: $inverse-02;
     border-radius: rem(2px);
 
     // Windows, Firefox HCM Fix
@@ -427,6 +427,12 @@
       }
     }
 
+    .#{$prefix}--tooltip__content {
+      background-color: $inverse-02;
+      box-shadow: 0 0 0 $spacing-05 $inverse-02,
+        0 2px 6px $spacing-05 rgba(0, 0, 0, 0.2);
+    }
+
     // Tooltips need to be click focusable but not sequentially focusable so the user can click within
     // the tooltip and not have it close. Because the element is not actionable it does not need
     // to have a visible focus indicator (OK'd by IBMa)
@@ -448,6 +454,44 @@
       content: '';
     }
 
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(calc(50% - #{$spacing-05}), 0);
+      }
+    }
+
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(calc(-50% + #{$spacing-05}), 0);
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(9px + 50% - #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(-3px + 50% - #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(9px - 50% + #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(-3px - 50% + #{$spacing-05}));
+      }
+    }
+
     .#{$prefix}--tooltip__footer {
       display: flex;
       align-items: center;
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
index 7b071a6f5c5c..9aa4f7ff1521 100644
--- a/packages/react/src/components/Tooltip/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -26,8 +26,15 @@ const directions = {
   'Top (top)': 'top',
   'Right (right)': 'right',
 };
+const alignments = {
+  'Start (start)': 'start',
+  'Center (center)': 'center',
+  'End (end)': 'end',
+};
+
 const props = {
   withIcon: () => ({
+    align: select('Tooltip alignment (align)', alignments, 'center'),
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
@@ -38,6 +45,7 @@ const props = {
   }),
   withoutIcon: () => ({
     showIcon: false,
+    align: select('Tooltip alignment (align)', alignments, 'center'),
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
@@ -48,6 +56,7 @@ const props = {
   }),
   customIcon: () => ({
     showIcon: true,
+    align: select('Tooltip alignment (align)', alignments, 'center'),
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
@@ -66,6 +75,7 @@ const props = {
   }),
   customIconOnly: () => ({
     showIcon: true,
+    align: select('Tooltip alignment (align)', alignments, 'center'),
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     iconDescription: 'Helpful Information',
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index 11090edef5d1..10ffb210a06f 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/packages/react/src/components/Tooltip/Tooltip.js
@@ -87,6 +87,12 @@ class Tooltip extends Component {
   }
 
   static propTypes = {
+    /**
+     * Specify the alignment (to the trigger button) of the tooltip.
+     * Can be one of: start, center, or end.
+     */
+    align: PropTypes.oneOf(['start', 'center', 'end']),
+
     /**
      * Contents to put into the tooltip.
      */
@@ -207,6 +213,7 @@ class Tooltip extends Component {
   };
 
   static defaultProps = {
+    align: 'center',
     direction: DIRECTION_BOTTOM,
     focusTrap: true,
     renderIcon: Information,
@@ -405,6 +412,7 @@ class Tooltip extends Component {
       className,
       triggerClassName,
       direction,
+      align,
       focusTrap,
       triggerText,
       showIcon,
@@ -422,7 +430,11 @@ class Tooltip extends Component {
 
     const tooltipClasses = classNames(
       `${prefix}--tooltip`,
-      { [`${prefix}--tooltip--shown`]: open },
+      {
+        [`${prefix}--tooltip--shown`]: open,
+        [`${prefix}--tooltip--${direction}`]: direction,
+        [`${prefix}--tooltip--align-${align}`]: align,
+      },
       className
     );
 

From af93614e36dbb6b6a0128be2aa8e3088cd7caea8 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Wed, 18 Nov 2020 10:21:45 +0000
Subject: [PATCH 2/5] chore: remove comments

---
 packages/components/src/components/tooltip/_tooltip.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 817e61d7e388..9518f70c9d37 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -368,7 +368,6 @@
   }
 
   .#{$prefix}--tooltip {
-    // @include box-shadow;
     @include reset;
 
     position: absolute;
@@ -380,7 +379,6 @@
     padding: $carbon--spacing-05;
     color: $inverse-01;
     word-wrap: break-word;
-    // background: $inverse-02;
     border-radius: rem(2px);
 
     // Windows, Firefox HCM Fix

From 8710f5241ec096c1a73d04362a2b05b96bdacb28 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Wed, 18 Nov 2020 12:24:10 +0000
Subject: [PATCH 3/5] fix: tooltip-test after adding alignment

---
 packages/react/src/components/Tooltip/Tooltip-test.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tooltip/Tooltip-test.js b/packages/react/src/components/Tooltip/Tooltip-test.js
index dc7b093d3c19..08d2fab9615b 100644
--- a/packages/react/src/components/Tooltip/Tooltip-test.js
+++ b/packages/react/src/components/Tooltip/Tooltip-test.js
@@ -87,7 +87,9 @@ describe('Tooltip', () => {
             .find('[data-floating-menu-direction]')
             .first()
             .prop('className')
-        ).toBe(`${prefix}--tooltip ${prefix}--tooltip--shown tooltip--class`);
+        ).toBe(
+          `${prefix}--tooltip ${prefix}--tooltip--shown ${prefix}--tooltip--bottom ${prefix}--tooltip--align-center tooltip--class`
+        );
       });
       it('sets the trigger class', () => {
         expect(label.prop('className')).toBe(

From 0b246ebc66cefd1e2fa511883bb71a27a9f9c5d7 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 24 Nov 2020 19:46:50 +0000
Subject: [PATCH 4/5] fix: review comment regarding caret position

---
 packages/components/docs/sass.md              | 47 ++++++++++++++++++-
 .../src/components/tooltip/_tooltip.scss      | 12 ++---
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 263c2454e4c7..954347956a53 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3806,6 +3806,7 @@ $spacing-05: $carbon--spacing-05;
   - [search [mixin]](#search-mixin)
   - [select [mixin]](#select-mixin)
   - [tabs [mixin]](#tabs-mixin)
+  - [tooltip [mixin]](#tooltip-mixin)
   - [treeview [mixin]](#treeview-mixin)
   - [carbon-switcher [mixin]](#carbon-switcher-mixin)
 
@@ -26984,7 +26985,6 @@ Tooltip styles
   }
 
   .#{$prefix}--tooltip {
-    @include box-shadow;
     @include reset;
 
     position: absolute;
@@ -26996,7 +26996,6 @@ Tooltip styles
     padding: $carbon--spacing-05;
     color: $inverse-01;
     word-wrap: break-word;
-    background: $inverse-02;
     border-radius: rem(2px);
 
     // Windows, Firefox HCM Fix
@@ -27045,6 +27044,11 @@ Tooltip styles
       }
     }
 
+    .#{$prefix}--tooltip__content {
+      background-color: $inverse-02;
+      box-shadow: 0 0 0 $spacing-05 $inverse-02, 0 2px 6px $spacing-05 rgba(0, 0, 0, 0.2);
+    }
+
     // Tooltips need to be click focusable but not sequentially focusable so the user can click within
     // the tooltip and not have it close. Because the element is not actionable it does not need
     // to have a visible focus indicator (OK'd by IBMa)
@@ -27066,6 +27070,44 @@ Tooltip styles
       content: '';
     }
 
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(50%, 0);
+      }
+    }
+
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(-50%, 0);
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(9px + 50% - #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(-3px + 50% - #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(9px - 50% + #{$spacing-05}));
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
+      .#{$prefix}--tooltip__content {
+        transform: translate(0, calc(-3px - 50% + #{$spacing-05}));
+      }
+    }
+
     .#{$prefix}--tooltip__footer {
       display: flex;
       align-items: center;
@@ -27287,6 +27329,7 @@ Tooltip styles
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [inverse-link [variable]](#inverse-link-variable)
+  - [spacing-05 [variable]](#spacing-05-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
   - [interactive-04 [variable]](#interactive-04-variable)
 
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 74764d12979f..470b57c018c5 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -457,38 +457,38 @@
     &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
     &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
       .#{$prefix}--tooltip__content {
-        transform: translate(calc(50% - #{$spacing-05}), 0);
+        transform: translate(50%, 0);
       }
     }
 
     &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
     &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
       .#{$prefix}--tooltip__content {
-        transform: translate(calc(-50% + #{$spacing-05}), 0);
+        transform: translate(-50%, 0);
       }
     }
 
     &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
       .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(9px + 50% - #{$spacing-05}));
+        transform: translate(0, calc(9px + 50% - #{$spacing-03}));
       }
     }
 
     &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
       .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(-3px + 50% - #{$spacing-05}));
+        transform: translate(0, calc(-3px + 50% - #{$spacing-03}));
       }
     }
 
     &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
       .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(9px - 50% + #{$spacing-05}));
+        transform: translate(0, calc(9px - 50% + #{$spacing-03}));
       }
     }
 
     &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
       .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(-3px - 50% + #{$spacing-05}));
+        transform: translate(0, calc(-3px - 50% + #{$spacing-03}));
       }
     }
 

From f8a123ff8d75a2ad2257e2b91f4f2f5117edb980 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 1 Dec 2020 15:20:24 +0000
Subject: [PATCH 5/5] fix: review caret pos top n bottom - start n end

---
 packages/components/src/components/tooltip/_tooltip.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 470b57c018c5..05d40e1c7ce5 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -457,14 +457,14 @@
     &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
     &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
       .#{$prefix}--tooltip__content {
-        transform: translate(50%, 0);
+        transform: translate(calc(50% - 6px), 0);
       }
     }
 
     &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
     &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
       .#{$prefix}--tooltip__content {
-        transform: translate(-50%, 0);
+        transform: translate(calc(6px - 50%), 0);
       }
     }