@bundle-stats/ui 4.22.3 → 4.23.0-beta.1

package/lib/app/app.js

@@ -139,6 +139,9 @@ const AppComponent = ({ version, jobs }) => {
     }
     return (react_1.default.createElement(JobsProvider, { jobs: jobs },
         react_1.default.createElement(Layout, { jobs: jobs, version: version },
+            react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.metricChangeLegendContainer },
+                react_1.default.createElement("div", { className: app_module_css_1.default.metricChangeLegendContainerInner },
+                    react_1.default.createElement(components_1.MetricChangeLegend, null))),
             react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.summaryContainer },
                 react_1.default.createElement(summary_1.Summary, { data: jobs[0].summary, showSummaryItemDelta: jobs.length !== 1, showSummaryItemBaseline: jobs?.length !== 1 })),
             react_1.default.createElement(container_1.Container, { className: app_module_css_1.default.tabsContainer },

package/lib/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}

package/lib/app/app.module.css

@@ -17,11 +17,21 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.summaryContainer {
+.metricChangeLegendContainer {
   padding-top: var(--space-small);
   padding-bottom: var(--space-xxsmall);
 }
 
+.metricChangeLegendContainerInner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summaryContainer {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);

package/lib/components/delta/delta.js

@@ -5,22 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Delta = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const delta_module_css_1 = __importDefault(require("./delta.module.css"));
-const Delta = ({ className = '', displayValue, deltaType, inverted = false }) => {
+const Delta = (props) => {
+    const { className = '', displayValue, deltaType, inverted = false, ...restProps } = props;
     const rootClassName = (0, classnames_1.default)(delta_module_css_1.default.root, className, inverted && delta_module_css_1.default.inverted, delta_module_css_1.default[deltaType]);
-    return react_1.default.createElement("span", { className: rootClassName }, displayValue);
+    return (react_1.default.createElement("span", { className: rootClassName, ...restProps }, displayValue));
 };
 exports.Delta = Delta;
-exports.Delta.defaultProps = {
-    className: '',
-    inverted: false,
-};
-exports.Delta.propTypes = {
-    className: prop_types_1.default.string,
-    displayValue: prop_types_1.default.string.isRequired,
-    deltaType: prop_types_1.default.string.isRequired,
-    inverted: prop_types_1.default.bool,
-};
 //# sourceMappingURL=delta.js.map

package/lib/components/delta/delta.js.map

@@ -1 +1 @@
-{"version":3,"file":"delta.js","sourceRoot":"","sources":["../../../src/components/delta/delta.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,0EAAqC;AAE9B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,EAAE;IACrF,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,0BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,0BAAG,CAAC,QAAQ,EAAE,0BAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IACxF,OAAO,wCAAM,SAAS,EAAE,aAAa,IAAG,YAAY,CAAQ,CAAC;AAC/D,CAAC,CAAC;AAHW,QAAA,KAAK,SAGhB;AAEF,aAAK,CAAC,YAAY,GAAG;IACnB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,aAAK,CAAC,SAAS,GAAG;IAChB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,YAAY,EAAE,oBAAS,CAAC,MAAM,CAAC,UAAU;IACzC,SAAS,EAAE,oBAAS,CAAC,MAAM,CAAC,UAAU;IACtC,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"delta.js","sourceRoot":"","sources":["../../../src/components/delta/delta.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAG5B,0EAAqC;AAiB9B,MAAM,KAAK,GAAG,CAAC,KAAgD,EAAE,EAAE;IACxE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1F,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,0BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,0BAAG,CAAC,QAAQ,EAAE,0BAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAExF,OAAO,CACL,wCAAM,SAAS,EAAE,aAAa,KAAM,SAAS,IAC1C,YAAY,CACR,CACR,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,KAAK,SAUhB"}

package/lib/components/delta/delta.module.css

@@ -8,16 +8,16 @@
   color: var(--color-info);
 }
 
-.HIGH_NEGATIVE {
-  color: var(--color-red-dark);
+.LOW_NEGATIVE {
+  color: var(--color-red-light);
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
-.LOW_NEGATIVE {
-  color: var(--color-red-light);
+.HIGH_NEGATIVE {
+  color: var(--color-red-dark);
 }
 
 .LOW_POSITIVE {
@@ -25,7 +25,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -43,24 +43,25 @@
   background: var(--color-info-light);
 }
 
-.inverted.HIGH_NEGATIVE {
-  background: var(--color-red-dark);
+.inverted.LOW_NEGATIVE {
+  background: var(--color-red-light);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
 }
 
-.inverted.LOW_NEGATIVE {
-  background: var(--color-red-light);
+.inverted.HIGH_NEGATIVE {
+  background: var(--color-red-dark);
 }
 
+
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
 }
 
 .inverted.HIGH_POSITIVE {

package/lib/components/delta/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/delta/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/delta/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB"}

package/lib/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Summary = exports.RunInfo = exports.ModuleInfo = exports.MetricsTableTitle = exports.MetricsTableOptions = exports.MetricsTable = exports.MetricRunInfo = exports.Metric = exports.LighthouseTable = exports.JobsHeader = exports.JobName = exports.Insights = exports.InsightIcon = exports.Delta = exports.ComponentLink = exports.BundleModules = exports.BundlePackages = exports.BundleAssetsTotals = exports.BundleAssets = exports.BrowsertimeTable = void 0;
+exports.Summary = exports.RunInfo = exports.ModuleInfo = exports.MetricsTableTitle = exports.MetricsTableOptions = exports.MetricsTable = exports.MetricRunInfo = exports.MetricChangeLegend = exports.Metric = exports.LighthouseTable = exports.JobsHeader = exports.JobName = exports.Insights = exports.InsightIcon = exports.Delta = exports.ComponentLink = exports.BundleModules = exports.BundlePackages = exports.BundleAssetsTotals = exports.BundleAssets = exports.BrowsertimeTable = void 0;
 var browsertime_table_1 = require("./browsertime-table");
 Object.defineProperty(exports, "BrowsertimeTable", { enumerable: true, get: function () { return browsertime_table_1.BrowsertimeTable; } });
 var bundle_assets_1 = require("./bundle-assets");
@@ -27,6 +27,8 @@ var lighthouse_table_1 = require("./lighthouse-table");
 Object.defineProperty(exports, "LighthouseTable", { enumerable: true, get: function () { return lighthouse_table_1.LighthouseTable; } });
 var metric_1 = require("./metric");
 Object.defineProperty(exports, "Metric", { enumerable: true, get: function () { return metric_1.Metric; } });
+var metric_change_legend_1 = require("./metric-change-legend");
+Object.defineProperty(exports, "MetricChangeLegend", { enumerable: true, get: function () { return metric_change_legend_1.MetricChangeLegend; } });
 var metric_run_info_1 = require("./metric-run-info");
 Object.defineProperty(exports, "MetricRunInfo", { enumerable: true, get: function () { return metric_run_info_1.MetricRunInfo; } });
 var metrics_table_1 = require("./metrics-table");

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AACzB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,qDAAkD;AAAzC,gHAAA,aAAa,OAAA;AAEtB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,6DAA0D;AAAjD,wHAAA,iBAAiB,OAAA;AAC1B,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAEhB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AACzB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AAEd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAE3B,qDAAkD;AAAzC,gHAAA,aAAa,OAAA;AAEtB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,6DAA0D;AAAjD,wHAAA,iBAAiB,OAAA;AAC1B,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAEhB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/lib/components/insight-icon/insight-icon.module.css

@@ -1,20 +1,20 @@
 .root {
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
+  width: calc(var(--space-small) + var(--space-xxsmall));
+  height: calc(var(--space-small) + var(--space-xxsmall));
+  padding: var(--space-xxxsmall);
   border-radius: 50%;
   background: var(--color-highlight);
 }
 
 .error {
-  background: var(--color-red-50);
+  background: var(--color-highlight-danger);
   color: var(--color-danger);
 }
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-100);
-  color: var(--color-yellow-900);
+  background: var(--color-highlight-warning);
+  color: var(--color-warning);
 }
 
 .info {

package/lib/components/job-name/job-name.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JobName = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const tooltip_1 = require("../../ui/tooltip");
 const job_name_module_css_1 = __importDefault(require("./job-name.module.css"));
-const JobName = ({ as: Component = 'span', title, internalBuildNumber, children, ...restProps }) => (react_1.default.createElement(tooltip_1.Tooltip, { className: job_name_module_css_1.default.root, as: Component, title: title, ...restProps }, children || `Job #${internalBuildNumber}`));
+const JobName = ({ as: Component = 'span', title, internalBuildNumber, children, ...restProps }) => (react_1.default.createElement(Component, { className: job_name_module_css_1.default.root, title: title, ...restProps }, children || `Job #${internalBuildNumber}`));
 exports.JobName = JobName;
 exports.JobName.defaultProps = {
     as: 'span',

package/lib/components/job-name/job-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"job-name.js","sourceRoot":"","sources":["../../../src/components/job-name/job-name.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,8CAA2C;AAC3C,gFAAwC;AAEjC,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE,CAAC,CACJ,8BAAC,iBAAO,IAAC,SAAS,EAAE,6BAAG,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,IACrE,QAAQ,IAAI,QAAQ,mBAAmB,EAAE,CAClC,CACX,CAAC;AAVW,QAAA,OAAO,WAUlB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,EAAE;IACT,mBAAmB,EAAE,IAAI;IACzB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAElB,EAAE,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC;IAG3D,KAAK,EAAE,oBAAS,CAAC,MAAM;IAGvB,mBAAmB,EAAE,oBAAS,CAAC,MAAM;IAGrC,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"job-name.js","sourceRoot":"","sources":["../../../src/components/job-name/job-name.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,gFAAwC;AAEjC,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE,CAAC,CACJ,8BAAC,SAAS,IAAC,SAAS,EAAE,6BAAG,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,IACxD,QAAQ,IAAI,QAAQ,mBAAmB,EAAE,CAChC,CACb,CAAC;AAVW,QAAA,OAAO,WAUlB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,EAAE;IACT,mBAAmB,EAAE,IAAI;IACzB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAElB,EAAE,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC;IAG3D,KAAK,EAAE,oBAAS,CAAC,MAAM;IAGvB,mBAAmB,EAAE,oBAAS,CAAC,MAAM;IAGrC,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}

package/lib/components/metric-change-legend/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metric-change-legend"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/metric-change-legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric-change-legend/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC"}

package/lib/components/metric-change-legend/metric-change-legend.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricChangeLegend = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const flex_stack_1 = require("../../layout/flex-stack");
+const stack_1 = require("../../layout/stack");
+const hover_card_1 = require("../../ui/hover-card");
+const metric_change_legend_module_css_1 = __importDefault(require("./metric-change-legend.module.css"));
+const layout_1 = require("../../layout");
+const Variants = (props) => {
+    const { className, kind, variants, size = 'medium' } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(metric_change_legend_module_css_1.default.variants, metric_change_legend_module_css_1.default[`bar-${kind}`], metric_change_legend_module_css_1.default[size], className) }, variants.map((variant) => (react_1.default.createElement("span", { key: variant, className: (0, classnames_1.default)(metric_change_legend_module_css_1.default.variant, metric_change_legend_module_css_1.default[`variant-${variant}`]) })))));
+};
+const ChangeMagnitudeInfo = (props) => {
+    const { kind, impact } = props;
+    return (react_1.default.createElement(stack_1.Stack, { space: "small" },
+        react_1.default.createElement("p", null,
+            "Changes flagged as ",
+            react_1.default.createElement("strong", null,
+                kind,
+                "s"),
+            " have a ",
+            impact,
+            " impact on user performance."),
+        react_1.default.createElement("p", null, "The report shows different intensity colors depending on the magnitude of the percentage change."),
+        react_1.default.createElement(stack_1.Stack, { space: "xxsmall" },
+            react_1.default.createElement(layout_1.Separator, null),
+            react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxsmall" },
+                react_1.default.createElement(Variants, { kind: kind, variants: ['low'], size: "large" }),
+                "Change is smaller or equal than ",
+                react_1.default.createElement("strong", null, "5%")),
+            react_1.default.createElement(layout_1.Separator, null),
+            react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxsmall" },
+                react_1.default.createElement(Variants, { kind: kind, variants: ['medium'], size: "large" }),
+                "Change is smaller or equal than ",
+                react_1.default.createElement("strong", null, "50%")),
+            react_1.default.createElement(layout_1.Separator, null),
+            react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxsmall" },
+                react_1.default.createElement(Variants, { kind: kind, variants: ['high'], size: "large" }),
+                "Change is larger than ",
+                react_1.default.createElement("strong", null, "50%")))));
+};
+const ImprovementInfo = () => react_1.default.createElement(ChangeMagnitudeInfo, { kind: "improvement", impact: "positive" });
+const RegressionInfo = () => react_1.default.createElement(ChangeMagnitudeInfo, { kind: "regression", impact: "negative" });
+const NeutralInfo = () => (react_1.default.createElement(stack_1.Stack, { space: "small" },
+    react_1.default.createElement("p", null,
+        react_1.default.createElement("strong", null, "Neutral"),
+        " changes do not have a clear positive or negative impact on user performance.")));
+const NoChangeInfo = () => (react_1.default.createElement(stack_1.Stack, { space: "small" },
+    react_1.default.createElement("p", null,
+        "The metric value is ",
+        react_1.default.createElement("strong", null, "unchanged"),
+        " between the compared builds.")));
+const ITEMS = [
+    {
+        id: 'improvement',
+        label: 'Improvement',
+        variants: ['low', 'medium', 'high'],
+        info: react_1.default.createElement(ImprovementInfo, null),
+    },
+    {
+        id: 'regression',
+        label: 'Regression',
+        variants: ['low', 'medium', 'high'],
+        info: react_1.default.createElement(RegressionInfo, null),
+    },
+    {
+        id: 'neutral',
+        label: 'Neutral',
+        variants: ['medium'],
+        info: react_1.default.createElement(NeutralInfo, null),
+    },
+    {
+        id: 'no-change',
+        label: 'No change',
+        variants: ['medium'],
+        info: react_1.default.createElement(NoChangeInfo, null),
+    },
+];
+const MetricChangeLegend = (props) => {
+    const { className, ...restProps } = props;
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { inline: true, space: "small", className: (0, classnames_1.default)(metric_change_legend_module_css_1.default.root, className), ...restProps }, ITEMS.map(({ id, variants, label, info }) => (react_1.default.createElement(hover_card_1.HoverCard, { key: id, anchorClassName: metric_change_legend_module_css_1.default.itemAnchor, label: react_1.default.createElement(flex_stack_1.FlexStack, { inline: true, alignItems: "center", space: "xxsmall", className: metric_change_legend_module_css_1.default.item },
+            react_1.default.createElement(Variants, { kind: id, variants: variants }),
+            react_1.default.createElement("span", null, label)) }, info)))));
+};
+exports.MetricChangeLegend = MetricChangeLegend;
+//# sourceMappingURL=metric-change-legend.js.map

package/lib/components/metric-change-legend/metric-change-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-change-legend.js","sourceRoot":"","sources":["../../../src/components/metric-change-legend/metric-change-legend.tsx"],"names":[],"mappings":"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"}

package/lib/components/metric-change-legend/metric-change-legend.module.css

@@ -0,0 +1,69 @@
+.root {
+  font-size: var(--size-small);
+}
+
+.itemAnchor {
+  color: var(--color-text-light);
+}
+
+.itemAnchor:hover {
+  color: var(--color-text);
+}
+
+.variants {
+  display: flex;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-xsmall);
+}
+
+.infoPreviewCell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.infoDescriptionCell {
+  padding-left: 0 !important;
+}
+
+.variant {
+  width: var(--space-xxsmall);
+  height: var(--space-xxsmall);
+}
+
+.large .variant {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.bar-improvement .variant-low {
+  background: var(--color-green-light);
+}
+
+.bar-improvement .variant-medium {
+  background: var(--color-green);
+}
+
+.bar-improvement .variant-high {
+  background: var(--color-green-dark);
+}
+
+.bar-regression .variant-low {
+  background: var(--color-red-light);
+}
+
+.bar-regression .variant-medium {
+  background: var(--color-red);
+}
+
+.bar-regression .variant-high {
+  background: var(--color-red-dark);
+}
+
+.bar-neutral .variant-medium {
+  background: var(--color-info);
+}
+
+.bar-no-change .variant-medium {
+  background: var(--color-gray-ultra-light);
+}

package/lib/components/metric-run-info/metric-run-info.js

@@ -75,18 +75,41 @@ const MetricRunInfo = (props) => {
         return null;
     }, [showMetricDescription, metric]);
     const title = (0, react_1.useMemo)(() => react_1.default.createElement(CustomTitleWrapper, null, metric.label), [CustomTitleWrapper, metric.label]);
+    const baselineProps = (0, react_1.useMemo)(() => {
+        if (showBaseline) {
+            return {
+                showBaseline,
+                baseline: metric.formatter(baseline),
+            };
+        }
+        return { showBaseline };
+    }, [showBaseline, baseline]);
     const deltaProps = (0, react_1.useMemo)(() => {
-        if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
-            return {};
+        if (!showDelta || metric.skipDelta) {
+            return {
+                showDelta: false,
+            };
+        }
+        if (!('delta' in metricRunInfo)) {
+            return {
+                showDelta: false,
+            };
+        }
+        if (metric.type === utils_1.MetricTypes.FileSize) {
+            return {
+                showDelta: true,
+                delta: metricRunInfo.displayDelta,
+                deltaType: metricRunInfo.deltaType,
+                deltaPercentage: metricRunInfo.displayDeltaPercentage,
+            };
         }
         return {
-            delta: metricRunInfo.displayDeltaPercentage,
+            showDelta: true,
+            delta: metricRunInfo.displayDelta,
             deltaType: metricRunInfo.deltaType,
         };
-    }, [metricRunInfo]);
-    return (react_1.default.createElement(run_info_1.RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
-            baseline: metric.formatter(baseline),
-        }), ...deltaProps, ...restProps }));
+    }, [metric, metricRunInfo, showDelta]);
+    return (react_1.default.createElement(run_info_1.RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, ...baselineProps, ...deltaProps, ...restProps }));
 };
 exports.MetricRunInfo = MetricRunInfo;
 //# sourceMappingURL=metric-run-info.js.map

package/lib/components/metric-run-info/metric-run-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"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"}

package/lib/components/metrics-display-selector/metrics-display-selector.js

@@ -46,15 +46,13 @@ const MetricsDisplaySelector = (props) => {
             },
         ];
         const itemClassName = (0, classnames_1.default)(metrics_display_selector_module_css_1.default.dropdownGroup, isFirst && metrics_display_selector_module_css_1.default.itemFirst, isLast && metrics_display_selector_module_css_1.default.itemLast, isActive && metrics_display_selector_module_css_1.default.itemActive);
-        return (react_1.default.createElement(flex_stack_1.FlexStack, { className: itemClassName, key: displayType },
-            react_1.default.createElement(button_1.Button, { size: "small", glyph: displayProps.glyph, onClick: () => onSelect(displayType), className: metrics_display_selector_module_css_1.default.dropdownGroupButton }, displayProps.label),
-            react_1.default.createElement(dropdown_1.Dropdown, { glyph: icon_1.Icon.ICONS.CHEVRON_DOWN, placement: "bottom-end", shift: -1, className: metrics_display_selector_module_css_1.default.dropdownGroupAnchor }, displayGroupsData.map((displayGroupData) => {
-                const isGroupActive = isActive && displayGroupData.value === groupBy;
-                return (react_1.default.createElement(dropdown_1.DropdownItem, { onClick: () => onSelect(displayType, displayGroupData.value), isActive: isGroupActive, className: (0, classnames_1.default)(metrics_display_selector_module_css_1.default.dropdownItem, isGroupActive && metrics_display_selector_module_css_1.default.dropdownItemActive), key: displayGroupData.value },
-                    react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center" },
-                        react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CHECK, size: "small", className: metrics_display_selector_module_css_1.default.dropdownItemIcon }),
-                        react_1.default.createElement("span", null, displayGroupData.label))));
-            }))));
+        return (react_1.default.createElement(dropdown_1.Dropdown, { label: displayProps.label, glyph: displayProps.glyph, placement: "bottom-end", shift: -1, className: itemClassName, key: displayType }, displayGroupsData.map((displayGroupData) => {
+            const isGroupActive = isActive && displayGroupData.value === groupBy;
+            return (react_1.default.createElement(dropdown_1.DropdownItem, { onClick: () => onSelect(displayType, displayGroupData.value), isActive: isGroupActive, className: (0, classnames_1.default)(metrics_display_selector_module_css_1.default.dropdownItem, isGroupActive && metrics_display_selector_module_css_1.default.dropdownItemActive), key: displayGroupData.value },
+                react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center" },
+                    react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CHECK, size: "small", className: metrics_display_selector_module_css_1.default.dropdownItemIcon }),
+                    react_1.default.createElement("span", null, displayGroupData.label))));
+        })));
     })));
 };
 exports.MetricsDisplaySelector = MetricsDisplaySelector;

package/lib/components/metrics-display-selector/metrics-display-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-display-selector.js","sourceRoot":"","sources":["../../../src/components/metrics-display-selector/metrics-display-selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-display-selector.js","sourceRoot":"","sources":["../../../src/components/metrics-display-selector/metrics-display-selector.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,+CAIyB;AACzB,4CAAyC;AACzC,0DAAsD;AACtD,gDAA2D;AAC3D,wCAAqC;AACrC,wDAAoD;AACpD,gHAAwD;AAExD,MAAM,mBAAmB,GAAG;IAC1B,CAAC,8BAAkB,CAAC,KAAK,CAAC,EAAE;QAC1B,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK;QACvB,KAAK,EAAE,OAAO;KACf;IACD,CAAC,8BAAkB,CAAC,OAAO,CAAC,EAAE;QAC5B,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO;QACzB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,8BAAkB,CAAC,CAAC;AAShD,MAAM,sBAAsB,GAAG,CACpC,KACuE,EACvE,EAAE;IACF,MAAM,EACJ,KAAK,EACL,OAAO,GAAG,wCAA4B,EACtC,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,8BAAC,4BAAY,OAAK,SAAS,IACxB,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACvC,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,YAAY,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;QACtD,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;QAC5B,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC;QACjD,MAAM,QAAQ,GAAG,WAAW,KAAK,KAAK,CAAC;QAEvC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjD,OAAO,CACL,8BAAC,eAAM,IACL,OAAO,QACP,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,EACpC,SAAS,EAAE,IAAA,oBAAE,EAAC,MAAM,IAAI,6CAAG,CAAC,QAAQ,CAAC,EACrC,GAAG,EAAE,WAAW,IAEf,YAAY,CAAC,KAAK,CACZ,CACV,CAAC;QACJ,CAAC;QAED,MAAM,iBAAiB,GAAG;YACxB,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBACtC,KAAK,EAAE,YAAY;gBACnB,KAAK,EAAE,YAAY,YAAY,EAAE;aAClC,CAAC,CAAC;YACH;gBACE,KAAK,EAAE,iCAAqB,CAAC,IAAI;gBACjC,KAAK,EAAE,UAAU;aAClB;SACF,CAAC;QAEF,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,6CAAG,CAAC,aAAa,EACjB,OAAO,IAAI,6CAAG,CAAC,SAAS,EACxB,MAAM,IAAI,6CAAG,CAAC,QAAQ,EACtB,QAAQ,IAAI,6CAAG,CAAC,UAAU,CAC3B,CAAC;QAEF,OAAO,CACL,8BAAC,mBAAQ,IACP,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,CAAC,CAAC,EACT,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,WAAW,IAEf,iBAAiB,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,EAAE;YAC1C,MAAM,aAAa,GAAG,QAAQ,IAAI,gBAAgB,CAAC,KAAK,KAAK,OAAO,CAAC;YAErE,OAAO,CACL,8BAAC,uBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAC5D,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,IAAA,oBAAE,EAAC,6CAAG,CAAC,YAAY,EAAE,aAAa,IAAI,6CAAG,CAAC,kBAAkB,CAAC,EACxE,GAAG,EAAE,gBAAgB,CAAC,KAAK;gBAE3B,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ;oBAC7C,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,6CAAG,CAAC,gBAAgB,GAAI;oBAC/E,4CAAO,gBAAgB,CAAC,KAAK,CAAQ,CAC3B,CACC,CAChB,CAAC;QACJ,CAAC,CAAC,CACO,CACZ,CAAC;IACJ,CAAC,CAAC,CACW,CAChB,CAAC;AACJ,CAAC,CAAC;AAvFW,QAAA,sBAAsB,0BAuFjC"}

package/lib/components/metrics-display-selector/metrics-display-selector.module.css

@@ -7,31 +7,6 @@
   padding: calc(var(--space-xxsmall) - 1px);
 }
 
-.dropdownGroupAnchor {
-  border: none;
-  border-radius: 0;
-  position: relative;
-}
-
-.dropdownGroupAnchor::before {
-  content: '';
-  display: block;
-  width: 1px;
-  background: var(--color-outline-dark);
-  position: absolute;
-  left: 0;
-  top: var(--space-xxxsmall);
-  bottom: var(--space-xxxsmall);
-}
-
-.dropdownGroupAnchor:hover,
-.dropdownGroupAnchor:focus,
-.dropdownGroupAnchor:active {
-  border-color: var(--color-outline);
-  box-shadow: none;
-  background: none;
-}
-
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);

package/lib/components/metrics-table-header/metrics-table-header.js

@@ -57,8 +57,8 @@ const JobColumn = ({ job, isBaseline }) => {
     if (!job) {
         return react_1.default.createElement(table_1.Table.Th, { colSpan: colSpan }, "-");
     }
-    return (react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.job), colSpan: colSpan },
-        react_1.default.createElement(job_name_1.JobName, { title: isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE, internalBuildNumber: internalBuildNumber, className: metrics_table_header_module_css_1.default.jobName }, label)));
+    return (react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.colJob), colSpan: colSpan },
+        react_1.default.createElement(job_name_1.JobName, { title: isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE, internalBuildNumber: internalBuildNumber }, label)));
 };
 const getRowsRunTotal = (rows, runIndex) => (0, sum_1.default)(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
@@ -67,13 +67,13 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
     const total = (0, utils_1.getMetricRunInfo)(METRIC_TYPE, currentRunTotal, baselineRunTotal);
     const fieldPath = `runs[${runIndex}]`;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.value, metrics_table_header_module_css_1.default.sum) },
+        react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.colValue, metrics_table_header_module_css_1.default.colSum) },
             react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "value", label: I18N.SORT_VALUE, updateSort: updateSort, sort: sort },
                 react_1.default.createElement(metric_1.Metric, { value: total.displayValue }))),
         !isBaseline && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.delta, metrics_table_header_module_css_1.default.sum) },
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.colDelta, metrics_table_header_module_css_1.default.colSum) },
                 react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "delta", label: I18N.SORT_CHANGE, updateSort: updateSort, sort: sort }, 'delta' in total && (react_1.default.createElement(delta_1.Delta, { displayValue: total.displayDelta, deltaType: total.deltaType })))),
-            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.delta, metrics_table_header_module_css_1.default.deltaPercentage, metrics_table_header_module_css_1.default.sum) },
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.colDelta, metrics_table_header_module_css_1.default.colDeltaPercentage, metrics_table_header_module_css_1.default.colSum) },
                 react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "deltaPercentage", label: I18N.SORT_PERCENTUAL_CHANGE, updateSort: updateSort, sort: sort }, 'delta' in total && (react_1.default.createElement(delta_1.Delta, { displayValue: total.displayDeltaPercentage, deltaType: total.deltaType }))))))));
 };
 const MetricsTableHeader = (props) => {
@@ -81,7 +81,7 @@ const MetricsTableHeader = (props) => {
     const rootClassName = (0, classnames_1.default)(metrics_table_header_module_css_1.default.root, showSum && metrics_table_header_module_css_1.default.showHeaderSum, className);
     return (react_1.default.createElement(table_1.Table.THead, { className: rootClassName },
         react_1.default.createElement(table_1.Table.Tr, null,
-            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.metric), rowSpan: showSum ? 2 : 1 }, metricTitle || ' '),
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.colMetric), rowSpan: showSum ? 2 : 1 }, metricTitle || ' '),
             jobs.map((job, runIndex) => (react_1.default.createElement(JobColumn, { key: job.internalBuildNumber, job: job, isBaseline: runIndex === jobs.length - 1 })))),
         showSum && (react_1.default.createElement(table_1.Table.Tr, null, jobs.map((job, runIndex) => (react_1.default.createElement(SumColumn, { key: job.internalBuildNumber, rows: rows, isBaseline: runIndex === jobs.length - 1, runIndex: runIndex, updateSort: updateSort, sort: sort })))))));
 };