fix(tooltip): update to match component spec

src/components/tooltip/tooltip-body.ts

@@ -1,14 +1,15 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import settings from 'carbon-components/es/globals/js/settings';
 import { html, property, customElement } from 'lit-element';
+import HostListener from '../../globals/decorators/host-listener';
 import BXFloatingMenu, {
   FLOATING_MENU_ALIGNMENT,
   FLOATING_MENU_DIRECTION,
@@ -41,6 +42,17 @@ class BXTooltipBody extends BXFloatingMenu {
   @property({ type: Boolean, reflect: true })
   open = false;
 
+  /**
+   * Handles `keydown` event on this element.
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeydown = async event => {
+    if (event.key === 'Escape') {
+      this.open = false;
+    }
+  };
+
   /**
    * The position of this tooltip body.
    */

src/components/tooltip/tooltip-story.scss

@@ -1,8 +1,12 @@
 //
-// Copyright IBM Corp. 2019
+// Copyright IBM Corp. 2019, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 @import 'carbon-components/scss/components/link/link';
+
+bx-tooltip-body p {
+  @include type-style('body-short-01');
+}

src/components/tooltip/tooltip-story.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2021
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -58,7 +58,9 @@ export const Default = args => {
           This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
           please use a modal instead.
         </p>
-        <bx-tooltip-footer> <a href="#" class="bx--link">Learn More</a><bx-btn kind="primary">Create</bx-btn> </bx-tooltip-footer>
+        <bx-tooltip-footer>
+          <a href="#" class="bx--link">Learn More</a><bx-btn kind="primary" size="sm">Create</bx-btn>
+        </bx-tooltip-footer>
       </bx-tooltip-body>
     </bx-tooltip>
   `;

src/components/tooltip/tooltip.scss

@@ -1,14 +1,16 @@
 //
-// Copyright IBM Corp. 2019
+// Copyright IBM Corp. 2019, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 $css--plex: true !default;
 // `@include reset` with `variable-exists(css--reset) == false or $css--reset == false` breaks the dotted underline
-// TODO: Detemrine how to deal with `$css--reset` across components
+// TODO: Determine how to deal with `$css--reset` across components
 $css--reset: true !default;
+// Caret's original size was 13.75px square
+$caret-size: 6.875px;
 
 @import 'carbon-components/scss/globals/scss/css--helpers';
 @import 'carbon-components/scss/globals/scss/layout';
@@ -24,43 +26,51 @@ $css--reset: true !default;
   ::slotted(#{$prefix}-tooltip-footer) {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
     margin-top: 1rem;
   }
-}
 
-:host(#{$prefix}-tooltip-body[direction='left']) {
-  margin-top: 0;
-  margin-right: $spacing-2xs;
-
-  .#{$prefix}--tooltip__caret {
-    left: auto;
-    top: 50%;
-    right: rem(-5px);
-    transform: translateY(2px) rotate(-45deg) translate(50%, -50%); // Adjust for change in Y position as caret rotates
+  ::slotted(p) {
+    @include type-style('body-short-01');
+    text-align: left;
   }
 }
 
 :host(#{$prefix}-tooltip-body[direction='top']) {
   margin-top: 0;
-  margin-bottom: $spacing-2xs;
+  margin-bottom: $spacing-03;
 
   .#{$prefix}--tooltip__caret {
     top: auto;
     bottom: rem(-6px);
-    transform: rotate(45deg);
+    transform: rotate(180deg);
   }
 }
 
 :host(#{$prefix}-tooltip-body[direction='right']) {
-  margin-top: 0;
-  margin-left: $spacing-2xs;
+  margin-left: $spacing-03;
 
   .#{$prefix}--tooltip__caret {
-    left: rem(-5px);
     top: 50%;
     right: auto;
-    transform: translateY(2px) rotate(135deg) translate(-50%, 50%); // Adjust for change in Y position as caret rotates
+    left: calc(#{$caret-size * (-1)} + 1px);
+    transform: rotate(270deg) translate(25%, -50%); // Adjust for change in Y position as caret rotates
+  }
+}
+
+:host(#{$prefix}-tooltip-body[direction='bottom']) {
+  margin-top: $spacing-03;
+}
+
+:host(#{$prefix}-tooltip-body[direction='left']) {
+  margin-top: 0;
+  margin-right: $spacing-03;
+
+  .#{$prefix}--tooltip__caret {
+    top: 50%;
+    right: calc(#{$caret-size * (-1)} + 1px);
+    left: auto;
+    transform: rotate(90deg) translate(-25%, -50%); // Adjust for change in Y position as caret rotates
   }
 }
 

src/components/tooltip/tooltip.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -51,6 +51,17 @@ class BXTooltip extends HostListenerMixin(LitElement) implements BXFloatingMenuT
     }
   };
 
+  /**
+   * Handles `keydown` event on this element.
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeydown = async event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      this._handleClick();
+    }
+  };
+
   /**
    * `true` if the dropdown should be open.
    */