Add display, descriptionWidth, textWrap and isInvalid props to EuiExpression

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))
 - Added `left-start` popover placement to `EuiDatePicker` ([#3511](https://github.com/elastic/eui/pull/3511))
+- Added `display`, `descriptionWidth`, `textWrap` and `isInvalid` props to `EuiExpression` ([#3467](https://github.com/elastic/eui/pull/3467))
 
 **Bug Fixes**
 
@@ -30,6 +31,7 @@
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
 - Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
+- Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 
 **Bug Fixes**

src-docs/src/views/expression/columns.js

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+
+import {
+  EuiPopoverTitle,
+  EuiPopover,
+  EuiSelect,
+  EuiComboBox,
+  EuiExpression,
+  EuiTitle,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => {
+  const [example1, setExample1] = useState({
+    isOpen: false,
+    value: '.kibana_task_manager',
+  });
+
+  const [example2, setExample2] = useState({
+    isOpen: false,
+    value: 'count()',
+  });
+
+  const options = [
+    {
+      label: '.kibana_task_manager',
+    },
+    {
+      label: 'kibana_sample_data_ecommerce',
+    },
+    {
+      label: '.kibana-event-log-8.0.0-000001',
+    },
+    {
+      label: 'kibana_sample_data_flights',
+    },
+    {
+      label: '.kibana-event-log-8.0.0',
+    },
+  ];
+
+  const [selectedOptions, setSelected] = useState([options[0]]);
+
+  const openExample1 = () => {
+    setExample1({
+      ...example1,
+      isOpen: !example1.isOpen,
+    });
+    setExample2({
+      ...example2,
+      isOpen: false,
+    });
+  };
+
+  const closeExample1 = () => {
+    setExample1({
+      ...example1,
+      isOpen: false,
+    });
+  };
+
+  const openExample2 = () => {
+    setExample1({
+      ...example1,
+      isOpen: false,
+    });
+    setExample2({
+      ...example2,
+      isOpen: true,
+    });
+  };
+
+  const closeExample2 = () => {
+    setExample2({
+      ...example2,
+      isOpen: false,
+    });
+  };
+
+  const changeExample2 = e => {
+    setExample2({
+      value: e.target.value,
+      isOpen: false,
+    });
+  };
+
+  const onChange = selectedOptions => {
+    setSelected(selectedOptions);
+    const indices = selectedOptions.map((s, index) => {
+      return (
+        <p key={index}>
+          {s.label}
+          {index < selectedOptions.length - 1 ? ',' : null}
+        </p>
+      );
+    });
+    setExample1({
+      ...example1,
+      value: indices,
+    });
+  };
+
+  const renderPopover1 = () => (
+    <div style={{ width: 300 }}>
+      <EuiPopoverTitle>INDICES</EuiPopoverTitle>
+      <EuiComboBox
+        placeholder="Select one or more indices"
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        isClearable={true}
+        data-test-subj="demoComboBox"
+      />
+    </div>
+  );
+
+  const renderPopover2 = () => (
+    <div style={{ width: 150 }}>
+      <EuiPopoverTitle>WHEN</EuiPopoverTitle>
+      <EuiSelect
+        compressed
+        value={example2.value}
+        onChange={changeExample2}
+        options={[
+          {
+            value: 'count()',
+            text: 'count()',
+          },
+          {
+            value: 'sum()',
+            text: 'sum()',
+          },
+          {
+            value: 'min()',
+            text: 'min()',
+          },
+          { value: 'max()', text: 'max()' },
+        ]}
+      />
+    </div>
+  );
+
+  return (
+    <div style={{ maxWidth: 500 }}>
+      <EuiPopover
+        id="popover1"
+        button={
+          <EuiExpression
+            description="indices"
+            display="columns"
+            value={example1.value}
+            isInvalid={
+              selectedOptions && selectedOptions.length > 0 ? false : true
+            }
+            isActive={example1.isOpen}
+            onClick={openExample1}
+          />
+        }
+        isOpen={example1.isOpen}
+        closePopover={closeExample1}
+        ownFocus
+        display="block"
+        panelPaddingSize="s"
+        anchorPosition="downLeft">
+        {renderPopover1()}
+      </EuiPopover>
+
+      <EuiPopover
+        id="popover2"
+        panelPaddingSize="s"
+        button={
+          <EuiExpression
+            description="when"
+            display="columns"
+            value={example2.value}
+            isActive={example2.isOpen}
+            onClick={openExample2}
+          />
+        }
+        isOpen={example2.isOpen}
+        closePopover={closeExample2}
+        ownFocus
+        display="block"
+        anchorPosition="downLeft">
+        {renderPopover2()}
+      </EuiPopover>
+      <EuiExpression
+        display="columns"
+        description="Except"
+        value="kibana_sample_data_ky_counties"
+      />
+      <EuiSpacer />
+      <EuiTitle size="xxs">
+        <h3>Description width at 50px</h3>
+      </EuiTitle>
+      <EuiExpression
+        description="join"
+        display="columns"
+        descriptionWidth={50}
+        value="kibana_sample_data_ky_avl"
+        onClick={() => {}}
+      />
+    </div>
+  );
+};

src-docs/src/views/expression/expression_example.js

@@ -43,6 +43,33 @@ const stringingSnippet = `<div>
   />
 </div>`;
 
+import Columns from './columns';
+const columnsSource = require('!!raw-loader!./columns');
+const columnsHtml = renderToHtml(Columns);
+const columnsSnippet = `<EuiExpression
+  description="description"
+  display="columns"
+  value={value}
+/>`;
+
+import Invalid from './invalid';
+const invalidSource = require('!!raw-loader!./invalid');
+const invalidHtml = renderToHtml(Invalid);
+const invalidSnippet = `<EuiExpression
+  description="description"
+  isInvalid
+  value={value}
+/>`;
+
+import Truncate from './truncate';
+const truncateSource = require('!!raw-loader!./truncate');
+const truncateHtml = renderToHtml(Truncate);
+const truncateSnippet = `<EuiExpression
+  description="description"
+  value={value}
+  textWrap="truncate"
+/>`;
+
 export const ExpressionExample = {
   title: 'Expression',
   sections: [
@@ -114,5 +141,81 @@ export const ExpressionExample = {
       snippet: stringingSnippet,
       demo: <Stringing />,
     },
+    {
+      title: 'Columns layout',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: columnsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: columnsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            There might be cases where displaying a number of{' '}
+            <strong>EuiExpression</strong>s in a paragraph is not ideal. For
+            example, when both the <EuiCode>description</EuiCode> and the{' '}
+            <EuiCode>value</EuiCode> are variable or when the values they can
+            take can be quite long. To use a columns layout instead, pass{' '}
+            <EuiCode>columns</EuiCode> to the <EuiCode>display</EuiCode> prop.
+          </p>
+          <p>
+            The <EuiCode>description</EuiCode> column is aligned to the right.
+            The default width for it is 20%. You can customize this width via
+            the <EuiCode>descriptionWidth</EuiCode> prop. When displaying a
+            group of <strong>EuiExpression</strong>s, make sure to set the same
+            width for all of them.
+          </p>
+        </div>
+      ),
+      snippet: columnsSnippet,
+      demo: <Columns />,
+    },
+    {
+      title: 'Invalid state',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: invalidSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: invalidHtml,
+        },
+      ],
+      text: (
+        <p>
+          Set <EuiCode>isInvalid</EuiCode> to true to display{' '}
+          <strong>EuiExpression</strong>&apos;s error state.
+        </p>
+      ),
+      snippet: invalidSnippet,
+      demo: <Invalid />,
+    },
+    {
+      title: 'Truncate text',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: truncateSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: truncateHtml,
+        },
+      ],
+      text: (
+        <p>
+          To truncate <strong>EuiExpression</strong>&apos;s content, pass{' '}
+          <EuiCode>truncate</EuiCode> to the <EuiCode>textWrap</EuiCode> prop.
+        </p>
+      ),
+      snippet: truncateSnippet,
+      demo: <Truncate />,
+    },
   ],
 };

src-docs/src/views/expression/invalid.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { EuiExpression, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiExpression
+      onClick={() => {}}
+      description="sort by"
+      value="count"
+      isInvalid
+    />
+    <EuiSpacer />
+    <div style={{ maxWidth: 220 }}>
+      <EuiExpression
+        description="email"
+        display="columns"
+        isInvalid
+        value="example@mail."
+        onClick={() => {}}
+      />
+    </div>
+  </div>
+);

src-docs/src/views/expression/stringing.tsx

@@ -24,6 +24,9 @@ export default () => (
       description="group by"
       value="right.kytccountynmbr"
       onClick={() => {}}
+      color="accent"
+      isInvalid
     />
+    <EuiExpression description="sort by" value="count" isInvalid />
   </div>
 );

src-docs/src/views/expression/truncate.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { EuiExpression, EuiSpacer } from '../../../../src/components';
+
+const value = 'and a very long string as value';
+const description = 'some very very long description';
+
+export default () => (
+  <div style={{ maxWidth: 240 }}>
+    <EuiExpression
+      onClick={() => {}}
+      description={description}
+      value={value}
+      textWrap="truncate"
+    />
+    <EuiSpacer />
+    <EuiExpression
+      description="some very long description"
+      display="columns"
+      text
+      textWrap="truncate"
+      value={value}
+      onClick={() => {}}
+    />
+  </div>
+);