From 6b8daf102030bacbc4af31ca5e1819569a288bd9 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 29 Oct 2019 09:28:52 -0500
Subject: [PATCH] re-style remove button

---
 .../arg_add_popover/arg_add_popover.scss      |  4 +++
 .../arg_add_popover/arg_add_popover.tsx       |  1 +
 .../public/components/arg_form/arg_form.scss  | 36 +++----------------
 .../components/arg_form/arg_simple_form.tsx   | 19 +++++-----
 4 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
index f2cdb1444ef23ab..15676d2b02490f8 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
@@ -1,3 +1,7 @@
+.canvasArg__addArg {
+  margin-right: -$euiSizeS;
+}
+
 .canvasArg__addPopover {
   width: 250px;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
index e771c978d491b23..9cc6f870b9bded9 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
@@ -33,6 +33,7 @@ export const ArgAddPopover = ({ options }: Props) => {
       iconType="plusInCircle"
       aria-label={strings.getAddAriaLabel()}
       onClick={handleClick}
+      className="canvasArg__addArg"
     />
   );
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
index 84dd8c62f1d0173..a3b5dda74a0f2d4 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
@@ -29,10 +29,11 @@
 
 .canvasArg {
   margin-top: $euiSizeS;
+}
 
-  .canvasArg--remove {
-    visibility: hidden;
-  }
+.canvasArg__remove {
+  min-width: $euiSize;
+  padding: $euiSizeXS 0;
 }
 
 .canvasArg__content {
@@ -41,47 +42,18 @@
 
 .canvasArg__form {
   position: relative;
-
-}
-
-.canvasArg__form,
-.canvasArg__accordion {
-  &:hover {
-    .canvasArg__remove {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
 }
 
 .canvasArg__tooltip {
   margin-left: -$euiSizeXL;
 }
 
-.canvasArg__remove {
-  position: absolute;
-  right: -$euiSizeL;
-  top: $euiSizeS - 2px;
-  border-radius: $euiBorderRadius;
-  border: $euiBorderThin;
-  background: $euiColorEmptyShade;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
-  transition-delay: $euiAnimSpeedSlow;
-}
-
 .canvasArg__accordion {
   padding: $euiSizeS $euiSizeM;
   margin: 0 (-$euiSizeM);
   background: $euiColorLightestShade;
   position: relative;
 
-  // different spacing means leff shift
-  .canvasArg__remove {
-    right: -$euiSizeM;
-  }
-
   // don't let remove button position here if this is nested in an accordion
   .canvasArg__form {
     position: static;
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
index 5b45772c1437302..846f912db6f84b6 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
@@ -6,7 +6,7 @@
 
 import React, { ReactNode, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { TooltipIcon, IconType } from '../tooltip_icon';
 
 import { ComponentStrings } from '../../../i18n';
@@ -41,13 +41,16 @@ export const ArgSimpleForm: React.FunctionComponent<Props> = ({
       )}
 
       {!required && (
-        <EuiButtonIcon
-          color="danger"
-          onClick={onRemove}
-          iconType="trash"
-          aria-label={strings.getRemoveAriaLabel()}
-          className="canvasArg__remove"
-        />
+        <EuiToolTip position="top" content={strings.getRemoveAriaLabel()}>
+          <EuiButtonIcon
+            color="subdued"
+            onClick={onRemove}
+            iconType="cross"
+            iconSize="s"
+            aria-label={strings.getRemoveAriaLabel()}
+            className="canvasArg__remove"
+          />
+        </EuiToolTip>
       )}
     </EuiFlexGroup>
   );