[Lens] 7.9 design cleanup

x-pack/plugins/lens/public/editor_frame_service/editor_frame/_data_panel_wrapper.scss

@@ -1,6 +1,7 @@
 .lnsDataPanelWrapper {
   flex: 1 0 100%;
   overflow: hidden;
+  background-color: $euiColorLightestShade;
 }
 
 .lnsDataPanelWrapper__switchSource {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss

@@ -22,7 +22,7 @@
   // Leave out bottom padding so the suggestions scrollbar stays flush to window edge
   // Leave out left padding so the left sidebar's focus states are visible outside of content bounds
   // This also means needing to add same amount of margin to page content and suggestion items
-  padding: $euiSize $euiSize 0 0;
+  padding: $euiSize $euiSize 0;
 
   &:first-child {
     padding-left: $euiSize;
@@ -40,9 +40,10 @@
 
 .lnsFrameLayout__sidebar--right {
   @include euiScrollBar;
-  min-width: $lnsPanelMinWidth + $euiSize;
+  background-color: $euiColorLightestShade;
+  min-width: $lnsPanelMinWidth + $euiSizeXL;
   overflow-x: hidden;
   overflow-y: scroll;
-  padding-top: $euiSize;
+  padding: $euiSize 0 $euiSize $euiSize;
   max-height: 100%;
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss

@@ -2,6 +2,10 @@
   margin-bottom: $euiSizeS;
 }
 
+.lnsLayerPanel__sourceFlexItem {
+  max-width: calc(100% - #{$euiSize * 3.625});
+}
+
 .lnsLayerPanel__row {
   background: $euiColorLightestShade;
   padding: $euiSizeS;
@@ -32,5 +36,6 @@
 }
 
 .lnsLayerPanel__styleEditor {
-  width: $euiSize * 28;
+  width: $euiSize * 30;
+  padding: $euiSizeS;
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx

@@ -40,8 +40,7 @@ export function DimensionPopover({
       }}
       button={trigger}
       anchorPosition="leftUp"
-      withTitle
-      panelPaddingSize="s"
+      panelPaddingSize="none"
     >
       {panel}
     </EuiPopover>

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -103,7 +103,7 @@ export function LayerPanel(
           </EuiFlexItem>
 
           {layerDatasource && (
-            <EuiFlexItem className="eui-textTruncate">
+            <EuiFlexItem className="lnsLayerPanel__sourceFlexItem">
               <NativeRenderer
                 render={layerDatasource.renderLayerPanel}
                 nativeProps={{
@@ -170,18 +170,15 @@ export function LayerPanel(
                         defaultMessage: 'Quick functions',
                       }),
                       content: (
-                        <>
-                          <EuiSpacer size="s" />
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              core: props.core,
-                              columnId: accessor,
-                              filterOperations: group.filterOperations,
-                            }}
-                          />
-                        </>
+                        <NativeRenderer
+                          render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                          nativeProps={{
+                            ...layerDatasourceConfigProps,
+                            core: props.core,
+                            columnId: accessor,
+                            filterOperations: group.filterOperations,
+                          }}
+                        />
                       ),
                     },
                   ];
@@ -194,7 +191,6 @@ export function LayerPanel(
                       }),
                       content: (
                         <div className="lnsLayerPanel__styleEditor">
-                          <EuiSpacer size="s" />
                           <NativeRenderer
                             render={activeVisualization.renderDimensionEditor}
                             nativeProps={{

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx

@@ -5,10 +5,11 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NativeRenderer } from '../../../native_renderer';
 import { Visualization, VisualizationLayerWidgetProps } from '../../../types';
+import { ToolbarButton } from '../../../toolbar_button';
 
 export function LayerSettings({
   layerId,
@@ -25,6 +26,10 @@ export function LayerSettings({
     return null;
   }
 
+  const a11yText = i18n.translate('xpack.lens.editLayerSettings', {
+    defaultMessage: 'Edit layer settings',
+  });
+
   return (
     <EuiPopover
       id={`lnsLayerPopover_${layerId}`}
@@ -36,11 +41,11 @@ export function LayerSettings({
             defaultMessage: 'Edit layer settings',
           })}
         >
-          <EuiButtonIcon
+          <ToolbarButton
+            size="s"
             iconType={activeVisualization.getLayerContextMenuIcon?.(layerConfigProps) || 'gear'}
-            aria-label={i18n.translate('xpack.lens.editLayerSettings', {
-              defaultMessage: 'Edit layer settings',
-            })}
+            aria-label={a11yText}
+            title={a11yText}
             onClick={() => setIsOpen(!isOpen)}
             data-test-subj="lns_layer_settings"
           />

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss

@@ -5,15 +5,9 @@
   }
 }
 
-.lnsChartSwitch__triggerButton {
-  @include euiTitle('xs');
-  background-color: $euiColorEmptyShade;
-  border-color: $euiColorLightShade;
-}
-
 .lnsChartSwitch__summaryIcon {
   margin-right: $euiSizeS;
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 // Targeting img as this won't target normal EuiIcon's only the custom svgs's

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -4,21 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './chart_switch.scss';
 import React, { useState, useMemo } from 'react';
 import {
   EuiIcon,
   EuiPopover,
   EuiPopoverTitle,
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
-  EuiButton,
 } from '@elastic/eui';
 import { flatten } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { Visualization, FramePublicAPI, Datasource } from '../../../types';
 import { Action } from '../state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
+import { ToolbarButton } from '../../../toolbar_button';
 
 interface VisualizationSelection {
   visualizationId: string;
@@ -72,8 +73,6 @@ function VisualizationSummary(props: Props) {
   );
 }
 
-import './chart_switch.scss';
-
 export function ChartSwitch(props: Props) {
   const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
 
@@ -202,16 +201,13 @@ export function ChartSwitch(props: Props) {
       panelClassName="lnsChartSwitch__popoverPanel"
       panelPaddingSize="s"
       button={
-        <EuiButton
-          className="lnsChartSwitch__triggerButton"
+        <ToolbarButton
           onClick={() => setFlyoutOpen(!flyoutOpen)}
           data-test-subj="lnsChartSwitchPopover"
-          iconSide="right"
-          iconType="arrowDown"
-          color="text"
+          fontWeight="bold"
         >
           <VisualizationSummary {...props} />
-        </EuiButton>
+        </ToolbarButton>
       }
       isOpen={flyoutOpen}
       closePopover={() => setFlyoutOpen(false)}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -15,6 +15,7 @@ import {
   EuiText,
   EuiBetaBadge,
   EuiButtonEmpty,
+  EuiLink,
 } from '@elastic/eui';
 import { CoreStart, CoreSetup } from 'kibana/public';
 import {
@@ -208,18 +209,20 @@ export function InnerWorkspacePanel({
             />{' '}
             <EuiBetaBadge label="Beta" tooltipContent={tooltipContent} />
           </p>
-          <EuiButtonEmpty
-            href="https://www.elastic.co/products/kibana/feedback"
-            iconType="popout"
-            iconSide="right"
-            size="xs"
-            target="_blank"
-          >
-            <FormattedMessage
-              id="xpack.lens.editorFrame.goToForums"
-              defaultMessage="Make requests and give feedback"
-            />
-          </EuiButtonEmpty>
+          <p>
+            <small>
+              <EuiLink
+                href="https://www.elastic.co/products/kibana/feedback"
+                target="_blank"
+                external
+              >
+                <FormattedMessage
+                  id="xpack.lens.editorFrame.goToForums"
+                  defaultMessage="Make requests and give feedback"
+                />
+              </EuiLink>
+            </small>
+          </p>
         </EuiText>
       </div>
     );

x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx

@@ -6,18 +6,13 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
-import {
-  EuiButtonEmpty,
-  EuiPopover,
-  EuiPopoverTitle,
-  EuiSelectable,
-  EuiButtonEmptyProps,
-} from '@elastic/eui';
+import { EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
 import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 import { IndexPatternRef } from './types';
 import { trackUiEvent } from '../lens_ui_telemetry';
+import { ToolbarButtonProps, ToolbarButton } from '../toolbar_button';
 
-export type ChangeIndexPatternTriggerProps = EuiButtonEmptyProps & {
+export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
   label: string;
   title?: string;
 };
@@ -40,29 +35,24 @@ export function ChangeIndexPattern({
   const createTrigger = function () {
     const { label, title, ...rest } = trigger;
     return (
-      <EuiButtonEmpty
-        className="eui-textTruncate"
-        flush="left"
-        color="text"
-        iconSide="right"
-        iconType="arrowDown"
+      <ToolbarButton
         title={title}
         onClick={() => setPopoverIsOpen(!isPopoverOpen)}
+        fullWidth
         {...rest}
       >
         {label}
-      </EuiButtonEmpty>
+      </ToolbarButton>
     );
   };
 
   return (
     <>
       <EuiPopover
+        style={{ width: '100%' }}
         button={createTrigger()}
         isOpen={isPopoverOpen}
         closePopover={() => setPopoverIsOpen(false)}
-        className="eui-textTruncate"
-        anchorClassName="eui-textTruncate"
         display="block"
         panelPaddingSize="s"
         ownFocus

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss

@@ -7,13 +7,7 @@
 .lnsInnerIndexPatternDataPanel__header {
   display: flex;
   align-items: center;
-  height: $euiSize * 3;
-  margin-top: -$euiSizeS;
-}
-
-.lnsInnerIndexPatternDataPanel__triggerButton {
-  @include euiTitle('xs');
-  line-height: $euiSizeXXL;
+  margin-bottom: $euiSizeS;
 }
 
 /**

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -424,7 +424,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                 label: currentIndexPattern.title,
                 title: currentIndexPattern.title,
                 'data-test-subj': 'indexPattern-switch-link',
-                className: 'lnsInnerIndexPatternDataPanel__triggerButton',
+                fontWeight: 'bold',
               }}
               indexPatternId={currentIndexPatternId}
               indexPatternRefs={indexPatternRefs}

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.scss

@@ -1,7 +1,6 @@
 .lnsIndexPatternDimensionEditor {
-  flex-grow: 1;
-  line-height: 0;
-  overflow: hidden;
+  width: $euiSize * 30;
+  padding: $euiSizeS;
 }
 
 .lnsIndexPatternDimensionEditor__left,
@@ -11,10 +10,7 @@
 
 .lnsIndexPatternDimensionEditor__left {
   background-color: $euiPageBackgroundColor;
-}
-
-.lnsIndexPatternDimensionEditor__right {
-  width: $euiSize * 20;
+  width: $euiSize * 8;
 }
 
 .lnsIndexPatternDimensionEditor__operation > button {