From 830eadab8e23985d306737f7946b303fe308dfde Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 16 Sep 2024 23:05:47 +1000
Subject: [PATCH] [8.x] [Lens][ColorMapping] Fix color mapping nitpicks
 (#192242) (#192995)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][ColorMapping] Fix color mapping nitpicks
(#192242)](https://github.com/elastic/kibana/pull/192242)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"marco.vettorello@elastic.co"},"sourceCommit":{"committedDate":"2024-09-16T11:30:24Z","message":"[Lens][ColorMapping]
Fix color mapping nitpicks (#192242)\n\n## Summary\r\n\r\nFixed the edit
button color.\r\nI've removed completely the `cursor:pointer` and the
click\r\nhandler/capability over the color band
(`EuiColorPaletteDisplay`\r\ncomponent) because this component is not a
button and is not keyboard\r\naccessible even with the click
handler.\r\nIt should be changed in EUI to button to be used
correctly.\r\n\r\nfix
https://github.com/elastic/kibana/issues/191878","sha":"f3535e9838e675ded589f34d4b0839f1804b21b4","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Feature:Lens","v9.0.0","backport:prev-minor","v8.16.0"],"title":"[Lens][ColorMapping]
Fix color mapping
nitpicks","number":192242,"url":"https://github.com/elastic/kibana/pull/192242","mergeCommit":{"message":"[Lens][ColorMapping]
Fix color mapping nitpicks (#192242)\n\n## Summary\r\n\r\nFixed the edit
button color.\r\nI've removed completely the `cursor:pointer` and the
click\r\nhandler/capability over the color band
(`EuiColorPaletteDisplay`\r\ncomponent) because this component is not a
button and is not keyboard\r\naccessible even with the click
handler.\r\nIt should be changed in EUI to button to be used
correctly.\r\n\r\nfix
https://github.com/elastic/kibana/issues/191878","sha":"f3535e9838e675ded589f34d4b0839f1804b21b4"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192242","number":192242,"mergeCommit":{"message":"[Lens][ColorMapping]
Fix color mapping nitpicks (#192242)\n\n## Summary\r\n\r\nFixed the edit
button color.\r\nI've removed completely the `cursor:pointer` and the
click\r\nhandler/capability over the color band
(`EuiColorPaletteDisplay`\r\ncomponent) because this component is not a
button and is not keyboard\r\naccessible even with the click
handler.\r\nIt should be changed in EUI to button to be used
correctly.\r\n\r\nfix
https://github.com/elastic/kibana/issues/191878","sha":"f3535e9838e675ded589f34d4b0839f1804b21b4"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
---
 .../shared_components/coloring/palette_panel_container.tsx | 7 ++++++-
 .../shared_components/setting_with_sibling_flyout.tsx      | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.tsx
index 0b394ec638d69a..2cd066acc6617c 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_panel_container.tsx
@@ -9,8 +9,9 @@ import { i18n } from '@kbn/i18n';
 import React, { MutableRefObject } from 'react';
 import { EuiButtonIcon, EuiFlexItem, EuiColorPaletteDisplay, EuiToolTip } from '@elastic/eui';
 import { FIXED_PROGRESSION } from '@kbn/coloring';
-import { SettingWithSiblingFlyout } from '../setting_with_sibling_flyout';
 
+import { css } from '@emotion/react';
+import { SettingWithSiblingFlyout } from '../setting_with_sibling_flyout';
 export function PalettePanelContainer(props: {
   palette: string[];
   siblingRef: MutableRefObject<HTMLDivElement | null>;
@@ -30,6 +31,9 @@ export function PalettePanelContainer(props: {
               palette={props.palette}
               type={FIXED_PROGRESSION}
               onClick={onClick}
+              css={css`
+                cursor: pointer;
+              `}
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -46,6 +50,7 @@ export function PalettePanelContainer(props: {
                 iconType="controlsHorizontal"
                 onClick={onClick}
                 size="xs"
+                color="text"
               />
             </EuiToolTip>
           </EuiFlexItem>
diff --git a/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.tsx b/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.tsx
index 2bcb6a71bf541d..fed4702e697b93 100644
--- a/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.tsx
+++ b/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.tsx
@@ -64,7 +64,7 @@ export function SettingWithSiblingFlyout({
   }, [isInlineEditing, isFlyoutOpen]);
 
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} css={{ cursor: 'pointer' }}>
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <SettingTrigger onClick={toggleFlyout} />
       {isFlyoutOpen && siblingRef.current && (
         <EuiPortal insert={{ sibling: siblingRef.current, position: 'after' }}>