@bundle-stats/ui 4.23.0-beta.3 → 4.23.0-beta.5

package/src/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,23 @@
 }
 
 .packageName {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxxsmall);
   color: var(--color-text-light);
+  text-decoration: none;
+}
+
+.packageNameTagDuplicate {
+  flex: 0 0 auto;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
+}
+
+.packageNameLabel {
+  flex: 1 1 auto;
 }
 
 .packageName:last-child {
@@ -25,29 +40,13 @@
   margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
+  text-decoration: none;
 }
 
-.packageNameTagDuplicate {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: middle;
-}
-
-.packageNameLabel {
-  vertical-align: middle;
-}
-
-.packageNameTagDuplicate::before {
-  content: 'd';
-}
-
-.root .packageName:hover,
-.root .packageName:active,
-.root .packageName:focus {
-  text-decoration: none;
+.packageName:hover {
+  text-decoration: none !important;
 }
 
-.root .packageName:hover .packageNameLabel,
-.root .packageName:active .packageNameLabel,
-.root .packageName:focus .packageNameLabel {
-  text-decoration: underline;
+.packageName:hover .packageNameLabel {
+  text-decoration: underline !important;
 }

package/src/components/entry-info/entry-info.module.css

@@ -107,7 +107,6 @@
   line-height: var(--line-height-heading);
   border-radius: var(--radius-small);
   background: var(--color-highlight);
-  transition: var(--transition-out);
 
   text-decoration: none;
   text-transform: none;

package/src/components/metric-run-info/metric-run-info.stories.tsx

@@ -28,6 +28,15 @@ export const NoBaseline: Story = {
   },
 };
 
+export const ShowDeltaAbsoluteValue: Story = {
+  args: {
+    metricId: 'webpack.totalSizeByTypeALL',
+    current: 120 * 1024,
+    baseline: 100 * 1024,
+    showDeltaAbsoluteValue: true,
+  },
+};
+
 export const NoDelta: Story = {
   args: {
     ...NoBaseline.args,

package/src/components/metric-run-info/metric-run-info.tsx

@@ -56,7 +56,12 @@ export type MetricRunInfoProps = {
   baseline?: number;
   showMetricDescription?: boolean;
   titleWrapper?: ElementType;
-  showDeltaValue?: boolean;
+  /**
+   * Show the delta absolute value alongside the percentage value.
+   * Only applies when `showDelta` is `true`.
+   * @default false
+   */
+  showDeltaAbsoluteValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
@@ -67,6 +72,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     showDelta = true,
     showMetricDescription = true,
     showBaseline = true,
+    showDeltaAbsoluteValue = false,
     titleWrapper: CustomTitleWrapper = React.Fragment,
     ...restProps
   } = props;
@@ -118,8 +124,9 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       showDelta: true,
       deltaType: metricRunInfo.deltaType,
       deltaPercentage: metricRunInfo.displayDeltaPercentage,
+      ...(showDeltaAbsoluteValue && { delta: metricRunInfo.displayDelta }),
     };
-  }, [metric, metricRunInfo, showDelta]);
+  }, [metric, metricRunInfo, showDelta, showDeltaAbsoluteValue]);
 
   return (
     <RunInfo

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

@@ -1,6 +1,5 @@
 .dropdownGroup {
   border: 1px solid var(--color-outline);
-  transition: var(--transition-out);
 }
 
 .dropdownGroupButton {
@@ -9,7 +8,6 @@
 
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
 }
 
 .itemActive {

package/src/components/metrics-table/metrics-table.module.css

@@ -1,21 +1,13 @@
-.root a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.root a:hover,
-.root a:active,
-.root a:focus {
-  color: var(--color-primary);
-  text-decoration: underline;
-}
-
 .root .value,
 .root .delta {
   text-align: right;
 }
 
 /** rows */
+.clickable {
+  cursor: default;
+}
+
 .multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);

package/src/components/metrics-table/metrics-table.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import type { ReportMetricRow } from '@bundle-stats/utils';
@@ -20,51 +20,75 @@ const CURRENT_COLUMN_SPAN = 3;
 interface RowProps extends React.ComponentProps<typeof Table.Tr> {
   item: ReportMetricRow;
   renderHeader: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
 }
 
-const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
-  <Table.Tr className={cx(!item.changed && css.unchanged, className)} {...restProps}>
-    <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+const Row = ({ className = '', item, renderHeader, onRowClick, ...restProps }: RowProps) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLTableRowElement>) => {
+      // Skip clicks on interactive elements (eg: links, buttons)
+      if ((event.target as HTMLElement).closest('a, button')) {
+        return;
+      }
+
+      // Skip when the user is selecting text
+      if (window.getSelection()?.toString()) {
+        return;
+      }
 
-    {item.runs.map((run, index) => {
-      const isBaseline = index === item.runs.length - 1;
-      const valueClassName = cx(css.value, !isBaseline && css.current);
+      onRowClick?.(item);
+    },
+    [onRowClick, item],
+  );
+
+  return (
+    <Table.Tr
+      className={cx(!item.changed && css.unchanged, onRowClick && css.clickable, className)}
+      onClick={onRowClick ? handleClick : undefined}
+      {...restProps}
+    >
+      <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+
+      {item.runs.map((run, index) => {
+        const isBaseline = index === item.runs.length - 1;
+        const valueClassName = cx(css.value, !isBaseline && css.current);
+
+        // Empty cells if no value
+        if (!run || typeof run.value === 'undefined') {
+          return (
+            <>
+              <Table.Td className={valueClassName}>-</Table.Td>
+              {!isBaseline && <Table.Td className={css.delta} />}
+              {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            </>
+          );
+        }
 
-      // Empty cells if no value
-      if (!run || typeof run.value === 'undefined') {
         return (
           <>
-            <Table.Td className={valueClassName}>-</Table.Td>
-            {!isBaseline && <Table.Td className={css.delta} />}
-            {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            <Table.Td className={valueClassName}>
+              <Metric value={run.displayValue} />
+            </Table.Td>
+            {!isBaseline && (
+              <>
+                <Table.Td className={css.delta}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+                <Table.Td className={cx(css.delta, css.deltaPercentage)}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+              </>
+            )}
           </>
         );
-      }
-
-      return (
-        <>
-          <Table.Td className={valueClassName}>
-            <Metric value={run.displayValue} />
-          </Table.Td>
-          {!isBaseline && (
-            <>
-              <Table.Td className={css.delta}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-              <Table.Td className={cx(css.delta, css.deltaPercentage)}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-            </>
-          )}
-        </>
-      );
-    })}
-  </Table.Tr>
-);
+      })}
+    </Table.Tr>
+  );
+};
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
@@ -77,6 +101,7 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
   sort?: MetricsTableHeaderProps['sort'];
   updateSort?: MetricsTableHeaderProps['updateSort'];
   renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
   emptyMessage?: React.ReactNode;
   showAllItems: boolean;
   setShowAllItems: (value: boolean) => void;
@@ -91,6 +116,7 @@ export const MetricsTable = ({
   sort,
   updateSort,
   renderRowHeader = (item: any) => item.label,
+  onRowClick,
   emptyMessage = I18N.EMPTY_MESSAGE,
   showAllItems,
   setShowAllItems,
@@ -132,7 +158,12 @@ export const MetricsTable = ({
         {showItems && (
           <>
             {visibleItems.map((item) => (
-              <Row key={item.key} item={item} renderHeader={renderRowHeader} />
+              <Row
+                key={item.key}
+                item={item}
+                renderHeader={renderRowHeader}
+                onRowClick={onRowClick}
+              />
             ))}
 
             {hasHiddenItems && (

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -15,18 +15,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
-      <DropdownGroup>
-        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </DropdownGroup>
-      <DropdownGroup>
-        {onExportClick && (
-          <>
-            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
-            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
-          </>
-        )}
-      </DropdownGroup>
+      {(onResetClick || onViewAllClick) && (
+        <DropdownGroup>
+          {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+          {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+        </DropdownGroup>
+      )}
+      {onExportClick && (
+        <DropdownGroup>
+          <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+          <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+        </DropdownGroup>
+      )}
     </Dropdown>
   );
 };

package/src/components/metrics-table-row-count/index.ts

@@ -0,0 +1 @@
+export * from './metrics-table-row-count';

package/src/components/metrics-table-row-count/metrics-table-row-count.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}

package/src/components/metrics-table-row-count/metrics-table-row-count.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { FlexStack } from '../../layout';
+import { FlexStackProps } from '../../layout/flex-stack';
+
+export type MetricsTableRowCountProps = {
+  count: number;
+  total: number;
+} & FlexStackProps<'span'>;
+
+export const MetricsTableRowCount = (props: MetricsTableRowCountProps) => {
+  const { count, total, ...restProps } = props;
+
+  return (
+    <FlexStack inline gap="xxxsmall" alignItems="bottom" {...restProps}>
+      <span>{count}</span>
+      <span>/</span>
+      <span>{total}</span>
+    </FlexStack>
+  );
+};

package/src/components/sort-button/sort-button.module.css

@@ -18,7 +18,6 @@
   overflow: hidden;
   right: -2px; /* compensate for the button padding */
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
 }
 
 .directionIcon {
@@ -36,7 +35,6 @@
 .direction:active,
 .direction:focus {
   color: var(--color-text-dark);
-  transition: var(--transition-in);
 }
 
 .directionAsc {

package/src/components/summary/summary.module.css

@@ -42,7 +42,7 @@
 }
 
 .item::before {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-highlight);
   display: block;
@@ -56,13 +56,15 @@
   transition: var(--transition-out);
 }
 
+.item:focus::before,
+.item:active::before,
 .item:hover::before {
   opacity: 1;
   transition: var(--transition-in);
 }
 
 .item + .item::after {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-outline);
   display: block;
@@ -75,7 +77,12 @@
   transition: var(--transition-out);
 }
 
-.item:hover::after,  .item:hover + .item::after {
+.item:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
   opacity: 0;
   transition: var(--transition-in);
 }

package/src/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,14 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-out);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition: var(--transition-in);
 }

package/src/css/variables.css

@@ -35,18 +35,18 @@
    * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
 
-   --color-gray-25: #f9f9f9;
-   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
-   --color-gray-50: #ececed;
-   --color-gray-100: #c9c9cc;
-   --color-gray-200: #a7a7aa;
-   --color-gray-300: #848489;
-   --color-gray-400: #626268;
-   --color-gray-500: #3f3f47;
-   --color-gray-600: #36363c;
-   --color-gray-700: #2c2c32;
-   --color-gray-800: #232327;
-   --color-gray-900: #19191c;
+  --color-gray-25: #f9f9f9;
+  /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+  --color-gray-50: #ececed;
+  --color-gray-100: #c9c9cc;
+  --color-gray-200: #a7a7aa;
+  --color-gray-300: #848489;
+  --color-gray-400: #626268;
+  --color-gray-500: #3f3f47;
+  --color-gray-600: #36363c;
+  --color-gray-700: #2c2c32;
+  --color-gray-800: #232327;
+  --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -98,7 +98,7 @@
   --color-green-200: #b1dfaf;
   --color-green-300: #92d28f;
   --color-green-400: #74c670;
-  --color-green-500: #55B950;
+  --color-green-500: #55b950;
   --color-green-600: #3ea839;
   --color-green-700: #2b9426;
   --color-green-800: #1b7b16;
@@ -112,7 +112,7 @@
 
   --color-yellow-25: #fffdf2;
   /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
-  --color-yellow-50:  #faf3cf;
+  --color-yellow-50: #faf3cf;
   --color-yellow-100: #f6e9a9;
   --color-yellow-200: #f2df83;
   --color-yellow-300: #edd55d;
@@ -126,8 +126,8 @@
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
-  --color-yellow-ultra-dark: var(--color-yellow-700);
-  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark: var(--color-yellow-700);
+  --color-yellow-ultra-dark: var(--color-yellow-900);
 
   --color-dark: #111;
   --color-light: #fff;
@@ -146,6 +146,10 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-gray);
+  --color-accent: var(--color-gray-dark);
+  --color-accent-dark: var(--color-gray-ultra-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -188,7 +192,7 @@ body {
   --color-shadow: rgba(0, 0, 0, 0.25);
 
   --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
+  --transition-duration-out: 0.1s;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 

package/src/layout/flex-stack/flex-stack.module.css

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;