[EuiExpression] Allow the use of descriptions only

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**

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"

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 => {

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>
   );