Fix for st.metric spacing without delta - #3720
diff --git a/frontend/src/components/elements/Metric/Metric.test.tsx b/frontend/src/components/elements/Metric/Metric.test.tsx
index d4ffc2da1fc7..40ad86891829 100644
--- a/frontend/src/components/elements/Metric/Metric.test.tsx
+++ b/frontend/src/components/elements/Metric/Metric.test.tsx
@@ -24,6 +24,7 @@ const getProps = (elementProps: Partial<MetricProto> = {}): MetricProps => ({
   element: MetricProto.create({
     color: MetricProto.MetricColor.RED,
     direction: MetricProto.MetricDirection.UP,
+    delta: "test",
     ...elementProps,
   }),
 })
@@ -54,21 +55,10 @@ describe("Metric element", () => {
     const props = getProps({
       color: MetricProto.MetricColor.GRAY,
       direction: MetricProto.MetricDirection.NONE,
+      delta: "",
     })
     const wrapper = mount(<Metric {...props} />)
-    expect(
-      wrapper
-        .find("StyledMetricDeltaText")
-        .find("div")
-        .at(1)
-        .text()
-    ).toBe("  ")
-    expect(
-      wrapper
-        .find("StyledMetricDeltaText")
-        .find("span")
-        .text()
-    ).toBe("")
+    expect(wrapper.find("StyledMetricDeltaText").exists()).toBe(false)
   })
 
   it("renders correct gray based on props", () => {
diff --git a/frontend/src/components/elements/Metric/Metric.tsx b/frontend/src/components/elements/Metric/Metric.tsx
index 1535f348b5a2..24a6314d0dba 100644
--- a/frontend/src/components/elements/Metric/Metric.tsx
+++ b/frontend/src/components/elements/Metric/Metric.tsx
@@ -67,6 +67,8 @@ export default function Metric({ element }: MetricProps): ReactElement {
 
   const arrowMargin = "0 threeXS 0 0"
   const deltaStyle = { color }
+  const deltaExists = element.delta !== ""
+
   return (
     <div data-testid="metric-container">
       <StyledMetricLabelText data-testid="stMetricLabel">
@@ -75,10 +77,12 @@ export default function Metric({ element }: MetricProps): ReactElement {
       <StyledMetricValueText data-testid="stMetricValue">
         <StyledTruncateText> {element.body} </StyledTruncateText>
       </StyledMetricValueText>
-      <StyledMetricDeltaText data-testid="stMetricDelta" style={deltaStyle}>
-        <Icon content={direction} size="lg" margin={arrowMargin} />
-        <StyledTruncateText> {element.delta} </StyledTruncateText>
-      </StyledMetricDeltaText>
+      {deltaExists && (
+        <StyledMetricDeltaText data-testid="stMetricDelta" style={deltaStyle}>
+          <Icon content={direction} size="lg" margin={arrowMargin} />
+          <StyledTruncateText> {element.delta} </StyledTruncateText>
+        </StyledMetricDeltaText>
+      )}
     </div>
   )
 }

Fix for st.metric spacing bug - when there is no delta, unnecessary spacing caused by rendering of empty StyledMetricDeltaText component. Now, only render StyledMetricDeltaText component when there is a Delta.

**After:**
<img width="240" alt="Screen Shot 2021-09-14 at 5 51 50 PM" src="https://user-images.githubusercontent.com/63436329/133352792-02bd6cd2-b51a-4c50-b79e-efd168982b5f.png">

close #3720