From 2dd24240871a3e8a14de20ffb7ba439123ca85ff Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Mon, 7 Sep 2020 22:47:05 +0530
Subject: [PATCH] [EuiExpression] Allow the use of descriptions only (#4014)

* Make value field not required

* Updated snpashot

* changelog
---
 CHANGELOG.md                                      |  1 +
 .../__snapshots__/expression.test.tsx.snap        | 15 +++++++++++++++
 src/components/expression/expression.test.tsx     | 12 ++++++++++++
 src/components/expression/expression.tsx          | 10 ++++++----
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30f38cddb00..517d3540ae9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Changed `value` prop in `EuiExpression` to not required ([#4014](https://github.com/elastic/eui/pull/4014))
 - Added `fold` and `unfold` glyphs to `EuiIcon` ([#3994](https://github.com/elastic/eui/pull/3994))
 
 **Bug fixes**
diff --git a/src/components/expression/__snapshots__/expression.test.tsx.snap b/src/components/expression/__snapshots__/expression.test.tsx.snap
index 9d97367d008..191c32ab740 100644
--- a/src/components/expression/__snapshots__/expression.test.tsx.snap
+++ b/src/components/expression/__snapshots__/expression.test.tsx.snap
@@ -276,6 +276,21 @@ exports[`EuiExpression props uppercase true renders uppercase 1`] = `
 </span>
 `;
 
+exports[`EuiExpression render with only description 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiExpression testClass1 testClass2 euiExpression-isClickable euiExpression-isUppercase euiExpression--secondary"
+  data-test-subj="test subject string"
+>
+  <span
+    class="euiExpression__description"
+  >
+    the answer is
+  </span>
+   
+</button>
+`;
+
 exports[`EuiExpression renders 1`] = `
 <button
   aria-label="aria-label"
diff --git a/src/components/expression/expression.test.tsx b/src/components/expression/expression.test.tsx
index 72778d81e96..1f0317f6741 100644
--- a/src/components/expression/expression.test.tsx
+++ b/src/components/expression/expression.test.tsx
@@ -38,6 +38,18 @@ describe('EuiExpression', () => {
     expect(render(component)).toMatchSnapshot();
   });
 
+  test('render with only description', () => {
+    const component = (
+      <EuiExpression
+        description="the answer is"
+        isActive={false}
+        onClick={() => {}}
+        {...requiredProps}
+      />
+    );
+    expect(render(component)).toMatchSnapshot();
+  });
+
   describe('props', () => {
     describe('color', () => {
       COLORS.forEach(color => {
diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx
index 6c732ee9459..3c3323863e6 100644
--- a/src/components/expression/expression.tsx
+++ b/src/components/expression/expression.tsx
@@ -60,7 +60,7 @@ export type EuiExpressionProps = CommonProps & {
   /**
    * Second part of the expression
    */
-  value: ReactNode;
+  value?: ReactNode;
   valueProps?: HTMLAttributes<HTMLSpanElement>;
   /**
    * Color of the `description`
@@ -170,9 +170,11 @@ export const EuiExpression: FunctionComponent<ExclusiveUnion<
         {...descriptionProps}>
         {description}
       </span>{' '}
-      <span className="euiExpression__value" {...valueProps}>
-        {value}
-      </span>
+      {value && (
+        <span className="euiExpression__value" {...valueProps}>
+          {value}
+        </span>
+      )}
       {invalidIcon}
     </Component>
   );