re-style remove button

elastic · Oct 29, 2019 · 6b8daf1 · 6b8daf1
1 parent 4142db6
commit 6b8daf1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>
   );