Merge pull request #805 from relative-ci/inline-metric

Inline metric
relative-ci · Jul 5, 2020 · 85d874f · 85d874f
2 parents fb046ca + 18687eb
commit 85d874f
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 70 deletions.
diff --git a/packages/ui/src/components/delta/delta.jsx b/packages/ui/src/components/delta/delta.jsx
@@ -4,16 +4,10 @@ import cx from 'classnames';
 
 import css from './delta.module.css';
 
-export const Delta = ({
-  className, displayValue, deltaType,
-}) => {
+export const Delta = ({ className, displayValue, deltaType }) => {
   const rootClassName = cx(css.root, className, css[deltaType]);
 
-  return (
-    <span className={rootClassName}>
-      {displayValue}
-    </span>
-  );
+  return <span className={rootClassName}>{displayValue}</span>;
 };
 
 Delta.defaultProps = {

diff --git a/packages/ui/src/components/delta/delta.module.css b/packages/ui/src/components/delta/delta.module.css
@@ -1,8 +1,5 @@
 .root {
-  display: block;
-  text-align: right;
   white-space: nowrap;
-  letter-spacing: 0.05em;
   color: var(--color-gray-ultra-light);
 }
 

diff --git a/packages/ui/src/components/metric/__snapshots__/metric.stories.storyshot b/packages/ui/src/components/metric/__snapshots__/metric.stories.storyshot
@@ -5,34 +5,96 @@ exports[`Storyshots Components/Metric default 1`] = `
   style={
     Object {
       "height": "100%",
+      "maxWidth": "200px",
       "padding": "24px",
       "width": "100%",
     }
   }
 >
   <Metric
+    anchored={false}
     className=""
     enhanced={false}
     formatter={[Function]}
+    inline={false}
     value={100}
   />
 </div>
 `;
 
+exports[`Storyshots Components/Metric modifier: anchored 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "maxWidth": "200px",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <Metric
+    anchored={true}
+    className=""
+    enhanced={false}
+    formatter={[Function]}
+    inline={false}
+    value={100}
+  >
+    <Delta
+      className=""
+      deltaType="POSITIVE"
+      displayValue="+10%"
+    />
+  </Metric>
+</div>
+`;
+
+exports[`Storyshots Components/Metric modifier: delta 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "maxWidth": "200px",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <Metric
+    anchored={false}
+    className=""
+    enhanced={false}
+    formatter={[Function]}
+    inline={false}
+    value={100}
+  >
+    <Delta
+      className=""
+      deltaType="POSITIVE"
+      displayValue="+10%"
+    />
+  </Metric>
+</div>
+`;
+
 exports[`Storyshots Components/Metric modifier: enhanced 1`] = `
 <div
   style={
     Object {
       "height": "100%",
+      "maxWidth": "200px",
       "padding": "24px",
       "width": "100%",
     }
   }
 >
   <Metric
+    anchored={false}
     className=""
     enhanced={true}
     formatter={[Function]}
+    inline={false}
     value={100}
   />
 </div>
@@ -43,16 +105,47 @@ exports[`Storyshots Components/Metric modifier: formatted value 1`] = `
   style={
     Object {
       "height": "100%",
+      "maxWidth": "200px",
       "padding": "24px",
       "width": "100%",
     }
   }
 >
   <Metric
+    anchored={false}
     className=""
     enhanced={false}
     formatter={[Function]}
+    inline={false}
     value="100KB"
   />
 </div>
 `;
+
+exports[`Storyshots Components/Metric modifier: inline 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "maxWidth": "200px",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <Metric
+    anchored={false}
+    className=""
+    enhanced={false}
+    formatter={[Function]}
+    inline={true}
+    value={100}
+  >
+    <Delta
+      className=""
+      deltaType="POSITIVE"
+      displayValue="+10%"
+    />
+  </Metric>
+</div>
+`;
diff --git a/packages/ui/src/components/metric/metric.jsx b/packages/ui/src/components/metric/metric.jsx
@@ -7,38 +7,38 @@ import styles from './metric.module.css';
 // Separate value and unit
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
 
-export const Metric = ({
-  className, value, formatter, children, enhanced,
-}) => {
+export const Metric = ({ className, value, formatter, inline, anchored, children, enhanced }) => {
   const formattedValue = formatter(value);
 
   // eslint-disable-next-line no-unused-vars
-  const [matched, displayValue, displayUnit] = (enhanced && formattedValue)
-    ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
-    : [null, formattedValue, null];
+  const [matched, displayValue, displayUnit] =
+    enhanced && formattedValue
+      ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
+      : [null, formattedValue, null];
+
+  const rootClassName = cx(
+    className,
+    styles.root,
+    inline && styles.inline,
+    anchored && styles.anchored,
+  );
 
   return (
-    <span className={cx(className, styles.root)}>
-      <div className={styles.display}>
-        <span className={styles.displayValue}>
-          {displayValue}
-        </span>
-        {displayUnit && (
-          <span className={styles.displayUnit}>
-            {displayUnit}
-          </span>
-        )}
-      </div>
-      <span className={styles.delta}>
-        {children}
+    <span className={rootClassName}>
+      <span className={styles.display}>
+        <span className={styles.displayValue}>{displayValue}</span>
+        {displayUnit && <span className={styles.displayUnit}>{displayUnit}</span>}
       </span>
+      <span className={styles.delta}>{children}</span>
     </span>
   );
 };
 
 Metric.defaultProps = {
   className: '',
+  anchored: false,
   enhanced: false,
+  inline: false,
   value: 0,
   children: [],
   formatter: (val) => val,
@@ -47,6 +47,8 @@ Metric.defaultProps = {
 Metric.propTypes = {
   className: PropTypes.string,
   enhanced: PropTypes.bool,
+  inline: PropTypes.bool,
+  anchored: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   formatter: PropTypes.func,
   children: PropTypes.node,

diff --git a/packages/ui/src/components/metric/metric.module.css b/packages/ui/src/components/metric/metric.module.css
@@ -1,6 +1,5 @@
 .root {
   display: block;
-  position: relative;
   letter-spacing: 0.05em;
 }
 
@@ -9,11 +8,23 @@
 }
 
 .delta {
+  display: block;
+  font-size: var(--size-xsmall);
+}
+
+.anchored {
+  position: relative;
+}
+
+.anchored .delta {
   position: absolute;
   right: 0;
   top: 100%;
-  display: block;
-  font-size: var(--size-xsmall);
   line-height: 1;
-  margin-top: -3px;
+  margin-top: -2px;
+}
+
+.inline .delta {
+  display: inline-block;
+  margin: 0 0 0 var(--space-xxxsmall);
 }
diff --git a/packages/ui/src/components/metric/metric.stories.jsx b/packages/ui/src/components/metric/metric.stories.jsx
@@ -2,26 +2,34 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
+import { Delta } from '../delta';
 import { Metric } from '.';
 
 const stories = storiesOf('Components/Metric', module);
-stories.addDecorator(getWrapperDecorator());
+stories.addDecorator(getWrapperDecorator({ maxWidth: '200px' }));
 
-stories.add('default', () => (
-  <Metric
-    value={100}
-    formatter={(v) => `${v}ms`}
-  />
+stories.add('default', () => <Metric value={100} formatter={(v) => `${v}ms`} />);
+
+stories.add('modifier: formatted value', () => <Metric value="100KB" />);
+
+stories.add('modifier: enhanced', () => (
+  <Metric value={100} formatter={(v) => `${v}ms`} enhanced />
 ));
 
-stories.add('modifier: formatted value', () => (
-  <Metric value="100KB" />
+stories.add('modifier: delta', () => (
+  <Metric value={100} formatter={(v) => `${v}ms`}>
+    <Delta displayValue="+10%" deltaType="POSITIVE" />
+  </Metric>
 ));
 
-stories.add('modifier: enhanced', () => (
-  <Metric
-    value={100}
-    formatter={(v) => `${v}ms`}
-    enhanced
-  />
+stories.add('modifier: inline', () => (
+  <Metric value={100} formatter={(v) => `${v}ms`} inline>
+    <Delta displayValue="+10%" deltaType="POSITIVE" />
+  </Metric>
+));
+
+stories.add('modifier: anchored', () => (
+  <Metric value={100} formatter={(v) => `${v}ms`} anchored>
+    <Delta displayValue="+10%" deltaType="POSITIVE" />
+  </Metric>
 ));
diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
@@ -64,10 +64,10 @@ const generateRowCell = () => (item) => {
   const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = item;
 
   return (
-    <Metric value={displayValue}>
-      {deltaPercentage ? (
+    <Metric value={displayValue} anchored>
+      {typeof deltaPercentage === 'number' && (
         <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-      ) : null}
+      )}
     </Metric>
   );
 };

diff --git a/packages/ui/src/components/run-label-sum/run-label-sum.module.css b/packages/ui/src/components/run-label-sum/run-label-sum.module.css
@@ -5,7 +5,5 @@
 }
 
 .delta {
-  display: block;
   font-size: var(--size-xsmall);
-  text-align: inherit;
 }
diff --git a/packages/ui/src/components/summary-item/summary-item.jsx b/packages/ui/src/components/summary-item/summary-item.jsx
@@ -28,9 +28,10 @@ export const SummaryItem = ({
     css.root,
     className,
     css[size],
-    showMetricDescription && css.showMetricDescription,
     inline && css.inline,
+    showMetricDescription && css.showMetricDescription,
     showMetricDescriptionTooltip && css.showMetricDescription,
+    showDelta && css.showDelta,
   );
 
   return (
@@ -56,22 +57,19 @@ export const SummaryItem = ({
           value={current}
           formatter={metric.formatter}
           enhanced
-        />
+          inline={inline}
+        >
+          {showDelta && (
+            <Delta
+              className={css.delta}
+              displayValue={runInfo.displayDeltaPercentage}
+              deltaType={runInfo.deltaType}
+            />
+          )}
+        </Metric>
       ) : (
         <span className={cx(css.currentMetric, css.loading)} />
       )}
-
-      {!loading ? (
-        showDelta && (
-          <Delta
-            className={css.delta}
-            displayValue={runInfo.displayDeltaPercentage}
-            deltaType={runInfo.deltaType}
-          />
-        )
-      ) : (
-        <span className={cx(css.delta, css.loading)} />
-      )}
     </div>
   );
 };