Use EuiButtonIcon, misc CSS changes (#3)

flash1293 · Nov 5, 2020 · 76683c7 · 76683c7
1 parent f3fcf55
commit 76683c7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 44 deletions.
diff --git a/src/plugins/charts/public/static/components/_legend_toggle.scss b/src/plugins/charts/public/static/components/_legend_toggle.scss
diff --git a/src/plugins/charts/public/static/components/legend_toggle.scss b/src/plugins/charts/public/static/components/legend_toggle.scss
@@ -0,0 +1,20 @@
+.echLegend__toggle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  margin: $euiSizeXS;
+
+  &--isOpen {
+    background-color: $euiColorLightestShade;
+  }
+
+  &--position-left,
+  &--position-bottom {
+    left: auto;
+    bottom: auto;
+    right: 0;
+    top: 0;
+  }
+}
+
diff --git a/src/plugins/charts/public/static/components/legend_toggle.tsx b/src/plugins/charts/public/static/components/legend_toggle.tsx
@@ -21,10 +21,10 @@ import React, { memo, useMemo } from 'react';
 import classNames from 'classnames';
 
 import { i18n } from '@kbn/i18n';
-import { htmlIdGenerator, EuiIcon } from '@elastic/eui';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 
-import './_legend_toggle.scss';
+import './legend_toggle.scss';
 
 interface LegendToggleProps {
   onClick: () => void;
@@ -36,29 +36,26 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo
   const legendId = useMemo(() => htmlIdGenerator()('legend'), []);
 
   return (
-    <button
+    <EuiButtonIcon
       type="button"
+      iconType="list"
+      color="subdued"
       onClick={onClick}
-      className={classNames(
-        'legend__toggle kbn-resetFocusState',
-        `legend__toggle--position-${legendPosition}`,
-        {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'legend__toggle--isOpen': showLegend,
-        }
-      )}
+      className={classNames('echLegend__toggle', `echLegend__toggle--position-${legendPosition}`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'echLegend__toggle--isOpen': showLegend,
+      })}
       aria-label={i18n.translate('charts.legend.toggleLegendButtonAriaLabel', {
         defaultMessage: 'Toggle legend',
       })}
       aria-expanded={showLegend}
       aria-controls={legendId}
+      isSelected={showLegend}
       data-test-subj="vislibToggleLegend"
       title={i18n.translate('charts.legend.toggleLegendButtonTitle', {
         defaultMessage: 'Toggle legend',
       })}
-    >
-      <EuiIcon color="text" type="list" />
-    </button>
+    />
   );
 };