From 69431b55d59f68e89a040eaf5a8d6aa491211c48 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Fri, 15 Nov 2019 12:18:49 -0500
Subject: [PATCH] [Canvas] Use compressed forms in sidebar (#49419)

* compressed sidebar design

* add back metric help, style no datasource msg

* re-style remove button

* re-style element status section

* remove unused component import

* update storyshots

* clean up unused i18n values

* address feedback

* address i81n feedback

* update storyshot

* convert string to i18n

* style grouped sidebar messages

* update storyshots
---
 .../extended_template.examples.storyshot      |  10 +-
 .../axis_config/extended_template.tsx         |   8 +-
 .../uis/arguments/datacolumn/index.js         |   2 +-
 .../uis/arguments/filter_group.js             |   6 +-
 .../uis/arguments/image_upload/index.js       |   1 +
 .../canvas_plugin_src/uis/arguments/string.js |   2 +-
 .../canvas_plugin_src/uis/arguments/toggle.js |  10 +-
 .../uis/datasources/demodata.js               |  20 +---
 .../uis/datasources/essql.js                  |  17 ++-
 .../uis/datasources/index.js                  |   4 +-
 .../uis/datasources/timelion.js               |  68 ++++++------
 .../canvas_plugin_src/uis/views/metric.js     |  24 ++---
 .../canvas/canvas_plugin_src/uis/views/pie.js |  48 ++++-----
 .../legacy/plugins/canvas/i18n/components.ts  |  12 +--
 .../legacy/plugins/canvas/i18n/constants.ts   |   3 +
 .../plugins/canvas/i18n/expression_types.ts   |  19 ++--
 x-pack/legacy/plugins/canvas/i18n/ui.ts       |  83 ++++++++------
 .../arg_add_popover/arg_add_popover.scss      |   4 +
 .../arg_add_popover/arg_add_popover.tsx       |   1 +
 .../public/components/arg_form/arg_form.scss  |  56 ++++------
 .../public/components/arg_form/arg_label.js   |  14 ++-
 .../components/arg_form/arg_simple_form.tsx   |  19 ++--
 .../components/datasource/datasource.scss     |  25 +++++
 .../datasource/datasource_component.js        |  69 +++++++-----
 .../datasource_preview/datasource_preview.js  |   8 +-
 .../datasource/datasource_selector.js         |  13 ++-
 .../components/datasource/no_datasource.js    |  11 +-
 .../components/datatable/datatable.scss       |   9 +-
 .../element_config/element_config.js          |  51 ++++++---
 .../es_field_select/es_field_select.js        |   1 +
 .../es_fields_select/es_fields_select.js      |   1 +
 .../es_index_select/es_index_select.js        |   1 +
 .../components/page_config/page_config.js     |  26 +++--
 .../shape_picker_popover.examples.storyshot   | 102 ++++++++++--------
 .../shape_picker_popover.tsx                  |  10 +-
 .../group_settings.examples.storyshot         |  18 ++--
 .../multi_element_settings.examples.storyshot |  18 ++--
 .../element_settings/element_settings.tsx     |   4 +-
 .../components/sidebar/global_config.tsx      |   4 +-
 .../components/sidebar/group_settings.tsx     |  10 +-
 .../sidebar/multi_element_settings.tsx        |  10 +-
 .../public/components/sidebar/sidebar.scss    |  10 +-
 .../components/sidebar/sidebar_section.js     |   4 +-
 .../sidebar/sidebar_section_title.js          |   2 +-
 .../sidebar_header/sidebar_header.scss        |   6 +-
 .../text_style_picker/text_style_picker.js    |  27 ++---
 .../workpad_config/workpad_config.js          |  71 ++++++------
 .../extended_template.examples.storyshot      |   6 +-
 .../simple_template.examples.storyshot        |  90 ++++------------
 .../series_style/extended_template.tsx        |   2 +-
 .../series_style/simple_template.tsx          |  14 +--
 .../expression_types/datasources/esdocs.js    |  55 +++++++---
 .../plugins/canvas/public/style/main.scss     |   2 +-
 53 files changed, 628 insertions(+), 483 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
index 5efbbe01065054..ef301c08cdfe83 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
   }
 >
   <div
-    className="euiFormRow euiFormRow--compressed"
+    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -91,7 +91,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
   }
 >
   <div
-    className="euiFormRow euiFormRow--compressed"
+    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -171,12 +171,14 @@ exports[`Storyshots arguments/AxisConfig/components extended disabled 1`] = `
   }
 >
   <div
-    className="euiText euiText--medium"
+    className="euiText euiText--extraSmall"
   >
     <div
       className="euiTextColor euiTextColor--subdued"
     >
-      The axis is disabled
+      <p>
+        Switch on to view axis settings
+      </p>
     </div>
   </div>
 </div>
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
index 0ec722e370b404..832f953974af4f 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
@@ -71,7 +71,11 @@ export class ExtendedTemplate extends PureComponent<Props> {
     const isDisabled = typeof this.props.argValue === 'boolean' && this.props.argValue === false;
 
     if (isDisabled) {
-      return <EuiText color="subdued">The axis is disabled</EuiText>;
+      return (
+        <EuiText color="subdued" size="xs">
+          <p>{strings.getDisabledText()}</p>
+        </EuiText>
+      );
     }
 
     const positions = {
@@ -85,7 +89,7 @@ export class ExtendedTemplate extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <EuiFormRow label={strings.getPositionLabel()} display="rowCompressed">
+        <EuiFormRow label={strings.getPositionLabel()} display="columnCompressed">
           <EuiSelect
             compressed
             value={position}
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
index 773e41dc3abf3c..8c1a4aad5d0f37 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
@@ -91,7 +91,7 @@ class DatacolumnArgInput extends Component {
     });
 
     return (
-      <EuiFlexGroup gutterSize="s" id={argId}>
+      <EuiFlexGroup gutterSize="s" id={argId} direction="row">
         <EuiFlexItem grow={false}>
           <SimpleMathFunction
             id={argId}
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js
index 4b3c297a7e7f09..1659b0757cbd87 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js
@@ -59,15 +59,15 @@ const FilterGroupInput = ({ onValueChange, argValue, argId, filterGroups }) => {
             onChange={ev => setInputValue(ev.target.value)}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
           <EuiButton type="submit" size="s" onClick={handleAddGroup}>
-            Set
+            {strings.getButtonSet()}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiButtonEmpty color="danger" size="xs" onClick={() => setAddMode(!addMode)} flush="left">
-        Cancel
+        {strings.getButtonCancel()}
       </EuiButtonEmpty>
     </form>
   );
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
index e8c433fb8752df..a3c327da2e4dc8 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
@@ -130,6 +130,7 @@ class ImageUpload extends React.Component {
           idSelected={urlType}
           onChange={this.changeUrlType}
           isFullWidth
+          className="canvasSidebar__buttonGroup"
         />
       </EuiFormRow>
     );
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
index d8a7188dfab286..dc31497a7da783 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
@@ -26,7 +26,7 @@ const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
       />
     </EuiFlexItem>
     {confirm && (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
         <EuiButton size="s" onClick={() => commit(value)}>
           {confirm}
         </EuiButton>
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
index 462537e82b164f..de19d3e29221bb 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
@@ -19,8 +19,14 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
     return null;
   }
   return (
-    <EuiFormRow display="rowCompressed">
-      <EuiSwitch compressed id={argId} checked={argValue} onChange={handleChange} />
+    <EuiFormRow display="columnCompressedSwitch">
+      <EuiSwitch
+        compressed
+        id={argId}
+        checked={argValue}
+        onChange={handleChange}
+        className="canvasArg__switch"
+      />
     </EuiFormRow>
   );
 };
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
index ec492f52747c13..193d99e1c95339 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
@@ -5,28 +5,15 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
-import { ComponentStrings, CANVAS, DataSourceStrings } from '../../../i18n';
+import { DataSourceStrings } from '../../../i18n';
 
 const { DemoData: strings } = DataSourceStrings;
 
 const DemodataDatasource = () => (
-  <EuiText>
-    <h3>{strings.getHeading()}</h3>
-    <p>
-      <FormattedMessage
-        id="xpack.canvas.uis.dataSources.demoDataDescription"
-        defaultMessage="This data source is connected to every {canvas} element by default. Its purpose is to give you some playground data to get started. The demo set contains 4 strings, 3 numbers and a date. Feel free to experiment and, when you're ready, click {clickText} above to connect to your own data."
-        values={{
-          canvas: CANVAS,
-          clickText: (
-            <strong>{ComponentStrings.DatasourceDatasourceComponent.getChangeButtonLabel()}</strong>
-          ),
-        }}
-      />
-    </p>
+  <EuiText size="s">
+    <p>{strings.getDescription()}</p>
   </EuiText>
 );
 
@@ -34,7 +21,6 @@ export const demodata = () => ({
   name: 'demodata',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  // Replace this with a better icon when we have time.
   image: 'logoElasticStack',
   template: templateFromReactComponent(DemodataDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
index 43f2fa63aff702..707f2305e1368f 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -6,10 +6,10 @@
 
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiTextArea } from '@elastic/eui';
+import { EuiFormRow, EuiTextArea, EuiLink, EuiText } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
-import { DataSourceStrings } from '../../../i18n';
+import { DataSourceStrings, SQL_URL } from '../../../i18n';
 
 const { Essql: strings } = DataSourceStrings;
 
@@ -59,13 +59,24 @@ class EssqlDatasource extends PureComponent {
     const { isInvalid } = this.props;
 
     return (
-      <EuiFormRow isInvalid={isInvalid} label={strings.getLabel()}>
+      <EuiFormRow
+        isInvalid={isInvalid}
+        label={strings.getLabel()}
+        labelAppend={
+          <EuiText size="xs">
+            <EuiLink href={SQL_URL} target="_blank">
+              {strings.getLabelAppend()}
+            </EuiLink>
+          </EuiText>
+        }
+      >
         <EuiTextArea
           placeholder={this.defaultQuery}
           isInvalid={isInvalid}
           className="canvasTextArea__code"
           value={this.getQuery()}
           onChange={this.onChange}
+          rows={15}
         />
       </EuiFormRow>
     );
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
index 107d4d241d2e7c..13aa2a06306a08 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { timelion } from './timelion';
 import { demodata } from './demodata';
 import { essql } from './essql';
+import { timelion } from './timelion';
 
-export const datasourceSpecs = [timelion, demodata, essql];
+export const datasourceSpecs = [demodata, essql, timelion];
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
index 06efb6a791a2de..b30e43c1c3c574 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
@@ -12,13 +12,13 @@ import {
   EuiCallOut,
   EuiSpacer,
   EuiCode,
-  EuiText,
   EuiTextArea,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { DataSourceStrings, TIMELION, CANVAS } from '../../../i18n';
+import { TooltipIcon } from '../../../public/components/tooltip_icon';
 
 const { Timelion: strings } = DataSourceStrings;
 
@@ -57,43 +57,12 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
 
   return (
     <div>
-      <EuiText size="xs">
-        <h3>{TIMELION}</h3>
-        <p>{strings.getAbout()}</p>
-      </EuiText>
-
-      <EuiSpacer />
-
-      <EuiFormRow label={strings.getQueryLabel()} helpText={strings.getQueryHelp()}>
-        <EuiTextArea
-          className="canvasTextArea__code"
-          value={getQuery()}
-          onChange={e => setArg(argName, e.target.value)}
-        />
-      </EuiFormRow>
-      {
-        // TODO: Time timelion interval picker should be a drop down
-      }
-      <EuiFormRow
-        label={strings.getIntervalLabel()}
-        helpText={strings.getIntervalHelp()}
-        display="rowCompressed"
-      >
-        <EuiFieldText
-          compressed
-          value={getInterval()}
-          onChange={e => setArg('interval', e.target.value)}
-        />
-      </EuiFormRow>
-
-      <EuiSpacer size="m" />
-
-      <EuiCallOut color="warning" title={strings.getTipsHeading()} size="s">
+      <EuiCallOut title={strings.getTipsHeading()} size="s" iconType="iInCircle">
         <ul>
           <li>
             <FormattedMessage
               id="xpack.canvas.uis.dataSources.timelion.tips.time"
-              defaultMessage="{timelion} requires a time range, you should add a time filter element to your page somewhere, or use the code editor to pass in a time filter."
+              defaultMessage="{timelion} requires a time range. Add a time filter element to your page or use the expression editor to pass one in."
               values={{
                 timelion: TIMELION,
               }}
@@ -102,7 +71,7 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
           <li>
             <FormattedMessage
               id="xpack.canvas.uis.dataSources.timelion.tips.functions"
-              defaultMessage="Some {timelion} functions, such as {functionExample}, don't translate to a {canvas} data table. Anything todo with data manipulation should work grand."
+              defaultMessage="Some {timelion} functions, such as {functionExample}, do not translate to a {canvas} data table. However, anything todo with data manipulation should work as expected."
               values={{
                 timelion: TIMELION,
                 canvas: CANVAS,
@@ -112,6 +81,35 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
           </li>
         </ul>
       </EuiCallOut>
+
+      <EuiSpacer size="m" />
+
+      <EuiFormRow
+        label={strings.getQueryLabel()}
+        helpText={strings.getQueryHelp()}
+        labelAppend={<TooltipIcon content={strings.getAbout()} />}
+      >
+        <EuiTextArea
+          className="canvasTextArea__code"
+          value={getQuery()}
+          onChange={e => setArg(argName, e.target.value)}
+          rows={15}
+        />
+      </EuiFormRow>
+      {
+        // TODO: Time timelion interval picker should be a drop down
+      }
+      <EuiFormRow
+        label={strings.getIntervalLabel()}
+        helpText={strings.getIntervalHelp()}
+        display="columnCompressed"
+      >
+        <EuiFieldText
+          compressed
+          value={getInterval()}
+          onChange={e => setArg('interval', e.target.value)}
+        />
+      </EuiFormRow>
     </div>
   );
 };
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
index 213a2e0dd3b81f..33cdb5541e1726 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
@@ -16,6 +16,13 @@ export const metric = () => ({
   modelArgs: [['_', { label: strings.getNumberDisplayName() }]],
   requiresContext: false,
   args: [
+    {
+      name: 'metricFormat',
+      displayName: strings.getMetricFormatDisplayName(),
+      help: strings.getMetricFormatHelp(),
+      argType: 'numberFormat',
+      default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
+    },
     {
       name: '_',
       displayName: strings.getLabelDisplayName(),
@@ -23,13 +30,6 @@ export const metric = () => ({
       argType: 'string',
       default: '""',
     },
-    {
-      name: 'labelFont',
-      displayName: strings.getLabelFontDisplayName(),
-      help: strings.getLabelFontHelp(),
-      argType: 'font',
-      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
-    },
     {
       name: 'metricFont',
       displayName: strings.getMetricFontDisplayName(),
@@ -38,11 +38,11 @@ export const metric = () => ({
       default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
     },
     {
-      name: 'metricFormat',
-      displayName: strings.getMetricFormatDisplayName(),
-      help: strings.getMetricFormatHelp(),
-      argType: 'numberFormat',
-      default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
+      name: 'labelFont',
+      displayName: strings.getLabelFontDisplayName(),
+      help: strings.getLabelFontHelp(),
+      argType: 'font',
+      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
     },
   ],
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/pie.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/pie.js
index 4bb68973e80eab..783140b0c8b9ef 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/pie.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/pie.js
@@ -23,6 +23,16 @@ export const pie = () => ({
       name: 'palette',
       argType: 'palette',
     },
+    {
+      name: 'legend',
+      displayName: strings.getLegendDisplayName(),
+      help: strings.getLegendHelp(),
+      argType: 'select',
+      default: 'ne',
+      options: {
+        choices: legendOptions,
+      },
+    },
     {
       name: 'hole',
       displayName: strings.getHoleDisplayName(),
@@ -34,13 +44,6 @@ export const pie = () => ({
         max: 100,
       },
     },
-    {
-      name: 'labels',
-      displayName: strings.getLabelsDisplayName(),
-      help: strings.getLabelsHelp(),
-      argType: 'toggle',
-      default: true,
-    },
     {
       name: 'labelRadius',
       displayName: strings.getLabelRadiusDisplayName(),
@@ -52,16 +55,6 @@ export const pie = () => ({
         max: 100,
       },
     },
-    {
-      name: 'legend',
-      displayName: strings.getLegendDisplayName(),
-      help: strings.getLegendHelp(),
-      argType: 'select',
-      default: 'ne',
-      options: {
-        choices: legendOptions,
-      },
-    },
     {
       name: 'radius',
       displayName: strings.getRadiusDisplayName(),
@@ -69,6 +62,20 @@ export const pie = () => ({
       argType: 'percentage',
       default: 1,
     },
+    {
+      name: 'tilt',
+      displayName: strings.getTiltDisplayName(),
+      help: strings.getTiltHelp(),
+      argType: 'percentage',
+      default: 1,
+    },
+    {
+      name: 'labels',
+      displayName: strings.getLabelsDisplayName(),
+      help: strings.getLabelsHelp(),
+      argType: 'toggle',
+      default: true,
+    },
     {
       name: 'seriesStyle',
       argType: 'seriesStyle',
@@ -78,13 +85,6 @@ export const pie = () => ({
       name: 'font',
       argType: 'font',
     },
-    {
-      name: 'tilt',
-      displayName: strings.getTiltDisplayName(),
-      help: strings.getTiltHelp(),
-      argType: 'percentage',
-      default: 1,
-    },
   ],
   resolve({ context }) {
     if (getState(context) !== 'ready') {
diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
index 1e6da888abf58e..5b9f6f00940f4b 100644
--- a/x-pack/legacy/plugins/canvas/i18n/components.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -228,11 +228,11 @@ export const ComponentStrings = {
   DatasourceDatasourceComponent: {
     getChangeButtonLabel: () =>
       i18n.translate('xpack.canvas.datasourceDatasourceComponent.changeButtonLabel', {
-        defaultMessage: 'Change your data source',
+        defaultMessage: 'Change element data source',
       }),
     getPreviewButtonLabel: () =>
       i18n.translate('xpack.canvas.datasourceDatasourceComponent.previewButtonLabel', {
-        defaultMessage: 'Preview',
+        defaultMessage: 'Preview data',
       }),
     getSaveButtonLabel: () =>
       i18n.translate('xpack.canvas.datasourceDatasourceComponent.saveButtonLabel', {
@@ -294,7 +294,7 @@ export const ComponentStrings = {
       }),
     getTitle: () =>
       i18n.translate('xpack.canvas.elementConfig.title', {
-        defaultMessage: 'Elements',
+        defaultMessage: 'Element status',
         description:
           '"Elements" refers to the individual text, images, or visualizations that you can add to a Canvas workpad',
       }),
@@ -581,7 +581,7 @@ export const ComponentStrings = {
       }),
     getBackgroundColorLabel: () =>
       i18n.translate('xpack.canvas.pageConfig.backgroundColorLabel', {
-        defaultMessage: 'Background Color',
+        defaultMessage: 'Background',
       }),
     getNoTransitionDropDownOptionLabel: () =>
       i18n.translate('xpack.canvas.pageConfig.transitions.noneDropDownOptionLabel', {
@@ -592,7 +592,7 @@ export const ComponentStrings = {
       }),
     getTitle: () =>
       i18n.translate('xpack.canvas.pageConfig.title', {
-        defaultMessage: 'Page',
+        defaultMessage: 'Page styles',
       }),
     getTransitionLabel: () =>
       i18n.translate('xpack.canvas.pageConfig.transitionLabel', {
@@ -1002,7 +1002,7 @@ export const ComponentStrings = {
       }),
     getTitle: () =>
       i18n.translate('xpack.canvas.workpadConfig.title', {
-        defaultMessage: 'Workpad',
+        defaultMessage: 'Workpad settings',
       }),
     getUSLetterButtonLabel: () =>
       i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {
diff --git a/x-pack/legacy/plugins/canvas/i18n/constants.ts b/x-pack/legacy/plugins/canvas/i18n/constants.ts
index 3659c369ba0b6c..8aee6ca1486811 100644
--- a/x-pack/legacy/plugins/canvas/i18n/constants.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/constants.ts
@@ -15,6 +15,7 @@ export const CSV = 'CSV';
 export const DATEMATH = '`datemath`';
 export const DATATABLE = '`datatable`';
 export const ELASTICSEARCH = 'Elasticsearch';
+export const ELASTICSEARCH_SHORT = 'ES';
 export const FONT_FAMILY = '`font-family`';
 export const FONT_WEIGHT = '`font-weight`';
 export const HEX = 'HEX';
@@ -32,6 +33,8 @@ export const PDF = 'PDF';
 export const POST = 'POST';
 export const RGB = 'RGB';
 export const SQL = 'SQL';
+export const SQL_URL =
+  'https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-spec.html';
 export const SVG = 'SVG';
 export const TIMELION = 'Timelion';
 export const TINYMATH = '`TinyMath`';
diff --git a/x-pack/legacy/plugins/canvas/i18n/expression_types.ts b/x-pack/legacy/plugins/canvas/i18n/expression_types.ts
index 6bc40a2758ab39..bdd190f26c97aa 100644
--- a/x-pack/legacy/plugins/canvas/i18n/expression_types.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/expression_types.ts
@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { LUCENE } from './constants';
+import { LUCENE, ELASTICSEARCH } from './constants';
 
 export const ArgTypesStrings = {
   Color: {
@@ -101,13 +101,17 @@ export const ArgTypesStrings = {
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorLabel', {
         defaultMessage: 'Color',
       }),
+    getColorValueDefault: () =>
+      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorValueDefault', {
+        defaultMessage: 'Auto',
+      }),
     getStyleLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.styleLabel', {
         defaultMessage: 'Style',
       }),
     getRemoveAriaLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.removeAriaLabel', {
-        defaultMessage: 'Remove Series Color',
+        defaultMessage: 'Remove series color',
       }),
     getNoSeriesTooltip: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noSeriesTooltip', {
@@ -115,11 +119,11 @@ export const ArgTypesStrings = {
       }),
     getSeriesIdentifierLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.seriesIdentifierLabel', {
-        defaultMessage: 'Series Identifier',
+        defaultMessage: 'Series id',
       }),
     getSelectSeriesOption: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.selectSeriesDropDown', {
-        defaultMessage: 'Select Series',
+        defaultMessage: 'Select series',
       }),
     getLineLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.lineLabel', {
@@ -152,15 +156,18 @@ export const ExpressionDataSourceStrings = {
       }),
     getWarningTitle: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {
-        defaultMessage: 'Be careful',
+        defaultMessage: 'Query with caution',
       }),
     getWarning: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {
         defaultMessage: `
-          The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
+          This datasource pulls directly from {elasticsearch}
           without the use of aggregations. It is best used with low volume datasets and in
           situations where you need to view raw documents or plot exact, non-aggregated values on a
           chart.`,
+        values: {
+          elasticsearch: ELASTICSEARCH,
+        },
       }),
     getIndexTitle: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {
diff --git a/x-pack/legacy/plugins/canvas/i18n/ui.ts b/x-pack/legacy/plugins/canvas/i18n/ui.ts
index b65a666aa88095..323a6c97fd967d 100644
--- a/x-pack/legacy/plugins/canvas/i18n/ui.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/ui.ts
@@ -12,9 +12,9 @@ import {
   CANVAS,
   CSS,
   ELASTICSEARCH,
+  ELASTICSEARCH_SHORT,
   HEX,
   HTML,
-  KIBANA,
   LUCENE,
   MARKDOWN,
   MOMENTJS,
@@ -35,6 +35,10 @@ export const ArgumentStrings = {
       i18n.translate('xpack.canvas.uis.arguments.axisConfigLabel', {
         defaultMessage: 'Visualization axis configuration',
       }),
+    getDisabledText: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfigDisabledText', {
+        defaultMessage: 'Switch on to view axis settings',
+      }),
     getPositionBottom: () =>
       i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.bottomDropDown', {
         defaultMessage: 'bottom',
@@ -124,6 +128,14 @@ export const ArgumentStrings = {
       i18n.translate('xpack.canvas.uis.arguments.filterGroup.createNewGroupLinkText', {
         defaultMessage: 'Create new group',
       }),
+    getButtonSet: () =>
+      i18n.translate('xpack.canvas.uis.arguments.filterGroup.setValue', {
+        defaultMessage: 'Set',
+      }),
+    getButtonCancel: () =>
+      i18n.translate('xpack.canvas.uis.arguments.filterGroup.cancelValue', {
+        defaultMessage: 'Cancel',
+      }),
     getDisplayName: () =>
       i18n.translate('xpack.canvas.uis.arguments.filterGroupTitle', {
         defaultMessage: 'Filter Group',
@@ -260,7 +272,7 @@ export const ArgumentStrings = {
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.arguments.shapeLabel', {
-        defaultMessage: 'Shape picker',
+        defaultMessage: 'Change the shape of the current element',
       }),
   },
   String: {
@@ -303,12 +315,20 @@ export const DataSourceStrings = {
       }),
     getHeading: () =>
       i18n.translate('xpack.canvas.uis.dataSources.demoData.headingTitle', {
-        defaultMessage: 'You are using demo data',
+        defaultMessage: 'This element is using demo data',
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.dataSources.demoDataLabel', {
         defaultMessage: 'Mock data set with usernames, prices, projects, countries, and phases',
       }),
+    getDescription: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.demoDataDescription', {
+        defaultMessage:
+          'By default, every {canvas} element is connected to the demo data source. Change the data source, above, to connect your own data.',
+        values: {
+          canvas: CANVAS,
+        },
+      }),
   },
   Essql: {
     getDisplayName: () =>
@@ -329,9 +349,13 @@ export const DataSourceStrings = {
       }),
     getLabel: () =>
       i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitle', {
-        defaultMessage: '{elasticsearch} {sql} query',
+        defaultMessage: 'Query',
+      }),
+    getLabelAppend: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitleAppend', {
+        defaultMessage: 'Learn {elasticsearchShort} {sql} syntax',
         values: {
-          elasticsearch: ELASTICSEARCH,
+          elasticsearchShort: ELASTICSEARCH_SHORT,
           sql: SQL,
         },
       }),
@@ -340,10 +364,9 @@ export const DataSourceStrings = {
     getAbout: () =>
       i18n.translate('xpack.canvas.uis.dataSources.timelion.aboutDetail', {
         defaultMessage:
-          '{canvas} integrates with {kibanaTimelion} application to allow you to use {timelion} queries to pull back timeseries data in a tabular format that can be used with {canvas} elements.',
+          'Use {timelion} queries to pull back timeseries data that can be used with {canvas} elements.',
         values: {
           timelion: TIMELION,
-          kibanaTimelion: `${KIBANA}'s ${TIMELION}`,
           canvas: CANVAS,
         },
       }),
@@ -357,9 +380,8 @@ export const DataSourceStrings = {
     getIntervalHelp: () =>
       i18n.translate('xpack.canvas.uis.dataSources.timelion.intervalLabel', {
         defaultMessage:
-          'Accepts {elasticsearch} date math: {weeksExample}, {daysExample}, {secondsExample}, or {auto}',
+          'Use date math like {weeksExample}, {daysExample}, {secondsExample}, or {auto}',
         values: {
-          elasticsearch: ELASTICSEARCH,
           secondsExample: '10s',
           daysExample: '5d',
           weeksExample: '1w',
@@ -383,7 +405,11 @@ export const DataSourceStrings = {
       }),
     getTipsHeading: () =>
       i18n.translate('xpack.canvas.uis.dataSources.timelion.tipsTitle', {
-        defaultMessage: 'Some tips',
+        defaultMessage: 'Tips for using {timelion} in {canvas}',
+        values: {
+          timelion: TIMELION,
+          canvas: CANVAS,
+        },
       }),
   },
 };
@@ -530,7 +556,7 @@ export const ViewStrings = {
       }),
     getValueDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.dropdownControl.args.valueColumnTitle', {
-        defaultMessage: 'Values column',
+        defaultMessage: 'Value column',
       }),
     getValueHelp: () =>
       i18n.translate('xpack.canvas.uis.views.dropdownControl.args.valueColumnLabel', {
@@ -610,7 +636,7 @@ export const ViewStrings = {
       }),
     getNumberDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.numberArgTitle', {
-        defaultMessage: 'Number',
+        defaultMessage: 'Value',
       }),
     getLabelDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.labelArgTitle', {
@@ -618,7 +644,7 @@ export const ViewStrings = {
       }),
     getLabelFontDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.labelFontTitle', {
-        defaultMessage: 'Label text settings',
+        defaultMessage: 'Label text',
       }),
     getLabelFontHelp: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.labelFontLabel', {
@@ -626,11 +652,11 @@ export const ViewStrings = {
       }),
     getLabelHelp: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.labelArgLabel', {
-        defaultMessage: 'Describes the metric',
+        defaultMessage: 'Enter a text label for the metric value',
       }),
     getMetricFontDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.metricFontTitle', {
-        defaultMessage: 'Metric text settings',
+        defaultMessage: 'Metric text',
       }),
     getMetricFontHelp: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.metricFontLabel', {
@@ -638,11 +664,11 @@ export const ViewStrings = {
       }),
     getMetricFormatDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.metricFormatTitle', {
-        defaultMessage: 'Metric Format',
+        defaultMessage: 'Format',
       }),
     getMetricFormatHelp: () =>
       i18n.translate('xpack.canvas.uis.views.metric.args.metricFormatLabel', {
-        defaultMessage: 'Fonts, alignment and color',
+        defaultMessage: 'Select a format for the metric value',
       }),
   },
   Pie: {
@@ -676,7 +702,7 @@ export const ViewStrings = {
       }),
     getLegendDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.pie.args.legendTitle', {
-        defaultMessage: 'Legend position',
+        defaultMessage: 'Legend',
       }),
     getLegendHelp: () =>
       i18n.translate('xpack.canvas.uis.views.pie.args.legendLabel', {
@@ -714,7 +740,7 @@ export const ViewStrings = {
       }),
     getLegendDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.plot.args.legendTitle', {
-        defaultMessage: 'Legend position',
+        defaultMessage: 'Legend',
       }),
     getLegendHelp: () =>
       i18n.translate('xpack.canvas.uis.views.plot.args.legendLabel', {
@@ -744,7 +770,7 @@ export const ViewStrings = {
       }),
     getBarColorHelp: () =>
       i18n.translate('xpack.canvas.uis.views.progress.args.barColorLabel', {
-        defaultMessage: 'Accepts HEX, RGB or HTML Color names',
+        defaultMessage: 'Accepts HEX, RGB or HTML color names',
       }),
     getBarWeightDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.progress.args.barWeightTitle', {
@@ -930,7 +956,7 @@ export const ViewStrings = {
       }),
     getBorderHelp: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.borderLabel', {
-        defaultMessage: 'Accepts HEX, RGB or HTML Color names',
+        defaultMessage: 'Accepts HEX, RGB or HTML color names',
       }),
     getBorderWidthDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.borderWidthTitle', {
@@ -950,22 +976,19 @@ export const ViewStrings = {
       }),
     getFillHelp: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.fillLabel', {
-        defaultMessage: 'Accepts HEX, RGB or HTML Color names',
+        defaultMessage: 'Accepts HEX, RGB or HTML color names',
       }),
     getMaintainAspectDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectTitle', {
-        defaultMessage: 'Maintain aspect ratio',
+        defaultMessage: 'Fixed ratio',
       }),
     getMaintainAspectHelp: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectLabel', {
-        defaultMessage: `Select '{true}' to maintain aspect ratio`,
-        values: {
-          true: BOOLEAN_TRUE,
-        },
+        defaultMessage: `Enable to maintain aspect ratio`,
       }),
     getShapeDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.shape.args.shapeTitle', {
-        defaultMessage: 'Select a shape',
+        defaultMessage: 'Select shape',
       }),
   },
   Table: {
@@ -988,7 +1011,7 @@ export const ViewStrings = {
       }),
     getPerPageDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.table.args.perPageTitle', {
-        defaultMessage: 'Rows per page',
+        defaultMessage: 'Rows',
       }),
     getPerPageHelp: () =>
       i18n.translate('xpack.canvas.uis.views.table.args.perPageLabel', {
@@ -1022,7 +1045,7 @@ export const ViewStrings = {
       }),
     getFilterGroupDisplayName: () =>
       i18n.translate('xpack.canvas.uis.views.timefilter.args.filterGroupTitle', {
-        defaultMessage: 'Filter group name',
+        defaultMessage: 'Filter group',
       }),
     getFilterGroupHelp: () =>
       i18n.translate('xpack.canvas.uis.views.timefilter.args.filterGroupLabel', {
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
index f2cdb1444ef23a..15676d2b02490f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
@@ -1,3 +1,7 @@
+.canvasArg__addArg {
+  margin-right: -$euiSizeS;
+}
+
 .canvasArg__addPopover {
   width: 250px;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
index e771c978d491b2..9cc6f870b9bded 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
@@ -33,6 +33,7 @@ export const ArgAddPopover = ({ options }: Props) => {
       iconType="plusInCircle"
       aria-label={strings.getAddAriaLabel()}
       onClick={handleClick}
+      className="canvasArg__addArg"
     />
   );
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
index bef58d6bb6f5fa..3fc220d41d551a 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
@@ -8,6 +8,14 @@
 
 .canvasSidebar__panel {
   .canvasArg--expandable:last-child {
+    .canvasArg__accordion {
+      margin-bottom: (-$euiSizeS);
+    }
+
+    .canvasArg__accordion:after {
+      content: none;
+    }
+
     .canvasArg__accordion.euiAccordion-isOpen:after {
       display: none;
     }
@@ -15,12 +23,12 @@
 }
 
 .canvasArg {
-  margin-top: $euiSize;
-
+  margin-top: $euiSizeS;
+}
 
-  .canvasArg--remove {
-    visibility: hidden;
-  }
+.canvasArg__remove {
+  min-width: $euiSize;
+  padding: $euiSizeXS 0;
 }
 
 .canvasArg__content {
@@ -29,47 +37,18 @@
 
 .canvasArg__form {
   position: relative;
-
-}
-
-.canvasArg__form,
-.canvasArg__accordion {
-  &:hover {
-    .canvasArg__remove {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
 }
 
 .canvasArg__tooltip {
   margin-left: -$euiSizeXL;
 }
 
-.canvasArg__remove {
-  position: absolute;
-  right: -$euiSizeL;
-  top: $euiSizeS - 2px;
-  border-radius: $euiBorderRadius;
-  border: $euiBorderThin;
-  background: $euiColorEmptyShade;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
-  transition-delay: $euiAnimSpeedSlow;
-}
-
 .canvasArg__accordion {
-  padding: $euiSizeS $euiSize;
-  margin: 0 (-$euiSize);
+  padding: $euiSizeS $euiSizeM;
+  margin: 0 (-$euiSizeM);
   background: $euiColorLightestShade;
   position: relative;
 
-  // different spacing means leff shift
-  .canvasArg__remove {
-    right: -$euiSizeM;
-  }
-
   // don't let remove button position here if this is nested in an accordion
   .canvasArg__form {
     position: static;
@@ -97,3 +76,8 @@
     bottom: 0;
   }
 }
+
+// this is a workaround since an EuiFormRow label cannot be passed in toggle.js
+.canvasArg__switch {
+  padding-top: calc(#{$euiSizeS} * .75);
+}
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_label.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_label.js
index 143ce670d25f66..4324eed0892a59 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_label.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_label.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiAccordion, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiAccordion, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui';
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 
 export const ArgLabel = props => {
@@ -32,7 +32,17 @@ export const ArgLabel = props => {
         </EuiAccordion>
       ) : (
         simpleArg && (
-          <EuiFormRow display="rowCompressed" label={label} helpText={help} id={argId}>
+          <EuiFormRow
+            display="columnCompressed"
+            label={
+              <EuiToolTip content={help}>
+                <span>
+                  {label} <EuiIcon type="iInCircle" color="subdued" />
+                </span>
+              </EuiToolTip>
+            }
+            id={argId}
+          >
             {simpleArg}
           </EuiFormRow>
         )
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
index 5b45772c143730..846f912db6f84b 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
@@ -6,7 +6,7 @@
 
 import React, { ReactNode, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { TooltipIcon, IconType } from '../tooltip_icon';
 
 import { ComponentStrings } from '../../../i18n';
@@ -41,13 +41,16 @@ export const ArgSimpleForm: React.FunctionComponent<Props> = ({
       )}
 
       {!required && (
-        <EuiButtonIcon
-          color="danger"
-          onClick={onRemove}
-          iconType="trash"
-          aria-label={strings.getRemoveAriaLabel()}
-          className="canvasArg__remove"
-        />
+        <EuiToolTip position="top" content={strings.getRemoveAriaLabel()}>
+          <EuiButtonIcon
+            color="subdued"
+            onClick={onRemove}
+            iconType="cross"
+            iconSize="s"
+            aria-label={strings.getRemoveAriaLabel()}
+            className="canvasArg__remove"
+          />
+        </EuiToolTip>
       )}
     </EuiFlexGroup>
   );
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss
index ee6c082db12178..2407dcbbce5939 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss
@@ -6,6 +6,31 @@
   padding: 0 $euiSizeS;
 }
 
+.canvasDataSource__section {
+  padding: $euiSizeM;
+}
+
+.canvasDataSource__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
+}
+
+.canvasDataSource__triggerButtonIcon {
+  margin-right: $euiSizeS;
+}
+
+.canvasDataSource__list {
+  padding: $euiSizeM;
+}
+
+.canvasDataSource__card .euiCard__content {
+  padding-top: 0 !important; // sass-lint:disable-line no-important
+}
+
 .canvasDataSource__card + .canvasDataSource__card {
   margin-top: $euiSizeS;
 }
+
+.canvasDataSource__card--isCurrent {
+  border-color: $euiColorSecondary;
+}
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js
index 5f235d44791713..8b0061e047f33f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js
@@ -7,20 +7,23 @@
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import {
-  EuiPanel,
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
-  EuiButtonEmpty,
   EuiSpacer,
+  EuiIcon,
+  EuiCallOut,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { isEqual } from 'lodash';
-import { ComponentStrings } from '../../../i18n';
+import { ComponentStrings, DataSourceStrings } from '../../../i18n';
 import { getDefaultIndex } from '../../lib/es_service';
 import { DatasourceSelector } from './datasource_selector';
 import { DatasourcePreview } from './datasource_preview';
 
 const { DatasourceDatasourceComponent: strings } = ComponentStrings;
+const { DemoData: demoDataStrings } = DataSourceStrings;
 
 export class DatasourceComponent extends PureComponent {
   static propTypes = {
@@ -113,7 +116,13 @@ export class DatasourceComponent extends PureComponent {
     const { defaultIndex } = this.state;
 
     if (selecting) {
-      return <DatasourceSelector datasources={datasources} onSelect={this.setSelectedDatasource} />;
+      return (
+        <DatasourceSelector
+          datasources={datasources}
+          onSelect={this.setSelectedDatasource}
+          current={stateDatasource.name}
+        />
+      );
     }
 
     const datasourcePreview = previewing ? (
@@ -124,47 +133,51 @@ export class DatasourceComponent extends PureComponent {
       />
     ) : null;
 
+    const datasourceRender = stateDatasource.render({
+      args: stateArgs,
+      updateArgs,
+      datasourceDef,
+      isInvalid,
+      setInvalid,
+      defaultIndex,
+    });
+
     return (
       <Fragment>
-        <EuiPanel>
+        <div className="canvasDataSource__section">
           <EuiButtonEmpty
             iconSide="right"
-            flush="left"
-            iconType="sortRight"
+            iconType="arrowRight"
             onClick={() => setSelecting(!selecting)}
+            className="canvasDataSource__triggerButton"
+            flush="left"
+            size="s"
           >
-            {strings.getChangeButtonLabel()}
+            <EuiIcon type="database" className="canvasDataSource__triggerButtonIcon" />
+            {stateDatasource.displayName}
           </EuiButtonEmpty>
           <EuiSpacer size="s" />
-          {stateDatasource.render({
-            args: stateArgs,
-            updateArgs,
-            datasourceDef,
-            isInvalid,
-            setInvalid,
-            defaultIndex,
-          })}
-          <EuiSpacer size="m" />
+          {stateDatasource.name === 'demodata' ? (
+            <EuiCallOut title={demoDataStrings.getHeading()} iconType="iInCircle">
+              {datasourceRender}
+            </EuiCallOut>
+          ) : (
+            datasourceRender
+          )}
+          <EuiHorizontalRule margin="m" />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
             <EuiFlexItem grow={false}>
-              <EuiButton size="s" onClick={() => setPreviewing(true)} icon="check">
+              <EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
                 {strings.getPreviewButtonLabel()}
-              </EuiButton>
+              </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
-                disabled={isInvalid}
-                size="s"
-                color="secondary"
-                fill
-                onClick={this.save}
-                icon="check"
-              >
+              <EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
                 {strings.getSaveButtonLabel()}
               </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPanel>
+        </div>
 
         {datasourcePreview}
       </Fragment>
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
index e6d2fe550a9356..13cd2c5cd11f7b 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
@@ -16,6 +16,7 @@ import {
   EuiPanel,
   EuiText,
   EuiEmptyPrompt,
+  EuiSpacer,
 } from '@elastic/eui';
 import { Datatable } from '../../datatable';
 import { Error } from '../../error';
@@ -31,21 +32,22 @@ export const DatasourcePreview = ({ done, datatable }) => (
         <EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody className="canvasDatasourcePreview">
-        <EuiText size="s" color="subdued">
+        <EuiText size="s">
           <p>
             <FormattedMessage
               id="xpack.canvas.datasourceDatasourcePreview.modalDescription"
-              defaultMessage="Click {saveLabel} in the sidebar to use this data."
+              defaultMessage="The following data will be available to the selected element upon clicking {saveLabel} in the sidebar."
               values={{
                 saveLabel: <strong>{datasourceStrings.getSaveButtonLabel()}</strong>,
               }}
             />
           </p>
         </EuiText>
+        <EuiSpacer />
         {datatable.type === 'error' ? (
           <Error payload={datatable} />
         ) : (
-          <EuiPanel className="canvasDatasourcePreview__panel">
+          <EuiPanel className="canvasDatasourcePreview__panel" paddingSize="none">
             {datatable.rows.length > 0 ? (
               <Datatable datatable={datatable} showHeader paginate />
             ) : (
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js
index 07df2a7007c4f2..92f9b92cb1f06e 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js
@@ -8,17 +8,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiCard, EuiIcon } from '@elastic/eui';
 
-export const DatasourceSelector = ({ onSelect, datasources }) => (
-  <div>
+export const DatasourceSelector = ({ onSelect, datasources, current }) => (
+  <div className="canvasDataSource__list">
     {datasources.map(d => (
       <EuiCard
         key={d.name}
         title={d.displayName}
-        icon={<EuiIcon type={d.image} size="xxl" />}
-        onClick={() => onSelect(d.name)}
+        titleElement="h5"
+        icon={<EuiIcon type={d.image} size="l" />}
         description={d.help}
         layout="horizontal"
         className="canvasDataSource__card"
+        selectable={{
+          isSelected: d.name === current ? true : false,
+          onClick: () => onSelect(d.name),
+        }}
       />
     ))}
   </div>
@@ -27,4 +31,5 @@ export const DatasourceSelector = ({ onSelect, datasources }) => (
 DatasourceSelector.propTypes = {
   onSelect: PropTypes.func.isRequired,
   datasources: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/no_datasource.js b/x-pack/legacy/plugins/canvas/public/components/datasource/no_datasource.js
index caafa068c6b5ba..f531ee1668aef1 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/no_datasource.js
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/no_datasource.js
@@ -6,18 +6,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiPanel, EuiText } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
 
 import { ComponentStrings } from '../../../i18n';
 const { DatasourceNoDatasource: strings } = ComponentStrings;
 
 export const NoDatasource = () => (
-  <EuiPanel>
-    <EuiText>
-      <h4>{strings.getPanelTitle()}</h4>
+  <div className="canvasDataSource__section">
+    <EuiCallOut title={strings.getPanelTitle()} iconType="iInCircle">
       <p>{strings.getPanelDescription()}</p>
-    </EuiText>
-  </EuiPanel>
+    </EuiCallOut>
+  </div>
 );
 
 NoDatasource.propTypes = {
diff --git a/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss b/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
index daccfdff5d34b7..bd11bff18e0917 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  font-size: $euiFontSizeS;
 
   .canvasDataTable__tableWrapper {
     @include euiScrollBar;
@@ -12,7 +13,8 @@
     overflow: auto;
 
     // removes white square in the scrollbar corner
-    &::-webkit-scrollbar-corner { // sass-lint:disable-line no-vendor-prefixes
+    // sass-lint:disable no-vendor-prefixes
+    &::-webkit-scrollbar-corner {
       background: transparent;
     }
   }
@@ -21,6 +23,8 @@
     width: 100%;
     display: flex;
     justify-content: space-around;
+    padding: $euiSizeS;
+    border-top: $euiBorderThin;
   }
 
   .canvasDataTable__table {
@@ -30,7 +34,8 @@
   .canvasDataTable__th,
   .canvasDataTable__td {
     text-align: left;
-    padding: $euiSizeS;
+    padding: $euiSizeS $euiSizeXS;
+    border-bottom: $euiBorderThin;
   }
 
   .canvasDataTable__th {
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js b/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js
index 76007994e56bf3..5d710ef8835482 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js
+++ b/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiAccordion, EuiText, EuiSpacer } from '@elastic/eui';
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { ComponentStrings } from '../../../i18n';
 
 const { ElementConfig: strings } = ComponentStrings;
@@ -20,26 +20,51 @@ export const ElementConfig = ({ elementStats }) => {
   const progress = total > 0 ? Math.round(((ready + error) / total) * 100) : 100;
 
   return (
-    <Fragment>
-      <EuiTitle size="xs">
-        <h4>{strings.getTitle()}</h4>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiFlexGroup>
+    <EuiAccordion
+      id="canvas-element-stats"
+      buttonContent={
+        <EuiText size="s" color="subdued">
+          {strings.getTitle()}
+        </EuiText>
+      }
+      initialIsOpen={false}
+    >
+      <EuiSpacer size="s" />
+      <EuiFlexGroup gutterSize="none">
         <EuiFlexItem>
-          <EuiStat title={total} description={strings.getTotalLabel()} titleSize="s" />
+          <EuiStat
+            title={total}
+            description={strings.getTotalLabel()}
+            titleSize="xs"
+            textAlign="center"
+          />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={ready} description={strings.getLoadedLabel()} titleSize="s" />
+          <EuiStat
+            title={ready}
+            description={strings.getLoadedLabel()}
+            titleSize="xs"
+            textAlign="center"
+          />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={error} description={strings.getFailedLabel()} titleSize="s" />
+          <EuiStat
+            title={error}
+            description={strings.getFailedLabel()}
+            titleSize="xs"
+            textAlign="center"
+          />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={progress + '%'} description={strings.getProgressLabel()} titleSize="s" />
+          <EuiStat
+            title={progress + '%'}
+            description={strings.getProgressLabel()}
+            titleSize="xs"
+            textAlign="center"
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
-    </Fragment>
+    </EuiAccordion>
   );
 };
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/es_field_select/es_field_select.js b/x-pack/legacy/plugins/canvas/public/components/es_field_select/es_field_select.js
index 636d9b0006ac61..11c8ab88a4cba6 100644
--- a/x-pack/legacy/plugins/canvas/public/components/es_field_select/es_field_select.js
+++ b/x-pack/legacy/plugins/canvas/public/components/es_field_select/es_field_select.js
@@ -28,6 +28,7 @@ export const ESFieldSelect = ({ value, fields = [], onChange, onFocus, onBlur })
       onBlur={onBlur}
       singleSelection={{ asPlainText: true }}
       isClearable={false}
+      compressed
     />
   );
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/es_fields_select/es_fields_select.js b/x-pack/legacy/plugins/canvas/public/components/es_fields_select/es_fields_select.js
index fedb4aba7d3d09..ca2cac5a647931 100644
--- a/x-pack/legacy/plugins/canvas/public/components/es_fields_select/es_fields_select.js
+++ b/x-pack/legacy/plugins/canvas/public/components/es_fields_select/es_fields_select.js
@@ -25,6 +25,7 @@ export const ESFieldsSelect = ({ selected, fields, onChange, onFocus, onBlur })
       className="canvasFieldsSelect"
       onFocus={onFocus}
       onBlur={onBlur}
+      compressed
     />
   );
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/es_index_select/es_index_select.js b/x-pack/legacy/plugins/canvas/public/components/es_index_select/es_index_select.js
index edc4506f20bda4..8f1a4932a5e6ce 100644
--- a/x-pack/legacy/plugins/canvas/public/components/es_index_select/es_index_select.js
+++ b/x-pack/legacy/plugins/canvas/public/components/es_index_select/es_index_select.js
@@ -32,6 +32,7 @@ export const ESIndexSelect = ({ value, loading, indices, onChange, onFocus, onBl
       singleSelection={{ asPlainText: true }}
       isClearable={false}
       onCreateOption={input => onChange(input || defaultIndex)}
+      compressed
     />
   );
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js b/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
index 2586b4ec61f04e..583bf1427aab1f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
+++ b/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
@@ -6,7 +6,15 @@
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiCard, EuiFormRow, EuiTitle, EuiSpacer, EuiSelect } from '@elastic/eui';
+import {
+  EuiCard,
+  EuiFormRow,
+  EuiTitle,
+  EuiSpacer,
+  EuiSelect,
+  EuiToolTip,
+  EuiIcon,
+} from '@elastic/eui';
 import { WorkpadColorPicker } from '../workpad_color_picker';
 import { ComponentStrings } from '../../../i18n';
 
@@ -22,14 +30,20 @@ export const PageConfig = ({
 }) => {
   return (
     <Fragment>
-      <EuiTitle size="xs">
+      <EuiTitle size="xxxs" className="canvasSidebar__panelTitleHeading">
         <h4>{strings.getTitle()}</h4>
       </EuiTitle>
-      <EuiSpacer size="m" />
+      <EuiSpacer size="s" />
       <EuiFormRow
-        display="rowCompressed"
-        label={strings.getBackgroundColorLabel()}
-        helpText={strings.getBackgroundColorDescription()}
+        display="columnCompressed"
+        label={
+          <EuiToolTip content={strings.getBackgroundColorDescription()}>
+            <span>
+              {strings.getBackgroundColorLabel()}{' '}
+              <EuiIcon type="questionInCircle" color="subdued" />
+            </span>
+          </EuiToolTip>
+        }
       >
         <WorkpadColorPicker onChange={setBackground} value={background} />
       </EuiFormRow>
diff --git a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.examples.storyshot
index 426c07dac497ec..a23452a43ae1e4 100644
--- a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.examples.storyshot
@@ -13,20 +13,24 @@ exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
   <div
     className="euiPopover__anchor"
   >
-    <button
-      className="euiLink euiLink--primary"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontSize": 0,
-        }
-      }
-      type="button"
+    <div
+      className="euiPanel euiPanel--paddingSmall"
     >
-      <div
-        className="canvasShapePreview"
-      />
-    </button>
+      <button
+        className="euiLink euiLink--primary"
+        onClick={[Function]}
+        style={
+          Object {
+            "fontSize": 0,
+          }
+        }
+        type="button"
+      >
+        <div
+          className="canvasShapePreview"
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -44,27 +48,31 @@ exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
   <div
     className="euiPopover__anchor"
   >
-    <button
-      className="euiLink euiLink--primary"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontSize": 0,
-        }
-      }
-      type="button"
+    <div
+      className="euiPanel euiPanel--paddingSmall"
     >
-      <div
-        className="canvasShapePreview"
-        dangerouslySetInnerHTML={
+      <button
+        className="euiLink euiLink--primary"
+        onClick={[Function]}
+        style={
           Object {
-            "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
+            "fontSize": 0,
+          }
+        }
+        type="button"
+      >
+        <div
+          className="canvasShapePreview"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
       <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
     </svg>",
+            }
           }
-        }
-      />
-    </button>
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -82,27 +90,31 @@ exports[`Storyshots components/Shapes/ShapePickerPopover shape selected 1`] = `
   <div
     className="euiPopover__anchor"
   >
-    <button
-      className="euiLink euiLink--primary"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontSize": 0,
-        }
-      }
-      type="button"
+    <div
+      className="euiPanel euiPanel--paddingSmall"
     >
-      <div
-        className="canvasShapePreview"
-        dangerouslySetInnerHTML={
+      <button
+        className="euiLink euiLink--primary"
+        onClick={[Function]}
+        style={
           Object {
-            "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
+            "fontSize": 0,
+          }
+        }
+        type="button"
+      >
+        <div
+          className="canvasShapePreview"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
       <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
     </svg>",
+            }
           }
-        }
-      />
-    </button>
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
index 472a14071208a0..970f72da698ba0 100644
--- a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
@@ -6,7 +6,7 @@
 
 import React, { MouseEvent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiLink } from '@elastic/eui';
+import { EuiLink, EuiPanel } from '@elastic/eui';
 import { Popover } from '../popover';
 import { ShapePicker } from '../shape_picker';
 import { ShapePreview } from '../shape_preview';
@@ -21,9 +21,11 @@ interface Props {
 
 export const ShapePickerPopover = ({ shapes, onChange, value }: Props) => {
   const button = (handleClick: (ev: MouseEvent) => void) => (
-    <EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
-      <ShapePreview shape={value ? shapes[value] : undefined} />
-    </EuiLink>
+    <EuiPanel paddingSize="s" hasShadow={false}>
+      <EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
+        <ShapePreview shape={value ? shapes[value] : undefined} />
+      </EuiLink>
+    </EuiPanel>
   );
 
   return (
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/group_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/group_settings.examples.storyshot
index dc80af01f121f6..1655320700f87f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/group_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/group_settings.examples.storyshot
@@ -2,13 +2,17 @@
 
 exports[`Storyshots components/Sidebar/GroupSettings default 1`] = `
 <div
-  className="euiText euiText--small"
+  className="canvasSidebar__panel canvasSidebar__panel--isEmpty"
 >
-  <p>
-    Ungroup (U) to edit individual element settings.
-  </p>
-  <p>
-    Save this group as a new element to re-use it throughout your workpad.
-  </p>
+  <div
+    className="euiText euiText--small"
+  >
+    <p>
+      Ungroup (U) to edit individual element settings.
+    </p>
+    <p>
+      Save this group as a new element to re-use it throughout your workpad.
+    </p>
+  </div>
 </div>
 `;
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/multi_element_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/multi_element_settings.examples.storyshot
index b9b13ae36e7308..49e804640081d2 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/multi_element_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/multi_element_settings.examples.storyshot
@@ -2,13 +2,17 @@
 
 exports[`Storyshots components/Sidebar/MultiElementSettings default 1`] = `
 <div
-  className="euiText euiText--small"
+  className="canvasSidebar__panel canvasSidebar__panel--isEmpty"
 >
-  <p>
-    Multiple elements are currently selected.
-  </p>
-  <p>
-    Deselect these elements to edit their individual settings, press (G) to group them, or save this selection as a new element to re-use it throughout your workpad.
-  </p>
+  <div
+    className="euiText euiText--small"
+  >
+    <p>
+      Multiple elements are currently selected.
+    </p>
+    <p>
+      Deselect these elements to edit their individual settings, press (G) to group them, or save this selection as a new element to re-use it throughout your workpad.
+    </p>
+  </div>
 </div>
 `;
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
index 6d884c05cd13ac..74f4887601d30c 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
@@ -6,7 +6,7 @@
 
 import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
+import { EuiTabbedContent } from '@elastic/eui';
 // @ts-ignore unconverted component
 import { Datasource } from '../../datasource';
 // @ts-ignore unconverted component
@@ -30,7 +30,6 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
       name: strings.getDisplayTabLabel(),
       content: (
         <div className="canvasSidebar__pop">
-          <EuiSpacer size="s" />
           <div className="canvasSidebar--args">
             <FunctionFormList element={element} />
           </div>
@@ -42,7 +41,6 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
       name: strings.getDataTabLabel(),
       content: (
         <div className="canvasSidebar__pop">
-          <EuiSpacer size="s" />
           <Datasource />
         </div>
       ),
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/global_config.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/global_config.tsx
index a5920ee1974607..2e241681ccc6a7 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/global_config.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/global_config.tsx
@@ -20,10 +20,10 @@ export const GlobalConfig: FunctionComponent = () => (
       <WorkpadConfig />
     </SidebarSection>
     <SidebarSection>
-      <PageConfig />
+      <ElementConfig />
     </SidebarSection>
     <SidebarSection>
-      <ElementConfig />
+      <PageConfig />
     </SidebarSection>
   </Fragment>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx
index b46465d9ec7755..95d9035774a6ae 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx
@@ -11,8 +11,10 @@ import { ComponentStrings } from '../../../i18n';
 const { GroupSettings: strings } = ComponentStrings;
 
 export const GroupSettings: FunctionComponent = () => (
-  <EuiText size="s">
-    <p>{strings.getUngroupDescription()}</p>
-    <p>{strings.getSaveGroupDescription()}</p>
-  </EuiText>
+  <div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">
+    <EuiText size="s">
+      <p>{strings.getUngroupDescription()}</p>
+      <p>{strings.getSaveGroupDescription()}</p>
+    </EuiText>
+  </div>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
index 2de3a805c95e9b..999c1c2daaf5b5 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
@@ -11,8 +11,10 @@ import { ComponentStrings } from '../../../i18n';
 const { MultiElementSettings: strings } = ComponentStrings;
 
 export const MultiElementSettings: FunctionComponent = () => (
-  <EuiText size="s">
-    <p>{strings.getMultipleElementsDescription()}</p>
-    <p>{strings.getMultipleElementsActionsDescription()}</p>
-  </EuiText>
+  <div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">
+    <EuiText size="s">
+      <p>{strings.getMultipleElementsDescription()}</p>
+      <p>{strings.getMultipleElementsActionsDescription()}</p>
+    </EuiText>
+  </div>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
index f9ce6f3cfb555d..338d515165e43c 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
@@ -2,7 +2,6 @@
   @include euiScrollBar;
 
   width: 100%;
-  padding: $euiSizeM;
   max-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
@@ -25,6 +24,15 @@
   margin-bottom: $euiSizeS;
 }
 
+.canvasSidebar__panel {
+  border-bottom: $euiBorderThin;
+  padding: $euiSizeS $euiSizeM;
+
+  &--isEmpty {
+    border-bottom: none;
+  }
+}
+
 .canvasSidebar__panel-noMinWidth .euiButton {
   min-width: 0;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section.js b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section.js
index 29ca72a9737a1f..bf149a6c2acb89 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section.js
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section.js
@@ -7,10 +7,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { EuiPanel } from '@elastic/eui';
-
 export const SidebarSection = ({ children }) => (
-  <EuiPanel className="canvasSidebar__panel">{children}</EuiPanel>
+  <div className="canvasSidebar__panel">{children}</div>
 );
 
 SidebarSection.propTypes = {
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section_title.js b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section_title.js
index 192786ae86a450..8e1522eae8dcc3 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section_title.js
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section_title.js
@@ -10,7 +10,7 @@ import { EuiTitle, EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
 
 export const SidebarSectionTitle = ({ title, tip, children }) => {
   const formattedTitle = (
-    <EuiTitle size="xxs">
+    <EuiTitle size="xxxs" className="canvasSidebar__panelTitleHeading">
       <h4>{title}</h4>
     </EuiTitle>
   );
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
index 24453fcf0411ed..92b0c50a6be4f5 100644
--- a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,3 +1,7 @@
 .canvasLayout__sidebarHeader {
-  padding: ($euiSizeXS * .5) 0;
+  padding: calc(#{$euiSizeM} + 2px) $euiSizeS;
 }
+
+.canvasLayout__sidebarHeaderWorkpad {
+  padding: calc(#{$euiSizeS} * .75) 0;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js b/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
index 9693540769d50a..1a441814750912 100644
--- a/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
+++ b/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
@@ -105,22 +105,30 @@ export const TextStylePicker = ({
   return (
     <div className="canvasTextStylePicker">
       <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <FontPicker value={family} onSelect={value => doChange('family', value)} />
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSelect
             compressed
             value={size}
             onChange={e => doChange('size', Number(e.target.value))}
             options={fontSizes.map(size => ({ text: String(size), value: size }))}
+            prepend="Size"
           />
         </EuiFlexItem>
-        <EuiFlexItem>
-          <FontPicker value={family} onSelect={value => doChange('family', value)} />
-        </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="s" />
 
-      <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} style={{ fontSize: 0 }}>
+          <ColorPickerPopover
+            value={color}
+            onChange={value => doChange('color', value)}
+            colors={colors}
+          />
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonGroup
             options={styleButtons}
@@ -129,6 +137,7 @@ export const TextStylePicker = ({
             onChange={onStyleChange}
             type="multi"
             isIconOnly
+            className="canvasSidebar__buttonGroup"
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -138,13 +147,7 @@ export const TextStylePicker = ({
             isIconOnly
             idSelected={align}
             onChange={onAlignmentChange}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ fontSize: 0 }}>
-          <ColorPickerPopover
-            value={color}
-            onChange={value => doChange('color', value)}
-            colors={colors}
+            className="canvasSidebar__buttonGroup"
           />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
index ec7386bddace6a..7dfc378432b573 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
@@ -67,9 +67,11 @@ export class WorkpadConfig extends PureComponent {
 
     return (
       <div>
-        <EuiTitle size="xs">
-          <h4>{strings.getTitle()}</h4>
-        </EuiTitle>
+        <div className="canvasLayout__sidebarHeaderWorkpad">
+          <EuiTitle size="xs">
+            <h4>{strings.getTitle()}</h4>
+          </EuiTitle>
+        </div>
 
         <EuiSpacer size="m" />
 
@@ -129,37 +131,38 @@ export class WorkpadConfig extends PureComponent {
         </div>
 
         <EuiSpacer size="m" />
-
-        <EuiAccordion
-          id="accordion-global-css"
-          className="canvasArg__accordion"
-          buttonContent={
-            <EuiToolTip
-              content={strings.getGlobalCSSTooltip()}
-              position="left"
-              className="canvasArg__tooltip"
-            >
-              <EuiText size="s" color="subdued">
-                {strings.getGlobalCSSLabel()}
-              </EuiText>
-            </EuiToolTip>
-          }
-        >
-          <div className="canvasArg__content">
-            <EuiTextArea
-              aria-label={strings.getGlobalCSSTooltip()}
-              value={css}
-              compressed
-              onChange={e => this.setState({ css: e.target.value })}
-              rows={10}
-            />
-            <EuiSpacer size="s" />
-            <EuiButton size="s" onClick={() => setWorkpadCSS(css || DEFAULT_WORKPAD_CSS)}>
-              {strings.getApplyStylesheetButtonLabel()}
-            </EuiButton>
-            <EuiSpacer size="xs" />
-          </div>
-        </EuiAccordion>
+        <div className="canvasArg--expandable">
+          <EuiAccordion
+            id="accordion-global-css"
+            className="canvasArg__accordion"
+            buttonContent={
+              <EuiToolTip
+                content={strings.getGlobalCSSTooltip()}
+                position="left"
+                className="canvasArg__tooltip"
+              >
+                <EuiText size="s" color="subdued">
+                  {strings.getGlobalCSSLabel()}
+                </EuiText>
+              </EuiToolTip>
+            }
+          >
+            <div className="canvasArg__content">
+              <EuiTextArea
+                aria-label={strings.getGlobalCSSTooltip()}
+                value={css}
+                compressed
+                onChange={e => this.setState({ css: e.target.value })}
+                rows={10}
+              />
+              <EuiSpacer size="s" />
+              <EuiButton size="s" onClick={() => setWorkpadCSS(css || DEFAULT_WORKPAD_CSS)}>
+                {strings.getApplyStylesheetButtonLabel()}
+              </EuiButton>
+              <EuiSpacer size="xs" />
+            </div>
+          </EuiAccordion>
+        </div>
       </div>
     );
   }
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
index 5525df639be016..ffe87129c76fae 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -12,7 +12,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
 >
   <div>
     <div
-      className="euiFormRow euiFormRow--compressed"
+      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
     >
       <div
         className="euiFormRow__labelWrapper"
@@ -21,7 +21,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
           className="euiFormLabel euiFormRow__label"
           htmlFor="generated-id"
         >
-          Series Identifier
+          Series id
         </label>
       </div>
       <div
@@ -45,7 +45,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
               <option
                 value=""
               >
-                Select Series
+                Select series
               </option>
               <option
                 value="label1"
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
index 6a27d784ef069a..c843a62702b164 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
@@ -11,23 +11,22 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
   }
 >
   <div
-    className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         Color
-         
       </div>
     </div>
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         <button
           aria-label="Color: Auto"
@@ -35,16 +34,7 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Auto 
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
+          Auto
         </button>
       </div>
     </div>
@@ -63,23 +53,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
   }
 >
   <div
-    className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         Color
-         
       </div>
     </div>
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         <button
           aria-label="Color: Auto"
@@ -87,16 +76,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Auto 
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
+          Auto
         </button>
       </div>
     </div>
@@ -115,23 +95,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
   }
 >
   <div
-    className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         Color
-         
       </div>
     </div>
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         <button
           aria-label="Color: Auto"
@@ -139,16 +118,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Auto 
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
+          Auto
         </button>
       </div>
     </div>
@@ -167,23 +137,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
   }
 >
   <div
-    className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         Color
-         
       </div>
     </div>
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         <button
           aria-label="Color: Auto"
@@ -191,16 +160,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Auto 
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
+          Auto
         </button>
       </div>
     </div>
@@ -242,23 +202,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
   }
 >
   <div
-    className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
   >
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         Color
-         
       </div>
     </div>
     <div
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        className="euiText euiText--small"
+        className="euiText euiText--extraSmall"
       >
         <button
           aria-label="Color: Auto"
@@ -266,16 +225,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Auto 
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
+          Auto
         </button>
       </div>
     </div>
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
index 63e8702e81cb7a..3c0b034da03605 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
@@ -76,7 +76,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
     <div>
       {name !== 'defaultStyle' && (
         <Fragment>
-          <EuiFormRow label={strings.getSeriesIdentifierLabel()} display="rowCompressed">
+          <EuiFormRow label={strings.getSeriesIdentifierLabel()} display="columnCompressed">
             <EuiSelect
               compressed
               value={selectedSeries}
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
index 941878dc11c341..e05c48b97f54a4 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
@@ -6,7 +6,7 @@
 
 import React, { Fragment, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiButtonIcon, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiButtonIcon, EuiText } from '@elastic/eui';
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ColorPickerPopover } from '../../../components/color_picker_popover';
@@ -46,19 +46,19 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" alignItems="center" className="canvasArgSeries__colorPicker">
+    <EuiFlexGroup gutterSize="s" alignItems="center" className="canvasArgSeries__colorPicker">
       {!color || color.length === 0 ? (
         <Fragment>
           <EuiFlexItem grow={false}>
-            <EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
+            <EuiText size="xs">{strings.getColorLabel()}</EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiText size="s">
+            <EuiText size="xs">
               <EuiLink
-                aria-label={`${strings.getColorLabel()}: Auto`}
+                aria-label={`${strings.getColorLabel()}: ${strings.getColorValueDefault()}`}
                 onClick={() => handleChange('color', '#000000')}
               >
-                Auto <EuiIcon type="bolt" />
+                {strings.getColorValueDefault()}
               </EuiLink>
             </EuiText>
           </EuiFlexItem>
@@ -67,7 +67,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
         <Fragment>
           <EuiFlexItem grow={false}>
             <label htmlFor="series-style">
-              <EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
+              <EuiText size="xs">{strings.getColorLabel()}</EuiText>
             </label>
           </EuiFlexItem>
           <EuiFlexItem style={{ fontSize: 0 }}>
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js b/x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js
index 7bb3c6101ff202..eacb7e891b4824 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiSelect, EuiFieldText, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiFormRow, EuiSelect, EuiTextArea, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../lib/arg_helpers';
 import { ESFieldsSelect } from '../../components/es_fields_select';
 import { ESFieldSelect } from '../../components/es_field_select';
@@ -74,45 +74,66 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
 
   return (
     <div>
-      <EuiCallOut size="s" title={strings.getWarningTitle()} color="warning">
+      <EuiCallOut size="s" title={strings.getWarningTitle()} iconType="alert" color="warning">
         <p>{strings.getWarning()}</p>
       </EuiCallOut>
 
       <EuiSpacer size="m" />
 
-      <EuiFormRow label={strings.getIndexTitle()} helpText={strings.getIndexLabel()}>
+      <EuiFormRow
+        label={strings.getIndexTitle()}
+        helpText={strings.getIndexLabel()}
+        display="rowCompressed"
+      >
         <ESIndexSelect value={index} onChange={index => setArg('index', index)} />
       </EuiFormRow>
 
-      <EuiFormRow label={strings.getQueryTitle()} helpText={strings.getQueryLabel()} compressed>
-        <EuiFieldText value={getQuery()} onChange={e => setArg(getArgName(), e.target.value)} />
+      <EuiFormRow
+        label={strings.getQueryTitle()}
+        helpText={strings.getQueryLabel()}
+        display="rowCompressed"
+      >
+        <EuiTextArea
+          value={getQuery()}
+          onChange={e => setArg(getArgName(), e.target.value)}
+          compressed
+        />
+      </EuiFormRow>
+
+      <EuiFormRow
+        label={strings.getFieldsTitle()}
+        helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
+        display="rowCompressed"
+      >
+        <ESFieldsSelect
+          index={index}
+          onChange={fields => setArg('fields', fields.join(', '))}
+          selected={fields}
+        />
       </EuiFormRow>
-      <EuiFormRow label={strings.getSortFieldTitle()} helpText={strings.getSortFieldLabel()}>
+
+      <EuiFormRow
+        label={strings.getSortFieldTitle()}
+        helpText={strings.getSortFieldLabel()}
+        display="columnCompressed"
+      >
         <ESFieldSelect
           index={index}
           value={sortField}
           onChange={field => setArg('sort', [field, sortOrder].join(', '))}
         />
       </EuiFormRow>
+
       <EuiFormRow
         label={strings.getSortOrderTitle()}
         helpText={strings.getSortOrderLabel()}
-        compressed
+        display="columnCompressed"
       >
         <EuiSelect
           value={sortOrder.toLowerCase()}
           onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
           options={sortOptions}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label={strings.getFieldsTitle()}
-        helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
-      >
-        <ESFieldsSelect
-          index={index}
-          onChange={fields => setArg('fields', fields.join(', '))}
-          selected={fields}
+          compressed
         />
       </EuiFormRow>
     </div>
diff --git a/x-pack/legacy/plugins/canvas/public/style/main.scss b/x-pack/legacy/plugins/canvas/public/style/main.scss
index c87d8edb588fd5..3d41649397190c 100644
--- a/x-pack/legacy/plugins/canvas/public/style/main.scss
+++ b/x-pack/legacy/plugins/canvas/public/style/main.scss
@@ -31,7 +31,7 @@ $canvasElementCardWidth: 210px;
 
 .canvasTextArea__code {
   @include euiScrollBar;
-  font-size: $euiFontSize;
+  font-size: $euiFontSizeS;
   font-family: $euiCodeFontFamily;
   width: 100%;
   max-width: 100%;