added test and updated example

elastic · May 13, 2020 · 23dad35 · 23dad35
1 parent faaa6ad
commit 23dad35
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 36 deletions.
diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js
@@ -91,10 +91,7 @@ export default () => {
         onChange={changeExample1}
         options={[
           { value: 'count()', text: 'count()' },
-          {
-            value: 'average()',
-            text: 'average()',
-          },
+          { value: 'average()', text: 'average()' },
           { value: 'sum()', text: 'sum()' },
           { value: 'median()', text: 'median()' },
           { value: 'min()', text: 'min()' },

diff --git a/src-docs/src/views/expression/expression_example.js b/src-docs/src/views/expression/expression_example.js
@@ -46,18 +46,11 @@ const stringingSnippet = `<div>
 import Truncate from './truncate';
 const truncateSource = require('!!raw-loader!./truncate');
 const truncateHtml = renderToHtml(Truncate);
-const truncateSnippet = `<div>
-<EuiExpression
-  description="description1"
-  value={value1}
-  onClick={handleClick1}
-/>
-<EuiExpression
-  description="description2"
-  value={value2}
-  onClick={handleClick2}
-/>
-</div>`;
+const truncateSnippet = `<EuiExpression
+  description="description"
+  value={value}
+  truncate={true}
+/>`;
 
 export const ExpressionExample = {
   title: 'Expression',
@@ -144,12 +137,12 @@ export const ExpressionExample = {
       ],
       text: (
         <p>
-          For scenarios where you might want to truncate the text in{' '}
-          <strong>EuiExpression</strong>. You can opt for this option when space
-          is limited (e.g. a flyout) and/or when the value in{' '}
-          <strong>EuiExpression</strong> can be quite long. When truncating, you
-          can compliment <strong>EuiExpression</strong> with a{' '}
-          <strong>EuiToolTip</strong> displaying its full value.
+          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,

diff --git a/src-docs/src/views/expression/truncate.tsx b/src-docs/src/views/expression/truncate.tsx
@@ -1,5 +1,4 @@
 import React, { Component, HTMLAttributes } from 'react';
-import { CommonProps } from '../../../../src/components/common';
 import { EuiExpression } from '../../../../src/components/expression';
 import { EuiToolTip } from '../../../../src/components/tool_tip';
 import { EuiPanel } from '../../../../src/components/panel';
@@ -9,7 +8,7 @@ import {
 } from '../../../../src/components/popover';
 import { EuiSelect } from '../../../../src/components/form/select';
 
-export type TruncateProps = HTMLAttributes<HTMLDivElement> & CommonProps & {};
+export type TruncateProps = HTMLAttributes<HTMLDivElement>;
 
 interface TruncateState {
   isOpen: boolean;
@@ -90,15 +89,15 @@ export default class extends Component<TruncateProps, TruncateState> {
     );
 
     return (
-      <EuiPanel
-        paddingSize="l"
-        style={{ paddingRight: '32px', width: '260px' }}>
-        {this.state.isOpen ? (
-          popOver
-        ) : (
-          <EuiToolTip content={this.state.value}>{popOver}</EuiToolTip>
-        )}
-      </EuiPanel>
+      <div>
+        <EuiPanel paddingSize="l" style={{ width: '272px' }}>
+          {this.state.isOpen ? (
+            popOver
+          ) : (
+            <EuiToolTip content={this.state.value}>{popOver}</EuiToolTip>
+          )}
+        </EuiPanel>
+      </div>
     );
   }
 }
diff --git a/src/components/expression/__snapshots__/expression.test.tsx.snap b/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"
 >

diff --git a/src/components/expression/_expression.scss b/src/components/expression/_expression.scss
@@ -3,7 +3,7 @@
  *    but then wrap long words
  */
 .euiExpression {
-  // @include euiTextBreakWord; /* 1 */
+  @include euiTextBreakWord; /* 1 */
   @include euiFontSizeS;
   @include euiCodeFont;
 
@@ -30,6 +30,7 @@
 
 .euiExpression-isTruncate {
   @include euiTextTruncate;
+  vertical-align: bottom;
 }
 
 .euiExpression-isClickable {

diff --git a/src/components/expression/expression.test.tsx b/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 = (