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

Fixes https://github.com/elastic/kibana/issues/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="821d95da-df7a-4779-a7fa-2ce2aa61fa7d">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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;
   }
 }

x-pack/plugins/maps/public/connected_components/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)}

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"

x-pack/plugins/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"

x-pack/plugins/maps/public/connected_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"

x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`Should render cancel button when drawing 1`] = `
         >
           <EuiButtonIcon
             aria-label="Tools"
+            className="mapToolbarOverlay__buttonIcon-empty"
             color="text"
             iconType="wrench"
             isDisabled={false}
@@ -116,6 +117,7 @@ exports[`renders 1`] = `
     >
       <EuiButtonIcon
         aria-label="Tools"
+        className="mapToolbarOverlay__buttonIcon-empty"
         color="text"
         iconType="wrench"
         isDisabled={false}

x-pack/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"