[Lens] fix suggestion panel styling

elastic · Jul 4, 2022 · 6d6b835 · 6d6b835
1 parent f5c6c21
commit 6d6b835
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 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
@@ -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
@@ -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;
-}
+}
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
@@ -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
@@ -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
@@ -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
@@ -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();