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

package/src/components/delta/delta.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
+import css from './delta.module.css';
+
+export interface DeltaProps {
+  /**
+   * Formatted delta value
+   */
+  displayValue: string;
+  /**
+   * Delta type - drives the color scale
+   */
+  deltaType: MetricRunInfoDeltaType;
+  /**
+   * Inverted variant - render the delta type as background color
+   */
+  inverted?: boolean;
+}
+
+export const Delta = (props: DeltaProps & React.ComponentProps<'span'>) => {
+  const { className = '', displayValue, deltaType, inverted = false, ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+
+  return (
+    <span className={rootClassName} {...restProps}>
+      {displayValue}
+    </span>
+  );
+};

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

@@ -1,3 +1,8 @@
+/** place overlays triggered from inside the entry info above the panel, under the header */
+.portal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .root {
   position: fixed;
   right: 0;
@@ -5,7 +10,8 @@
   bottom: 0;
   width: 100vw;
   max-width: var(--entry-info-width);
-  z-index: var(--layer-high);
+  /** above the sticky tabs */
+  z-index: calc(var(--layer-xhigh) + 1);
   background: var(--color-background);
   box-shadow: var(--shadow-layer-high);
 }
@@ -107,7 +113,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/entry-info/entry-info.tsx

@@ -12,6 +12,7 @@ import { FileName } from '../../ui/file-name';
 import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
+import { getCreatePortalElement } from '../../utils/portal';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
@@ -50,6 +51,11 @@ const EntryInfoMeta = ({
   </div>
 );
 
+/**
+ * Raise the z-index of the overlays nested inside the entry info
+ */
+const createPortalElement = getCreatePortalElement(css.portal);
+
 function defaultRenderRunInfo(item: ReportMetricRow) {
   const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
 
@@ -63,8 +69,8 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   return (
     <RunInfo
       current={metricRunInfo.displayValue}
-      delta={metricRunInfo.displayDeltaPercentage}
-      deltaPercentage={metricRunInfo.displayDelta}
+      delta={metricRunInfo.displayDelta}
+      deltaPercentage={metricRunInfo.displayDeltaPercentage}
       deltaType={metricRunInfo.deltaType}
       baseline={baselineRun?.displayValue || '0B'}
       size="large"
@@ -108,7 +114,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
   } = props;
 
   return (
-    <Portal className={cx(css.root, className)}>
+    <Portal portalElement={createPortalElement} className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
           <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>

package/src/components/index.ts

@@ -5,12 +5,15 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export type { DeltaProps } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricChangeLegend } from './metric-change-legend';
+export type { MetricChangeLegendProps } from './metric-change-legend';
 export { MetricRunInfo } from './metric-run-info';
 export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';

package/src/components/insight-icon/insight-icon.module.css

@@ -1,20 +1,20 @@
 .root {
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
+  width: calc(var(--space-small) + var(--space-xxsmall));
+  height: calc(var(--space-small) + var(--space-xxsmall));
+  padding: var(--space-xxxsmall);
   border-radius: 50%;
   background: var(--color-highlight);
 }
 
 .error {
-  background: var(--color-red-50);
+  background: var(--color-highlight-danger);
   color: var(--color-danger);
 }
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-100);
-  color: var(--color-yellow-900);
+  background: var(--color-highlight-warning);
+  color: var(--color-warning);
 }
 
 .info {

package/src/components/job-name/job-name.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
 export const JobName = ({
@@ -11,9 +10,9 @@ export const JobName = ({
   children,
   ...restProps
 }) => (
-  <Tooltip className={css.root} as={Component} title={title} {...restProps}>
+  <Component className={css.root} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
-  </Tooltip>
+  </Component>
 );
 
 JobName.defaultProps = {

package/src/components/jobs-header/jobs-header.module.css

@@ -1,7 +1,6 @@
 .root {
   padding: var(--space-small) 0;
   width: 100%;
-  display: flex;
 }
 
 .item {

package/src/components/jobs-header/jobs-header.tsx

@@ -76,7 +76,7 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
   const rootClassName = cx(css.root, className);
 
   return (
-    <header className={rootClassName}>
+    <FlexStack as="header" className={rootClassName}>
       {jobs?.map((job, index) => (
         <Item
           key={job.internalBuildNumber || index}
@@ -84,6 +84,6 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
           tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
         />
       ))}
-    </header>
+    </FlexStack>
   );
 };

package/src/components/metric-change-legend/index.ts

@@ -0,0 +1 @@
+export * from './metric-change-legend';

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -0,0 +1,80 @@
+.root {
+  font-size: var(--size-small);
+}
+
+.itemVariants {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.itemLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.itemAnchor {
+  color: var(--color-text-light);
+}
+
+.itemAnchor:hover {
+  color: var(--color-text);
+}
+
+.variants {
+  display: flex;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-xsmall);
+}
+
+.infoPreviewCell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.infoDescriptionCell {
+  padding-left: 0 !important;
+}
+
+.variant {
+  width: var(--space-xxsmall);
+  height: var(--space-xxsmall);
+}
+
+.large .variant {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.bar-improvement .variant-low {
+  background: var(--color-green-light);
+}
+
+.bar-improvement .variant-medium {
+  background: var(--color-green);
+}
+
+.bar-improvement .variant-high {
+  background: var(--color-green-dark);
+}
+
+.bar-regression .variant-low {
+  background: var(--color-red-light);
+}
+
+.bar-regression .variant-medium {
+  background: var(--color-red);
+}
+
+.bar-regression .variant-high {
+  background: var(--color-red-dark);
+}
+
+.bar-neutral .variant-medium {
+  background: var(--color-info);
+}
+
+.bar-no-change .variant-medium {
+  background: var(--color-gray-ultra-light);
+}

package/src/components/metric-change-legend/metric-change-legend.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MetricChangeLegend } from '.';
+
+const meta = {
+  title: 'Components/MetricChangeLegend',
+  component: MetricChangeLegend,
+} satisfies Meta<typeof MetricChangeLegend>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/metric-change-legend/metric-change-legend.tsx

@@ -0,0 +1,148 @@
+import React, { ReactNode } from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { HoverCard } from '../../ui/hover-card';
+import { Table } from '../../ui/table';
+import css from './metric-change-legend.module.css';
+import { Separator } from '../../layout';
+
+type ChangeKind = 'improvement' | 'regression' | 'neutral' | 'no-change';
+type ChangeKindVariant = 'low' | 'medium' | 'high';
+
+type BarProps = {
+  className?: string;
+  kind: ChangeKind;
+  variants: ChangeKindVariant[];
+  size?: 'medium' | 'large';
+};
+
+const Variants = (props: BarProps) => {
+  const { className, kind, variants, size = 'medium' } = props;
+
+  return (
+    <span className={cx(css.variants, css[`bar-${kind}`], css[size], className)}>
+      {variants.map((variant) => (
+        <span key={variant} className={cx(css.variant, css[`variant-${variant}`])} />
+      ))}
+    </span>
+  );
+};
+
+type ChangeMagnitudeInfoProps = {
+  kind: 'improvement' | 'regression';
+  impact: string;
+};
+
+const ChangeMagnitudeInfo = (props: ChangeMagnitudeInfoProps) => {
+  const { kind, impact } = props;
+
+  return (
+    <Stack space="small">
+      <p>
+        Changes flagged as <strong>{kind}s</strong> have a {impact} impact on user performance.
+      </p>
+      <p>
+        The report shows different intensity colors depending on the magnitude of the percentage
+        change.
+      </p>
+      <Stack space="xxsmall">
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['low']} size="large" />
+          Change is smaller or equal than <strong>5%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['medium']} size="large" />
+          Change is smaller or equal than <strong>50%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['high']} size="large" />
+          Change is larger than <strong>50%</strong>
+        </FlexStack>
+      </Stack>
+    </Stack>
+  );
+};
+
+const ImprovementInfo = () => <ChangeMagnitudeInfo kind="improvement" impact="positive" />;
+const RegressionInfo = () => <ChangeMagnitudeInfo kind="regression" impact="negative" />;
+
+const NeutralInfo = () => (
+  <Stack space="small">
+    <p>
+      <strong>Neutral</strong> changes do not have a clear positive or negative impact on user
+      performance.
+    </p>
+  </Stack>
+);
+
+const NoChangeInfo = () => (
+  <Stack space="small">
+    <p>
+      The metric value is <strong>unchanged</strong> between the compared builds.
+    </p>
+  </Stack>
+);
+
+type ChangeConfig = {
+  id: ChangeKind;
+  label: string;
+  variants: ChangeKindVariant[];
+  info: ReactNode;
+};
+
+const ITEMS: ChangeConfig[] = [
+  {
+    id: 'improvement',
+    label: 'Improvement',
+    variants: ['low', 'medium', 'high'],
+    info: <ImprovementInfo />,
+  },
+  {
+    id: 'regression',
+    label: 'Regression',
+    variants: ['low', 'medium', 'high'],
+    info: <RegressionInfo />,
+  },
+  {
+    id: 'neutral',
+    label: 'Neutral',
+    variants: ['medium'],
+    info: <NeutralInfo />,
+  },
+  {
+    id: 'no-change',
+    label: 'No change',
+    variants: ['medium'],
+    info: <NoChangeInfo />,
+  },
+];
+
+export interface MetricChangeLegendProps extends React.ComponentProps<'div'> {}
+
+export const MetricChangeLegend = (props: MetricChangeLegendProps) => {
+  const { className, ...restProps } = props;
+
+  return (
+    <FlexStack inline space="small" className={cx(css.root, className)} {...restProps}>
+      {ITEMS.map(({ id, variants, label, info }) => (
+        <HoverCard
+          key={id}
+          anchorClassName={css.itemAnchor}
+          label={
+            <FlexStack inline alignItems="center" space="xxsmall" className={css.item}>
+              <Variants kind={id} variants={variants} className={css.itemVariants} />
+              <span className={css.itemLabel}>{label}</span>
+            </FlexStack>
+          }
+        >
+          {info}
+        </HoverCard>
+      ))}
+    </FlexStack>
+  );
+};

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

@@ -1,5 +1,5 @@
 import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
-import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { getGlobalMetricType, getMetricRunInfo, MetricTypes } from '@bundle-stats/utils';
 import { Focusable } from 'ariakit/focusable';
 
 import { Stack } from '../../layout/stack';
@@ -8,11 +8,11 @@ import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
-interface MetricInfoProps {
+type MetricInfoProps = {
   title: string;
   description?: string;
   url?: string;
-}
+};
 
 const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   // The component parent can be rendered inside a link or a button
@@ -50,17 +50,19 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   );
 };
 
-export interface MetricRunInfoProps {
+export type MetricRunInfoProps = {
   metricId: string;
   current: number;
   baseline?: number;
-  showDelta?: boolean;
   showMetricDescription?: boolean;
-  showBaseline?: boolean;
   titleWrapper?: ElementType;
-  size?: RunInfoProps['size'];
-  loading?: RunInfoProps['loading'];
-}
+  /**
+   * 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'>) => {
   const {
@@ -70,6 +72,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     showDelta = true,
     showMetricDescription = true,
     showBaseline = true,
+    showDeltaAbsoluteValue = false,
     titleWrapper: CustomTitleWrapper = React.Fragment,
     ...restProps
   } = props;
@@ -92,16 +95,38 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     [CustomTitleWrapper, metric.label],
   );
 
+  const baselineProps = useMemo(() => {
+    if (showBaseline) {
+      return {
+        showBaseline,
+        baseline: metric.formatter(baseline),
+      };
+    }
+
+    return { showBaseline };
+  }, [showBaseline, baseline]);
+
   const deltaProps = useMemo(() => {
-    if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
-      return {};
+    if (!showDelta || metric.skipDelta) {
+      return {
+        showDelta: false,
+      };
+    }
+
+    // If the delta data is missing, do not render the dats
+    if (!('delta' in metricRunInfo)) {
+      return {
+        showDelta: false,
+      };
     }
 
     return {
-      delta: metricRunInfo.displayDeltaPercentage,
+      showDelta: true,
       deltaType: metricRunInfo.deltaType,
+      deltaPercentage: metricRunInfo.displayDeltaPercentage,
+      ...(showDeltaAbsoluteValue && { delta: metricRunInfo.displayDelta }),
     };
-  }, [metricRunInfo]);
+  }, [metric, metricRunInfo, showDelta, showDeltaAbsoluteValue]);
 
   return (
     <RunInfo
@@ -109,10 +134,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       titleHoverCard={titleHoverCard}
       enhance
       current={metricRunInfo.displayValue}
-      showBaseline={showBaseline}
-      {...(showBaseline && {
-        baseline: metric.formatter(baseline),
-      })}
+      {...baselineProps}
       {...deltaProps}
       {...restProps}
     />

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

@@ -1,40 +1,13 @@
 .dropdownGroup {
   border: 1px solid var(--color-outline);
-  transition: var(--transition-out);
 }
 
 .dropdownGroupButton {
   padding: calc(var(--space-xxsmall) - 1px);
 }
 
-.dropdownGroupAnchor {
-  border: none;
-  border-radius: 0;
-  position: relative;
-}
-
-.dropdownGroupAnchor::before {
-  content: '';
-  display: block;
-  width: 1px;
-  background: var(--color-outline-dark);
-  position: absolute;
-  left: 0;
-  top: var(--space-xxxsmall);
-  bottom: var(--space-xxxsmall);
-}
-
-.dropdownGroupAnchor:hover,
-.dropdownGroupAnchor:focus,
-.dropdownGroupAnchor:active {
-  border-color: var(--color-outline);
-  box-shadow: none;
-  background: none;
-}
-
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
 }
 
 .itemActive {

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>