[K8] [Maps] Fix toolbar overlay styles (#96352)

* Fix toolbar overlay styles * More styles * Updating test * Better focus state for mapbox buttons * Mapbox buttons focus * Focus againa * Focus states again * no background only for focus not hover * Adding mixin for button group border radius Co-authored-by: Kibana Machine <[email protected]>
elastic · Apr 13, 2021 · ba091c0 · ba091c0
1 parent 22dd61d
commit ba091c0
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 76 deletions.
diff --git a/x-pack/plugins/maps/public/index.scss → x-pack/plugins/maps/public/_index.scss b/x-pack/plugins/maps/public/index.scss → x-pack/plugins/maps/public/_index.scss
@@ -7,6 +7,7 @@
 //   mapChart__legend--small
 //   mapChart__legend-isLoading
 
+@import 'mixins';
 @import 'main';
 @import 'mapbox_hacks';
 @import 'connected_components/index';

diff --git a/x-pack/plugins/maps/public/_mapbox_hacks.scss b/x-pack/plugins/maps/public/_mapbox_hacks.scss
@@ -10,8 +10,13 @@
 
   .mapboxgl-ctrl-group:not(:empty) {
     @include euiBottomShadowLarge;
+    @include mapToolbarButtonGroupBorderRadius;
     background-color: $euiColorEmptyShade;
-    border-radius: $euiBorderRadius;
+    transition: transform $euiAnimSpeedNormal ease-in-out;
+
+    &:hover {
+      transform: translateY(-1px);
+    }
 
     > button {
       @include size($euiSizeXL);
@@ -21,6 +26,18 @@
       }
     }
   }
+
+  .mapboxgl-ctrl button:not(:disabled) {
+    transition: background $euiAnimSpeedNormal ease-in-out;
+
+    &:hover {
+      background-color: transparentize($euiColorDarkShade, .9);
+    }
+  }
+
+  .mapboxgl-ctrl-group button:focus:focus-visible {
+    box-shadow: none;
+  }
 }
 
 // Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled

diff --git a/x-pack/plugins/maps/public/_mixins.scss b/x-pack/plugins/maps/public/_mixins.scss
@@ -0,0 +1,11 @@
+@mixin mapToolbarButtonGroupBorderRadius {
+  @include kbnThemeStyle($theme: 'v7') {
+    border-radius: $euiBorderRadius;
+  }
+
+  @include kbnThemeStyle($theme: 'v8') {
+    border-radius: $euiBorderRadiusSmall;
+  }
+
+  overflow: hidden;
+}
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_index.scss b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_index.scss
@@ -1,22 +1,2 @@
 @import 'tools_control/index';
-
-.mapToolbarOverlay {
-  position: absolute;
-  top: ($euiSizeM + $euiSizeS) + ($euiSizeXL * 2); // Position and height of mapbox controls plus margin
-  left: $euiSizeM;
-  z-index: 2; // Sit on top of mapbox controls shadow
-}
-
-.mapToolbarOverlay__button {
-  @include size($euiSizeXL);
-  // sass-lint:disable-block no-important
-  background-color: $euiColorEmptyShade !important;
-  pointer-events: all;
-  position: relative;
-
-  &:enabled,
-  &:enabled:hover,
-  &:enabled:focus {
-    @include euiBottomShadowLarge;
-  }
-}
+@import 'toolbar_overlay';
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss
@@ -0,0 +1,49 @@
+.mapToolbarOverlay {
+  position: absolute;
+  top: ($euiSizeM + $euiSizeS) + ($euiSizeXL * 2); // Position and height of mapbox controls plus margin
+  left: $euiSizeM;
+  z-index: 2; // Sit on top of mapbox controls shadow
+}
+
+.mapToolbarOverlay__button,
+.mapToolbarOverlay__buttonGroup {
+  position: relative;
+  transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
+
+  @include kbnThemeStyle($theme: 'v7') {
+    // Overrides the .euiPanel default border
+    // sass-lint:disable-block no-important
+    border: none !important;
+
+    // Overrides the .euiPanel--hasShadow
+    &.euiPanel.euiPanel--hasShadow {
+      @include euiBottomShadowLarge;
+    }
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  // Removes the hover effect from the .euiButtonIcon because it would create a 1px bottom gap
+  // So we put this hover effect into the panel that wraps the button or buttons
+  .euiButtonIcon:hover {
+    transform: translateY(0);
+  }
+
+  // Removes the focus background state because it can induce users to think these buttons are "enabled".
+  // The buttons functionality are just applied once, so they shouldn't stay highlighted.
+  .euiButtonIcon:focus:not(:hover) {
+    background: none;
+  }
+}
+
+.mapToolbarOverlay__buttonGroup {
+  @include mapToolbarButtonGroupBorderRadius;
+  display: flex;
+  flex-direction: column;
+
+  .euiButtonIcon {
+    border-radius: 0;
+  }
+}
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ILayer } from '../../../classes/layers/layer';
 
@@ -56,19 +56,21 @@ export class FitToData extends React.Component<Props, State> {
     }
 
     return (
-      <EuiButtonIcon
-        className="mapToolbarOverlay__button"
-        onClick={this.props.fitToBounds}
-        data-test-subj="fitToData"
-        iconType="expand"
-        color="text"
-        aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
-          defaultMessage: 'Fit to data bounds',
-        })}
-        title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
-          defaultMessage: 'Fit to data bounds',
-        })}
-      />
+      <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
+        <EuiButtonIcon
+          size="s"
+          onClick={this.props.fitToBounds}
+          data-test-subj="fitToData"
+          iconType="expand"
+          color="text"
+          aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
+            defaultMessage: 'Fit to data bounds',
+          })}
+          title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
+            defaultMessage: 'Fit to data bounds',
+          })}
+        />
+      </EuiPanel>
     );
   }
 }
diff --git a/...ns/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.tsx b/...ns/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.tsx
@@ -15,6 +15,7 @@ import {
   EuiPopover,
   EuiTextAlign,
   EuiSpacer,
+  EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -190,19 +191,21 @@ export class SetViewControl extends Component<Props, State> {
         anchorPosition="leftUp"
         panelPaddingSize="s"
         button={
-          <EuiButtonIcon
-            className="mapToolbarOverlay__button"
-            onClick={this._togglePopover}
-            data-test-subj="toggleSetViewVisibilityButton"
-            iconType="crosshairs"
-            color="text"
-            aria-label={i18n.translate('xpack.maps.setViewControl.goToButtonLabel', {
-              defaultMessage: 'Go to',
-            })}
-            title={i18n.translate('xpack.maps.setViewControl.goToButtonLabel', {
-              defaultMessage: 'Go to',
-            })}
-          />
+          <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
+            <EuiButtonIcon
+              size="s"
+              onClick={this._togglePopover}
+              data-test-subj="toggleSetViewVisibilityButton"
+              iconType="crosshairs"
+              color="text"
+              aria-label={i18n.translate('xpack.maps.setViewControl.goToButtonLabel', {
+                defaultMessage: 'Go to',
+              })}
+              title={i18n.translate('xpack.maps.setViewControl.goToButtonLabel', {
+                defaultMessage: 'Go to',
+              })}
+            />
+          </EuiPanel>
         }
         isOpen={this.state.isPopoverOpen}
         closePopover={this._closePopover}

diff --git a/...nected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap b/...nected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
diff --git a/.../plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.tsx b/.../plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.tsx
@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -205,18 +206,20 @@ export class ToolsControl extends Component<Props, State> {
 
   _renderToolsButton() {
     return (
-      <EuiButtonIcon
-        className="mapToolbarOverlay__button"
-        color="text"
-        iconType="wrench"
-        onClick={this._togglePopover}
-        aria-label={i18n.translate('xpack.maps.toolbarOverlay.toolsControlTitle', {
-          defaultMessage: 'Tools',
-        })}
-        title={i18n.translate('xpack.maps.toolbarOverlay.toolsControlTitle', {
-          defaultMessage: 'Tools',
-        })}
-      />
+      <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
+        <EuiButtonIcon
+          size="s"
+          color="text"
+          iconType="wrench"
+          onClick={this._togglePopover}
+          aria-label={i18n.translate('xpack.maps.toolbarOverlay.toolsControlTitle', {
+            defaultMessage: 'Tools',
+          })}
+          title={i18n.translate('xpack.maps.toolbarOverlay.toolsControlTitle', {
+            defaultMessage: 'Tools',
+          })}
+        />
+      </EuiPanel>
     );
   }
 

diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import '../../index.scss';
+import '../../_index.scss';
 export * from '../../embeddable/map_embeddable';
 export * from '../../kibana_services';
 export { renderApp } from '../../render_app';