[maps] fix toolbar action button not filled when selected (#158284)

Fixes #158221 Updated CSS selector to look for any class containing "euiButtonIcon-fill" instead of old "euiButtonIcon--fill". Had to use wild card select because class name as dynamic id in it, for example "css-1q7ycil-euiButtonIcon-empty-primary-hoverStyles" Now, button is filled and icon is white when selected. <img width="400" alt="Screen Shot 2023-05-23 at 10 34 42 AM" src="https://github.com/elastic/kibana/assets/373691/821d95da-df7a-4779-a7fa-2ce2aa61fa7d"> --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · May 26, 2023 · 33f5bb6 · 33f5bb6
1 parent bb495c2
commit 33f5bb6
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 3 deletions.
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
@@ -10,7 +10,7 @@
   position: relative;
   transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
 
-  .euiButtonIcon:not(.euiButtonIcon--fill) {
+  .mapToolbarOverlay__buttonIcon-empty {
     color: $euiTextColor !important;
   }
 
@@ -26,7 +26,7 @@
 
   // 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) {
+  .mapToolbarOverlay__buttonIcon-empty:focus:not(:hover) {
     background: none;
   }
 }

diff --git a/...omponents/toolbar_overlay/feature_draw_controls/feature_edit_tools/feature_edit_tools.tsx b/...omponents/toolbar_overlay/feature_draw_controls/feature_edit_tools/feature_edit_tools.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
@@ -53,6 +54,9 @@ export function FeatureEditTools(props: Props) {
         {props.pointsOnly ? null : (
           <>
             <EuiButtonIcon
+              className={classNames({
+                'mapToolbarOverlay__buttonIcon-empty': !drawLineSelected,
+              })}
               key="line"
               size="s"
               onClick={() => toggleDrawShape(DRAW_SHAPE.LINE)}
@@ -69,6 +73,9 @@ export function FeatureEditTools(props: Props) {
             />
 
             <EuiButtonIcon
+              className={classNames({
+                'mapToolbarOverlay__buttonIcon-empty': !drawPolygonSelected,
+              })}
               key="polygon"
               size="s"
               onClick={() => toggleDrawShape(DRAW_SHAPE.POLYGON)}
@@ -84,6 +91,9 @@ export function FeatureEditTools(props: Props) {
               display={drawPolygonSelected ? 'fill' : 'empty'}
             />
             <EuiButtonIcon
+              className={classNames({
+                'mapToolbarOverlay__buttonIcon-empty': !drawCircleSelected,
+              })}
               key="circle"
               size="s"
               onClick={() => toggleDrawShape(DRAW_SHAPE.DISTANCE)}
@@ -99,6 +109,9 @@ export function FeatureEditTools(props: Props) {
               display={drawCircleSelected ? 'fill' : 'empty'}
             />
             <EuiButtonIcon
+              className={classNames({
+                'mapToolbarOverlay__buttonIcon-empty': !drawBBoxSelected,
+              })}
               key="boundingBox"
               size="s"
               onClick={() => toggleDrawShape(DRAW_SHAPE.BOUNDS)}
@@ -116,6 +129,9 @@ export function FeatureEditTools(props: Props) {
           </>
         )}
         <EuiButtonIcon
+          className={classNames({
+            'mapToolbarOverlay__buttonIcon-empty': !drawPointSelected,
+          })}
           key="point"
           size="s"
           onClick={() => toggleDrawShape(DRAW_SHAPE.POINT)}
@@ -131,6 +147,9 @@ export function FeatureEditTools(props: Props) {
           display={drawPointSelected ? 'fill' : 'empty'}
         />
         <EuiButtonIcon
+          className={classNames({
+            'mapToolbarOverlay__buttonIcon-empty': !deleteSelected,
+          })}
           key="delete"
           size="s"
           onClick={() => toggleDrawShape(DRAW_SHAPE.DELETE)}

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
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-
+import classNames from 'classnames';
 import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -31,6 +31,9 @@ export function FitToData(props: Props) {
   return (
     <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
       <EuiButtonIcon
+        className={classNames({
+          'mapToolbarOverlay__buttonIcon-empty': !props.autoFitToDataBounds,
+        })}
         size="s"
         onClick={props.fitToBounds}
         data-test-subj="fitToData"

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
@@ -52,6 +52,7 @@ export class SetViewControl extends Component<Props, State> {
         button={
           <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
             <EuiButtonIcon
+              className="mapToolbarOverlay__buttonIcon-empty"
               size="s"
               onClick={this._togglePopover}
               data-test-subj="toggleSetViewVisibilityButton"

diff --git a/...onnected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx b/...onnected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
 
@@ -35,6 +36,9 @@ export function TimesliderToggleButton(props: Props) {
   return (
     <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
       <EuiButtonIcon
+        className={classNames({
+          'mapToolbarOverlay__buttonIcon-empty': !props.isTimesliderOpen,
+        })}
         size="s"
         onClick={onClick}
         data-test-subj="timesliderToggleButton"

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
@@ -201,6 +201,7 @@ export class ToolsControl extends Component<Props, State> {
     return (
       <EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
         <EuiButtonIcon
+          className="mapToolbarOverlay__buttonIcon-empty"
           size="s"
           color="text"
           iconType="wrench"