From 28a5100e6fdb138eda4a43ce50f142eb0918dd7e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 14:54:37 -0800
Subject: [PATCH] refactor(tooltip): rename showIcon prop

Remove triggerClass prop.
---
 src/components/Tooltip/Tooltip.Story.svelte |  2 +-
 src/components/Tooltip/Tooltip.stories.js   |  3 +-
 src/components/Tooltip/Tooltip.svelte       | 37 ++++++++++-----------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.Story.svelte b/src/components/Tooltip/Tooltip.Story.svelte
index ec9a1869..a45e68d6 100644
--- a/src/components/Tooltip/Tooltip.Story.svelte
+++ b/src/components/Tooltip/Tooltip.Story.svelte
@@ -58,7 +58,7 @@
         Show
       </Button>
       <div style="padding: 15px 20px; margin: 4px 20px">
-        <Tooltip {...$$props} bind:open showIcon={false}>
+        <Tooltip {...$$props} bind:open hideIcon>
           <div slot="triggerText">My text wrapped with tooltip</div>
           Tooltip content
         </Tooltip>
diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js
index 6beec04e..268d8f7b 100644
--- a/src/components/Tooltip/Tooltip.stories.js
+++ b/src/components/Tooltip/Tooltip.stories.js
@@ -23,7 +23,7 @@ export const NoIcon = () => ({
   Component,
   props: {
     story: 'no icon',
-    showIcon: false,
+    hideIcon: true,
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
     tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
@@ -45,7 +45,6 @@ export const CustomIconOnly = () => ({
   Component,
   props: {
     story: 'custom icon only',
-    showIcon: true,
     direction: select('Tooltip direction (direction)', directions, 'bottom'),
     iconDescription: 'Helpful Information',
     tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
diff --git a/src/components/Tooltip/Tooltip.svelte b/src/components/Tooltip/Tooltip.svelte
index c1ecd323..0bc838c7 100644
--- a/src/components/Tooltip/Tooltip.svelte
+++ b/src/components/Tooltip/Tooltip.svelte
@@ -1,22 +1,21 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let triggerText = ''; // TODO: support slot?
-  export let triggerId = Math.random();
-  export let tooltipId = Math.random();
-  export let triggerClass = undefined;
-  export let open = false;
   export let direction = 'bottom';
+  export let hideIcon = false;
   export let icon = Information16;
-  export let showIcon = true; // TODO: change to hideIcon
-  export let iconName = '';
   export let iconDescription = '';
-  export let tabindex = '0';
+  export let iconName = '';
+  export let open = false;
   export let style = undefined;
+  export let tabindex = '0';
+  export let tooltipId = Math.random();
+  export let triggerId = Math.random();
+  export let triggerText = '';
 
   import { createEventDispatcher, afterUpdate } from 'svelte';
   import Information16 from 'carbon-icons-svelte/lib/Information16';
-  import { cx } from '../../lib';
+  import { cx, css } from '../../lib';
 
   const dispatch = createEventDispatcher();
 
@@ -71,7 +70,7 @@
 
       switch (direction) {
         case 'bottom':
-          if (!showIcon) {
+          if (hideIcon) {
             offsetX = -1 * (tooltip.width / 2 - button.width / 2);
           } else {
             offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2);
@@ -83,7 +82,7 @@
           offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
           break;
         case 'left':
-          if (!showIcon) {
+          if (hideIcon) {
             offsetX = -1 * (tooltip.width + 6 + 1);
           } else {
             offsetX = -1 * (tooltip.width - button.width + iconWidth + 8);
@@ -91,7 +90,7 @@
           offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
           break;
         case 'top':
-          if (!showIcon) {
+          if (hideIcon) {
             offsetX = -1 * (tooltip.width / 2 - button.width / 2);
           } else {
             offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
@@ -111,14 +110,14 @@
   $: buttonProps = {
     role: 'button',
     'aria-haspopup': 'true',
-    id: showIcon ? undefined : triggerId,
-    class: showIcon ? cx('--tooltip__trigger') : cx('--tooltip__label', triggerClass),
+    id: hideIcon ? triggerId : undefined,
+    class: hideIcon ? cx('--tooltip__label') : cx('--tooltip__trigger'),
     'aria-expanded': open,
     'aria-describedby': open ? tooltipId : undefined,
     'aria-labelledby': triggerText ? triggerId : undefined,
     'aria-label': triggerText ? iconDescription : undefined,
     tabindex,
-    style: showIcon ? undefined : style
+    style: hideIcon ? style : undefined
   };
 </script>
 
@@ -129,9 +128,9 @@
     }
   }} />
 
-<div style="position: relative">
-  {#if showIcon}
-    <div bind:this={buttonRef} id={triggerId} class={cx('--tooltip__label', triggerClass)} {style}>
+<div class={className} style={css([style, ['position', 'relative']])}>
+  {#if !hideIcon}
+    <div bind:this={buttonRef} id={triggerId} class={cx('--tooltip__label')} {style}>
       <slot name="triggerText">{triggerText}</slot>
       <div
         bind:this={iconRef}
@@ -163,7 +162,7 @@
       tabindex="0"
       id={tooltipId}
       data-floating-menu-direction={direction}
-      class={cx('--tooltip', open && '--tooltip--shown', className)}
+      class={cx('--tooltip', open && '--tooltip--shown')}
       on:blur={closeMenu}>
       <span class={cx('--tooltip__caret')} />
       <slot />