added tooltip to EasyPill delete action (#370)

* added tooltip to EasyPill delete action

* fixed code review observations

* removed height in css tooltip text

src/components/EasyPill/EasyPill.module.css

@@ -2,3 +2,10 @@
   align-self: center;
   margin-right: var(--rvr-space-md);
 }
+
+.tooltipText {
+  line-height: var(--rvr-line-height-lg);
+  color: var(--rvr-gray-90);
+  font-weight: normal;
+  white-space: nowrap;
+}

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', () => {

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 renderIconWithOptionalTooltip = () => {
+    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" />
+              {renderIconWithOptionalTooltip()}
             </Pill.Addon>
           )
         ))}

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)}

src/components/EasyPill/story.js → 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>
       );

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 */