@bundle-stats/ui 4.13.0-beta.12 → 4.13.0-beta.14

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.
Files changed (25) hide show
  1. package/lib/components/bundle-assets-totals/bundle-assets-totals.js +4 -4
  2. package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  3. package/lib/components/bundle-modules/bundle-modules.i18n.js +1 -1
  4. package/lib/components/metrics-treemap/metrics-treemap.module.css +11 -3
  5. package/lib/css/variables.css +2 -1
  6. package/lib/layout/box/box.module.css +4 -2
  7. package/lib/ui/table/table.module.css +30 -0
  8. package/lib/ui/tag/tag.module.css +3 -3
  9. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +4 -4
  10. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  11. package/lib-esm/components/bundle-modules/bundle-modules.i18n.js +1 -1
  12. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +11 -3
  13. package/lib-esm/css/variables.css +2 -1
  14. package/lib-esm/layout/box/box.module.css +4 -2
  15. package/lib-esm/ui/table/table.module.css +30 -0
  16. package/lib-esm/ui/tag/tag.module.css +3 -3
  17. package/package.json +4 -4
  18. package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +27 -22
  19. package/src/components/bundle-modules/bundle-modules.i18n.ts +1 -1
  20. package/src/components/metrics-treemap/metrics-treemap.module.css +11 -3
  21. package/src/css/variables.css +2 -1
  22. package/src/layout/box/box.module.css +4 -2
  23. package/src/ui/table/table.module.css +30 -0
  24. package/src/ui/tag/tag.module.css +3 -3
  25. package/types/components/bundle-modules/bundle-modules.i18n.d.ts +1 -1
package/lib/components/bundle-assets-totals/bundle-assets-totals.js CHANGED
@@ -46,15 +46,16 @@ const metrics_table_title_1 = require("../metrics-table-title");
46
46
  const metrics_table_header_1 = require("../metrics-table-header");
47
47
  const metrics_treemap_1 = require("../metrics-treemap");
48
48
  const component_link_1 = require("../component-link");
49
+ const metricsTableTitle = (react_1.default.createElement(metrics_table_title_1.MetricsTableTitle, { title: i18n_1.default.ASSET_TOTALS, popoverInfo: i18n_1.default.ASSET_TOTALS_INFO, popoverHref: config_json_1.default.documentation.assets }));
49
50
  const BundleAssetsTotals = ({ className, jobs, customComponentLink: CustomComponentLink, onTreemapItemClick, ...restProps }) => {
50
51
  const [displayType, setDisplayType] = (0, metrics_display_type_1.useMetricsDisplayType)();
51
52
  const history = (0, react_router_dom_1.useHistory)();
52
- const items = webpack.compareBySection.sizes(jobs);
53
- const renderRowHeader = (item) => {
53
+ const items = (0, react_1.useMemo)(() => webpack.compareBySection.sizes(jobs), [jobs]);
54
+ const renderRowHeader = (0, react_1.useCallback)((item) => {
54
55
  const fileType = constants_1.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
55
56
  const { section, title, params } = (0, utils_1.getBundleAssetsFileTypeComponentLink)(fileType, item.label);
56
57
  return (react_1.default.createElement(CustomComponentLink, { section: section, title: title, params: params }, item.label));
57
- };
58
+ }, [CustomComponentLink]);
58
59
  const handleMetricsTreemapItemClick = (0, react_1.useCallback)((entryId) => {
59
60
  const fileType = constants_1.ASSETS_SIZES_FILE_TYPE_MAP[entryId];
60
61
  const { section, params } = (0, utils_1.getBundleAssetsFileTypeComponentLink)(fileType, '');
@@ -62,7 +63,6 @@ const BundleAssetsTotals = ({ className, jobs, customComponentLink: CustomCompon
62
63
  const nextUrl = `${constants_1.SECTION_URLS[section]}?${queryParams}`;
63
64
  history.push(nextUrl);
64
65
  }, [history]);
65
- const metricsTableTitle = (0, react_1.useMemo)(() => (react_1.default.createElement(metrics_table_title_1.MetricsTableTitle, { title: i18n_1.default.ASSET_TOTALS, popoverInfo: i18n_1.default.ASSET_TOTALS_INFO, popoverHref: config_json_1.default.documentation.assets })), []);
66
66
  return (react_1.default.createElement(stack_1.Stack, { space: "xsmall", as: "section", className: className },
67
67
  react_1.default.createElement(toolbar_1.Toolbar, { renderActions: () => (react_1.default.createElement(metrics_display_selector_1.MetricsDisplaySelector, { onSelect: setDisplayType, value: displayType })) }),
68
68
  react_1.default.createElement(box_1.Box, { outline: true, as: "main" },
package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bundle-assets-totals.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals/bundle-assets-totals.jsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"bundle-assets-totals.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals/bundle-assets-totals.jsx"],"names":[],"mappings":"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"}
package/lib/components/bundle-modules/bundle-modules.i18n.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SOURCE_THIRD_PARTY = exports.SOURCE_FIRST_PARTY = exports.SOURCE = exports.FILE_TYPE = exports.CHUNK = exports.DUPLICATE = exports.CHANGED = exports.SEARCH = void 0;
4
- exports.SEARCH = 'Search by module name';
4
+ exports.SEARCH = 'Search by module path';
5
5
  exports.CHANGED = 'Changed';
6
6
  exports.DUPLICATE = 'Duplicate';
7
7
  exports.CHUNK = 'Chunk';
package/lib/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  position: relative;
3
3
  aspect-ratio: 16/9;
4
4
  background: var(--color-background);
5
+ border-bottom-left-radius: inherit;
6
+ border-bottom-right-radius: inherit;
7
+ overflow: hidden;
5
8
  }
6
9
 
7
10
  .canvas {
@@ -35,6 +38,7 @@
35
38
  font-size: var(--size-small);
36
39
  line-height: var(--line-height-heading);
37
40
  text-align: left;
41
+ transition: var(--ui-transition-out);
38
42
  }
39
43
 
40
44
  .tile::before {
@@ -47,15 +51,19 @@
47
51
  width: 100%;
48
52
  height: 100%;
49
53
  background-color: currentColor;
50
- color: var(--color-background);
54
+ color: var(--color-highlight);
51
55
  transition: var(--ui-transition-out);
52
56
  transition-property: opacity;
53
- opacity: 0.6;
57
+ opacity: 0.75;
58
+ }
59
+
60
+ .tile:hover {
61
+ transition: var(--ui-transition-in);
54
62
  }
55
63
 
56
64
  .tile:hover::before {
57
65
  transition: var(--ui-transition-in);
58
- opacity: 0.4;
66
+ opacity: 0.5;
59
67
  }
60
68
 
61
69
  .tileContent {
package/lib/css/variables.css CHANGED
@@ -192,6 +192,7 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
+ --radius-xsmall: 3px;
195
196
  --radius-small: 5px;
196
197
  --radius-medium: 7px;
197
198
  --radius-large: 9px;
@@ -199,7 +200,7 @@
199
200
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
201
 
201
202
  /** Layout */
202
- --max-width: 82rem;
203
+ --max-width: 88rem;
203
204
  --entry-info-width: 64rem;
204
205
  --entry-info-top: var(--header-height);
205
206
  }
package/lib/layout/box/box.module.css CHANGED
@@ -8,11 +8,13 @@
8
8
  }
9
9
 
10
10
  .outline > :first-child {
11
- border-radius: var(--radius-medium) var(--radius-medium) 0 0;
11
+ border-top-left-radius: var(--radius-medium);
12
+ border-top-right-radius: var(--radius-medium);
12
13
  }
13
14
 
14
15
  .outline > :last-child {
15
- border-radius: 0 0 var(--radius-medium) var(--radius-medium);
16
+ border-bottom-left-radius: var(--radius-medium);
17
+ border-bottom-right-radius: var(--radius-medium);
16
18
  }
17
19
 
18
20
  .outlineHover {
package/lib/ui/table/table.module.css CHANGED
@@ -89,6 +89,36 @@
89
89
  border-width: 1px;
90
90
  }
91
91
 
92
+ /** cascade border radius */
93
+ .root thead,
94
+ .root thead tr:first-child {
95
+ border-top-left-radius: inherit;
96
+ border-top-right-radius: inherit;
97
+ }
98
+
99
+ .root thead tr:first-child th:first-child {
100
+ border-top-left-radius: inherit;
101
+ }
102
+
103
+ .root thead tr:first-child th:last-child {
104
+ border-top-right-radius: inherit;
105
+ }
106
+
107
+ .root tbody:last-child,
108
+ .root tbody:last-child tr:last-child {
109
+ border-bottom-left-radius: inherit;
110
+ border-bottom-right-radius: inherit;
111
+ }
112
+
113
+ .root tbody:last-child tr:last-child th:first-child,
114
+ .root tbody:last-child tr:last-child td:first-child {
115
+ border-bottom-left-radius: inherit;
116
+ }
117
+
118
+ .root tbody:last-child tr:last-child td:last-child {
119
+ border-bottom-right-radius: inherit;
120
+ }
121
+
92
122
  /* compact variation */
93
123
  .compact td,
94
124
  .compact th {
package/lib/ui/tag/tag.module.css CHANGED
@@ -42,7 +42,7 @@ a.root:active {
42
42
  /** Size variation */
43
43
  /** default: medium */
44
44
  .root {
45
- border-radius: var(--radius-medium);
45
+ border-radius: var(--radius-small);
46
46
  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
47
47
  min-width: var(--space-small);
48
48
  height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
51
51
  }
52
52
 
53
53
  .small {
54
- border-radius: var(--radius-small);
54
+ border-radius: var(--radius-xsmall);
55
55
  padding: calc(var(--space-xxxsmall) / 2);
56
56
  height: var(--space-xsmall);
57
57
  min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
60
60
  }
61
61
 
62
62
  .large {
63
- border-radius: var(--radius-large);
63
+ border-radius: var(--radius-medium);
64
64
  padding: var(--space-xxxsmall) var(--space-xxsmall);
65
65
  min-width: var(--space-medium);
66
66
  height: var(--space-medium);
package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js CHANGED
@@ -17,15 +17,16 @@ import { MetricsTableTitle } from '../metrics-table-title';
17
17
  import { MetricsTableHeader } from '../metrics-table-header';
18
18
  import { MetricsTreemap } from '../metrics-treemap';
19
19
  import { ComponentLink } from '../component-link';
20
+ const metricsTableTitle = (React.createElement(MetricsTableTitle, { title: I18N.ASSET_TOTALS, popoverInfo: I18N.ASSET_TOTALS_INFO, popoverHref: config.documentation.assets }));
20
21
  export const BundleAssetsTotals = ({ className, jobs, customComponentLink: CustomComponentLink, onTreemapItemClick, ...restProps }) => {
21
22
  const [displayType, setDisplayType] = useMetricsDisplayType();
22
23
  const history = useHistory();
23
- const items = webpack.compareBySection.sizes(jobs);
24
- const renderRowHeader = (item) => {
24
+ const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
25
+ const renderRowHeader = useCallback((item) => {
25
26
  const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
26
27
  const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
27
28
  return (React.createElement(CustomComponentLink, { section: section, title: title, params: params }, item.label));
28
- };
29
+ }, [CustomComponentLink]);
29
30
  const handleMetricsTreemapItemClick = useCallback((entryId) => {
30
31
  const fileType = ASSETS_SIZES_FILE_TYPE_MAP[entryId];
31
32
  const { section, params } = getBundleAssetsFileTypeComponentLink(fileType, '');
@@ -33,7 +34,6 @@ export const BundleAssetsTotals = ({ className, jobs, customComponentLink: Custo
33
34
  const nextUrl = `${SECTION_URLS[section]}?${queryParams}`;
34
35
  history.push(nextUrl);
35
36
  }, [history]);
36
- const metricsTableTitle = useMemo(() => (React.createElement(MetricsTableTitle, { title: I18N.ASSET_TOTALS, popoverInfo: I18N.ASSET_TOTALS_INFO, popoverHref: config.documentation.assets })), []);
37
37
  return (React.createElement(Stack, { space: "xsmall", as: "section", className: className },
38
38
  React.createElement(Toolbar, { renderActions: () => (React.createElement(MetricsDisplaySelector, { onSelect: setDisplayType, value: displayType })) }),
39
39
  React.createElement(Box, { outline: true, as: "main" },
package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bundle-assets-totals.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals/bundle-assets-totals.jsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"bundle-assets-totals.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals/bundle-assets-totals.jsx"],"names":[],"mappings":"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"}
package/lib-esm/components/bundle-modules/bundle-modules.i18n.js CHANGED
@@ -1,4 +1,4 @@
1
- export const SEARCH = 'Search by module name';
1
+ export const SEARCH = 'Search by module path';
2
2
  export const CHANGED = 'Changed';
3
3
  export const DUPLICATE = 'Duplicate';
4
4
  export const CHUNK = 'Chunk';
package/lib-esm/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  position: relative;
3
3
  aspect-ratio: 16/9;
4
4
  background: var(--color-background);
5
+ border-bottom-left-radius: inherit;
6
+ border-bottom-right-radius: inherit;
7
+ overflow: hidden;
5
8
  }
6
9
 
7
10
  .canvas {
@@ -35,6 +38,7 @@
35
38
  font-size: var(--size-small);
36
39
  line-height: var(--line-height-heading);
37
40
  text-align: left;
41
+ transition: var(--ui-transition-out);
38
42
  }
39
43
 
40
44
  .tile::before {
@@ -47,15 +51,19 @@
47
51
  width: 100%;
48
52
  height: 100%;
49
53
  background-color: currentColor;
50
- color: var(--color-background);
54
+ color: var(--color-highlight);
51
55
  transition: var(--ui-transition-out);
52
56
  transition-property: opacity;
53
- opacity: 0.6;
57
+ opacity: 0.75;
58
+ }
59
+
60
+ .tile:hover {
61
+ transition: var(--ui-transition-in);
54
62
  }
55
63
 
56
64
  .tile:hover::before {
57
65
  transition: var(--ui-transition-in);
58
- opacity: 0.4;
66
+ opacity: 0.5;
59
67
  }
60
68
 
61
69
  .tileContent {
package/lib-esm/css/variables.css CHANGED
@@ -192,6 +192,7 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
+ --radius-xsmall: 3px;
195
196
  --radius-small: 5px;
196
197
  --radius-medium: 7px;
197
198
  --radius-large: 9px;
@@ -199,7 +200,7 @@
199
200
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
201
 
201
202
  /** Layout */
202
- --max-width: 82rem;
203
+ --max-width: 88rem;
203
204
  --entry-info-width: 64rem;
204
205
  --entry-info-top: var(--header-height);
205
206
  }
package/lib-esm/layout/box/box.module.css CHANGED
@@ -8,11 +8,13 @@
8
8
  }
9
9
 
10
10
  .outline > :first-child {
11
- border-radius: var(--radius-medium) var(--radius-medium) 0 0;
11
+ border-top-left-radius: var(--radius-medium);
12
+ border-top-right-radius: var(--radius-medium);
12
13
  }
13
14
 
14
15
  .outline > :last-child {
15
- border-radius: 0 0 var(--radius-medium) var(--radius-medium);
16
+ border-bottom-left-radius: var(--radius-medium);
17
+ border-bottom-right-radius: var(--radius-medium);
16
18
  }
17
19
 
18
20
  .outlineHover {
package/lib-esm/ui/table/table.module.css CHANGED
@@ -89,6 +89,36 @@
89
89
  border-width: 1px;
90
90
  }
91
91
 
92
+ /** cascade border radius */
93
+ .root thead,
94
+ .root thead tr:first-child {
95
+ border-top-left-radius: inherit;
96
+ border-top-right-radius: inherit;
97
+ }
98
+
99
+ .root thead tr:first-child th:first-child {
100
+ border-top-left-radius: inherit;
101
+ }
102
+
103
+ .root thead tr:first-child th:last-child {
104
+ border-top-right-radius: inherit;
105
+ }
106
+
107
+ .root tbody:last-child,
108
+ .root tbody:last-child tr:last-child {
109
+ border-bottom-left-radius: inherit;
110
+ border-bottom-right-radius: inherit;
111
+ }
112
+
113
+ .root tbody:last-child tr:last-child th:first-child,
114
+ .root tbody:last-child tr:last-child td:first-child {
115
+ border-bottom-left-radius: inherit;
116
+ }
117
+
118
+ .root tbody:last-child tr:last-child td:last-child {
119
+ border-bottom-right-radius: inherit;
120
+ }
121
+
92
122
  /* compact variation */
93
123
  .compact td,
94
124
  .compact th {
package/lib-esm/ui/tag/tag.module.css CHANGED
@@ -42,7 +42,7 @@ a.root:active {
42
42
  /** Size variation */
43
43
  /** default: medium */
44
44
  .root {
45
- border-radius: var(--radius-medium);
45
+ border-radius: var(--radius-small);
46
46
  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
47
47
  min-width: var(--space-small);
48
48
  height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
51
51
  }
52
52
 
53
53
  .small {
54
- border-radius: var(--radius-small);
54
+ border-radius: var(--radius-xsmall);
55
55
  padding: calc(var(--space-xxxsmall) / 2);
56
56
  height: var(--space-xsmall);
57
57
  min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
60
60
  }
61
61
 
62
62
  .large {
63
- border-radius: var(--radius-large);
63
+ border-radius: var(--radius-medium);
64
64
  padding: var(--space-xxxsmall) var(--space-xxsmall);
65
65
  min-width: var(--space-medium);
66
66
  height: var(--space-medium);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.13.0-beta.12",
3
+ "version": "4.13.0-beta.14",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -43,7 +43,7 @@
43
43
  "@storybook/react": "7.6.17",
44
44
  "@storybook/react-webpack5": "7.6.17",
45
45
  "@types/d3": "7.4.3",
46
- "@types/react": "18.2.77",
46
+ "@types/react": "18.2.78",
47
47
  "@types/react-router-dom": "5.3.3",
48
48
  "babel-plugin-require-context-hook": "1.0.0",
49
49
  "classnames": "2.5.1",
@@ -73,12 +73,12 @@
73
73
  "react-router-dom": "^5.0.0"
74
74
  },
75
75
  "dependencies": {
76
- "@bundle-stats/utils": "4.13.0-beta.12",
76
+ "@bundle-stats/utils": "4.13.0-beta.14",
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": "bf547f9a34f50d4f0decf613c69b0b865626ab1e"
83
+ "gitHead": "0bdadc30d19ab18dae814d55de47555fd6ddf05c"
84
84
  }
package/src/components/bundle-assets-totals/bundle-assets-totals.jsx CHANGED
@@ -22,6 +22,14 @@ import { MetricsTableHeader } from '../metrics-table-header';
22
22
  import { MetricsTreemap } from '../metrics-treemap';
23
23
  import { ComponentLink } from '../component-link';
24
24
 
25
+ const metricsTableTitle = (
26
+ <MetricsTableTitle
27
+ title={I18N.ASSET_TOTALS}
28
+ popoverInfo={I18N.ASSET_TOTALS_INFO}
29
+ popoverHref={config.documentation.assets}
30
+ />
31
+ );
32
+
25
33
  export const BundleAssetsTotals = ({
26
34
  className,
27
35
  jobs,
@@ -32,18 +40,21 @@ export const BundleAssetsTotals = ({
32
40
  const [displayType, setDisplayType] = useMetricsDisplayType();
33
41
  const history = useHistory();
34
42
 
35
- const items = webpack.compareBySection.sizes(jobs);
43
+ const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
36
44
 
37
- const renderRowHeader = (item) => {
38
- const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
39
- const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
45
+ const renderRowHeader = useCallback(
46
+ (item) => {
47
+ const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
48
+ const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
40
49
 
41
- return (
42
- <CustomComponentLink section={section} title={title} params={params}>
43
- {item.label}
44
- </CustomComponentLink>
45
- );
46
- };
50
+ return (
51
+ <CustomComponentLink section={section} title={title} params={params}>
52
+ {item.label}
53
+ </CustomComponentLink>
54
+ );
55
+ },
56
+ [CustomComponentLink],
57
+ );
47
58
 
48
59
  const handleMetricsTreemapItemClick = useCallback(
49
60
  (entryId) => {
@@ -57,17 +68,6 @@ export const BundleAssetsTotals = ({
57
68
  [history],
58
69
  );
59
70
 
60
- const metricsTableTitle = useMemo(
61
- () => (
62
- <MetricsTableTitle
63
- title={I18N.ASSET_TOTALS}
64
- popoverInfo={I18N.ASSET_TOTALS_INFO}
65
- popoverHref={config.documentation.assets}
66
- />
67
- ),
68
- [],
69
- );
70
-
71
71
  return (
72
72
  <Stack space="xsmall" as="section" className={className}>
73
73
  <Toolbar
@@ -89,7 +89,12 @@ export const BundleAssetsTotals = ({
89
89
  {displayType === MetricsDisplayType.TREEMAP && (
90
90
  <>
91
91
  <Table compact>
92
- <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
92
+ <MetricsTableHeader
93
+ metricTitle={metricsTableTitle}
94
+ showSum
95
+ jobs={jobs}
96
+ rows={items}
97
+ />
93
98
  </Table>
94
99
  <MetricsTreemap
95
100
  items={items}
package/src/components/bundle-modules/bundle-modules.i18n.ts CHANGED
@@ -1,4 +1,4 @@
1
- export const SEARCH = 'Search by module name';
1
+ export const SEARCH = 'Search by module path';
2
2
  export const CHANGED = 'Changed';
3
3
  export const DUPLICATE = 'Duplicate';
4
4
  export const CHUNK = 'Chunk';
package/src/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  position: relative;
3
3
  aspect-ratio: 16/9;
4
4
  background: var(--color-background);
5
+ border-bottom-left-radius: inherit;
6
+ border-bottom-right-radius: inherit;
7
+ overflow: hidden;
5
8
  }
6
9
 
7
10
  .canvas {
@@ -35,6 +38,7 @@
35
38
  font-size: var(--size-small);
36
39
  line-height: var(--line-height-heading);
37
40
  text-align: left;
41
+ transition: var(--ui-transition-out);
38
42
  }
39
43
 
40
44
  .tile::before {
@@ -47,15 +51,19 @@
47
51
  width: 100%;
48
52
  height: 100%;
49
53
  background-color: currentColor;
50
- color: var(--color-background);
54
+ color: var(--color-highlight);
51
55
  transition: var(--ui-transition-out);
52
56
  transition-property: opacity;
53
- opacity: 0.6;
57
+ opacity: 0.75;
58
+ }
59
+
60
+ .tile:hover {
61
+ transition: var(--ui-transition-in);
54
62
  }
55
63
 
56
64
  .tile:hover::before {
57
65
  transition: var(--ui-transition-in);
58
- opacity: 0.4;
66
+ opacity: 0.5;
59
67
  }
60
68
 
61
69
  .tileContent {
package/src/css/variables.css CHANGED
@@ -192,6 +192,7 @@
192
192
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
193
193
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
194
194
 
195
+ --radius-xsmall: 3px;
195
196
  --radius-small: 5px;
196
197
  --radius-medium: 7px;
197
198
  --radius-large: 9px;
@@ -199,7 +200,7 @@
199
200
  --outline-hover: 0 0 0 3px var(--color-highlight);
200
201
 
201
202
  /** Layout */
202
- --max-width: 82rem;
203
+ --max-width: 88rem;
203
204
  --entry-info-width: 64rem;
204
205
  --entry-info-top: var(--header-height);
205
206
  }
package/src/layout/box/box.module.css CHANGED
@@ -8,11 +8,13 @@
8
8
  }
9
9
 
10
10
  .outline > :first-child {
11
- border-radius: var(--radius-medium) var(--radius-medium) 0 0;
11
+ border-top-left-radius: var(--radius-medium);
12
+ border-top-right-radius: var(--radius-medium);
12
13
  }
13
14
 
14
15
  .outline > :last-child {
15
- border-radius: 0 0 var(--radius-medium) var(--radius-medium);
16
+ border-bottom-left-radius: var(--radius-medium);
17
+ border-bottom-right-radius: var(--radius-medium);
16
18
  }
17
19
 
18
20
  .outlineHover {
package/src/ui/table/table.module.css CHANGED
@@ -89,6 +89,36 @@
89
89
  border-width: 1px;
90
90
  }
91
91
 
92
+ /** cascade border radius */
93
+ .root thead,
94
+ .root thead tr:first-child {
95
+ border-top-left-radius: inherit;
96
+ border-top-right-radius: inherit;
97
+ }
98
+
99
+ .root thead tr:first-child th:first-child {
100
+ border-top-left-radius: inherit;
101
+ }
102
+
103
+ .root thead tr:first-child th:last-child {
104
+ border-top-right-radius: inherit;
105
+ }
106
+
107
+ .root tbody:last-child,
108
+ .root tbody:last-child tr:last-child {
109
+ border-bottom-left-radius: inherit;
110
+ border-bottom-right-radius: inherit;
111
+ }
112
+
113
+ .root tbody:last-child tr:last-child th:first-child,
114
+ .root tbody:last-child tr:last-child td:first-child {
115
+ border-bottom-left-radius: inherit;
116
+ }
117
+
118
+ .root tbody:last-child tr:last-child td:last-child {
119
+ border-bottom-right-radius: inherit;
120
+ }
121
+
92
122
  /* compact variation */
93
123
  .compact td,
94
124
  .compact th {
package/src/ui/tag/tag.module.css CHANGED
@@ -42,7 +42,7 @@ a.root:active {
42
42
  /** Size variation */
43
43
  /** default: medium */
44
44
  .root {
45
- border-radius: var(--radius-medium);
45
+ border-radius: var(--radius-small);
46
46
  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
47
47
  min-width: var(--space-small);
48
48
  height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
51
51
  }
52
52
 
53
53
  .small {
54
- border-radius: var(--radius-small);
54
+ border-radius: var(--radius-xsmall);
55
55
  padding: calc(var(--space-xxxsmall) / 2);
56
56
  height: var(--space-xsmall);
57
57
  min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
60
60
  }
61
61
 
62
62
  .large {
63
- border-radius: var(--radius-large);
63
+ border-radius: var(--radius-medium);
64
64
  padding: var(--space-xxxsmall) var(--space-xxsmall);
65
65
  min-width: var(--space-medium);
66
66
  height: var(--space-medium);
package/types/components/bundle-modules/bundle-modules.i18n.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const SEARCH = "Search by module name";
1
+ export declare const SEARCH = "Search by module path";
2
2
  export declare const CHANGED = "Changed";
3
3
  export declare const DUPLICATE = "Duplicate";
4
4
  export declare const CHUNK = "Chunk";