From 738f98fdaf83315e30051e6d17199eee9cb22653 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 17 Nov 2021 16:01:40 -0600
Subject: [PATCH 01/16] feat(DefinitionTooltip): add definition tooltip

---
 .../Tooltip/next/DefinitionTooltip.js         | 55 +++++++++++++++++++
 .../Tooltip/next/DefinitionTooltip.scss       | 18 ++++++
 .../Tooltip/next/Tooltip.stories.js           | 17 ++++++
 3 files changed, 90 insertions(+)
 create mode 100644 packages/react/src/components/Tooltip/next/DefinitionTooltip.js
 create mode 100644 packages/react/src/components/Tooltip/next/DefinitionTooltip.scss

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
new file mode 100644
index 000000000000..c241c4432e8a
--- /dev/null
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import './DefinitionTooltip.scss';
+import { Popover, PopoverContent } from '../../Popover';
+import { match, keys } from '../../../internal/keyboard';
+
+const DefinitionTooltip = ({ children, definition }) => {
+  const [isOpen, setOpen] = useState(false);
+
+  function handleKeyDown(event) {
+    if (match(event, keys.Escape) && isOpen) {
+      setOpen(false);
+    }
+  }
+
+  return (
+    <Popover as="span" open={isOpen}>
+      <button
+        className="term-class"
+        aria-controls="definition-id"
+        aria-expanded={isOpen}
+        onMouseOut={() => setOpen(!isOpen)}
+        onMouseOver={() => setOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        onClick={() => {
+          setOpen(!isOpen);
+        }}>
+        {children}
+      </button>
+      <PopoverContent id="definition-id">{definition}</PopoverContent>
+    </Popover>
+  );
+};
+
+DefinitionTooltip.propTypes = {
+  /**
+   * Provide the content being defined
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide the content being defined
+   */
+  definition: PropTypes.string.isRequired,
+};
+
+export { DefinitionTooltip };
+
diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss b/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss
new file mode 100644
index 000000000000..f8473fef70c1
--- /dev/null
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss
@@ -0,0 +1,18 @@
+.term-class {
+  margin: 0;
+  padding: 0;
+  margin-top: 1em;
+  font-weight: bold;
+  font-size: 110%;
+  border: thin solid transparent;
+  background-color: transparent;
+  padding-left: 0.125em;
+  margin-right: 0.125em;
+}
+
+.definition-class {
+  border: 2px solid black;
+  padding: 0 0.25em 0 0.25em;
+  background-color: lightblue;
+}
+
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index ff23db16a297..d87ccb1d85f6 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -10,6 +10,7 @@ import './story.scss';
 import { Checkbox16 } from '@carbon/icons-react';
 import React from 'react';
 import { Tooltip } from '../next';
+import { DefinitionTooltip } from './DefinitionTooltip.js';
 
 export default {
   title: 'Experimental/unstable_Tooltip',
@@ -68,6 +69,22 @@ export const Duration = () => {
   );
 };
 
+export const Definition = () => {
+  const definition =
+    'Starfleet was the deep space exploratory and defense service maintained by the United Federation of Planets.';
+  return (
+    <div>
+      <span>
+        The first duty of every
+        <DefinitionTooltip definition={definition}>Starfleet</DefinitionTooltip>
+        officer is to the truth, whether it’s scientific truth, or historical
+        truth, or personal truth! It is the guiding principle on which Starfleet
+        is based.
+      </span>
+    </div>
+  );
+};
+
 const PlaygroundStory = (props) => {
   const {
     align,

From 162e2495253616cb4356a25e6008639567b4ea32 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Tue, 30 Nov 2021 13:16:30 -0600
Subject: [PATCH 02/16] feat(DefinitionTooltip): add DefinitionTooltip styles

---
 .../Tooltip/next/DefinitionTooltip.js         | 17 ++++++++++----
 .../Tooltip/next/DefinitionTooltip.scss       | 18 ---------------
 .../Tooltip/next/Tooltip.stories.js           |  8 +++----
 .../scss/components/tooltip/_index.scss       |  1 +
 .../scss/components/tooltip/_tooltip.scss     | 23 +++++++++++++++++++
 5 files changed, 40 insertions(+), 27 deletions(-)
 delete mode 100644 packages/react/src/components/Tooltip/next/DefinitionTooltip.scss

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index c241c4432e8a..14da582c62ff 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -7,12 +7,13 @@
 
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import './DefinitionTooltip.scss';
 import { Popover, PopoverContent } from '../../Popover';
 import { match, keys } from '../../../internal/keyboard';
+import { usePrefix } from '../../../internal/usePrefix';
 
 const DefinitionTooltip = ({ children, definition }) => {
   const [isOpen, setOpen] = useState(false);
+  const prefix = usePrefix();
 
   function handleKeyDown(event) {
     if (match(event, keys.Escape) && isOpen) {
@@ -21,12 +22,15 @@ const DefinitionTooltip = ({ children, definition }) => {
   }
 
   return (
-    <Popover as="span" open={isOpen}>
+    <Popover open={isOpen} highContrast dropShadow={false} align="bottom-left">
       <button
-        className="term-class"
+        type="button"
+        className={`${prefix}--definition-term`}
         aria-controls="definition-id"
         aria-expanded={isOpen}
         onMouseOut={() => setOpen(!isOpen)}
+        onFocus={() => setOpen(!isOpen)}
+        onBlur={() => setOpen(!isOpen)}
         onMouseOver={() => setOpen(!isOpen)}
         onKeyDown={handleKeyDown}
         onClick={() => {
@@ -34,7 +38,11 @@ const DefinitionTooltip = ({ children, definition }) => {
         }}>
         {children}
       </button>
-      <PopoverContent id="definition-id">{definition}</PopoverContent>
+      <PopoverContent
+        className={`${prefix}--definition-tooltip`}
+        id="definition-id">
+        {definition}
+      </PopoverContent>
     </Popover>
   );
 };
@@ -52,4 +60,3 @@ DefinitionTooltip.propTypes = {
 };
 
 export { DefinitionTooltip };
-
diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss b/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss
deleted file mode 100644
index f8473fef70c1..000000000000
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.term-class {
-  margin: 0;
-  padding: 0;
-  margin-top: 1em;
-  font-weight: bold;
-  font-size: 110%;
-  border: thin solid transparent;
-  background-color: transparent;
-  padding-left: 0.125em;
-  margin-right: 0.125em;
-}
-
-.definition-class {
-  border: 2px solid black;
-  padding: 0 0.25em 0 0.25em;
-  background-color: lightblue;
-}
-
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index d87ccb1d85f6..924a4726070d 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -74,13 +74,13 @@ export const Definition = () => {
     'Starfleet was the deep space exploratory and defense service maintained by the United Federation of Planets.';
   return (
     <div>
-      <span>
-        The first duty of every
-        <DefinitionTooltip definition={definition}>Starfleet</DefinitionTooltip>
+      <p>
+        The first duty of every{' '}
+        <DefinitionTooltip definition={definition}>Starfleet</DefinitionTooltip>{' '}
         officer is to the truth, whether it’s scientific truth, or historical
         truth, or personal truth! It is the guiding principle on which Starfleet
         is based.
-      </span>
+      </p>
     </div>
   );
 };
diff --git a/packages/styles/scss/components/tooltip/_index.scss b/packages/styles/scss/components/tooltip/_index.scss
index a8d2eef640b9..3f06a3a645f8 100644
--- a/packages/styles/scss/components/tooltip/_index.scss
+++ b/packages/styles/scss/components/tooltip/_index.scss
@@ -10,3 +10,4 @@
 
 @include tooltip.tooltip;
 @include tooltip.icon-tooltip;
+@include tooltip.definition-tooltip;
diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 1b9154810811..8a6817149c74 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -11,6 +11,8 @@
 @use '../../type';
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
+@use '../../utilities/_button-reset';
+@use '../../utilities/_focus-outline';
 
 $tooltip-padding-block: custom-property.get-var(
   'tooltip-padding-block',
@@ -37,6 +39,27 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 }
 
+@mixin definition-tooltip {
+  .#{$prefix}--definition-term {
+    @include button-reset.reset;
+
+    &:focus {
+      @include focus-outline.focus-outline;
+
+      border-bottom-color: theme.$border-interactive;
+      border-radius: 0;
+    }
+
+    border-bottom: 1px dotted theme.$border-strong;
+  }
+  .#{$prefix}--definition-tooltip {
+    @include type.type-style('body-long-01');
+
+    max-width: convert.rem(176px);
+    padding: convert.rem(8px) convert.rem(16px);
+  }
+}
+
 @mixin icon-tooltip {
   .#{$prefix}--icon-tooltip {
     @include custom-property.declaration(

From b7f8e9e97f22708e7f308bfc0e1cb5710f925efb Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Tue, 30 Nov 2021 15:57:20 -0600
Subject: [PATCH 03/16] Update
 packages/styles/scss/components/tooltip/_tooltip.scss

Co-authored-by: Josh Black <josh@josh.black>
---
 .../styles/scss/components/tooltip/_tooltip.scss   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 8a6817149c74..33f73a819fe1 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -43,14 +43,14 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    &:focus {
-      @include focus-outline.focus-outline;
-
-      border-bottom-color: theme.$border-interactive;
-      border-radius: 0;
-    }
-
     border-bottom: 1px dotted theme.$border-strong;
+    border-radius: 0;
+  }
+  
+  .#{$prefix}--definition-term:focus {
+    @include focus-outline.focus-outline;
+
+    border-bottom-color: theme.$border-interactive;
   }
   .#{$prefix}--definition-tooltip {
     @include type.type-style('body-long-01');

From 07d95237b814323a1a3632365aae9460f90cd4c0 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 8 Dec 2021 14:17:03 -0600
Subject: [PATCH 04/16] fix(DefintionTooltip): fix blur trigger
 inconsitencies/adjust story copy

---
 .../Tooltip/next/DefinitionTooltip.js         | 32 ++++++++++++-------
 .../Tooltip/next/Tooltip.stories.js           | 12 +++----
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index 14da582c62ff..0c0f5dd8a82e 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -10,17 +10,28 @@ import React, { useState } from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 import { match, keys } from '../../../internal/keyboard';
 import { usePrefix } from '../../../internal/usePrefix';
+import { useId } from '../../../internal/useId';
 
-const DefinitionTooltip = ({ children, definition }) => {
+function DefinitionTooltip({ children, definition, ...rest }) {
   const [isOpen, setOpen] = useState(false);
   const prefix = usePrefix();
+  const id = useId();
 
   function handleKeyDown(event) {
     if (match(event, keys.Escape) && isOpen) {
+      event.stopPropagation();
       setOpen(false);
     }
   }
 
+  function handleOnClick() {
+    if (isOpen) {
+      setOpen(false);
+      return;
+    }
+    setOpen(true);
+  }
+
   return (
     <Popover open={isOpen} highContrast dropShadow={false} align="bottom-left">
       <button
@@ -28,24 +39,21 @@ const DefinitionTooltip = ({ children, definition }) => {
         className={`${prefix}--definition-term`}
         aria-controls="definition-id"
         aria-expanded={isOpen}
-        onMouseOut={() => setOpen(!isOpen)}
-        onFocus={() => setOpen(!isOpen)}
-        onBlur={() => setOpen(!isOpen)}
-        onMouseOver={() => setOpen(!isOpen)}
+        onMouseOut={() => setOpen(false)}
+        onMouseOver={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
         onKeyDown={handleKeyDown}
-        onClick={() => {
-          setOpen(!isOpen);
-        }}>
+        onClick={handleOnClick}
+        onFocus={() => setOpen(true)}
+        {...rest}>
         {children}
       </button>
-      <PopoverContent
-        className={`${prefix}--definition-tooltip`}
-        id="definition-id">
+      <PopoverContent className={`${prefix}--definition-tooltip`} id={id}>
         {definition}
       </PopoverContent>
     </Popover>
   );
-};
+}
 
 DefinitionTooltip.propTypes = {
   /**
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index 924a4726070d..e0abfcda687d 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -71,15 +71,15 @@ export const Duration = () => {
 
 export const Definition = () => {
   const definition =
-    'Starfleet was the deep space exploratory and defense service maintained by the United Federation of Planets.';
+    'Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.';
   return (
     <div>
       <p>
-        The first duty of every{' '}
-        <DefinitionTooltip definition={definition}>Starfleet</DefinitionTooltip>{' '}
-        officer is to the truth, whether it’s scientific truth, or historical
-        truth, or personal truth! It is the guiding principle on which Starfleet
-        is based.
+        Custom domains direct requests for your apps in this Cloud Foundry
+        organization to a{' '}
+        <DefinitionTooltip definition={definition}>URL</DefinitionTooltip> that
+        you own. A custom domain can be a shared domain, a shared subdomain, or
+        a shared domain and host.
       </p>
     </div>
   );

From 7c1c7053dba4892e64312af25100e70a827b9ffc Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 8 Dec 2021 14:46:36 -0600
Subject: [PATCH 05/16] fix(Tooltip): format _tooltip.scss

---
 packages/styles/scss/components/tooltip/_tooltip.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 33f73a819fe1..64e71c8500e4 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -46,7 +46,7 @@ $tooltip-padding-inline: custom-property.get-var(
     border-bottom: 1px dotted theme.$border-strong;
     border-radius: 0;
   }
-  
+
   .#{$prefix}--definition-term:focus {
     @include focus-outline.focus-outline;
 

From 27ed08261f612c8041661387fcd95d1ebad4486a Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Wed, 8 Dec 2021 14:47:34 -0600
Subject: [PATCH 06/16] Update
 packages/styles/scss/components/tooltip/_tooltip.scss

Co-authored-by: Josh Black <josh@josh.black>
---
 packages/styles/scss/components/tooltip/_tooltip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 64e71c8500e4..dc9b5a5d4d6c 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -52,6 +52,7 @@ $tooltip-padding-inline: custom-property.get-var(
 
     border-bottom-color: theme.$border-interactive;
   }
+
   .#{$prefix}--definition-tooltip {
     @include type.type-style('body-long-01');
 

From d72230463926b04e4aad7d1f11e2f40f8ac4f5f1 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Wed, 8 Dec 2021 14:47:56 -0600
Subject: [PATCH 07/16] Update
 packages/styles/scss/components/tooltip/_tooltip.scss

Co-authored-by: Josh Black <josh@josh.black>
---
 packages/styles/scss/components/tooltip/_tooltip.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index dc9b5a5d4d6c..cd39f69dcc5f 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -11,8 +11,8 @@
 @use '../../type';
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
-@use '../../utilities/_button-reset';
-@use '../../utilities/_focus-outline';
+@use '../../utilities/button-reset';
+@use '../../utilities/focus-outline';
 
 $tooltip-padding-block: custom-property.get-var(
   'tooltip-padding-block',

From 91d4cef4bc821c211f7829c50cf0040283854f42 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 8 Dec 2021 14:59:50 -0600
Subject: [PATCH 08/16] fix(DefinitionTooltip): remove unneeded clickHandler

---
 .../src/components/Tooltip/next/DefinitionTooltip.js   | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index 0c0f5dd8a82e..ed45f9c67fbe 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -24,14 +24,6 @@ function DefinitionTooltip({ children, definition, ...rest }) {
     }
   }
 
-  function handleOnClick() {
-    if (isOpen) {
-      setOpen(false);
-      return;
-    }
-    setOpen(true);
-  }
-
   return (
     <Popover open={isOpen} highContrast dropShadow={false} align="bottom-left">
       <button
@@ -43,7 +35,7 @@ function DefinitionTooltip({ children, definition, ...rest }) {
         onMouseOver={() => setOpen(true)}
         onBlur={() => setOpen(false)}
         onKeyDown={handleKeyDown}
-        onClick={handleOnClick}
+        onClick={() => setOpen(!isOpen)}
         onFocus={() => setOpen(true)}
         {...rest}>
         {children}

From ff7470905ac14b862740212d89c93dedbafe7b3d Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 8 Dec 2021 17:33:02 -0600
Subject: [PATCH 09/16] test(DefinitionTooltip): add DefinitionTooltip tests

---
 .../Tooltip/next/__tests__/Tooltip-test.js    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
index b0930979448b..e91c2746ae81 100644
--- a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
+++ b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
@@ -6,8 +6,10 @@
  */
 
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Tooltip } from '../../next';
+import { DefinitionTooltip } from '../../next/DefinitionTooltip';
 
 describe('Tooltip', () => {
   it('should support a custom className with the `className` prop', () => {
@@ -55,3 +57,42 @@ describe('Tooltip', () => {
     expect(screen.getByText('test')).toHaveAttribute('aria-describedby');
   });
 });
+
+describe('DefintiionTooltip', () => {
+  it('should support a custom className with the `className` prop', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip definition={definition} className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    expect(screen.getByText('URL')).toHaveClass('tooltip-class');
+  });
+
+  it('should apply additional props to the outermost element', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip
+        data-testid="test"
+        definition={definition}
+        className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    expect(screen.getByText('URL')).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('should display onClick a defintion provided via prop', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip
+        data-testid="test"
+        definition={definition}
+        className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    userEvent.click(screen.getByText('URL'));
+    expect(screen.getByText(definition)).toHaveTextContent(definition);
+  });
+});

From b09bd33041cc80857b6cac31d1d57ab2f8fba48d Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Thu, 9 Dec 2021 09:22:40 -0600
Subject: [PATCH 10/16] test(DefinitionTooltip): add distinct DefinitionTooltip
 test file

---
 .../next/__tests__/DefinitionTooltip-test.js  | 50 +++++++++++++++++++
 .../Tooltip/next/__tests__/Tooltip-test.js    | 41 ---------------
 2 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 packages/react/src/components/Tooltip/next/__tests__/DefinitionTooltip-test.js

diff --git a/packages/react/src/components/Tooltip/next/__tests__/DefinitionTooltip-test.js b/packages/react/src/components/Tooltip/next/__tests__/DefinitionTooltip-test.js
new file mode 100644
index 000000000000..d2eeaa9c7a49
--- /dev/null
+++ b/packages/react/src/components/Tooltip/next/__tests__/DefinitionTooltip-test.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { DefinitionTooltip } from '../../next/DefinitionTooltip';
+
+describe('DefintiionTooltip', () => {
+  it('should support a custom className with the `className` prop', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip definition={definition} className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    expect(screen.getByText('URL')).toHaveClass('tooltip-class');
+  });
+
+  it('should apply additional props to the outermost element', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip
+        data-testid="test"
+        definition={definition}
+        className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    expect(screen.getByText('URL')).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('should display onClick a defintion provided via prop', () => {
+    const definition = 'Uniform Resource Locator';
+    render(
+      <DefinitionTooltip
+        data-testid="test"
+        definition={definition}
+        className="tooltip-class">
+        URL
+      </DefinitionTooltip>
+    );
+    userEvent.click(screen.getByText('URL'));
+    expect(screen.getByText(definition)).toHaveTextContent(definition);
+  });
+});
diff --git a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
index e91c2746ae81..b0930979448b 100644
--- a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
+++ b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js
@@ -6,10 +6,8 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Tooltip } from '../../next';
-import { DefinitionTooltip } from '../../next/DefinitionTooltip';
 
 describe('Tooltip', () => {
   it('should support a custom className with the `className` prop', () => {
@@ -57,42 +55,3 @@ describe('Tooltip', () => {
     expect(screen.getByText('test')).toHaveAttribute('aria-describedby');
   });
 });
-
-describe('DefintiionTooltip', () => {
-  it('should support a custom className with the `className` prop', () => {
-    const definition = 'Uniform Resource Locator';
-    render(
-      <DefinitionTooltip definition={definition} className="tooltip-class">
-        URL
-      </DefinitionTooltip>
-    );
-    expect(screen.getByText('URL')).toHaveClass('tooltip-class');
-  });
-
-  it('should apply additional props to the outermost element', () => {
-    const definition = 'Uniform Resource Locator';
-    render(
-      <DefinitionTooltip
-        data-testid="test"
-        definition={definition}
-        className="tooltip-class">
-        URL
-      </DefinitionTooltip>
-    );
-    expect(screen.getByText('URL')).toHaveAttribute('data-testid', 'test');
-  });
-
-  it('should display onClick a defintion provided via prop', () => {
-    const definition = 'Uniform Resource Locator';
-    render(
-      <DefinitionTooltip
-        data-testid="test"
-        definition={definition}
-        className="tooltip-class">
-        URL
-      </DefinitionTooltip>
-    );
-    userEvent.click(screen.getByText('URL'));
-    expect(screen.getByText(definition)).toHaveTextContent(definition);
-  });
-});

From b7f8fe9d6411fe9e9c9dc4d9b5cf565fa0833faf Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Thu, 13 Jan 2022 18:09:42 -0600
Subject: [PATCH 11/16] feat(DefinitionTooltip): update underline styling,
 onClick bug

---
 packages/react/src/components/Tooltip/next/DefinitionTooltip.js | 2 +-
 packages/styles/scss/components/tooltip/_tooltip.scss           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index ed45f9c67fbe..1b0ec584052e 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -35,7 +35,7 @@ function DefinitionTooltip({ children, definition, ...rest }) {
         onMouseOver={() => setOpen(true)}
         onBlur={() => setOpen(false)}
         onKeyDown={handleKeyDown}
-        onClick={() => setOpen(!isOpen)}
+        onClick={() => !isOpen && setOpen(!isOpen)}
         onFocus={() => setOpen(true)}
         {...rest}>
         {children}
diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index cd39f69dcc5f..eae52c0e606b 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -43,7 +43,7 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    border-bottom: 1px dotted theme.$border-strong;
+    border-bottom: 1px dotted theme.$border-interactive;
     border-radius: 0;
   }
 

From d30a0627c2a4d6bbaf97ab8050e68fd15912185c Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 19 Jan 2022 18:48:32 -0600
Subject: [PATCH 12/16] fix(DefinitionTooltip): fix font weight/color

---
 packages/styles/scss/components/tooltip/_tooltip.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index eae52c0e606b..2cd17c26fb97 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -43,8 +43,10 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    border-bottom: 1px dotted theme.$border-interactive;
+    border-bottom: 1px dotted theme.$border-strong;
     border-radius: 0;
+
+    color: theme.$text-primary;
   }
 
   .#{$prefix}--definition-term:focus {

From c987689a9e76d77fb69e9a57bc1b980243d955ae Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 19 Jan 2022 22:31:39 -0600
Subject: [PATCH 13/16] feat(DefinitionTooltip): add openOnClick prop, update
 story

---
 .../Tooltip/next/DefinitionTooltip.js         | 20 +++++++++++++------
 .../Tooltip/next/Tooltip.stories.js           |  8 +++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index 1b0ec584052e..44ccfcab6ea8 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -12,16 +12,20 @@ import { match, keys } from '../../../internal/keyboard';
 import { usePrefix } from '../../../internal/usePrefix';
 import { useId } from '../../../internal/useId';
 
-function DefinitionTooltip({ children, definition, ...rest }) {
+function DefinitionTooltip({ children, definition, openOnClick, ...rest }) {
   const [isOpen, setOpen] = useState(false);
   const prefix = usePrefix();
   const id = useId();
 
   function handleKeyDown(event) {
-    if (match(event, keys.Escape) && isOpen) {
+    if (isOpen && match(event, keys.Escape)) {
       event.stopPropagation();
       setOpen(false);
     }
+    if (openOnClick && match(event, [keys.Enter, keys.Space])) {
+      event.stopPropagation();
+      setOpen(!isOpen);
+    }
   }
 
   return (
@@ -31,12 +35,12 @@ function DefinitionTooltip({ children, definition, ...rest }) {
         className={`${prefix}--definition-term`}
         aria-controls="definition-id"
         aria-expanded={isOpen}
-        onMouseOut={() => setOpen(false)}
-        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => !openOnClick && setOpen(false)}
+        onMouseOver={() => !openOnClick && setOpen(true)}
         onBlur={() => setOpen(false)}
         onKeyDown={handleKeyDown}
-        onClick={() => !isOpen && setOpen(!isOpen)}
-        onFocus={() => setOpen(true)}
+        onClick={() => setOpen(!isOpen)}
+        onFocus={() => !openOnClick && setOpen(true)}
         {...rest}>
         {children}
       </button>
@@ -57,6 +61,10 @@ DefinitionTooltip.propTypes = {
    * Provide the content being defined
    */
   definition: PropTypes.string.isRequired,
+  /**
+   * Specify whether the tooltip should toggle on click and NOT on mouse enter/leave
+   */
+  openOnClick: PropTypes.bool,
 };
 
 export { DefinitionTooltip };
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index e0abfcda687d..d583e5cbb025 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -77,9 +77,11 @@ export const Definition = () => {
       <p>
         Custom domains direct requests for your apps in this Cloud Foundry
         organization to a{' '}
-        <DefinitionTooltip definition={definition}>URL</DefinitionTooltip> that
-        you own. A custom domain can be a shared domain, a shared subdomain, or
-        a shared domain and host.
+        <DefinitionTooltip openOnClick definition={definition}>
+          URL
+        </DefinitionTooltip>{' '}
+        that you own. A custom domain can be a shared domain, a shared
+        subdomain, or a shared domain and host.
       </p>
     </div>
   );

From 5a0f7881a6f739751358e791cccf1d332eb43c25 Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Mon, 24 Jan 2022 15:21:24 -0600
Subject: [PATCH 14/16] fix(TooltipDefinition): add on-hover styling

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

diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss
index 2cd17c26fb97..2986026106cd 100644
--- a/packages/styles/scss/components/tooltip/_tooltip.scss
+++ b/packages/styles/scss/components/tooltip/_tooltip.scss
@@ -55,6 +55,10 @@ $tooltip-padding-inline: custom-property.get-var(
     border-bottom-color: theme.$border-interactive;
   }
 
+  .#{$prefix}--definition-term:hover {
+    border-bottom-color: theme.$border-interactive;
+  }
+
   .#{$prefix}--definition-tooltip {
     @include type.type-style('body-long-01');
 

From e1908e95c31cb0e6423602609c30531835f1b5ac Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 25 Jan 2022 11:55:55 -0600
Subject: [PATCH 15/16] fix(react): update definition tooltip reveal behavior

---
 .../Tooltip/next/DefinitionTooltip.js         | 37 +++++++++----------
 .../Tooltip/next/Tooltip.stories.js           |  8 ++--
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index 44ccfcab6ea8..d70dd6492a46 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -12,7 +12,7 @@ import { match, keys } from '../../../internal/keyboard';
 import { usePrefix } from '../../../internal/usePrefix';
 import { useId } from '../../../internal/useId';
 
-function DefinitionTooltip({ children, definition, openOnClick, ...rest }) {
+function DefinitionTooltip({ children, definition }) {
   const [isOpen, setOpen] = useState(false);
   const prefix = usePrefix();
   const id = useId();
@@ -22,26 +22,29 @@ function DefinitionTooltip({ children, definition, openOnClick, ...rest }) {
       event.stopPropagation();
       setOpen(false);
     }
-    if (openOnClick && match(event, [keys.Enter, keys.Space])) {
-      event.stopPropagation();
-      setOpen(!isOpen);
-    }
   }
 
   return (
-    <Popover open={isOpen} highContrast dropShadow={false} align="bottom-left">
+    <Popover
+      align="bottom-left"
+      dropShadow={false}
+      highContrast
+      onMouseLeave={() => {
+        setOpen(false);
+      }}
+      open={isOpen}>
       <button
-        type="button"
-        className={`${prefix}--definition-term`}
-        aria-controls="definition-id"
+        aria-controls={id}
         aria-expanded={isOpen}
-        onMouseOut={() => !openOnClick && setOpen(false)}
-        onMouseOver={() => !openOnClick && setOpen(true)}
-        onBlur={() => setOpen(false)}
+        className={`${prefix}--definition-term`}
+        onBlur={() => {
+          setOpen(false);
+        }}
+        onClick={() => {
+          setOpen(!isOpen);
+        }}
         onKeyDown={handleKeyDown}
-        onClick={() => setOpen(!isOpen)}
-        onFocus={() => !openOnClick && setOpen(true)}
-        {...rest}>
+        type="button">
         {children}
       </button>
       <PopoverContent className={`${prefix}--definition-tooltip`} id={id}>
@@ -61,10 +64,6 @@ DefinitionTooltip.propTypes = {
    * Provide the content being defined
    */
   definition: PropTypes.string.isRequired,
-  /**
-   * Specify whether the tooltip should toggle on click and NOT on mouse enter/leave
-   */
-  openOnClick: PropTypes.bool,
 };
 
 export { DefinitionTooltip };
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index d583e5cbb025..e0abfcda687d 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -77,11 +77,9 @@ export const Definition = () => {
       <p>
         Custom domains direct requests for your apps in this Cloud Foundry
         organization to a{' '}
-        <DefinitionTooltip openOnClick definition={definition}>
-          URL
-        </DefinitionTooltip>{' '}
-        that you own. A custom domain can be a shared domain, a shared
-        subdomain, or a shared domain and host.
+        <DefinitionTooltip definition={definition}>URL</DefinitionTooltip> that
+        you own. A custom domain can be a shared domain, a shared subdomain, or
+        a shared domain and host.
       </p>
     </div>
   );

From 86838dafb68cc5611810b5aa9d4f3fc0b51f6c7a Mon Sep 17 00:00:00 2001
From: dakahn <dakahn@protonmail.com>
Date: Wed, 26 Jan 2022 17:21:11 -0600
Subject: [PATCH 16/16] fix(DefinitionTooltip): move spread props after
 className prop

---
 .../react/src/components/Tooltip/next/DefinitionTooltip.js   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
index d70dd6492a46..49bea88f49ae 100644
--- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -12,7 +12,7 @@ import { match, keys } from '../../../internal/keyboard';
 import { usePrefix } from '../../../internal/usePrefix';
 import { useId } from '../../../internal/useId';
 
-function DefinitionTooltip({ children, definition }) {
+function DefinitionTooltip({ children, definition, ...rest }) {
   const [isOpen, setOpen] = useState(false);
   const prefix = usePrefix();
   const id = useId();
@@ -34,9 +34,10 @@ function DefinitionTooltip({ children, definition }) {
       }}
       open={isOpen}>
       <button
+        className={`${prefix}--definition-term`}
+        {...rest}
         aria-controls={id}
         aria-expanded={isOpen}
-        className={`${prefix}--definition-term`}
         onBlur={() => {
           setOpen(false);
         }}