From 6d6b835d13146043b7a48e09f9f7cfda66910530 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Sun, 3 Jul 2022 12:22:28 +0200
Subject: [PATCH] [Lens] fix suggestion panel styling

---
 .../editor_frame/editor_frame.test.tsx        |  3 +--
 .../editor_frame/suggestion_panel.scss        | 17 +++++++++++------
 .../editor_frame/suggestion_panel.tsx         | 19 ++++++++++++-------
 x-pack/test/accessibility/apps/lens.ts        |  2 +-
 .../apps/lens/group1/smokescreen.ts           |  2 +-
 .../apps/maps/group4/lens/choropleth_chart.ts |  2 +-
 6 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
index 796128df989b4..07858a57e0f2c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -723,9 +723,8 @@ describe('editor_frame', () => {
         ExpressionRenderer: expressionRendererMock,
       };
       instance = (await mountWithProvider(<EditorFrame {...props} />)).instance;
-
       act(() => {
-        instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
+        instance.find('[data-test-subj="lnsSuggestion"]').at(1).simulate('click');
       });
 
       expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(2);
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
index 1619eea882b25..e7941cd65993c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
@@ -23,7 +23,7 @@
 .lnsSuggestionPanel__button {
   position: relative; // Let the expression progress indicator position itself against the button
   flex: 0 0 auto;
-  width: $lnsSuggestionWidth !important; // sass-lint:disable-line no-important
+  width: $lnsSuggestionWidth  !important; // sass-lint:disable-line no-important
   height: $lnsSuggestionHeight;
   margin-right: $euiSizeS;
   margin-left: $euiSizeXS / 2;
@@ -40,9 +40,14 @@
   }
 }
 
-.lnsSuggestionPanel__button-isSelected {
-  background-color: $euiColorLightestShade !important; // sass-lint:disable-line no-important
-  border-color: $euiColorMediumShade !important; // sass-lint:disable-line no-important
+.lnsSuggestionPanel__card {
+  width: 100%;
+  height: 100%;
+}
+
+.lnsSuggestionPanel__card-isSelected {
+  background-color: $euiColorLightestShade  !important; // sass-lint:disable-line no-important
+  border-color: $euiColorMediumShade  !important; // sass-lint:disable-line no-important
 
   &:not(:focus) {
     box-shadow: none !important; // sass-lint:disable-line no-important
@@ -93,10 +98,10 @@
 
 .lnsSuggestionPanel__applyChangesPrompt {
   height: $lnsSuggestionHeight;
-  background-color: $euiColorLightestShade !important;
+  background-color: $euiColorLightestShade  !important;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
index e64cdd9bd33dc..d642c29191e47 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -144,16 +144,21 @@ const SuggestionPreview = ({
 }) => {
   return (
     <EuiToolTip content={preview.title}>
-      <div data-test-subj={`lnsSuggestion-${camelCase(preview.title)}`}>
+      <button
+        className={classNames('lnsSuggestionPanel__button', {
+          'lnsSuggestionPanel__button-isSelected': selected,
+        })}
+        onClick={onSelect}
+        data-test-subj="lnsSuggestion"
+      >
         <EuiPanel
+          className={classNames('lnsSuggestionPanel__card', {
+            'lnsSuggestionPanel__card-isSelected': selected,
+          })}
+          data-test-subj={`lnsSuggestion-${camelCase(preview.title)}`}
           hasBorder={true}
           hasShadow={false}
-          className={classNames('lnsSuggestionPanel__button', {
-            'lnsSuggestionPanel__button-isSelected': selected,
-          })}
           paddingSize="none"
-          data-test-subj="lnsSuggestion"
-          onClick={onSelect}
           aria-current={!!selected}
           aria-label={preview.title}
         >
@@ -173,7 +178,7 @@ const SuggestionPreview = ({
             <span className="lnsSuggestionPanel__buttonLabel">{preview.title}</span>
           )}
         </EuiPanel>
-      </div>
+      </button>
     </EuiToolTip>
   );
 };
diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts
index 854ff1b349e49..b680dea82d89a 100644
--- a/x-pack/test/accessibility/apps/lens.ts
+++ b/x-pack/test/accessibility/apps/lens.ts
@@ -138,7 +138,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         field: 'bytes',
       });
 
-      await testSubjects.click('lnsSuggestion-barChart > lnsSuggestion');
+      await testSubjects.click('lnsSuggestion-barChart');
       await a11y.testAppSnapshot();
     });
 
diff --git a/x-pack/test/functional/apps/lens/group1/smokescreen.ts b/x-pack/test/functional/apps/lens/group1/smokescreen.ts
index 207e546f10d54..2e03f5f5a7fa3 100644
--- a/x-pack/test/functional/apps/lens/group1/smokescreen.ts
+++ b/x-pack/test/functional/apps/lens/group1/smokescreen.ts
@@ -315,7 +315,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       await PageObjects.lens.save('twolayerchart');
-      await testSubjects.click('lnsSuggestion-asDonut > lnsSuggestion');
+      await testSubjects.click('lnsSuggestion-asDonut');
 
       expect(await PageObjects.lens.getLayerCount()).to.eql(1);
       expect(await PageObjects.lens.getDimensionTriggerText('lnsPie_sliceByDimensionPanel')).to.eql(
diff --git a/x-pack/test/functional/apps/maps/group4/lens/choropleth_chart.ts b/x-pack/test/functional/apps/maps/group4/lens/choropleth_chart.ts
index b026dd7444748..c228599c344f9 100644
--- a/x-pack/test/functional/apps/maps/group4/lens/choropleth_chart.ts
+++ b/x-pack/test/functional/apps/maps/group4/lens/choropleth_chart.ts
@@ -52,7 +52,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       // add filter to force data fetch to set activeData
       await filterBar.addFilter('bytes', 'is between', '200', '10000');
 
-      await testSubjects.click('lnsSuggestion-worldCountriesByCountOfRecords > lnsSuggestion');
+      await testSubjects.click('lnsSuggestion-worldCountriesByCountOfRecords');
 
       await PageObjects.maps.openLegend();
       await PageObjects.maps.waitForLayersToLoad();