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

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -90,44 +90,32 @@ export const MetricsDisplaySelector = (
         );
 
         return (
-          <FlexStack className={itemClassName} key={displayType}>
-            <Button
-              size="small"
-              glyph={displayProps.glyph}
-              onClick={() => onSelect(displayType)}
-              className={css.dropdownGroupButton}
-            >
-              {displayProps.label}
-            </Button>
-            <Dropdown
-              glyph={Icon.ICONS.CHEVRON_DOWN}
-              placement="bottom-end"
-              shift={-1}
-              className={css.dropdownGroupAnchor}
-            >
-              {displayGroupsData.map((displayGroupData) => {
-                const isGroupActive = isActive && displayGroupData.value === groupBy;
+          <Dropdown
+            label={displayProps.label}
+            glyph={displayProps.glyph}
+            placement="bottom-end"
+            shift={-1}
+            className={itemClassName}
+            key={displayType}
+          >
+            {displayGroupsData.map((displayGroupData) => {
+              const isGroupActive = isActive && displayGroupData.value === groupBy;
 
-                return (
-                  <DropdownItem
-                    onClick={() => onSelect(displayType, displayGroupData.value)}
-                    isActive={isGroupActive}
-                    className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
-                    key={displayGroupData.value}
-                  >
-                    <FlexStack space="xxxsmall" alignItems="center">
-                      <Icon
-                        glyph={Icon.ICONS.CHECK}
-                        size="small"
-                        className={css.dropdownItemIcon}
-                      />
-                      <span>{displayGroupData.label}</span>
-                    </FlexStack>
-                  </DropdownItem>
-                );
-              })}
-            </Dropdown>
-          </FlexStack>
+              return (
+                <DropdownItem
+                  onClick={() => onSelect(displayType, displayGroupData.value)}
+                  isActive={isGroupActive}
+                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                  key={displayGroupData.value}
+                >
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
+                    <span>{displayGroupData.label}</span>
+                  </FlexStack>
+                </DropdownItem>
+              );
+            })}
+          </Dropdown>
         );
       })}
     </ControlGroup>

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

@@ -4,23 +4,23 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.root .metric {
+.root .colMetric {
   width: 55%;
   vertical-align: middle;
 }
 
-.root .job {
+.root .colJob {
   padding-top: var(--space-xxsmall);
   text-align: right;
 }
 
-.root .value {
+.root .colValue {
   text-align: right;
   vertical-align: baseline;
   width: 15%;
 }
 
-.root .delta {
+.root .colDelta {
   text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
@@ -28,21 +28,17 @@
   color: pink;
 }
 
-.root .deltaPercentage {
+.root .colDeltaPercentage {
   width: 5%;
 }
 
-.jobName {
-  white-space: nowrap;
-}
-
 /* columns overrides for showHeaderSum */
-.showHeaderSum .job {
+.showHeaderSum .colJob {
   border-bottom: 0;
-  padding-bottom: 0;
+  padding-bottom: var(--space-xxxsmall);
 }
 
-.showHeaderSum .sum {
+.showHeaderSum .colSum {
   padding-top: 0;
   font-size: var(--size-small);
   vertical-align: middle;

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

@@ -34,11 +34,10 @@ const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
   }
 
   return (
-    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
+    <Table.Th className={cx(css.col, css.colJob)} colSpan={colSpan}>
       <JobName
         title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
         internalBuildNumber={internalBuildNumber}
-        className={css.jobName}
       >
         {label}
       </JobName>
@@ -65,7 +64,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
 
   return (
     <>
-      <Table.Th className={cx(css.col, css.value, css.sum)}>
+      <Table.Th className={cx(css.col, css.colValue, css.colSum)}>
         <SortButton
           fieldPath={fieldPath}
           fieldName="value"
@@ -78,7 +77,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
       </Table.Th>
       {!isBaseline && (
         <>
-          <Table.Th className={cx(css.col, css.delta, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="delta"
@@ -91,7 +90,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
               )}
             </SortButton>
           </Table.Th>
-          <Table.Th className={cx(css.col, css.delta, css.deltaPercentage, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colDeltaPercentage, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="deltaPercentage"
@@ -147,7 +146,7 @@ export const MetricsTableHeader = (
   return (
     <Table.THead className={rootClassName}>
       <Table.Tr>
-        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
+        <Table.Th className={cx(css.col, css.colMetric)} rowSpan={showSum ? 2 : 1}>
           {metricTitle || ' '}
         </Table.Th>
         {jobs.map((job, runIndex) => (

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

@@ -15,7 +15,7 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
   const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
 
   return (
-    <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
+    <Dropdown glyph="more-vertical" placement="bottom-end" showChevron={false} {...restProps}>
       <div className={css.group}>
         {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
         {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -15,7 +15,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="none" className={rootClassName}>
+    <Stack space="xxxsmall" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 

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

@@ -1,5 +1,5 @@
 .title {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
@@ -16,14 +16,11 @@
 
 .titleIcon {
   flex: 0 0 var(--space-small);
+  /* compensate for the button icon spacing */
   margin-top: -3px !important;
   margin-bottom: -3px !important;
 }
 
-.title + .info {
-  margin-top: var(--space-xxsmall);
-}
-
 .currentMetric {
   color: var(--color-heading);
   white-space: nowrap;
@@ -32,33 +29,32 @@
   height: var(--line-height-number);
 }
 
-.delta {
-  font-weight: bold;
-}
-
-.deltaValue + .deltaValue::before {
-  margin-left: calc(var(--space-xxxsmall) / 2);
-  margin-right: calc(var(--space-xxxsmall) / 2);
-  content: '/';
-  color: var(--color-text-ultra-light);
-}
-
 .baselineMetric {
   color: var(--color-text-ultra-light);
   font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
+  font-weight: normal;
   line-height: var(--line-height-number);
   height: var(--line-height-number);
 }
 
-/* Loading state */
-.loading.currentMetric {
-  min-width: 0;
-  max-width: 8em;
+.baselineMetricValue {
+  color: var(--color-text-light);
+  line-height: inherit;
 }
 
-.loading.baselineMetric {
-  min-width: 0;
-  max-width: 8em;
+
+.delta {
+  font-weight: bold;
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: var(--space-xxxsmall);
+  margin-right: var(--space-xxxsmall);
+  content: '/';
+  color: var(--color-outline-dark);
 }
 
 /* Hover state */
@@ -82,15 +78,28 @@
     visibility 0s;
 }
 
-/* Size variation */
-.currentMetric {
-  font-size: var(--size-xxlarge);
+/* Loading state */
+.loading .currentMetric {
+  max-width: 6em;
 }
 
+.loading .baselineMetric {
+  max-width: 6em;
+}
+
+.loading .delta {
+  max-width: 12em;
+}
+
+/* Size variation */
 .small .currentMetric {
   font-size: var(--size-medium);
 }
 
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
 }

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

@@ -8,12 +8,24 @@ const meta = {
   args: {
     id: 'webpack.totalSizeByTypeALL',
     size: 'medium',
+    loading: false,
+    showBaseline: true,
+    showDelta: true,
   },
   argTypes: {
     size: {
       options: ['small', 'medium', 'large', 'xlarge'],
       control: { type: 'select' },
     },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    showBaseline: {
+      control: { type: 'boolean' },
+    },
+    showDelta: {
+      control: { type: 'boolean' },
+    },
   },
 } satisfies Meta<typeof RunInfo>;
 
@@ -24,20 +36,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Bundle Size',
-    current: '120KiB',
-    baseline: '100KiB',
-    delta: '+20%',
+    current: '678.91MiB',
+    baseline: '123.45MiB',
+    delta: '+555.46MiB',
+    deltaPercentage: '+549.94%',
     deltaType: 'HIGH_NEGATIVE',
   },
 };
 
-export const DeltaPercentage: Story = {
-  args: {
-    ...Default.args,
-    deltaPercentage: '+20KiB',
-  },
-};
-
 export const SizeLarge: Story = {
   args: {
     ...Default.args,

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

@@ -1,5 +1,6 @@
 import React, { type ReactNode, useMemo } from 'react';
 import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
 
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
@@ -24,23 +25,125 @@ const getMetricParams = (value: string): [string, string?] => {
   return [matches[1], matches[2]];
 };
 
-export interface RunInfoProps {
+type RunInfoTitleProps = {
+  className?: string;
   title?: ReactNode;
   titleHoverCard?: ReactNode;
   titleTooltip?: ReactNode;
+};
+
+const RunInfoTitle = ({ className, title, titleHoverCard, titleTooltip }: RunInfoTitleProps) => (
+  <FlexStack space="xxxsmall" alignItems="center" as="h3" className={cx(css.title, className)}>
+    <span className={css.titleText}>{title}</span>
+    {titleHoverCard && (
+      <HoverCard
+        label={<Icon glyph={Icon.ICONS.HELP} />}
+        className={cx(css.titleIcon, css.titleHoverCardIcon)}
+      >
+        {titleHoverCard}
+      </HoverCard>
+    )}
+    {titleTooltip && (
+      <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
+        <Icon glyph={Icon.ICONS.HELP} />
+      </Tooltip>
+    )}
+  </FlexStack>
+);
+
+type RunInfoContentProps = {
+  className?: string;
+  loading?: boolean;
   current?: ReactNode;
+  enhance?: boolean;
   baseline?: string;
   delta?: string;
   deltaPercentage?: string;
-  deltaType?: string;
+  deltaType?: MetricRunInfoDeltaType;
+  showBaseline?: boolean;
+  showDelta?: boolean;
+};
 
-  as?: React.ElementType;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
+const RunInfoContent = ({
+  className,
+  loading = false,
+  current = '',
+  enhance = false,
+  baseline = '',
+  delta = '',
+  deltaPercentage = '',
+  deltaType = 'NO_CHANGE',
+  showBaseline = true,
+  showDelta = true,
+}: RunInfoContentProps) => {
+  const currentValueParams: [ReactNode, string?] = useMemo(() => {
+    if (!enhance || typeof current !== 'string') {
+      return [current];
+    }
 
-  showBaseline?: boolean;
-  loading?: boolean;
-  enhance?: boolean;
-}
+    return getMetricParams(current);
+  }, [current, enhance]);
+
+  const contentClassName = cx(css.content, className);
+
+  if (loading) {
+    return (
+      <Stack space="xxxsmall" className={contentClassName}>
+        <Skeleton className={css.currentMetric} />
+        {showBaseline && <Skeleton className={css.baselineMetric} />}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack space="xxxsmall" className={contentClassName}>
+      <Metric
+        value={currentValueParams[0]}
+        unit={currentValueParams[1]}
+        inline
+        className={css.currentMetric}
+      >
+        {showDelta && (
+          <div className={css.delta}>
+            {deltaPercentage && (
+              <Delta
+                displayValue={deltaPercentage}
+                deltaType={deltaType}
+                className={css.deltaValue}
+              />
+            )}
+            {delta && (
+              <Delta displayValue={delta} deltaType={deltaType} className={css.deltaValue} />
+            )}
+          </div>
+        )}
+      </Metric>
+      {showBaseline && (
+        <FlexStack alignItems="center" space="xxxsmall" className={css.baselineMetric}>
+          <span className={css.baselineMetricLabel}>vs</span>
+          <Metric value={baseline} inline className={css.baselineMetricValue} />
+        </FlexStack>
+      )}
+    </Stack>
+  );
+};
+
+export type RunInfoProps = Pick<RunInfoTitleProps, 'title' | 'titleHoverCard' | 'titleTooltip'> &
+  Pick<
+    RunInfoContentProps,
+    | 'current'
+    | 'baseline'
+    | 'delta'
+    | 'deltaPercentage'
+    | 'deltaType'
+    | 'showBaseline'
+    | 'showDelta'
+    | 'loading'
+    | 'enhance'
+  > & {
+    as?: React.ElementType;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+  };
 
 export const RunInfo = ({
   className = '',
@@ -51,81 +154,37 @@ export const RunInfo = ({
   baseline = '',
   delta = '',
   deltaPercentage = '',
-  deltaType = '',
+  deltaType = 'NO_CHANGE',
   as: Component = 'div',
   size = 'medium',
   showBaseline = true,
+  showDelta = true,
   loading = false,
   enhance = false,
+  children,
   ...restProps
 }: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => {
-  const rootClassName = cx(
-    css.root,
-    className,
-    css[size],
-    (delta || deltaPercentage) && css.showDelta,
-  );
-
-  const currentValueParams: [ReactNode, string?] = useMemo(() => {
-    if (!enhance || typeof current !== 'string') {
-      return [current];
-    }
-
-    return getMetricParams(current);
-  }, [current, enhance]);
+  const rootClassName = cx(css.root, loading && css.loading, css[size], className);
 
   return (
     <Component className={rootClassName} {...restProps}>
-      {title && (
-        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span className={css.titleText}>{title}</span>
-          {titleHoverCard && (
-            <HoverCard
-              label={<Icon glyph={Icon.ICONS.HELP} />}
-              className={cx(css.titleIcon, css.titleHoverCardIcon)}
-            >
-              {titleHoverCard}
-            </HoverCard>
-          )}
-          {titleTooltip && (
-            <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
-              <Icon glyph={Icon.ICONS.HELP} />
-            </Tooltip>
-          )}
-        </FlexStack>
-      )}
-
-      {!loading ? (
-        <Stack space="xxxsmall" className={css.info}>
-          <Metric
-            value={currentValueParams[0]}
-            unit={currentValueParams[1]}
-            inline
-            className={css.currentMetric}
-          >
-            {(delta || deltaPercentage) && (
-              <span className={css.delta}>
-                {deltaPercentage && (
-                  <Delta
-                    displayValue={deltaPercentage}
-                    deltaType={deltaType}
-                    className={css.deltaValue}
-                  />
-                )}
-                {delta && (
-                  <Delta displayValue={delta} deltaType={deltaType} className={css.deltaValue} />
-                )}
-              </span>
-            )}
-          </Metric>
-          {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
-        </Stack>
-      ) : (
-        <Stack space="xxxsmall" className={css.info}>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          {showBaseline && <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />}
-        </Stack>
-      )}
+      <Stack space="xsmall">
+        {title && (
+          <RunInfoTitle title={title} titleHoverCard={titleHoverCard} titleTooltip={titleTooltip} />
+        )}
+        <RunInfoContent
+          loading={loading}
+          current={current}
+          enhance={enhance}
+          baseline={baseline}
+          delta={delta}
+          deltaPercentage={deltaPercentage}
+          deltaType={deltaType}
+          showBaseline={showBaseline}
+          showDelta={showDelta}
+        />
+        {children}
+      </Stack>
     </Component>
   );
 };

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

@@ -3,29 +3,79 @@
   width: 100%;
 }
 
-.wrapper {
+.row {
   width: 100%;
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: var(--space-small);
+}
+
+.rowGroup {
+  flex: 1 1 auto;
 }
 
-.wrapper + .wrapper {
+.rowGroupTitle {
+  position: absolute;
+  font-size: 0;
+  width: 0;
+  left: -99999px;
+}
+
+.row + .row {
   margin-top: var(--summary-gap);
 }
 
 .items {
   display: flex;
+  align-items: stretch;
   flex-wrap: wrap;
-  width: calc(100% + var(--summary-gap));
-  margin-top: calc(0px - var(--summary-gap));
-  margin-left: calc(0px - var(--summary-gap));
+  gap: var(--space-medium);
 }
 
 .item {
-  margin: var(--summary-gap) 0 0 var(--summary-gap);
-  flex: 1 0 10%; /* force equal sizes */
-  min-width: 12em;
+  flex: 1 1 10%; /* force equal sizes */
+  min-width: 8em;
   text-decoration: none;
+  position: relative;
+  z-index: 0;
 }
 
-.itemSmall {
-  min-width: 8em;
+.item::before {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-highlight);
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: calc(0px - var(--space-xsmall));
+  right: calc(0px - var(--space-xsmall));
+  bottom: calc(0px - var(--space-xsmall));
+  left: calc(0px - var(--space-xsmall));
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.item:hover::before {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.item + .item::after {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-outline);
+  display: block;
+  width: 1px;
+  position: absolute;
+  left: calc(0px - var(--space-xsmall));
+  top: var(--space-xxsmall);
+  bottom: var(--space-xxsmall);
+  opacity: 1;
+  transition: var(--transition-out);
+}
+
+.item:hover::after,  .item:hover + .item::after {
+  opacity: 0;
+  transition: var(--transition-in);
 }