@bundle-stats/ui 4.13.1 → 4.13.3
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 +12 -8
- package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib/components/metric-run-info/metric-run-info.module.css +13 -0
- package/lib/components/metrics-treemap/metrics-treemap.module.css +17 -14
- package/lib/components/metrics-treemap/metrics-treemap.utils.js +1 -1
- package/lib/components/run-info/run-info.js +1 -1
- package/lib/components/run-info/run-info.js.map +1 -1
- package/lib/components/run-info/run-info.module.css +10 -3
- package/lib/css/variables.css +1 -0
- package/lib/ui/file-name/file-name.module.css +2 -0
- package/lib/ui/tooltip/tooltip.module.css +4 -3
- package/lib-esm/components/metric-run-info/metric-run-info.js +12 -8
- package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib-esm/components/metric-run-info/metric-run-info.module.css +13 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +17 -14
- package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +1 -1
- package/lib-esm/components/run-info/run-info.js +1 -1
- package/lib-esm/components/run-info/run-info.js.map +1 -1
- package/lib-esm/components/run-info/run-info.module.css +10 -3
- package/lib-esm/css/variables.css +1 -0
- package/lib-esm/ui/file-name/file-name.module.css +2 -0
- package/lib-esm/ui/tooltip/tooltip.module.css +4 -3
- package/package.json +6 -6
- package/src/components/metric-run-info/metric-run-info.module.css +13 -0
- package/src/components/metric-run-info/metric-run-info.stories.tsx +19 -0
- package/src/components/metric-run-info/metric-run-info.tsx +26 -11
- package/src/components/metrics-treemap/metrics-treemap.module.css +17 -14
- package/src/components/metrics-treemap/metrics-treemap.utils.ts +1 -1
- package/src/components/run-info/run-info.module.css +10 -3
- package/src/components/run-info/run-info.stories.tsx +1 -1
- package/src/components/run-info/run-info.tsx +9 -9
- package/src/css/variables.css +1 -0
- package/src/ui/file-name/file-name.module.css +2 -0
- package/src/ui/tooltip/tooltip.module.css +4 -3
- package/types/components/metric-run-info/metric-run-info.d.ts +2 -1
- package/types/components/run-info/run-info.d.ts +7 -7
|
@@ -29,30 +29,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
exports.MetricRunInfo = void 0;
|
|
30
30
|
const react_1 = __importStar(require("react"));
|
|
31
31
|
const utils_1 = require("@bundle-stats/utils");
|
|
32
|
+
const focusable_1 = require("ariakit/focusable");
|
|
32
33
|
const stack_1 = require("../../layout/stack");
|
|
33
34
|
const flex_stack_1 = require("../../layout/flex-stack");
|
|
34
|
-
const button_1 = require("../../ui/button");
|
|
35
35
|
const icon_1 = require("../../ui/icon");
|
|
36
36
|
const run_info_1 = require("../run-info");
|
|
37
37
|
const metric_run_info_module_css_1 = __importDefault(require("./metric-run-info.module.css"));
|
|
38
38
|
const MetricHoverCard = ({ title, description, url }) => {
|
|
39
|
-
const onClick = (0, react_1.useCallback)(() => {
|
|
40
|
-
if (url) {
|
|
41
|
-
|
|
39
|
+
const onClick = (0, react_1.useCallback)((event) => {
|
|
40
|
+
if (!url) {
|
|
41
|
+
return;
|
|
42
42
|
}
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
event.stopPropagation();
|
|
45
|
+
window.open(url);
|
|
43
46
|
}, [url]);
|
|
44
47
|
return (react_1.default.createElement(stack_1.Stack, { space: "xxsmall", className: metric_run_info_module_css_1.default.metricHoverCard },
|
|
45
48
|
react_1.default.createElement("h3", { className: metric_run_info_module_css_1.default.metricHoverCardTitle }, title),
|
|
46
49
|
react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
|
|
47
50
|
react_1.default.createElement("p", { className: metric_run_info_module_css_1.default.metricHoverCardDescription }, description),
|
|
48
51
|
url && (react_1.default.createElement("div", null,
|
|
49
|
-
react_1.default.createElement(
|
|
52
|
+
react_1.default.createElement(focusable_1.Focusable, { as: "span", onClick: onClick, className: metric_run_info_module_css_1.default.readMoreLink },
|
|
50
53
|
react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxxsmall" },
|
|
51
|
-
react_1.default.createElement("span", null, "
|
|
54
|
+
react_1.default.createElement("span", null, "Learn more"),
|
|
52
55
|
react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.EXTERNAL_LINK, size: "small" }))))))));
|
|
53
56
|
};
|
|
54
57
|
const MetricRunInfo = (props) => {
|
|
55
|
-
const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, ...restProps } = props;
|
|
58
|
+
const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, titleWrapper: CustomTitleWrapper = react_1.default.Fragment, ...restProps } = props;
|
|
56
59
|
const metric = (0, utils_1.getGlobalMetricType)(metricId);
|
|
57
60
|
const metricRunInfo = (0, utils_1.getMetricRunInfo)(metric, current, baseline || 0);
|
|
58
61
|
const titleHoverCard = (0, react_1.useMemo)(() => {
|
|
@@ -61,6 +64,7 @@ const MetricRunInfo = (props) => {
|
|
|
61
64
|
}
|
|
62
65
|
return null;
|
|
63
66
|
}, [showMetricDescription, metric]);
|
|
67
|
+
const title = (0, react_1.useMemo)(() => react_1.default.createElement(CustomTitleWrapper, null, metric.label), [CustomTitleWrapper, metric.label]);
|
|
64
68
|
const deltaProps = (0, react_1.useMemo)(() => {
|
|
65
69
|
if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
|
|
66
70
|
return {};
|
|
@@ -70,7 +74,7 @@ const MetricRunInfo = (props) => {
|
|
|
70
74
|
deltaType: metricRunInfo.deltaType,
|
|
71
75
|
};
|
|
72
76
|
}, [metricRunInfo]);
|
|
73
|
-
return (react_1.default.createElement(run_info_1.RunInfo, { title:
|
|
77
|
+
return (react_1.default.createElement(run_info_1.RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
|
|
74
78
|
baseline: metric.formatter(baseline),
|
|
75
79
|
}), ...deltaProps, ...restProps }));
|
|
76
80
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkF;AAClF,+CAA4E;AAC5E,iDAA8C;AAE9C,8CAA2C;AAC3C,wDAAoD;AACpD,wCAAqC;AACrC,0CAAoD;AACpD,8FAA+C;AAQ/C,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAGvE,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,KAAkC,EAAE,EAAE;QACrC,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,oCAAG,CAAC,eAAe;QACnD,sCAAI,SAAS,EAAE,oCAAG,CAAC,oBAAoB,IAAG,KAAK,CAAM;QACrD,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;YACrB,qCAAG,SAAS,EAAE,oCAAG,CAAC,0BAA0B,IAAG,WAAW,CAAK;YAC9D,GAAG,IAAI,CACN;gBACE,8BAAC,qBAAS,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,oCAAG,CAAC,YAAY;oBAChE,8BAAC,sBAAS,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU;wBAC7C,yDAAuB;wBACvB,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,EAAC,OAAO,GAAG,CAC5C,CACF,CACR,CACP,CACK,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAcK,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,YAAY,EAAE,kBAAkB,GAAG,eAAK,CAAC,QAAQ,EACjD,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,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE;YAC/D,OAAO,CACL,8BAAC,eAAe,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAC3F,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,8BAAC,kBAAkB,QAAE,MAAM,CAAC,KAAK,CAAsB,EAC7D,CAAC,kBAAkB,EAAE,MAAM,CAAC,KAAK,CAAC,CACnC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,OAAO,IAAI,aAAa,CAAC,EAAE;YACjE,OAAO,EAAE,CAAC;SACX;QAED,OAAO;YACL,KAAK,EAAE,aAAa,CAAC,sBAAsB;YAC3C,SAAS,EAAE,aAAa,CAAC,SAAS;SACnC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,8BAAC,kBAAO,IACN,KAAK,EAAE,KAAK,EACZ,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,UAAU,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAvDW,QAAA,aAAa,iBAuDxB"}
|
|
@@ -2,3 +2,16 @@
|
|
|
2
2
|
font-weight: bold;
|
|
3
3
|
font-size: 1em;
|
|
4
4
|
}
|
|
5
|
+
|
|
6
|
+
.readMoreLink {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
color: var(--color-primary);
|
|
9
|
+
text-decoration: underline;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.readMoreLink:hover,
|
|
13
|
+
.readMoreLink:focus,
|
|
14
|
+
.readMoreLink:active {
|
|
15
|
+
color: var(--color-primary-dark);
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
}
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
.tileGroupTitle {
|
|
27
27
|
width: 100%;
|
|
28
|
+
cursor: default;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.tileGroupTitleContent {
|
|
@@ -53,18 +54,18 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
.tileGroupTitle {
|
|
56
|
-
transition: var(--
|
|
57
|
+
transition: var(--transition-out);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.tileGroupTitle:hover .tileGroupTitleText {
|
|
60
61
|
text-decoration: underline;
|
|
61
|
-
transition: var(--
|
|
62
|
+
transition: var(--transition-in);
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
/** Tile group size variation */
|
|
65
66
|
.tileGroup {
|
|
66
|
-
transition: var(--
|
|
67
|
-
transition-property:
|
|
67
|
+
transition: var(--transition-out);
|
|
68
|
+
transition-property: background-color, outline;
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
.tileGroup--minimal .tileGroupTitle,
|
|
@@ -80,13 +81,15 @@
|
|
|
80
81
|
/** Tile group nested variation */
|
|
81
82
|
.nested .tileGroup {
|
|
82
83
|
background-color: rgba(27, 26, 33, 0.03);
|
|
83
|
-
outline: 1px solid rgba(255, 255, 255, 0.
|
|
84
|
+
outline: 1px solid rgba(255, 255, 255, 0.8);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
.nested .tileGroup:has(> .tileGroupTitle:hover),
|
|
87
88
|
.nested .tileGroup:has(> .tile:hover) {
|
|
88
89
|
background-color: rgba(27, 26, 33, 0.06);
|
|
89
90
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
91
|
+
transition: var(--transition-in);
|
|
92
|
+
transition-property: background-color, outline;
|
|
90
93
|
}
|
|
91
94
|
|
|
92
95
|
.nested .tileGroup--NEGATIVE {
|
|
@@ -136,7 +139,8 @@
|
|
|
136
139
|
font-size: var(--size-small);
|
|
137
140
|
line-height: var(--line-height-heading);
|
|
138
141
|
text-align: left;
|
|
139
|
-
transition: var(--
|
|
142
|
+
transition: var(--transition-out);
|
|
143
|
+
transition-property: opacity, background-color;
|
|
140
144
|
}
|
|
141
145
|
|
|
142
146
|
.tile::before {
|
|
@@ -208,30 +212,29 @@
|
|
|
208
212
|
margin-top: 0;
|
|
209
213
|
}
|
|
210
214
|
|
|
211
|
-
.tileSizeDefault {
|
|
212
|
-
transition: var(--ui-transition-in);
|
|
213
|
-
transition-property: left, top, width, height;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
215
|
/** Tile diff variation */
|
|
217
216
|
.tile {
|
|
218
217
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
219
218
|
color: var(--color-text);
|
|
220
|
-
transition: var(--ui-transition-out);
|
|
221
219
|
}
|
|
222
220
|
|
|
223
221
|
.tile::before {
|
|
224
222
|
color: var(--color-highlight);
|
|
225
|
-
transition: var(--
|
|
223
|
+
transition: var(--transition-out);
|
|
226
224
|
transition-property: opacity;
|
|
227
225
|
opacity: 0.6;
|
|
228
226
|
}
|
|
229
227
|
|
|
230
228
|
.tile:hover::before {
|
|
231
|
-
transition: var(--
|
|
229
|
+
transition: var(--transition-in);
|
|
230
|
+
transition-property: opacity;
|
|
232
231
|
opacity: 0.4;
|
|
233
232
|
}
|
|
234
233
|
|
|
234
|
+
.tile:hover .tileContentLabel {
|
|
235
|
+
text-decoration: underline;
|
|
236
|
+
}
|
|
237
|
+
|
|
235
238
|
.tile-NO_CHANGE {
|
|
236
239
|
color: var(--color-text-light);
|
|
237
240
|
}
|
|
@@ -153,7 +153,7 @@ function resolveTileSizeDisplay(width, height) {
|
|
|
153
153
|
}
|
|
154
154
|
exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
|
|
155
155
|
function useTooltipStateWithMouseFollow(options) {
|
|
156
|
-
const { parentRef, gutter = 16, timeout =
|
|
156
|
+
const { parentRef, gutter = 16, timeout = 240 } = options;
|
|
157
157
|
const pointer = (0, react_use_1.useMouseHovered)(parentRef, { whenHovered: true });
|
|
158
158
|
const getAnchorRect = (0, react_1.useCallback)(() => {
|
|
159
159
|
if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
|
|
@@ -46,7 +46,7 @@ const getMetricParams = (value) => {
|
|
|
46
46
|
}
|
|
47
47
|
return [matches[1], matches[2]];
|
|
48
48
|
};
|
|
49
|
-
const RunInfo = ({ className = '', title =
|
|
49
|
+
const RunInfo = ({ className = '', title = null, titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaPercentage = '', 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 || deltaPercentage) && run_info_module_css_1.default.showDelta);
|
|
51
51
|
const currentValueParams = (0, react_1.useMemo)(() => {
|
|
52
52
|
if (!enhance || typeof current !== 'string') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
|
|
26
26
|
.currentMetric {
|
|
27
27
|
color: var(--color-heading);
|
|
28
|
-
font-size: var(--size-xxlarge);
|
|
29
28
|
line-height: var(--line-height-heading);
|
|
30
29
|
white-space: nowrap;
|
|
31
30
|
font-weight: bold;
|
|
@@ -56,7 +55,7 @@
|
|
|
56
55
|
|
|
57
56
|
.loading.baselineMetric {
|
|
58
57
|
min-width: 0;
|
|
59
|
-
max-width:
|
|
58
|
+
max-width: 8em;
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
/* Hover state */
|
|
@@ -75,14 +74,22 @@
|
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
/* Size variation */
|
|
77
|
+
.currentMetric {
|
|
78
|
+
font-size: var(--size-xxlarge);
|
|
79
|
+
}
|
|
80
|
+
|
|
78
81
|
.small .currentMetric {
|
|
79
82
|
font-size: var(--size-medium);
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
.large .currentMetric {
|
|
83
|
-
font-size: var(--size-
|
|
86
|
+
font-size: var(--size-xxxlarge);
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
.large .baselineMetric {
|
|
87
90
|
font-size: var(--size-small);
|
|
88
91
|
}
|
|
92
|
+
|
|
93
|
+
.xlarge .currentMetric {
|
|
94
|
+
font-size: var(--size-xxxxlarge);
|
|
95
|
+
}
|
package/lib/css/variables.css
CHANGED
|
@@ -11,15 +11,16 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
|
+
z-index: var(--layer-xxhigh);
|
|
14
15
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
16
|
border-radius: var(--radius-small);
|
|
16
17
|
background: var(--color-light);
|
|
17
|
-
max-width:
|
|
18
|
+
max-width: 28em;
|
|
18
19
|
color: var(--color-text);
|
|
20
|
+
font-size: var(--size-xsmall);
|
|
21
|
+
text-align: center;
|
|
19
22
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
23
|
will-change: filter;
|
|
21
|
-
font-size: var(--size-xsmall);
|
|
22
|
-
z-index: var(--layer-xxhigh);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.arrow svg {
|
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
|
|
3
|
+
import { Focusable } from 'ariakit/focusable';
|
|
3
4
|
import { Stack } from '../../layout/stack';
|
|
4
5
|
import { FlexStack } from '../../layout/flex-stack';
|
|
5
|
-
import { Button } from '../../ui/button';
|
|
6
6
|
import { Icon } from '../../ui/icon';
|
|
7
7
|
import { RunInfo } from '../run-info';
|
|
8
8
|
import css from './metric-run-info.module.css';
|
|
9
9
|
const MetricHoverCard = ({ title, description, url }) => {
|
|
10
|
-
const onClick = useCallback(() => {
|
|
11
|
-
if (url) {
|
|
12
|
-
|
|
10
|
+
const onClick = useCallback((event) => {
|
|
11
|
+
if (!url) {
|
|
12
|
+
return;
|
|
13
13
|
}
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
event.stopPropagation();
|
|
16
|
+
window.open(url);
|
|
14
17
|
}, [url]);
|
|
15
18
|
return (React.createElement(Stack, { space: "xxsmall", className: css.metricHoverCard },
|
|
16
19
|
React.createElement("h3", { className: css.metricHoverCardTitle }, title),
|
|
17
20
|
React.createElement(Stack, { space: "xxxsmall" },
|
|
18
21
|
React.createElement("p", { className: css.metricHoverCardDescription }, description),
|
|
19
22
|
url && (React.createElement("div", null,
|
|
20
|
-
React.createElement(
|
|
23
|
+
React.createElement(Focusable, { as: "span", onClick: onClick, className: css.readMoreLink },
|
|
21
24
|
React.createElement(FlexStack, { alignItems: "center", space: "xxxsmall" },
|
|
22
|
-
React.createElement("span", null, "
|
|
25
|
+
React.createElement("span", null, "Learn more"),
|
|
23
26
|
React.createElement(Icon, { glyph: Icon.ICONS.EXTERNAL_LINK, size: "small" }))))))));
|
|
24
27
|
};
|
|
25
28
|
export const MetricRunInfo = (props) => {
|
|
26
|
-
const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, ...restProps } = props;
|
|
29
|
+
const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, titleWrapper: CustomTitleWrapper = React.Fragment, ...restProps } = props;
|
|
27
30
|
const metric = getGlobalMetricType(metricId);
|
|
28
31
|
const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
|
|
29
32
|
const titleHoverCard = useMemo(() => {
|
|
@@ -32,6 +35,7 @@ export const MetricRunInfo = (props) => {
|
|
|
32
35
|
}
|
|
33
36
|
return null;
|
|
34
37
|
}, [showMetricDescription, metric]);
|
|
38
|
+
const title = useMemo(() => React.createElement(CustomTitleWrapper, null, metric.label), [CustomTitleWrapper, metric.label]);
|
|
35
39
|
const deltaProps = useMemo(() => {
|
|
36
40
|
if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
|
|
37
41
|
return {};
|
|
@@ -41,7 +45,7 @@ export const MetricRunInfo = (props) => {
|
|
|
41
45
|
deltaType: metricRunInfo.deltaType,
|
|
42
46
|
};
|
|
43
47
|
}, [metricRunInfo]);
|
|
44
|
-
return (React.createElement(RunInfo, { title:
|
|
48
|
+
return (React.createElement(RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
|
|
45
49
|
baseline: metric.formatter(baseline),
|
|
46
50
|
}), ...deltaProps, ...restProps }));
|
|
47
51
|
};
|
|
@@ -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,
|
|
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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"}
|
|
@@ -2,3 +2,16 @@
|
|
|
2
2
|
font-weight: bold;
|
|
3
3
|
font-size: 1em;
|
|
4
4
|
}
|
|
5
|
+
|
|
6
|
+
.readMoreLink {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
color: var(--color-primary);
|
|
9
|
+
text-decoration: underline;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.readMoreLink:hover,
|
|
13
|
+
.readMoreLink:focus,
|
|
14
|
+
.readMoreLink:active {
|
|
15
|
+
color: var(--color-primary-dark);
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
}
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
.tileGroupTitle {
|
|
27
27
|
width: 100%;
|
|
28
|
+
cursor: default;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.tileGroupTitleContent {
|
|
@@ -53,18 +54,18 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
.tileGroupTitle {
|
|
56
|
-
transition: var(--
|
|
57
|
+
transition: var(--transition-out);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.tileGroupTitle:hover .tileGroupTitleText {
|
|
60
61
|
text-decoration: underline;
|
|
61
|
-
transition: var(--
|
|
62
|
+
transition: var(--transition-in);
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
/** Tile group size variation */
|
|
65
66
|
.tileGroup {
|
|
66
|
-
transition: var(--
|
|
67
|
-
transition-property:
|
|
67
|
+
transition: var(--transition-out);
|
|
68
|
+
transition-property: background-color, outline;
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
.tileGroup--minimal .tileGroupTitle,
|
|
@@ -80,13 +81,15 @@
|
|
|
80
81
|
/** Tile group nested variation */
|
|
81
82
|
.nested .tileGroup {
|
|
82
83
|
background-color: rgba(27, 26, 33, 0.03);
|
|
83
|
-
outline: 1px solid rgba(255, 255, 255, 0.
|
|
84
|
+
outline: 1px solid rgba(255, 255, 255, 0.8);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
.nested .tileGroup:has(> .tileGroupTitle:hover),
|
|
87
88
|
.nested .tileGroup:has(> .tile:hover) {
|
|
88
89
|
background-color: rgba(27, 26, 33, 0.06);
|
|
89
90
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
91
|
+
transition: var(--transition-in);
|
|
92
|
+
transition-property: background-color, outline;
|
|
90
93
|
}
|
|
91
94
|
|
|
92
95
|
.nested .tileGroup--NEGATIVE {
|
|
@@ -136,7 +139,8 @@
|
|
|
136
139
|
font-size: var(--size-small);
|
|
137
140
|
line-height: var(--line-height-heading);
|
|
138
141
|
text-align: left;
|
|
139
|
-
transition: var(--
|
|
142
|
+
transition: var(--transition-out);
|
|
143
|
+
transition-property: opacity, background-color;
|
|
140
144
|
}
|
|
141
145
|
|
|
142
146
|
.tile::before {
|
|
@@ -208,30 +212,29 @@
|
|
|
208
212
|
margin-top: 0;
|
|
209
213
|
}
|
|
210
214
|
|
|
211
|
-
.tileSizeDefault {
|
|
212
|
-
transition: var(--ui-transition-in);
|
|
213
|
-
transition-property: left, top, width, height;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
215
|
/** Tile diff variation */
|
|
217
216
|
.tile {
|
|
218
217
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
219
218
|
color: var(--color-text);
|
|
220
|
-
transition: var(--ui-transition-out);
|
|
221
219
|
}
|
|
222
220
|
|
|
223
221
|
.tile::before {
|
|
224
222
|
color: var(--color-highlight);
|
|
225
|
-
transition: var(--
|
|
223
|
+
transition: var(--transition-out);
|
|
226
224
|
transition-property: opacity;
|
|
227
225
|
opacity: 0.6;
|
|
228
226
|
}
|
|
229
227
|
|
|
230
228
|
.tile:hover::before {
|
|
231
|
-
transition: var(--
|
|
229
|
+
transition: var(--transition-in);
|
|
230
|
+
transition-property: opacity;
|
|
232
231
|
opacity: 0.4;
|
|
233
232
|
}
|
|
234
233
|
|
|
234
|
+
.tile:hover .tileContentLabel {
|
|
235
|
+
text-decoration: underline;
|
|
236
|
+
}
|
|
237
|
+
|
|
235
238
|
.tile-NO_CHANGE {
|
|
236
239
|
color: var(--color-text-light);
|
|
237
240
|
}
|
|
@@ -147,7 +147,7 @@ export function resolveTileSizeDisplay(width, height) {
|
|
|
147
147
|
return 'default';
|
|
148
148
|
}
|
|
149
149
|
export function useTooltipStateWithMouseFollow(options) {
|
|
150
|
-
const { parentRef, gutter = 16, timeout =
|
|
150
|
+
const { parentRef, gutter = 16, timeout = 240 } = options;
|
|
151
151
|
const pointer = useMouseHovered(parentRef, { whenHovered: true });
|
|
152
152
|
const getAnchorRect = useCallback(() => {
|
|
153
153
|
var _a, _b, _c, _d;
|
|
@@ -17,7 +17,7 @@ const getMetricParams = (value) => {
|
|
|
17
17
|
}
|
|
18
18
|
return [matches[1], matches[2]];
|
|
19
19
|
};
|
|
20
|
-
export const RunInfo = ({ className = '', title =
|
|
20
|
+
export const RunInfo = ({ className = '', title = null, titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaPercentage = '', deltaType = '', as: Component = 'div', size = 'medium', showBaseline = true, loading = false, enhance = false, ...restProps }) => {
|
|
21
21
|
const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
|
|
22
22
|
const currentValueParams = useMemo(() => {
|
|
23
23
|
if (!enhance || typeof current !== 'string') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
|
|
26
26
|
.currentMetric {
|
|
27
27
|
color: var(--color-heading);
|
|
28
|
-
font-size: var(--size-xxlarge);
|
|
29
28
|
line-height: var(--line-height-heading);
|
|
30
29
|
white-space: nowrap;
|
|
31
30
|
font-weight: bold;
|
|
@@ -56,7 +55,7 @@
|
|
|
56
55
|
|
|
57
56
|
.loading.baselineMetric {
|
|
58
57
|
min-width: 0;
|
|
59
|
-
max-width:
|
|
58
|
+
max-width: 8em;
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
/* Hover state */
|
|
@@ -75,14 +74,22 @@
|
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
/* Size variation */
|
|
77
|
+
.currentMetric {
|
|
78
|
+
font-size: var(--size-xxlarge);
|
|
79
|
+
}
|
|
80
|
+
|
|
78
81
|
.small .currentMetric {
|
|
79
82
|
font-size: var(--size-medium);
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
.large .currentMetric {
|
|
83
|
-
font-size: var(--size-
|
|
86
|
+
font-size: var(--size-xxxlarge);
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
.large .baselineMetric {
|
|
87
90
|
font-size: var(--size-small);
|
|
88
91
|
}
|
|
92
|
+
|
|
93
|
+
.xlarge .currentMetric {
|
|
94
|
+
font-size: var(--size-xxxxlarge);
|
|
95
|
+
}
|
|
@@ -11,15 +11,16 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
|
+
z-index: var(--layer-xxhigh);
|
|
14
15
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
16
|
border-radius: var(--radius-small);
|
|
16
17
|
background: var(--color-light);
|
|
17
|
-
max-width:
|
|
18
|
+
max-width: 28em;
|
|
18
19
|
color: var(--color-text);
|
|
20
|
+
font-size: var(--size-xsmall);
|
|
21
|
+
text-align: center;
|
|
19
22
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
23
|
will-change: filter;
|
|
21
|
-
font-size: var(--size-xsmall);
|
|
22
|
-
z-index: var(--layer-xxhigh);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.arrow svg {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.13.
|
|
3
|
+
"version": "4.13.3",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@babel/preset-env": "7.24.
|
|
40
|
-
"@babel/preset-react": "7.24.
|
|
41
|
-
"@babel/preset-typescript": "7.24.
|
|
39
|
+
"@babel/preset-env": "7.24.7",
|
|
40
|
+
"@babel/preset-react": "7.24.7",
|
|
41
|
+
"@babel/preset-typescript": "7.24.7",
|
|
42
42
|
"@storybook/addon-essentials": "7.6.17",
|
|
43
43
|
"@storybook/react": "7.6.17",
|
|
44
44
|
"@storybook/react-webpack5": "7.6.17",
|
|
@@ -73,12 +73,12 @@
|
|
|
73
73
|
"react-router-dom": "^5.0.0"
|
|
74
74
|
},
|
|
75
75
|
"dependencies": {
|
|
76
|
-
"@bundle-stats/utils": "^4.13.
|
|
76
|
+
"@bundle-stats/utils": "^4.13.3",
|
|
77
77
|
"ariakit": "2.0.0-next.44",
|
|
78
78
|
"d3": "^7.8.5",
|
|
79
79
|
"modern-css-reset": "1.4.0",
|
|
80
80
|
"react-use": "^17.5.0",
|
|
81
81
|
"use-query-params": "2.2.1"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "9ad8ae004d40d702efc3caef12d5641668a51d10"
|
|
84
84
|
}
|
|
@@ -2,3 +2,16 @@
|
|
|
2
2
|
font-weight: bold;
|
|
3
3
|
font-size: 1em;
|
|
4
4
|
}
|
|
5
|
+
|
|
6
|
+
.readMoreLink {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
color: var(--color-primary);
|
|
9
|
+
text-decoration: underline;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.readMoreLink:hover,
|
|
13
|
+
.readMoreLink:focus,
|
|
14
|
+
.readMoreLink:active {
|
|
15
|
+
color: var(--color-primary-dark);
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
}
|
|
@@ -40,3 +40,22 @@ MetricNoDelta.args = {
|
|
|
40
40
|
current: 85,
|
|
41
41
|
baseline: 50,
|
|
42
42
|
};
|
|
43
|
+
|
|
44
|
+
export const CustomTitle = Template.bind({});
|
|
45
|
+
|
|
46
|
+
CustomTitle.args = {
|
|
47
|
+
...Default.args,
|
|
48
|
+
titleWrapper: ({ children, style, ...restProps }: React.ComponentProps<'h1'>) => (
|
|
49
|
+
<h1 style={{ ...style, fontStyle: 'italic' }} {...restProps}>
|
|
50
|
+
{children}
|
|
51
|
+
</h1>
|
|
52
|
+
),
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const CustomComponent = Template.bind({});
|
|
56
|
+
|
|
57
|
+
CustomComponent.args = {
|
|
58
|
+
...Default.args,
|
|
59
|
+
as: 'a',
|
|
60
|
+
href: 'https://google.com/search?query=bundle+stats',
|
|
61
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, { useCallback, useMemo } from 'react';
|
|
1
|
+
import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
|
|
2
2
|
import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
|
|
3
|
+
import { Focusable } from 'ariakit/focusable';
|
|
3
4
|
|
|
4
5
|
import { Stack } from '../../layout/stack';
|
|
5
6
|
import { FlexStack } from '../../layout/flex-stack';
|
|
6
|
-
import { Button } from '../../ui/button';
|
|
7
7
|
import { Icon } from '../../ui/icon';
|
|
8
8
|
import { RunInfo, RunInfoProps } from '../run-info';
|
|
9
9
|
import css from './metric-run-info.module.css';
|
|
@@ -15,12 +15,20 @@ interface MetricInfoProps {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
|
|
18
|
-
// The component parent can be rendered inside a link
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
// The component parent can be rendered inside a link or a button
|
|
19
|
+
// use a focusable element with onClick to prevent DOM issues (a > button, a > a, etc)
|
|
20
|
+
const onClick = useCallback(
|
|
21
|
+
(event: MouseEvent<HTMLSpanElement>) => {
|
|
22
|
+
if (!url) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
event.stopPropagation();
|
|
21
28
|
window.open(url);
|
|
22
|
-
}
|
|
23
|
-
|
|
29
|
+
},
|
|
30
|
+
[url],
|
|
31
|
+
);
|
|
24
32
|
|
|
25
33
|
return (
|
|
26
34
|
<Stack space="xxsmall" className={css.metricHoverCard}>
|
|
@@ -29,12 +37,12 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
|
|
|
29
37
|
<p className={css.metricHoverCardDescription}>{description}</p>
|
|
30
38
|
{url && (
|
|
31
39
|
<div>
|
|
32
|
-
<
|
|
40
|
+
<Focusable as="span" onClick={onClick} className={css.readMoreLink}>
|
|
33
41
|
<FlexStack alignItems="center" space="xxxsmall">
|
|
34
|
-
<span>
|
|
42
|
+
<span>Learn more</span>
|
|
35
43
|
<Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
|
|
36
44
|
</FlexStack>
|
|
37
|
-
</
|
|
45
|
+
</Focusable>
|
|
38
46
|
</div>
|
|
39
47
|
)}
|
|
40
48
|
</Stack>
|
|
@@ -49,6 +57,7 @@ export interface MetricRunInfoProps {
|
|
|
49
57
|
showDelta?: boolean;
|
|
50
58
|
showMetricDescription?: boolean;
|
|
51
59
|
showBaseline?: boolean;
|
|
60
|
+
titleWrapper?: ElementType;
|
|
52
61
|
size?: RunInfoProps['size'];
|
|
53
62
|
loading?: RunInfoProps['loading'];
|
|
54
63
|
}
|
|
@@ -61,6 +70,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
|
|
|
61
70
|
showDelta = true,
|
|
62
71
|
showMetricDescription = true,
|
|
63
72
|
showBaseline = true,
|
|
73
|
+
titleWrapper: CustomTitleWrapper = React.Fragment,
|
|
64
74
|
...restProps
|
|
65
75
|
} = props;
|
|
66
76
|
|
|
@@ -77,6 +87,11 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
|
|
|
77
87
|
return null;
|
|
78
88
|
}, [showMetricDescription, metric]);
|
|
79
89
|
|
|
90
|
+
const title = useMemo(
|
|
91
|
+
() => <CustomTitleWrapper>{metric.label}</CustomTitleWrapper>,
|
|
92
|
+
[CustomTitleWrapper, metric.label],
|
|
93
|
+
);
|
|
94
|
+
|
|
80
95
|
const deltaProps = useMemo(() => {
|
|
81
96
|
if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
|
|
82
97
|
return {};
|
|
@@ -90,7 +105,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
|
|
|
90
105
|
|
|
91
106
|
return (
|
|
92
107
|
<RunInfo
|
|
93
|
-
title={
|
|
108
|
+
title={title}
|
|
94
109
|
titleHoverCard={titleHoverCard}
|
|
95
110
|
enhance
|
|
96
111
|
current={metricRunInfo.displayValue}
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
.tileGroupTitle {
|
|
27
27
|
width: 100%;
|
|
28
|
+
cursor: default;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.tileGroupTitleContent {
|
|
@@ -53,18 +54,18 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
.tileGroupTitle {
|
|
56
|
-
transition: var(--
|
|
57
|
+
transition: var(--transition-out);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.tileGroupTitle:hover .tileGroupTitleText {
|
|
60
61
|
text-decoration: underline;
|
|
61
|
-
transition: var(--
|
|
62
|
+
transition: var(--transition-in);
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
/** Tile group size variation */
|
|
65
66
|
.tileGroup {
|
|
66
|
-
transition: var(--
|
|
67
|
-
transition-property:
|
|
67
|
+
transition: var(--transition-out);
|
|
68
|
+
transition-property: background-color, outline;
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
.tileGroup--minimal .tileGroupTitle,
|
|
@@ -80,13 +81,15 @@
|
|
|
80
81
|
/** Tile group nested variation */
|
|
81
82
|
.nested .tileGroup {
|
|
82
83
|
background-color: rgba(27, 26, 33, 0.03);
|
|
83
|
-
outline: 1px solid rgba(255, 255, 255, 0.
|
|
84
|
+
outline: 1px solid rgba(255, 255, 255, 0.8);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
.nested .tileGroup:has(> .tileGroupTitle:hover),
|
|
87
88
|
.nested .tileGroup:has(> .tile:hover) {
|
|
88
89
|
background-color: rgba(27, 26, 33, 0.06);
|
|
89
90
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
91
|
+
transition: var(--transition-in);
|
|
92
|
+
transition-property: background-color, outline;
|
|
90
93
|
}
|
|
91
94
|
|
|
92
95
|
.nested .tileGroup--NEGATIVE {
|
|
@@ -136,7 +139,8 @@
|
|
|
136
139
|
font-size: var(--size-small);
|
|
137
140
|
line-height: var(--line-height-heading);
|
|
138
141
|
text-align: left;
|
|
139
|
-
transition: var(--
|
|
142
|
+
transition: var(--transition-out);
|
|
143
|
+
transition-property: opacity, background-color;
|
|
140
144
|
}
|
|
141
145
|
|
|
142
146
|
.tile::before {
|
|
@@ -208,30 +212,29 @@
|
|
|
208
212
|
margin-top: 0;
|
|
209
213
|
}
|
|
210
214
|
|
|
211
|
-
.tileSizeDefault {
|
|
212
|
-
transition: var(--ui-transition-in);
|
|
213
|
-
transition-property: left, top, width, height;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
215
|
/** Tile diff variation */
|
|
217
216
|
.tile {
|
|
218
217
|
outline: 1px solid rgba(255, 255, 255, 1);
|
|
219
218
|
color: var(--color-text);
|
|
220
|
-
transition: var(--ui-transition-out);
|
|
221
219
|
}
|
|
222
220
|
|
|
223
221
|
.tile::before {
|
|
224
222
|
color: var(--color-highlight);
|
|
225
|
-
transition: var(--
|
|
223
|
+
transition: var(--transition-out);
|
|
226
224
|
transition-property: opacity;
|
|
227
225
|
opacity: 0.6;
|
|
228
226
|
}
|
|
229
227
|
|
|
230
228
|
.tile:hover::before {
|
|
231
|
-
transition: var(--
|
|
229
|
+
transition: var(--transition-in);
|
|
230
|
+
transition-property: opacity;
|
|
232
231
|
opacity: 0.4;
|
|
233
232
|
}
|
|
234
233
|
|
|
234
|
+
.tile:hover .tileContentLabel {
|
|
235
|
+
text-decoration: underline;
|
|
236
|
+
}
|
|
237
|
+
|
|
235
238
|
.tile-NO_CHANGE {
|
|
236
239
|
color: var(--color-text-light);
|
|
237
240
|
}
|
|
@@ -245,7 +245,7 @@ interface UseTooltipStateWithMouseFollowOptions {
|
|
|
245
245
|
* Ariakit tooltip state hook with mouse follow functionality
|
|
246
246
|
*/
|
|
247
247
|
export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
|
|
248
|
-
const { parentRef, gutter = 16, timeout =
|
|
248
|
+
const { parentRef, gutter = 16, timeout = 240 } = options;
|
|
249
249
|
|
|
250
250
|
const pointer = useMouseHovered(parentRef, { whenHovered: true });
|
|
251
251
|
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
|
|
26
26
|
.currentMetric {
|
|
27
27
|
color: var(--color-heading);
|
|
28
|
-
font-size: var(--size-xxlarge);
|
|
29
28
|
line-height: var(--line-height-heading);
|
|
30
29
|
white-space: nowrap;
|
|
31
30
|
font-weight: bold;
|
|
@@ -56,7 +55,7 @@
|
|
|
56
55
|
|
|
57
56
|
.loading.baselineMetric {
|
|
58
57
|
min-width: 0;
|
|
59
|
-
max-width:
|
|
58
|
+
max-width: 8em;
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
/* Hover state */
|
|
@@ -75,14 +74,22 @@
|
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
/* Size variation */
|
|
77
|
+
.currentMetric {
|
|
78
|
+
font-size: var(--size-xxlarge);
|
|
79
|
+
}
|
|
80
|
+
|
|
78
81
|
.small .currentMetric {
|
|
79
82
|
font-size: var(--size-medium);
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
.large .currentMetric {
|
|
83
|
-
font-size: var(--size-
|
|
86
|
+
font-size: var(--size-xxxlarge);
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
.large .baselineMetric {
|
|
87
90
|
font-size: var(--size-small);
|
|
88
91
|
}
|
|
92
|
+
|
|
93
|
+
.xlarge .currentMetric {
|
|
94
|
+
font-size: var(--size-xxxxlarge);
|
|
95
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
1
|
+
import React, { type ReactNode, useMemo } from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
|
|
4
4
|
import { Icon } from '../../ui/icon';
|
|
@@ -25,17 +25,17 @@ const getMetricParams = (value: string): [string, string?] => {
|
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
export interface RunInfoProps {
|
|
28
|
-
title?:
|
|
29
|
-
titleHoverCard?:
|
|
30
|
-
titleTooltip?:
|
|
31
|
-
current?:
|
|
28
|
+
title?: ReactNode;
|
|
29
|
+
titleHoverCard?: ReactNode;
|
|
30
|
+
titleTooltip?: ReactNode;
|
|
31
|
+
current?: ReactNode;
|
|
32
32
|
baseline?: string;
|
|
33
33
|
delta?: string;
|
|
34
34
|
deltaPercentage?: string;
|
|
35
35
|
deltaType?: string;
|
|
36
36
|
|
|
37
37
|
as?: React.ElementType;
|
|
38
|
-
size?: 'small' | 'medium' | 'large';
|
|
38
|
+
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
|
39
39
|
|
|
40
40
|
showBaseline?: boolean;
|
|
41
41
|
loading?: boolean;
|
|
@@ -44,7 +44,7 @@ export interface RunInfoProps {
|
|
|
44
44
|
|
|
45
45
|
export const RunInfo = ({
|
|
46
46
|
className = '',
|
|
47
|
-
title =
|
|
47
|
+
title = null,
|
|
48
48
|
titleHoverCard = null,
|
|
49
49
|
titleTooltip = null,
|
|
50
50
|
current = '',
|
|
@@ -58,7 +58,7 @@ export const RunInfo = ({
|
|
|
58
58
|
loading = false,
|
|
59
59
|
enhance = false,
|
|
60
60
|
...restProps
|
|
61
|
-
}: RunInfoProps & React.ComponentProps<'div'>) => {
|
|
61
|
+
}: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => {
|
|
62
62
|
const rootClassName = cx(
|
|
63
63
|
css.root,
|
|
64
64
|
className,
|
|
@@ -66,7 +66,7 @@ export const RunInfo = ({
|
|
|
66
66
|
(delta || deltaPercentage) && css.showDelta,
|
|
67
67
|
);
|
|
68
68
|
|
|
69
|
-
const currentValueParams: [
|
|
69
|
+
const currentValueParams: [ReactNode, string?] = useMemo(() => {
|
|
70
70
|
if (!enhance || typeof current !== 'string') {
|
|
71
71
|
return [current];
|
|
72
72
|
}
|
package/src/css/variables.css
CHANGED
|
@@ -11,15 +11,16 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.tooltip {
|
|
14
|
+
z-index: var(--layer-xxhigh);
|
|
14
15
|
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
15
16
|
border-radius: var(--radius-small);
|
|
16
17
|
background: var(--color-light);
|
|
17
|
-
max-width:
|
|
18
|
+
max-width: 28em;
|
|
18
19
|
color: var(--color-text);
|
|
20
|
+
font-size: var(--size-xsmall);
|
|
21
|
+
text-align: center;
|
|
19
22
|
filter: drop-shadow(var(--shadow-layer));
|
|
20
23
|
will-change: filter;
|
|
21
|
-
font-size: var(--size-xsmall);
|
|
22
|
-
z-index: var(--layer-xxhigh);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.arrow svg {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ElementType } from 'react';
|
|
2
2
|
import { RunInfoProps } from '../run-info';
|
|
3
3
|
export interface MetricRunInfoProps {
|
|
4
4
|
metricId: string;
|
|
@@ -7,6 +7,7 @@ export interface MetricRunInfoProps {
|
|
|
7
7
|
showDelta?: boolean;
|
|
8
8
|
showMetricDescription?: boolean;
|
|
9
9
|
showBaseline?: boolean;
|
|
10
|
+
titleWrapper?: ElementType;
|
|
10
11
|
size?: RunInfoProps['size'];
|
|
11
12
|
loading?: RunInfoProps['loading'];
|
|
12
13
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
export interface RunInfoProps {
|
|
3
|
-
title?:
|
|
4
|
-
titleHoverCard?:
|
|
5
|
-
titleTooltip?:
|
|
6
|
-
current?:
|
|
3
|
+
title?: ReactNode;
|
|
4
|
+
titleHoverCard?: ReactNode;
|
|
5
|
+
titleTooltip?: ReactNode;
|
|
6
|
+
current?: ReactNode;
|
|
7
7
|
baseline?: string;
|
|
8
8
|
delta?: string;
|
|
9
9
|
deltaPercentage?: string;
|
|
10
10
|
deltaType?: string;
|
|
11
11
|
as?: React.ElementType;
|
|
12
|
-
size?: 'small' | 'medium' | 'large';
|
|
12
|
+
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
|
13
13
|
showBaseline?: boolean;
|
|
14
14
|
loading?: boolean;
|
|
15
15
|
enhance?: boolean;
|
|
16
16
|
}
|
|
17
|
-
export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
|
|
17
|
+
export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => React.JSX.Element;
|