[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>
(cherry picked from commit 33f5bb6)

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