[Lens] 7.9 design cleanup (#71444) (#71573)

* Fix dimension popover layout and color picker “Auto” * Created ToolbarButton * Move disabled help text to tooltip for missing values * Darker side panel backgrounds * Adding to .asciidoc about where to put the SASS import * Moving `SASS` guidelines to STYLEGUIDE.md * Fix keyboard focus of XY settings popover * Fix dark mode
elastic · Jul 14, 2020 · f74340f · f74340f
1 parent d80ed1f
commit f74340f
Show file tree

Hide file tree

Showing 22 changed files with 284 additions and 204 deletions.
diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
@@ -3,11 +3,18 @@
 This guide applies to all development within the Kibana project and is
 recommended for the development of all Kibana plugins.
 
+- [General](#general)
+- [HTML](#html)
+- [API endpoints](#api-endpoints)
+- [TypeScript/JavaScript](#typeScript/javaScript)
+- [SASS files](#sass-files)
+- [React](#react)
+
 Besides the content in this style guide, the following style guides may also apply
 to all development within the Kibana project. Please make sure to also read them:
 
-- [Accessibility style guide](https://elastic.github.io/eui/#/guidelines/accessibility)
-- [SASS style guide](https://elastic.github.io/eui/#/guidelines/sass)
+- [Accessibility style guide (EUI Docs)](https://elastic.github.io/eui/#/guidelines/accessibility)
+- [SASS style guide (EUI Docs)](https://elastic.github.io/eui/#/guidelines/sass)
 
 ## General
 
@@ -582,6 +589,39 @@ Do not use setters, they cause more problems than they can solve.
 
 [sideeffect]: http://en.wikipedia.org/wiki/Side_effect_(computer_science)
 
+## SASS files
+
+When writing a new component, create a sibling SASS file of the same name and import directly into the **top** of the JS/TS component file. Doing so ensures the styles are never separated or lost on import and allows for better modularization (smaller individual plugin asset footprint).
+
+All SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`globals_[theme].scss` file](src/legacy/ui/public/styles/_globals_v7light.scss).
+
+While the styles for this component will only be loaded if the component exists on the page,
+the styles **will** be global and so it is recommended to use a three letter prefix on your
+classes to ensure proper scope.
+
+**Example:**
+
+```tsx
+// component.tsx
+
+import './component.scss';
+// All other imports below the SASS import
+
+export const Component = () => {
+  return (
+    <div className="plgComponent" />
+  );
+}
+```
+
+```scss
+// component.scss
+
+.plgComponent { ... }
+```
+
+Do not use the underscore `_` SASS file naming pattern when importing directly into a javascript file.
+
 ## React
 
 The following style guide rules are specific for working with the React framework.

diff --git a/docs/developer/getting-started/index.asciidoc b/docs/developer/getting-started/index.asciidoc
@@ -29,7 +29,7 @@ you can switch to the correct version when using nvm by running:
 ----
 nvm use
 ----
- 
+
 Install the latest version of https://yarnpkg.com[yarn].
 
 Bootstrap {kib} and install all the dependencies:
@@ -93,13 +93,13 @@ yarn es snapshot --license trial
 
 `trial` will give you access to all capabilities.
 
-Read about more options for <<running-elasticsearch>>, like connecting to a remote host, running from source, 
-preserving data inbetween runs, running remote cluster, etc. 
+Read about more options for <<running-elasticsearch>>, like connecting to a remote host, running from source,
+preserving data inbetween runs, running remote cluster, etc.
 
 [float]
 === Run {kib}
 
-In another terminal window, start up {kib}. Include developer examples by adding an optional `--run-examples` flag.  
+In another terminal window, start up {kib}. Include developer examples by adding an optional `--run-examples` flag.
 
 [source,bash]
 ----
@@ -125,8 +125,6 @@ cause the {kib} server to reboot.
 
 * <<kibana-debugging>>
 
-* <<kibana-sass>>
-
 * <<building-kibana>>
 
 * <<development-plugin-resources>>
@@ -137,8 +135,6 @@ include::sample-data.asciidoc[]
 
 include::debugging.asciidoc[]
 
-include::sass.asciidoc[]
-
 include::building-kibana.asciidoc[]
 
 include::development-plugin-resources.asciidoc[]
diff --git a/docs/developer/getting-started/sass.asciidoc b/docs/developer/getting-started/sass.asciidoc
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_data_panel_wrapper.scss b/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: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
 }
 
 .lnsDataPanelWrapper__switchSource {

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_frame_layout.scss b/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: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
+  min-width: $lnsPanelMinWidth + $euiSizeXL;
   overflow-x: hidden;
   overflow-y: scroll;
-  padding-top: $euiSize;
+  padding: $euiSize 0 $euiSize $euiSize;
   max-height: 100%;
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/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;
 }
diff --git a/.../plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/.../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>

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/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={{

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx b/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"
           />

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/...k/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

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/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)}

diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...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>
     );