Merge remote-tracking branch 'upstream/master' into feature/virtualiz…

…ed-datagrid

CHANGELOG.md

@@ -2,20 +2,26 @@
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
+- Added a sorting indicator on the `EuiDataGridColumn` which indicates the sorting direction and is being displayed only when the column is sorted ([#4343](https://github.com/elastic/eui/pull/4343))
+- Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 **Bug fixes**
 
 - Fixed `EuiErrorBoundary` error message not showing in non-Chromium browsers ([#4324](https://github.com/elastic/eui/pull/4324))
 - Fixed `EuiToolTip` closing during initial positioning period ([#4327](https://github.com/elastic/eui/pull/4327))
 - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335))
 - Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351))
+- Fixed propagation of `esc` key presses closing parent popovers ([#4336](https://github.com/elastic/eui/pull/4336))
 
 
 **Theme: Amsterdam**
 
 - Removed the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Reduced font size for `xs` size in `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
 - Increased font size for `m` size of `EuiListGroupItem` ([#4340](https://github.com/elastic/eui/pull/4340))
+- Reduced padding in `EuiToolTip` ([#4353](https://github.com/elastic/eui/pull/4353))
+- Reduced border-radius in `EuiRange`'s tooltip ([#4353](https://github.com/elastic/eui/pull/4353))
+- Consolidated `EuiStepNumber` indicators for `EuiSteps` and `EuiHorizontalSteps` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 ## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1)
 

src-docs/src/services/playground/simulateFunction.js

@@ -1,10 +1,13 @@
 import { PropTypes } from 'react-view';
 
-export const simulateFunction = (prop = { custom: {} }) => {
+export const simulateFunction = (
+  prop = { custom: {} },
+  defaultValue = false
+) => {
   const newProp = {
     ...prop,
     type: PropTypes.Custom,
-    value: undefined,
+    value: defaultValue,
     custom: {
       ...prop.custom,
       use: 'switch',

src-docs/src/views/datagrid/datagrid_example.js

@@ -49,7 +49,7 @@ const gridSnippet = `
     columns={[
         { id: 'A', initialWidth: 150, isResizable: false, actions: false },
         { id: 'B', isExpandable: false, actions: { showMoveLeft: false, showMoveRight: false } },
-        { id: 'C', schema: 'franchise', cellActions: [{ label: 'test', iconType: 'heart', callback: ()=> alert('test) }]}
+        { id: 'C', schema: 'franchise', cellActions: [{ label: 'test', iconType: 'heart', callback: ()=> alert('test') }]}
     ]}
     // Optional. This allows you to initially hide columns. Users can still turn them on.
     columnVisibility={{

src-docs/src/views/steps/playground.js

@@ -1,8 +1,10 @@
 import { PropTypes } from 'react-view';
-import { EuiStep } from '../../../../src/components/';
+import { EuiStep, EuiStepHorizontal } from '../../../../src/components/steps';
 import {
   propUtilityForPlayground,
   createOptionalEnum,
+  simulateFunction,
+  dummyFunction,
 } from '../../services/playground';
 
 export const stepConfig = () => {
@@ -36,3 +38,34 @@ export const stepConfig = () => {
     },
   };
 };
+
+export const stepHorizontalConfig = () => {
+  const docgenInfo = Array.isArray(EuiStepHorizontal.__docgenInfo)
+    ? EuiStepHorizontal.__docgenInfo[0]
+    : EuiStepHorizontal.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.title.value = 'Horizontal step';
+
+  propsToUse.status = createOptionalEnum(propsToUse.status);
+
+  propsToUse.onClick = simulateFunction(propsToUse.onClick, true);
+
+  return {
+    config: {
+      componentName: 'EuiStepHorizontal',
+      props: propsToUse,
+      scope: {
+        EuiStepHorizontal,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiStepHorizontal'],
+        },
+      },
+      customProps: {
+        onClick: dummyFunction,
+      },
+    },
+  };
+};

src-docs/src/views/steps/steps.js

@@ -9,39 +9,54 @@ import {
 
 const firstSetOfSteps = [
   {
-    title:
-      'Step 1 with a long title to check what happens during wrapping which should have been fixed.',
-    children: <p>Do this first</p>,
+    title: 'Step 1',
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Step 2',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
 const nextSetOfSteps = [
   {
     title: 'Good step',
-    children: <p>Do this first</p>,
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Better step',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
 export default () => (
   <div>
     <EuiSteps steps={firstSetOfSteps} />
 
+    <EuiSpacer size="m" />
     <EuiText>
-      <EuiSpacer size="m" />
       <p>
         Set <EuiCode>firstStepNumber</EuiCode> to continue step numbering after
         any type of break in the content
       </p>
-      <EuiSpacer size="m" />
     </EuiText>
+    <EuiSpacer size="m" />
 
     <EuiSteps
       firstStepNumber={firstSetOfSteps.length + 1}

src-docs/src/views/steps/steps_complex.js

@@ -7,15 +7,19 @@ import {
   EuiCodeBlock,
   EuiSubSteps,
 } from '../../../../src/components';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 const steps = [
   {
     title: 'Step 1 has intro plus code snippet',
     children: (
-      <EuiText>
-        <p>Run this code snippet to install things.</p>
+      <>
+        <EuiText>
+          <p>Run this code snippet to install things.</p>
+        </EuiText>
+        <EuiSpacer />
         <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
-      </EuiText>
+      </>
     ),
   },
   {
@@ -50,7 +54,7 @@ const steps = [
           Now that you&apos;ve completed step 2, go find the{' '}
           <EuiCode>thing</EuiCode>.
         </p>
-        <p className="euiStep__subSteps">
+        <p>
           Go to <strong>Overview &gt;&gt; Endpoints</strong> note{' '}
           <strong>Elasticsearch</strong> as <EuiCode>&lt;thing&gt;</EuiCode>.
         </p>

src-docs/src/views/steps/steps_example.js

@@ -14,7 +14,7 @@ import {
 
 import { EuiStepHorizontal } from '../../../../src/components/steps/step_horizontal';
 
-import { stepConfig } from './playground';
+import { stepConfig, stepHorizontalConfig } from './playground';
 
 import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
@@ -24,7 +24,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 1',
-      children: <p>Do this first</p>,
+      children: <EuiText><p>Do this first</p></EuiText>,
     },
   ]}
 />`,
@@ -33,7 +33,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 3',
-      children: <p>Do this third first</p>,
+      children: <EuiText><p>Do this third first</p></EuiText>,
     },
   ]}
 />`,
@@ -42,6 +42,51 @@ const stepsSnippet = [
 import StepsComplex from './steps_complex';
 const stepsComplexSource = require('!!raw-loader!./steps_complex');
 const stepsComplexHtml = renderToHtml(StepsComplex);
+const stepsComplexSnippet = [
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 1 has intro plus code snippet',
+      children: (
+        <>
+          <EuiText>
+            <p>Run this code snippet to install things.</p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
+        </>
+      ),
+    },
+  ]}
+/>`,
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 2 has sub steps',
+      children: (
+        <EuiText>
+          <p>
+            In order to complete this step, do the following things <strong>in order</strong>.
+          </p>
+          <EuiSubSteps>
+            <ol>
+              <li>Do thing 1</li>
+              <li>Do thing 2</li>
+              <li>Do thing 3</li>
+            </ol>
+          </EuiSubSteps>
+          <p>Here are some bullet point reminders.</p>
+          <ul>
+            <li>Reminder 1</li>
+            <li>Reminder 2</li>
+            <li>Reminder 3</li>
+          </ul>
+        </EuiText>
+      ),
+    },
+  ]}
+/>`,
+];
 
 import HeadingElementSteps from './heading_element_steps';
 const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
@@ -75,9 +120,7 @@ const statusSnippet = `<EuiSteps
 import StepsTitleSizes from './steps_title_sizes';
 const stepsTitleSizesSource = require('!!raw-loader!./steps_title_sizes');
 const stepsTitleSizesHtml = renderToHtml(StepsTitleSizes);
-const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={[{
-  title: 'Completed step',
-}]} />
+const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={steps} />
 `;
 
 export const StepsExample = {
@@ -97,7 +140,11 @@ export const StepsExample = {
       text: (
         <p>
           <strong>EuiSteps</strong> presents procedural content in a numbered
-          outline format.
+          outline format. It is best used when presenting instructional content
+          that must be conducted in a particular order. It requires a{' '}
+          <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present
+          and will automatically increment the step number based on the initial{' '}
+          <EuiCode>firstStepNumber</EuiCode>.
         </p>
       ),
       props: { EuiSteps, EuiStep },
@@ -125,6 +172,7 @@ export const StepsExample = {
       ),
       demo: <StepsComplex />,
       props: { EuiSubSteps },
+      snippet: stepsComplexSnippet,
     },
     {
       title: 'Heading elements',
@@ -174,7 +222,8 @@ export const StepsExample = {
           Steps can optionally include <EuiCode>status</EuiCode> prop that will
           alter the look of the number prefix. The options are{' '}
           <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>,{' '}
-          <EuiCode>warning</EuiCode>, and <EuiCode>danger</EuiCode>. This is
+          <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>,{' '}
+          <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is
           used mostly as a final step when you need to make some sort of final
           check.
         </p>
@@ -240,5 +289,5 @@ export const StepsExample = {
       props: { EuiStepsHorizontal, EuiStepHorizontal },
     },
   ],
-  playground: stepConfig,
+  playground: [stepConfig, stepHorizontalConfig],
 };

src/components/combo_box/combo_box.tsx

@@ -616,8 +616,11 @@ export class EuiComboBox<T> extends Component<
         break;
 
       case keys.ESCAPE:
-        event.stopPropagation();
-        this.closeList();
+        if (this.state.isListOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.closeList();
+        }
         break;
 
       case keys.ENTER:

src/components/datagrid/_data_grid_header_row.scss

@@ -53,6 +53,10 @@
       outline: none;
     }
 
+    .euiDataGridHeaderCell__sortingArrow {
+      margin-right: $euiSizeXS;
+    }
+
     .euiDataGridHeaderCell__content {
       @include euiTextTruncate;
       overflow: hidden;