From c2f21f79518b2dcb066fcf9303e9a96faa4defd2 Mon Sep 17 00:00:00 2001
From: Manolo Alvarez Foro <af.manolo@gmail.com>
Date: Mon, 27 Jun 2022 23:57:06 -0400
Subject: [PATCH 1/3] added tooltip to EasyPill delete action

---
 src/components/EasyPill/EasyPill.module.css   |  8 +++++++
 src/components/EasyPill/EasyPill.test.tsx     | 11 ++++++++++
 src/components/EasyPill/EasyPill.tsx          | 22 ++++++++++++++++++-
 src/components/EasyPill/README.md             | 11 ++++++++++
 .../EasyPill/{story.js => story.tsx}          | 19 +++++++++++-----
 src/shared/sizing.css                         |  2 +-
 6 files changed, 65 insertions(+), 8 deletions(-)
 rename src/components/EasyPill/{story.js => story.tsx} (85%)

diff --git a/src/components/EasyPill/EasyPill.module.css b/src/components/EasyPill/EasyPill.module.css
index 05d6bd35..689ed0d2 100644
--- a/src/components/EasyPill/EasyPill.module.css
+++ b/src/components/EasyPill/EasyPill.module.css
@@ -2,3 +2,11 @@
   align-self: center;
   margin-right: var(--rvr-space-md);
 }
+
+.tooltipText {
+  height: 24px;
+  line-height: 24px;
+  color: #34404b;
+  font-weight: normal;
+  white-space: nowrap;
+}
diff --git a/src/components/EasyPill/EasyPill.test.tsx b/src/components/EasyPill/EasyPill.test.tsx
index d9446ced..fa8a0a80 100644
--- a/src/components/EasyPill/EasyPill.test.tsx
+++ b/src/components/EasyPill/EasyPill.test.tsx
@@ -18,6 +18,17 @@ describe('EasyPill', () => {
       expect(wrapper.children()).toHaveLength(1);
       expect(wrapper.text()).toEqual('EasyPill 1');
     });
+
+    it('renders its Addon with tooltip', () => {
+      const tooltip = 'tooltip test';
+      const wrapper = mount(
+        <EasyPill tooltip={tooltip} onDelete={() => {}} checked>
+          EasyPill 2
+        </EasyPill>
+      );
+      const tooltipWapper = wrapper.find('Tooltip');
+      expect(tooltipWapper.children()).toHaveLength(1);
+    });
   });
 
   describe('with props.actions', () => {
diff --git a/src/components/EasyPill/EasyPill.tsx b/src/components/EasyPill/EasyPill.tsx
index eda91e2f..55d4a997 100644
--- a/src/components/EasyPill/EasyPill.tsx
+++ b/src/components/EasyPill/EasyPill.tsx
@@ -7,11 +7,15 @@ import Pill from '../Pill';
 import { PillProps } from '../Pill/Pill';
 import styles from './EasyPill.module.css';
 import type { MenuItem } from '../EasyDropdown/EasyDropdown';
+import Tooltip from '../Tooltip';
+import { TooltipDirection } from '../Tooltip/Tooltip';
 
 interface EasyPillProps extends PillProps {
   actions?: MenuItem[];
   children?: React.ReactNode;
   onDelete?: (...args) => void;
+  tooltip?: string;
+  tooltipDirection?: TooltipDirection;
 }
 
 interface EasyPillDropdownProps {
@@ -74,8 +78,24 @@ export const EasyPill: React.FC<EasyPillProps> = ({
   actions,
   children,
   onDelete,
+  tooltip,
+  tooltipDirection = 'top-right',
   ...passedProps
 }) => {
+  const renderIfTooltip = () => {
+    return tooltip ? (
+      <Tooltip
+        content={<span className={styles.tooltipText}>{tooltip}</span>}
+        direction={tooltipDirection}
+        showOnHover
+      >
+        <Icon style={{ display: 'block' }} name="clear" />
+      </Tooltip>
+    ) : (
+      <Icon style={{ display: 'block' }} name="clear" />
+    );
+  };
+
   return (
     <Pill {...passedProps}>
       {children}
@@ -92,7 +112,7 @@ export const EasyPill: React.FC<EasyPillProps> = ({
                 onDelete(e);
               }}
             >
-              <Icon style={{ display: 'block' }} name="clear" />
+              {renderIfTooltip()}
             </Pill.Addon>
           )
         ))}
diff --git a/src/components/EasyPill/README.md b/src/components/EasyPill/README.md
index f4ba7f75..c6109c36 100644
--- a/src/components/EasyPill/README.md
+++ b/src/components/EasyPill/README.md
@@ -9,6 +9,8 @@ Easy pill actions may also have `children` props, in which case they'll render t
 
 Easy pills come with a delete action by default. If you provide an `onDelete` function as a prop, it will show up automatically.
 
+Easy pills show a tooltip in delete action. If you provide an `onDelete` functions as a prop and `tooltip` prop but no `actions`.
+
 **TODO**: The easy pill's actions should be in a small dropdown with an ellipsis icon that triggers it.
 
 ## Examples
@@ -59,6 +61,15 @@ Easy pills come with a delete action by default. If you provide an `onDelete` fu
   With onDelete but no actions
 </EasyPill>
 
+<EasyPill
+  checked={isChecked}
+  onClick={() => setIsChecked(!isChecked)}
+  onDelete={action('onDelete')}
+  tooltip="With onDelete but no actions and tooltip"
+>
+  With onDelete but no actions and tooltip
+</EasyPill>
+
 <EasyPill
   checked={isChecked}
   onClick={() => setIsChecked(!isChecked)}
diff --git a/src/components/EasyPill/story.js b/src/components/EasyPill/story.tsx
similarity index 85%
rename from src/components/EasyPill/story.js
rename to src/components/EasyPill/story.tsx
index 78aed080..54f59c48 100644
--- a/src/components/EasyPill/story.js
+++ b/src/components/EasyPill/story.tsx
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, object } from '@storybook/addon-knobs';
 
-import EasyPill from './';
+import EasyPill from '.';
 import Readme from './README.md';
 
 storiesOf('Galaxies/EasyPill', module)
@@ -33,9 +33,7 @@ storiesOf('Galaxies/EasyPill', module)
           actions={withActions ? actions : []}
           checked={boolean('checked', false)}
           onClick={action('onClick')}
-          onDelete={
-            boolean('with `onDelete`', true) ? action('onDelete') : null
-          }
+          onDelete={action('onDelete')}
         >
           EasyPill 1
         </EasyPill>
@@ -51,7 +49,8 @@ storiesOf('Galaxies/EasyPill', module)
   .add(
     'Examples',
     () => {
-      const CheckablePill = props => {
+      const CheckablePill = (props) => {
+        const { children } = props;
         const [isChecked, setIsChecked] = useState(false);
 
         return (
@@ -60,7 +59,7 @@ storiesOf('Galaxies/EasyPill', module)
             checked={isChecked}
             onClick={() => setIsChecked(!isChecked)}
           >
-            {props.children}
+            {children}
           </EasyPill>
         );
       };
@@ -105,6 +104,14 @@ storiesOf('Galaxies/EasyPill', module)
           </CheckablePill>
           <br />
           <br />
+          <CheckablePill
+            onDelete={action('onDelete')}
+            tooltip="With onDelete but no actions and tooltip"
+          >
+            With onDelete but no actions and tooltip
+          </CheckablePill>
+          <br />
+          <br />
           <CheckablePill>With neither onDelete nor actions</CheckablePill>
         </div>
       );
diff --git a/src/shared/sizing.css b/src/shared/sizing.css
index 1b8bbe3a..7e51fbd9 100644
--- a/src/shared/sizing.css
+++ b/src/shared/sizing.css
@@ -65,7 +65,7 @@
     0 5px 10px 0 rgba(0, 0, 0, 0.1);
   --rvr-tooltip-base-z-index: 900;
   --rvr-tooltip-border-radius: 3px;
-  --rvr-tooltip-offset: 20px;
+  --rvr-tooltip-offset: 10px;
 
   /* Form elements */
   --rvr-checkbox-size: calc(var(--rvr-baseSize) * 2.25); /* 18px */

From 31f32a9a076f1ab5a3e3f13f49a50556f1966a84 Mon Sep 17 00:00:00 2001
From: Manolo Alvarez Foro <af.manolo@gmail.com>
Date: Tue, 28 Jun 2022 22:47:22 -0400
Subject: [PATCH 2/3] fixed code review observations

---
 src/components/EasyPill/EasyPill.module.css | 6 +++---
 src/components/EasyPill/EasyPill.tsx        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/EasyPill/EasyPill.module.css b/src/components/EasyPill/EasyPill.module.css
index 689ed0d2..40efc2b0 100644
--- a/src/components/EasyPill/EasyPill.module.css
+++ b/src/components/EasyPill/EasyPill.module.css
@@ -4,9 +4,9 @@
 }
 
 .tooltipText {
-  height: 24px;
-  line-height: 24px;
-  color: #34404b;
+  height: var(--rvr-line-height-lg);
+  line-height: var(--rvr-line-height-lg);
+  color: var(--rvr-gray-90);
   font-weight: normal;
   white-space: nowrap;
 }
diff --git a/src/components/EasyPill/EasyPill.tsx b/src/components/EasyPill/EasyPill.tsx
index 55d4a997..508a5a5f 100644
--- a/src/components/EasyPill/EasyPill.tsx
+++ b/src/components/EasyPill/EasyPill.tsx
@@ -82,7 +82,7 @@ export const EasyPill: React.FC<EasyPillProps> = ({
   tooltipDirection = 'top-right',
   ...passedProps
 }) => {
-  const renderIfTooltip = () => {
+  const renderIconWithOptionalTooltip = () => {
     return tooltip ? (
       <Tooltip
         content={<span className={styles.tooltipText}>{tooltip}</span>}
@@ -112,7 +112,7 @@ export const EasyPill: React.FC<EasyPillProps> = ({
                 onDelete(e);
               }}
             >
-              {renderIfTooltip()}
+              {renderIconWithOptionalTooltip()}
             </Pill.Addon>
           )
         ))}

From 052f462b43dead6fe0df0464c165a71137d5e993 Mon Sep 17 00:00:00 2001
From: Manolo Alvarez Foro <af.manolo@gmail.com>
Date: Wed, 29 Jun 2022 12:56:25 -0400
Subject: [PATCH 3/3] removed height in css tooltip text

---
 src/components/EasyPill/EasyPill.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EasyPill/EasyPill.module.css b/src/components/EasyPill/EasyPill.module.css
index 40efc2b0..efdd4417 100644
--- a/src/components/EasyPill/EasyPill.module.css
+++ b/src/components/EasyPill/EasyPill.module.css
@@ -4,7 +4,6 @@
 }
 
 .tooltipText {
-  height: var(--rvr-line-height-lg);
   line-height: var(--rvr-line-height-lg);
   color: var(--rvr-gray-90);
   font-weight: normal;