Add display, descriptionWidth, textWrap and isInvalid props to EuiExpression

CHANGELOG.md

@@ -5,6 +5,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))
 - Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))
+- Added `truncate` prop to `EuiExpression` ([#3467](https://github.com/elastic/eui/pull/3467))
 
 **Bug Fixes**
 

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

@@ -43,6 +43,15 @@ const stringingSnippet = `<div>
   />
 </div>`;
 
+import Truncate from './truncate';
+const truncateSource = require('!!raw-loader!./truncate');
+const truncateHtml = renderToHtml(Truncate);
+const truncateSnippet = `<EuiExpression
+  description="description"
+  value={value}
+  truncate={true}
+/>`;
+
 export const ExpressionExample = {
   title: 'Expression',
   sections: [
@@ -114,5 +123,30 @@ export const ExpressionExample = {
       snippet: stringingSnippet,
       demo: <Stringing />,
     },
+    {
+      title: 'Truncate text',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: truncateSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: truncateHtml,
+        },
+      ],
+      text: (
+        <p>
+          There might be cases where you need to truncate the text, to do so use
+          the <EuiCode>truncate</EuiCode> prop. You can opt for this option when
+          space is limited and <strong>EuiExpression</strong>&apos;s value can
+          be quite long. When truncating, you can complement{' '}
+          <strong>EuiExpression</strong> with an <strong>EuiToolTip</strong>{' '}
+          displaying its full value.
+        </p>
+      ),
+      snippet: truncateSnippet,
+      demo: <Truncate />,
+    },
   ],
 };

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

@@ -0,0 +1,105 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { EuiExpression } from '../../../../src/components/expression';
+import { EuiToolTip } from '../../../../src/components/tool_tip';
+import { EuiPanel } from '../../../../src/components/panel';
+import {
+  EuiPopoverTitle,
+  EuiPopover,
+} from '../../../../src/components/popover';
+import { EuiSelect } from '../../../../src/components/form/select';
+
+export type TruncateProps = HTMLAttributes<HTMLDivElement>;
+
+interface TruncateState {
+  isOpen: boolean;
+  value: string;
+}
+
+export default class extends Component<TruncateProps, TruncateState> {
+  state = {
+    isOpen: false,
+    value: 'products.discount_percentage',
+  };
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }));
+  };
+
+  closeExample = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  changeExample = (event: any) => {
+    this.setState({
+      value: event.target.value,
+    });
+    this.closeExample();
+  };
+
+  renderPopover = () => (
+    <div style={{ zIndex: 200 }}>
+      <EuiPopoverTitle>Average of</EuiPopoverTitle>
+      <EuiSelect
+        compressed
+        value={this.state.value}
+        onChange={e => this.changeExample(e)}
+        options={[
+          {
+            value: 'products.base_price',
+            text: 'products.base_price',
+          },
+          {
+            value: 'products.base_unit_price',
+            text: 'products.base_unit_price',
+          },
+          {
+            value: 'products.discount_percentage',
+            text: 'products.discount_percentage',
+          },
+          { value: 'day_of_week_i', text: 'day_of_week_i' },
+        ]}
+      />
+    </div>
+  );
+
+  render() {
+    const popOver = (
+      <EuiPopover
+        button={
+          <EuiExpression
+            // truncate={true}
+            style={{ maxWidth: '220px' }}
+            description="Average of"
+            value={this.state.value}
+            isActive={this.state.isOpen}
+            onClick={() => this.togglePopover()}
+          />
+        }
+        isOpen={this.state.isOpen}
+        closePopover={() => this.closeExample()}
+        ownFocus
+        panelPaddingSize="s"
+        anchorPosition="downLeft">
+        {this.renderPopover()}
+      </EuiPopover>
+    );
+
+    return (
+      <div>
+        <EuiPanel paddingSize="l" style={{ width: '272px' }}>
+          {this.state.isOpen ? (
+            popOver
+          ) : (
+            <EuiToolTip content={`AVERAGE OF ${this.state.value}`}>
+              {popOver}
+            </EuiToolTip>
+          )}
+        </EuiPanel>
+      </div>
+    );
+  }
+}

src/components/expression/__snapshots__/expression.test.tsx.snap

@@ -156,7 +156,25 @@ exports[`EuiExpression props isActive true renders active 1`] = `
 </span>
 `;
 
-exports[`EuiExpression props uppercase false renders inherted case 1`] = `
+exports[`EuiExpression props truncate true truncates text 1`] = `
+<span
+  class="euiExpression euiExpression-isUppercase euiExpression-isTruncate euiExpression--secondary"
+>
+  <span
+    class="euiExpression__description"
+  >
+    the answer is
+  </span>
+   
+  <span
+    class="euiExpression__value"
+  >
+    42
+  </span>
+</span>
+`;
+
+exports[`EuiExpression props uppercase false renders inherited case 1`] = `
 <span
   class="euiExpression euiExpression--secondary"
 >

src/components/expression/_expression.scss

@@ -27,6 +27,11 @@
   text-transform: uppercase;
 }
 
+.euiExpression-isTruncate {
+  @include euiTextTruncate;
+  vertical-align: bottom;
+}
+
 .euiExpression-isClickable {
   cursor: pointer;
   border-bottom: $euiBorderEditable;
@@ -57,4 +62,4 @@
       color: $color;
     }
   }
-}
+}

src/components/expression/expression.test.tsx

@@ -70,7 +70,7 @@ describe('EuiExpression', () => {
         expect(render(component)).toMatchSnapshot();
       });
 
-      test('false renders inherted case', () => {
+      test('false renders inherited case', () => {
         const component = (
           <EuiExpression
             description="the answer is"
@@ -83,6 +83,20 @@ describe('EuiExpression', () => {
       });
     });
 
+    describe('truncate', () => {
+      test('true truncates text', () => {
+        const component = (
+          <EuiExpression
+            description="the answer is"
+            value="42"
+            truncate={true}
+          />
+        );
+
+        expect(render(component)).toMatchSnapshot();
+      });
+    });
+
     describe('isActive', () => {
       test('true renders active', () => {
         const component = (

src/components/expression/expression.tsx

@@ -66,6 +66,10 @@ export type EuiExpressionProps = CommonProps & {
    * Turns the component into a button and adds an editable style border at the bottom
    */
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Truncates text
+   */
+  truncate?: boolean;
 };
 
 type Buttonlike = EuiExpressionProps &
@@ -85,6 +89,7 @@ export const EuiExpression: React.FunctionComponent<
   valueProps,
   color = 'secondary',
   uppercase = true,
+  truncate = false,
   isActive = false,
   onClick,
   ...rest
@@ -96,6 +101,7 @@ export const EuiExpression: React.FunctionComponent<
       'euiExpression-isActive': isActive,
       'euiExpression-isClickable': onClick,
       'euiExpression-isUppercase': uppercase,
+      'euiExpression-isTruncate': truncate,
     },
     colorToClassNameMap[color]
   );