fix(ui): SummaryItem - fix delta alignment

relative-ci · Nov 13, 2019 · f68e9f1 · f68e9f1
1 parent a817dfc
commit f68e9f1
Show file tree

Hide file tree

Showing 3 changed files with 260 additions and 1 deletion.
diff --git a/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap b/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap
@@ -322266,6 +322266,224 @@ exports[`Storyshots Components/JobsHeader loading 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/JobsHeader multiple equal jobs 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root root"
+  >
+    <div
+      className="job"
+    >
+      <div
+        className="jobDescription"
+      >
+        <h1
+          className="jobTitle"
+        >
+          <span>
+            #1
+          </span>
+          <span
+            className="jobTag"
+          >
+            current
+          </span>
+        </h1>
+        <div
+          className="jobMeta"
+        >
+          <span
+            className="jobMetaItem"
+            title="01/01/2019 00:00"
+          >
+            <span
+              className="root jobMetaIcon"
+            >
+              <svg
+                className="icon"
+                fill="currentColor"
+                viewBox="0 0 14 16"
+              >
+                <path
+                  d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </span>
+            <span>
+              9 days
+            </span>
+          </span>
+          <span
+            className="jobMetaItem"
+            title="Webpack bundle hash"
+          >
+            <span
+              className="root jobMetaIcon"
+            >
+              <svg
+                className="icon"
+                fill="currentColor"
+                viewBox="0 0 896 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M694.875 448C666.375 337.781 567.125 256 448 256c-119.094 0-218.375 81.781-246.906 192H0v128h201.094C229.625 686.25 328.906 768 448 768c119.125 0 218.375-81.75 246.875-192H896V448H694.875zM448 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128z"
+                />
+              </svg>
+            </span>
+            <span>
+              abcd1234
+            </span>
+          </span>
+        </div>
+      </div>
+      <div
+        className="root jobSummaryItem large"
+      >
+        <h3
+          className="title"
+        >
+          Total Bundle Size
+        </h3>
+        <span
+          className="currentMetric root"
+        >
+          <div
+            className="display"
+          >
+            <span
+              className="displayValue"
+            >
+              976.56
+            </span>
+            <span
+              className="displayUnit"
+            >
+              KB
+            </span>
+          </div>
+          <span
+            className="delta"
+          />
+        </span>
+        <span
+          className="root delta"
+        >
+          0B (0%)
+        </span>
+      </div>
+    </div>
+    <div
+      className="job"
+    >
+      <div
+        className="jobDescription"
+      >
+        <h1
+          className="jobTitle"
+        >
+          <span>
+            #2
+          </span>
+          <span
+            className="jobTag"
+          >
+            baseline
+          </span>
+        </h1>
+        <div
+          className="jobMeta"
+        >
+          <span
+            className="jobMetaItem"
+            title="01/02/2019 00:00"
+          >
+            <span
+              className="root jobMetaIcon"
+            >
+              <svg
+                className="icon"
+                fill="currentColor"
+                viewBox="0 0 14 16"
+              >
+                <path
+                  d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </span>
+            <span>
+              8 days
+            </span>
+          </span>
+          <span
+            className="jobMetaItem"
+            title="Webpack bundle hash"
+          >
+            <span
+              className="root jobMetaIcon"
+            >
+              <svg
+                className="icon"
+                fill="currentColor"
+                viewBox="0 0 896 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M694.875 448C666.375 337.781 567.125 256 448 256c-119.094 0-218.375 81.781-246.906 192H0v128h201.094C229.625 686.25 328.906 768 448 768c119.125 0 218.375-81.75 246.875-192H896V448H694.875zM448 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128z"
+                />
+              </svg>
+            </span>
+            <span>
+              efgh1234
+            </span>
+          </span>
+        </div>
+      </div>
+      <div
+        className="root jobSummaryItem large"
+      >
+        <h3
+          className="title"
+        >
+          Total Bundle Size
+        </h3>
+        <span
+          className="currentMetric root"
+        >
+          <div
+            className="display"
+          >
+            <span
+              className="displayValue"
+            >
+              976.56
+            </span>
+            <span
+              className="displayUnit"
+            >
+              KB
+            </span>
+          </div>
+          <span
+            className="delta"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/JobsHeader multiple jobs 1`] = `
 <div
   style={

diff --git a/packages/ui/src/components/jobs-header/jobs-header.stories.jsx b/packages/ui/src/components/jobs-header/jobs-header.stories.jsx
@@ -72,6 +72,47 @@ stories.add('multiple jobs', () => (
   />
 ));
 
+stories.add('multiple equal jobs', () => (
+  <JobsHeader
+    jobs={[
+      {
+        internalBuildNumber: 1,
+        meta: {
+          webpack: {
+            stats: {
+              builtAt: '2019-01-01T00:00:00.000Z',
+              hash: 'abcd1234',
+            },
+          },
+        },
+        summary: {
+          'webpack.assets.totalSizeByTypeALL': {
+            current: 1000000,
+            baseline: 1000000,
+          },
+        },
+      },
+      {
+        internalBuildNumber: 2,
+        meta: {
+          webpack: {
+            stats: {
+              builtAt: '2019-01-02T00:00:00.000Z',
+              hash: 'efgh1234',
+            },
+          },
+        },
+        summary: {
+          'webpack.assets.totalSizeByTypeALL': {
+            current: 1000000,
+            baseline: 0,
+          },
+        },
+      },
+    ]}
+  />
+));
+
 stories.add('loading', () => (
   <JobsHeader loading />
 ));
diff --git a/packages/ui/src/components/summary-item/summary-item.module.css b/packages/ui/src/components/summary-item/summary-item.module.css
@@ -30,7 +30,7 @@
   min-height: var(--space-xsmall);
   font-size: var(--size-small);
   line-height: var(--space-xsmall);
-  text-align: left;
+  text-align: inherit;
 }
 
 .helpButton {