@bundle-stats/ui 4.2.5-beta.3 → 4.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/metric-run-info/metric-run-info.js +1 -1
- package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib/components/run-info/run-info.js +3 -3
- package/lib/components/run-info/run-info.js.map +1 -1
- package/lib/ui/hover-card/hover-card.js +1 -1
- package/lib/ui/tooltip/tooltip.js +1 -1
- package/lib/ui/tooltip/tooltip.js.map +1 -1
- package/lib/ui/tooltip/tooltip.module.css +4 -4
- package/lib-esm/components/metric-run-info/metric-run-info.js +1 -1
- package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib-esm/components/run-info/run-info.js +3 -3
- package/lib-esm/components/run-info/run-info.js.map +1 -1
- package/lib-esm/ui/hover-card/hover-card.js +1 -1
- package/lib-esm/ui/tooltip/tooltip.js +1 -1
- package/lib-esm/ui/tooltip/tooltip.js.map +1 -1
- package/lib-esm/ui/tooltip/tooltip.module.css +4 -4
- package/package.json +8 -8
- package/src/components/metric-run-info/metric-run-info.tsx +1 -0
- package/src/components/run-info/run-info.tsx +4 -2
- package/src/ui/hover-card/hover-card.jsx +1 -1
- package/src/ui/tooltip/tooltip.module.css +4 -4
- package/src/ui/tooltip/tooltip.tsx +1 -1
- package/types/app/header/header.d.ts +1 -1
- package/types/components/asset-info/asset-info.d.ts +2 -2
- package/types/components/browsertime-table/browsertime-table.d.ts +1 -1
- package/types/components/bundle-assets/bundle-assets.d.ts +2 -2
- package/types/components/bundle-assets/index.d.ts +1 -1
- package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts +2 -2
- package/types/components/bundle-assets-totals-table/bundle-assets-totals-table.d.ts +2 -2
- package/types/components/bundle-modules/bundle-modules.d.ts +2 -2
- package/types/components/bundle-modules/index.d.ts +1 -1
- package/types/components/bundle-packages/bundle-packages.d.ts +2 -2
- package/types/components/bundle-packages/index.d.ts +1 -1
- package/types/components/component-link.d.ts +1 -1
- package/types/components/delta/delta.d.ts +1 -1
- package/types/components/job-header/job-header.d.ts +1 -1
- package/types/components/job-meta/job-meta.d.ts +1 -1
- package/types/components/job-name/job-name.d.ts +1 -1
- package/types/components/jobs-header/jobs-header.d.ts +1 -1
- package/types/components/lighthouse-table/lighthouse-table.d.ts +1 -1
- package/types/components/metrics-table/metrics-table.d.ts +1 -1
- package/types/components/metrics-table-options/metrics-table-options.d.ts +1 -1
- package/types/components/metrics-table-search/metrics-table-search.d.ts +1 -1
- package/types/components/metrics-table-title/metrics-table-title.d.ts +1 -1
- package/types/components/module-info/module-info.d.ts +3 -3
- package/types/components/run-info/run-info.d.ts +2 -1
- package/types/components/total-size-type-title/total-size-type-title.d.ts +1 -1
- package/types/layout/footer/footer.d.ts +1 -1
- package/types/layout/separator.d.ts +2 -2
- package/types/layout/stack/stack.d.ts +2 -2
- package/types/ui/alert/alert.d.ts +1 -1
- package/types/ui/dropdown/dropdown.d.ts +1 -1
- package/types/ui/empty-set/empty-set.d.ts +1 -1
- package/types/ui/file-name/file-name.d.ts +1 -1
- package/types/ui/filters/filters.d.ts +1 -1
- package/types/ui/filters/index.d.ts +1 -1
- package/types/ui/horizontal-bar-chart/horizontal-bar-chart.d.ts +1 -1
- package/types/ui/hover-card/hover-card.d.ts +1 -1
- package/types/ui/icon/icon.d.ts +1 -1
- package/types/ui/input/input.d.ts +1 -1
- package/types/ui/loader/loader.d.ts +1 -1
- package/types/ui/panels/panels.d.ts +1 -1
- package/types/ui/skeleton/skeleton.d.ts +1 -1
- package/types/ui/sort-dropdown/sort-dropdown.d.ts +1 -1
- package/types/ui/table/table.d.ts +1 -1
- package/types/ui/tabs/tabs.d.ts +1 -1
- package/types/ui/tag/tag.d.ts +1 -1
- package/types/ui/toolbar/toolbar.d.ts +1 -1
|
@@ -53,7 +53,7 @@ const MetricRunInfo = (props) => {
|
|
|
53
53
|
}
|
|
54
54
|
return null;
|
|
55
55
|
}, [showMetricDescription, metric]);
|
|
56
|
-
return (react_1.default.createElement(run_info_1.RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, ...(showBaseline && {
|
|
56
|
+
return (react_1.default.createElement(run_info_1.RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
|
|
57
57
|
baseline: metric.formatter(baseline),
|
|
58
58
|
}), ...(showDelta && showBaseline && {
|
|
59
59
|
delta: metricRunInfo.displayDeltaPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,+CAA4E;AAE5E,8CAA2C;AAC3C,0CAAoD;AACpD,8FAA+C;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;QACrB,yCAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,0CAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,oCAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaK,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,8BAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,kBAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,+CAA4E;AAE5E,8CAA2C;AAC3C,0CAAoD;AACpD,8FAA+C;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;QACrB,yCAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,0CAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,oCAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaK,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,8BAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,kBAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,EACnC,YAAY,EAAE,YAAY,KACtB,CAAC,YAAY,IAAI;YACnB,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;SACrC,CAAC,KACE,CAAC,SAAS,IAAI,YAAY,IAAI;YAChC,KAAK,EAAE,aAAa,CAAC,sBAAsB;YAC3C,SAAS,EAAE,aAAa,CAAC,SAAS;SACnC,CAAC,KACE,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,aAAa,iBAuCxB"}
|
|
@@ -46,7 +46,7 @@ const getMetricParams = (value) => {
|
|
|
46
46
|
}
|
|
47
47
|
return [matches[1], matches[2]];
|
|
48
48
|
};
|
|
49
|
-
const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', loading = false, enhance = false, ...restProps }) => {
|
|
49
|
+
const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', showBaseline = true, loading = false, enhance = false, ...restProps }) => {
|
|
50
50
|
const rootClassName = (0, classnames_1.default)(run_info_module_css_1.default.root, className, run_info_module_css_1.default[size], delta && run_info_module_css_1.default.showDelta);
|
|
51
51
|
const currentValueParams = (0, react_1.useMemo)(() => {
|
|
52
52
|
if (!enhance || typeof current !== 'string') {
|
|
@@ -62,9 +62,9 @@ const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleToolt
|
|
|
62
62
|
react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }))))),
|
|
63
63
|
!loading ? (react_1.default.createElement(stack_1.Stack, null,
|
|
64
64
|
react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.currentMetric, value: currentValueParams[0], unit: currentValueParams[1], inline: true }, delta && react_1.default.createElement(delta_1.Delta, { className: run_info_module_css_1.default.delta, displayValue: delta, deltaType: deltaType })),
|
|
65
|
-
react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.baselineMetric, value: baseline }))) : (react_1.default.createElement(stack_1.Stack, null,
|
|
65
|
+
showBaseline && react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.baselineMetric, value: baseline }))) : (react_1.default.createElement(stack_1.Stack, null,
|
|
66
66
|
react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.currentMetric, run_info_module_css_1.default.loading) }),
|
|
67
|
-
react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.baselineMetric, run_info_module_css_1.default.loading) })))));
|
|
67
|
+
showBaseline && react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.baselineMetric, run_info_module_css_1.default.loading) })))));
|
|
68
68
|
};
|
|
69
69
|
exports.RunInfo = RunInfo;
|
|
70
70
|
//# sourceMappingURL=run-info.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAA4B;AAE5B,wCAAqC;AACrC,oDAAgD;AAChD,8CAA2C;AAC3C,gDAA6C;AAC7C,wDAAoD;AACpD,8CAA2C;AAC3C,sCAAmC;AACnC,oCAAiC;AACjC,gFAAwC;AAGxC,MAAM,0BAA0B,GAAG,uBAAuB,CAAC;AAE3D,MAAM,eAAe,GAAG,CAAC,KAAa,EAAqB,EAAE;IAC3D,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAExD,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,CAAC;KAChB;IAED,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,7 +34,7 @@ const hovercard_1 = require("ariakit/hovercard");
|
|
|
34
34
|
const hover_card_module_css_1 = __importDefault(require("./hover-card.module.css"));
|
|
35
35
|
const HoverCard = (props) => {
|
|
36
36
|
const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
|
|
37
|
-
const state = (0, hovercard_1.useHovercardState)({ gutter: 8, timeout:
|
|
37
|
+
const state = (0, hovercard_1.useHovercardState)({ gutter: 8, timeout: 800 });
|
|
38
38
|
const hovercardProps = (0, hovercard_1.useHovercard)({ state, portal: true });
|
|
39
39
|
const Component = (0, react_1.useMemo)(() => {
|
|
40
40
|
if (as) {
|
|
@@ -10,7 +10,7 @@ const tooltip_1 = require("ariakit/tooltip");
|
|
|
10
10
|
const tooltip_module_css_1 = __importDefault(require("./tooltip.module.css"));
|
|
11
11
|
const Tooltip = (props) => {
|
|
12
12
|
const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
|
|
13
|
-
const tooltip = (0, tooltip_1.useTooltipState)({ placement: 'top' });
|
|
13
|
+
const tooltip = (0, tooltip_1.useTooltipState)({ placement: 'top', timeout: 300 });
|
|
14
14
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
15
15
|
react_1.default.createElement(tooltip_1.TooltipAnchor, { as: Component, className: (0, classnames_1.default)(tooltip_module_css_1.default.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }),
|
|
16
16
|
title && (react_1.default.createElement(tooltip_1.Tooltip, { state: tooltip, className: (0, classnames_1.default)(tooltip_module_css_1.default.tooltip, tooltipClassName, darkMode && tooltip_module_css_1.default.tooltipDarkMode) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAWhC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAA,yBAAe,EAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAWhC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAA,yBAAe,EAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,8BAAC,uBAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,8BAAC,iBAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,4BAAG,CAAC,eAAe,CAAC;YAE7E,8BAAC,sBAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,4BAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,OAAO,WAmClB"}
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
14
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
|
-
border-radius: var(--radius-
|
|
15
|
+
border-radius: var(--radius-small);
|
|
16
16
|
background: var(--color-light);
|
|
17
17
|
max-width: 24em;
|
|
18
18
|
color: var(--color-text);
|
|
19
19
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
20
|
will-change: filter;
|
|
21
21
|
font-size: var(--size-xsmall);
|
|
22
|
-
|
|
22
|
+
text-align: center;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.arrow svg {
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.tooltipDarkMode {
|
|
31
|
-
background: var(--color-text);
|
|
31
|
+
background: var(--color-text-dark);
|
|
32
32
|
color: var(--color-light);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.tooltipDarkMode .arrow svg {
|
|
36
|
-
fill: var(--color-text);
|
|
36
|
+
fill: var(--color-text-dark);
|
|
37
37
|
}
|
|
@@ -24,7 +24,7 @@ export const MetricRunInfo = (props) => {
|
|
|
24
24
|
}
|
|
25
25
|
return null;
|
|
26
26
|
}, [showMetricDescription, metric]);
|
|
27
|
-
return (React.createElement(RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, ...(showBaseline && {
|
|
27
|
+
return (React.createElement(RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
|
|
28
28
|
baseline: metric.formatter(baseline),
|
|
29
29
|
}), ...(showDelta && showBaseline && {
|
|
30
30
|
delta: metricRunInfo.displayDeltaPercentage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,aAAa,CAAC;AACpD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;QACrB,+BAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,oBAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,aAAa,CAAC;AACpD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;QACrB,+BAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,oBAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,EACnC,YAAY,EAAE,YAAY,KACtB,CAAC,YAAY,IAAI;YACnB,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;SACrC,CAAC,KACE,CAAC,SAAS,IAAI,YAAY,IAAI;YAChC,KAAK,EAAE,aAAa,CAAC,sBAAsB;YAC3C,SAAS,EAAE,aAAa,CAAC,SAAS;SACnC,CAAC,KACE,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -17,7 +17,7 @@ const getMetricParams = (value) => {
|
|
|
17
17
|
}
|
|
18
18
|
return [matches[1], matches[2]];
|
|
19
19
|
};
|
|
20
|
-
export const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', loading = false, enhance = false, ...restProps }) => {
|
|
20
|
+
export const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', showBaseline = true, loading = false, enhance = false, ...restProps }) => {
|
|
21
21
|
const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
|
|
22
22
|
const currentValueParams = useMemo(() => {
|
|
23
23
|
if (!enhance || typeof current !== 'string') {
|
|
@@ -33,8 +33,8 @@ export const RunInfo = ({ className = '', title = '', titleHoverCard = null, tit
|
|
|
33
33
|
React.createElement(Icon, { glyph: Icon.ICONS.HELP }))))),
|
|
34
34
|
!loading ? (React.createElement(Stack, null,
|
|
35
35
|
React.createElement(Metric, { className: css.currentMetric, value: currentValueParams[0], unit: currentValueParams[1], inline: true }, delta && React.createElement(Delta, { className: css.delta, displayValue: delta, deltaType: deltaType })),
|
|
36
|
-
React.createElement(Metric, { className: css.baselineMetric, value: baseline }))) : (React.createElement(Stack, null,
|
|
36
|
+
showBaseline && React.createElement(Metric, { className: css.baselineMetric, value: baseline }))) : (React.createElement(Stack, null,
|
|
37
37
|
React.createElement(Skeleton, { as: "p", className: cx(css.currentMetric, css.loading) }),
|
|
38
|
-
React.createElement(Skeleton, { as: "p", className: cx(css.baselineMetric, css.loading) })))));
|
|
38
|
+
showBaseline && React.createElement(Skeleton, { as: "p", className: cx(css.baselineMetric, css.loading) })))));
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=run-info.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAGxC,MAAM,0BAA0B,GAAG,uBAAuB,CAAC;AAE3D,MAAM,eAAe,GAAG,CAAC,KAAa,EAAqB,EAAE;IAC3D,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAExD,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,CAAC;KAChB;IAED,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardS
|
|
|
5
5
|
import css from './hover-card.module.css';
|
|
6
6
|
export const HoverCard = (props) => {
|
|
7
7
|
const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
|
|
8
|
-
const state = useHovercardState({ gutter: 8, timeout:
|
|
8
|
+
const state = useHovercardState({ gutter: 8, timeout: 800 });
|
|
9
9
|
const hovercardProps = useHovercard({ state, portal: true });
|
|
10
10
|
const Component = useMemo(() => {
|
|
11
11
|
if (as) {
|
|
@@ -4,7 +4,7 @@ import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as
|
|
|
4
4
|
import css from './tooltip.module.css';
|
|
5
5
|
export const Tooltip = (props) => {
|
|
6
6
|
const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
|
|
7
|
-
const tooltip = useTooltipState({ placement: 'top' });
|
|
7
|
+
const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
|
|
8
8
|
return (React.createElement(React.Fragment, null,
|
|
9
9
|
React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }),
|
|
10
10
|
title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YAE7E,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
14
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
|
-
border-radius: var(--radius-
|
|
15
|
+
border-radius: var(--radius-small);
|
|
16
16
|
background: var(--color-light);
|
|
17
17
|
max-width: 24em;
|
|
18
18
|
color: var(--color-text);
|
|
19
19
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
20
|
will-change: filter;
|
|
21
21
|
font-size: var(--size-xsmall);
|
|
22
|
-
|
|
22
|
+
text-align: center;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.arrow svg {
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.tooltipDarkMode {
|
|
31
|
-
background: var(--color-text);
|
|
31
|
+
background: var(--color-text-dark);
|
|
32
32
|
color: var(--color-light);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.tooltipDarkMode .arrow svg {
|
|
36
|
-
fill: var(--color-text);
|
|
36
|
+
fill: var(--color-text-dark);
|
|
37
37
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.6",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@babel/preset-env": "7.
|
|
41
|
+
"@babel/preset-env": "7.21.4",
|
|
42
42
|
"@babel/preset-react": "7.18.6",
|
|
43
43
|
"@storybook/addon-essentials": "6.5.16",
|
|
44
44
|
"@storybook/addon-knobs": "6.4.0",
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
"react-dom": "17.0.2",
|
|
69
69
|
"react-router-dom": "5.3.4",
|
|
70
70
|
"react-test-renderer": "18.2.0",
|
|
71
|
-
"rimraf": "4.4.
|
|
72
|
-
"typescript": "
|
|
73
|
-
"typescript-plugin-css-modules": "
|
|
71
|
+
"rimraf": "4.4.1",
|
|
72
|
+
"typescript": "5.0.3",
|
|
73
|
+
"typescript-plugin-css-modules": "5.0.0"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"classnames": "^2.0.0",
|
|
@@ -81,11 +81,11 @@
|
|
|
81
81
|
"react-router-dom": "^5.0.0"
|
|
82
82
|
},
|
|
83
83
|
"dependencies": {
|
|
84
|
-
"@bundle-stats/utils": "^4.2.
|
|
84
|
+
"@bundle-stats/utils": "^4.2.6",
|
|
85
85
|
"ariakit": "2.0.0-next.43",
|
|
86
86
|
"modern-css-reset": "1.4.0",
|
|
87
87
|
"query-string": "7.1.3",
|
|
88
|
-
"use-query-params": "2.2.
|
|
88
|
+
"use-query-params": "2.2.1"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "081a349dfbb5de00af75502ab295c6e3dfecec12"
|
|
91
91
|
}
|
|
@@ -71,6 +71,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
|
|
|
71
71
|
titleHoverCard={titleHoverCard}
|
|
72
72
|
enhance
|
|
73
73
|
current={metricRunInfo.displayValue}
|
|
74
|
+
showBaseline={showBaseline}
|
|
74
75
|
{...(showBaseline && {
|
|
75
76
|
baseline: metric.formatter(baseline),
|
|
76
77
|
})}
|
|
@@ -36,6 +36,7 @@ export interface RunInfoProps {
|
|
|
36
36
|
as?: React.ElementType;
|
|
37
37
|
size?: 'medium' | 'large';
|
|
38
38
|
|
|
39
|
+
showBaseline?: boolean;
|
|
39
40
|
loading?: boolean;
|
|
40
41
|
enhance?: boolean;
|
|
41
42
|
}
|
|
@@ -51,6 +52,7 @@ export const RunInfo = ({
|
|
|
51
52
|
deltaType = '',
|
|
52
53
|
as: Component = 'div',
|
|
53
54
|
size = 'medium',
|
|
55
|
+
showBaseline = true,
|
|
54
56
|
loading = false,
|
|
55
57
|
enhance = false,
|
|
56
58
|
...restProps
|
|
@@ -93,12 +95,12 @@ export const RunInfo = ({
|
|
|
93
95
|
>
|
|
94
96
|
{delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
|
|
95
97
|
</Metric>
|
|
96
|
-
<Metric className={css.baselineMetric} value={baseline} />
|
|
98
|
+
{showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
|
|
97
99
|
</Stack>
|
|
98
100
|
) : (
|
|
99
101
|
<Stack>
|
|
100
102
|
<Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
|
|
101
|
-
<Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
|
|
103
|
+
{showBaseline && <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />}
|
|
102
104
|
</Stack>
|
|
103
105
|
)}
|
|
104
106
|
</Stack>
|
|
@@ -14,7 +14,7 @@ import css from './hover-card.module.css';
|
|
|
14
14
|
export const HoverCard = (props) => {
|
|
15
15
|
const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
|
|
16
16
|
|
|
17
|
-
const state = useHovercardState({ gutter: 8, timeout:
|
|
17
|
+
const state = useHovercardState({ gutter: 8, timeout: 800 });
|
|
18
18
|
const hovercardProps = useHovercard({ state, portal: true });
|
|
19
19
|
|
|
20
20
|
// Fallback to span if no href
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
14
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
|
-
border-radius: var(--radius-
|
|
15
|
+
border-radius: var(--radius-small);
|
|
16
16
|
background: var(--color-light);
|
|
17
17
|
max-width: 24em;
|
|
18
18
|
color: var(--color-text);
|
|
19
19
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
20
|
will-change: filter;
|
|
21
21
|
font-size: var(--size-xsmall);
|
|
22
|
-
|
|
22
|
+
text-align: center;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.arrow svg {
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.tooltipDarkMode {
|
|
31
|
-
background: var(--color-text);
|
|
31
|
+
background: var(--color-text-dark);
|
|
32
32
|
color: var(--color-light);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.tooltipDarkMode .arrow svg {
|
|
36
|
-
fill: var(--color-text);
|
|
36
|
+
fill: var(--color-text-dark);
|
|
37
37
|
}
|
|
@@ -20,5 +20,5 @@ export namespace AssetInfo {
|
|
|
20
20
|
export { ComponentLink as CustomComponentLink };
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
import PropTypes from
|
|
24
|
-
import { ComponentLink } from
|
|
23
|
+
import PropTypes from 'prop-types';
|
|
24
|
+
import { ComponentLink } from '../component-link';
|
|
@@ -47,5 +47,5 @@ export namespace BundleAssets {
|
|
|
47
47
|
export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
import { ComponentLink } from
|
|
51
|
-
import PropTypes from
|
|
50
|
+
import { ComponentLink } from '../component-link';
|
|
51
|
+
import PropTypes from 'prop-types';
|
package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts
CHANGED
|
@@ -17,5 +17,5 @@ export namespace BundleAssetsTotalsChartBars {
|
|
|
17
17
|
export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
import { ComponentLink } from
|
|
21
|
-
import PropTypes from
|
|
20
|
+
import { ComponentLink } from '../component-link';
|
|
21
|
+
import PropTypes from 'prop-types';
|
|
@@ -18,5 +18,5 @@ export namespace BundleAssetsTotalsTable {
|
|
|
18
18
|
export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
import { ComponentLink } from
|
|
22
|
-
import PropTypes from
|
|
21
|
+
import { ComponentLink } from '../component-link';
|
|
22
|
+
import PropTypes from 'prop-types';
|
|
@@ -57,5 +57,5 @@ export namespace BundleModules {
|
|
|
57
57
|
export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
import { ComponentLink } from
|
|
61
|
-
import PropTypes from
|
|
60
|
+
import { ComponentLink } from '../component-link';
|
|
61
|
+
import PropTypes from 'prop-types';
|
|
@@ -41,5 +41,5 @@ export namespace BundlePackages {
|
|
|
41
41
|
export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
import { ComponentLink } from
|
|
45
|
-
import PropTypes from
|
|
44
|
+
import { ComponentLink } from '../component-link';
|
|
45
|
+
import PropTypes from 'prop-types';
|
|
@@ -30,6 +30,6 @@ export namespace ModuleInfo {
|
|
|
30
30
|
export { noop as onClick };
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
import PropTypes from
|
|
34
|
-
import { ComponentLink } from
|
|
35
|
-
import noop from
|
|
33
|
+
import PropTypes from 'prop-types';
|
|
34
|
+
import { ComponentLink } from '../component-link';
|
|
35
|
+
import noop from 'lodash/noop';
|
|
@@ -9,7 +9,8 @@ export interface RunInfoProps {
|
|
|
9
9
|
deltaType?: string;
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
size?: 'medium' | 'large';
|
|
12
|
+
showBaseline?: boolean;
|
|
12
13
|
loading?: boolean;
|
|
13
14
|
enhance?: boolean;
|
|
14
15
|
}
|
|
15
|
-
export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;
|
|
16
|
+
export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;
|
|
@@ -3,11 +3,11 @@ export namespace Separator {
|
|
|
3
3
|
export { propTypes };
|
|
4
4
|
export { defaultProps };
|
|
5
5
|
}
|
|
6
|
-
import PropTypes from
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
7
|
declare namespace propTypes {
|
|
8
8
|
const className: PropTypes.Requireable<string>;
|
|
9
9
|
}
|
|
10
|
-
import React from
|
|
10
|
+
import React from 'react';
|
|
11
11
|
declare namespace defaultProps {
|
|
12
12
|
const className_1: string;
|
|
13
13
|
export { className_1 as className };
|
|
@@ -16,5 +16,5 @@ export namespace Stack {
|
|
|
16
16
|
export const space: PropTypes.Requireable<"no-space" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge">;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
import { NO_SPACE } from
|
|
20
|
-
import PropTypes from
|
|
19
|
+
import { NO_SPACE } from '../../tokens';
|
|
20
|
+
import PropTypes from 'prop-types';
|
package/types/ui/icon/icon.d.ts
CHANGED
package/types/ui/tabs/tabs.d.ts
CHANGED
package/types/ui/tag/tag.d.ts
CHANGED