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

package/lib-esm/ui/toolbar/toolbar.module.css

@@ -6,18 +6,12 @@
 
 .actions {
   margin-top: var(--space-xsmall);
-  display: flex;
-  align-items: center;
 }
 
 .action {
   flex: 0 0 auto;
 }
 
-.action + .action {
-  margin-left: var(--space-xsmall);
-}
-
 @media (min-width: 768px) {
   .root {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.23.0-beta.5",
+  "version": "4.23.0-beta.6",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.23.0-beta.5",
+    "@bundle-stats/utils": "^4.23.0-beta.6",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -91,5 +91,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.2"
   },
-  "gitHead": "af798896d85f2758e3cd1a5874b06207cef61c68"
+  "gitHead": "cd3d72f54ed809e9dfaea2bc3b8a6880b1482b44"
 }

package/src/app/app.jsx

@@ -13,6 +13,7 @@ import { Insights } from '../components/insights';
 import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
+import { FlexStack } from '../layout/flex-stack';
 import { Footer } from '../layout/footer';
 import { Stack } from '../layout/stack';
 import { Container } from '../ui/container';
@@ -151,9 +152,9 @@ const AppComponent = ({ version, jobs }) => {
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
         <Container className={css.metricChangeLegendContainer}>
-          <div className={css.metricChangeLegendContainerInner}>
+          <FlexStack justifyContent="flex-end">
             <MetricChangeLegend />
-          </div>
+          </FlexStack>
         </Container>
         <Container className={css.summaryContainer}>
           <Summary

package/src/app/app.module.css

@@ -22,11 +22,6 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.metricChangeLegendContainerInner {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .summaryContainer {
   padding-top: var(--space-xxsmall);
   padding-bottom: var(--space-xxsmall);

package/src/components/asset-name/asset-name.module.css

@@ -1,9 +1,3 @@
-.root {
-  display: inline-flex;
-  gap: var(--space-xxxsmall);
-  align-items: center;
-}
-
 .notPredictive {
   flex: 0 0 auto;
   width: var(--space-small);
@@ -20,9 +14,6 @@
 
 .link {
   flex: 1 1 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xxxsmall);
 }
 
 .tags {

package/src/components/asset-name/asset-name.tsx

@@ -1,6 +1,6 @@
 import React, { ElementType } from 'react';
-import cx from 'classnames';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
@@ -25,7 +25,7 @@ export const AssetName = (props: AssetNameProps) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
 
   return (
-    <span className={cx(css.root, className)}>
+    <FlexStack as="span" inline alignItems="center" gap="xxxsmall" className={className}>
       {isNotPredictive && (
         <HoverCard
           label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
@@ -36,7 +36,14 @@ export const AssetName = (props: AssetNameProps) => {
         </HoverCard>
       )}
 
-      <EntryComponentLink entryId={row.key} className={css.link}>
+      <FlexStack
+        as={EntryComponentLink}
+        entryId={row.key}
+        inline
+        alignItems="center"
+        gap="xxxsmall"
+        className={css.link}
+      >
         <span className={css.tags}>
           {isEntry && (
             <AssetMetaTag className={css.tag} title="Entrypoint" tag="entry" status={isEntry} />
@@ -49,7 +56,7 @@ export const AssetName = (props: AssetNameProps) => {
           )}
         </span>
         <FileName className={css.name} name={label} />
-      </EntryComponentLink>
-    </span>
+      </FlexStack>
+    </FlexStack>
   );
 };

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

@@ -11,12 +11,6 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.name {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xxxsmall);
-}
-
 .nameTagDuplicated {
   flex: 0 0 auto;
 }

package/src/components/bundle-modules/bundle-modules.tsx

@@ -58,12 +58,12 @@ const RowHeader = (props: RowHeaderProps) => {
   const moduleRow = row as ReportMetricModuleRow;
 
   return (
-    <EntryComponentLink entryId={row.key} className={css.name}>
+    <FlexStack as={EntryComponentLink} entryId={row.key} inline alignItems="center" gap="xxxsmall">
       {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
       <FileName className={css.nameText} name={moduleRow.label} />
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 

package/src/components/bundle-packages/bundle-packages.jsx

@@ -49,7 +49,14 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
 
 const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
+    <FlexStack
+      as={EntryComponentLink}
+      entryId={showDetails ? row.key : packageName}
+      inline
+      alignItems="center"
+      gap="xxxsmall"
+      className={css.packageName}
+    >
       {showDetails && row.duplicate && (
         <Tag
           className={css.packageNameTagDuplicate}
@@ -59,7 +66,7 @@ const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
         />
       )}
       <span className={css.packageNameLabel}>{packageName}</span>
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 

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

@@ -12,9 +12,6 @@
 }
 
 .packageName {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xxxsmall);
   color: var(--color-text-light);
   text-decoration: none;
 }

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/metrics-treemap/metrics-treemap.module.css

@@ -163,11 +163,7 @@
   z-index: 1;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
   padding: var(--space-xxsmall);
-  gap: var(--space-xxxsmall);
   line-height: var(--line-height-heading);
   cursor: default;
 }
@@ -284,9 +280,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .emptyMessageWrapper {

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

@@ -20,6 +20,7 @@ import {
   getMetricRunInfo,
 } from '@bundle-stats/utils';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
 import { Delta } from '../delta';
@@ -110,12 +111,22 @@ interface TileContentProps {
   runInfo: MetricRunInfo;
 }
 
+const TileContentContainer = (props: ComponentProps<'div'>) => (
+  <FlexStack
+    direction="column"
+    justifyContent="center"
+    gap="xxxsmall"
+    className={css.tileContent}
+    {...props}
+  />
+);
+
 const TileContent = (props: TileContentProps) => {
   const { label, sizeDisplay, item, runInfo } = props;
 
   // Render only the container
   if (sizeDisplay === 'minimal') {
-    return <div className={css.tileContent} />;
+    return <TileContentContainer />;
   }
 
   const resolvedLabel = label || item.label;
@@ -123,14 +134,14 @@ const TileContent = (props: TileContentProps) => {
   // Render only the label
   if (sizeDisplay === 'small') {
     return (
-      <div className={css.tileContent}>
+      <TileContentContainer>
         <p className={css.tileContentLabel}>{resolvedLabel}</p>
-      </div>
+      </TileContentContainer>
     );
   }
 
   return (
-    <div className={css.tileContent}>
+    <TileContentContainer>
       <p className={css.tileContentLabel}>{label || item.label}</p>
       <p className={css.tileContentValue}>
         <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
@@ -140,7 +151,7 @@ const TileContent = (props: TileContentProps) => {
           deltaType={runInfo.deltaType}
         />
       </p>
-    </div>
+    </TileContentContainer>
   );
 };
 
@@ -585,9 +596,9 @@ export const MetricsTreemap = (props: MetricsTreemapProps & ComponentProps<'div'
           {canvasContent}
         </div>
       ) : (
-        <div className={css.emptyMessage}>
+        <FlexStack alignItems="center" justifyContent="center" className={css.emptyMessage}>
           <div className={css.emptyMessageWrapper}>{emptyMessage}</div>
-        </div>
+        </FlexStack>
       )}
       {tooltipNode && (
         <Tooltip state={tooltipState} className={css.tooltip}>

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

@@ -5,10 +5,6 @@
 
 .row {
   width: 100%;
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-small);
 }
 
 .rowGroup {
@@ -26,13 +22,6 @@
   margin-top: var(--summary-gap);
 }
 
-.items {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-medium);
-}
-
 .item {
   flex: 1 1 10%; /* force equal sizes */
   min-width: 8em;

package/src/components/summary/summary.tsx

@@ -10,6 +10,7 @@ import {
   METRICS_WEBPACK_GENERAL,
 } from '../../constants';
 import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
@@ -77,9 +78,9 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.row}>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
       <Box outline padding="small" className={css.rowGroup}>
-        <div className={css.items}>
+        <FlexStack wrap="wrap" gap="medium">
           {METRICS_WEBPACK_GENERAL.map((metricId) => (
             <SummaryItem
               key={metricId}
@@ -93,15 +94,15 @@ export const Summary = ({
               showBaseline={showSummaryItemBaseline}
             />
           ))}
-        </div>
+        </FlexStack>
       </Box>
-    </div>
-    <div className={css.row}>
+    </FlexStack>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
       {[METRICS_GROUP_ASSETS, METRICS_GROUP_MODULES, METRICS_GROUP_PACKAGES].map((metricGroup) => (
         <Stack className={css.rowGroup} key={metricGroup.title}>
           <h3 className={css.rowGroupTitle}>{metricGroup.title}</h3>
           <Box outline padding="small">
-            <div className={css.items}>
+            <FlexStack wrap="wrap" gap="medium">
               {metricGroup.metrics.map((metricId) => (
                 <SummaryItem
                   key={metricId}
@@ -115,10 +116,10 @@ export const Summary = ({
                   showBaseline={showSummaryItemBaseline}
                 />
               ))}
-            </div>
+            </FlexStack>
           </Box>
         </Stack>
       ))}
-    </div>
+    </FlexStack>
   </Box>
 );

package/src/css/variables.css

@@ -146,9 +146,9 @@ 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-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
 
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);

package/src/ui/button/button.stories.tsx

@@ -19,7 +19,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const Items = (props: React.ComponentProps<typeof FlexStack>) => (
-  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
+  <FlexStack alignItems="top" wrap="wrap" gap="xsmall" {...props} />
 );
 
 export const Default: Story = {};

package/src/ui/control-group/control-group.tsx

@@ -9,7 +9,7 @@ export const ControlGroup = (props: React.ComponentProps<typeof FlexStack>) => {
   return (
     <FlexStack
       className={cx(css.root, className)}
-      space="no-space"
+      gap="no-space"
       alignItems="center"
       {...restProps}
     />

package/src/ui/filters/filters.tsx

@@ -20,12 +20,7 @@ const Filter = (props: FilterBooleanProps) => {
   const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <FlexStack
-      space="xxxsmall"
-      alignItems="center"
-      as="label"
-      className={cx(css.filter, className)}
-    >
+    <FlexStack gap="xxxsmall" alignItems="center" as="label" className={cx(css.filter, className)}>
       <input
         type="checkbox"
         id={`filter-${name}`}

package/src/ui/toolbar/toolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 
+import { FlexStack } from '../../layout/flex-stack';
 import css from './toolbar.module.css';
 
 export const Toolbar = (props) => {
@@ -12,7 +13,9 @@ export const Toolbar = (props) => {
     <div className={rootClassName}>
       <div className={css.content}>{children}</div>
       {renderActions && (
-        <div className={css.actions}>{renderActions({ actionClassName: css.action })}</div>
+        <FlexStack gap="xsmall" alignItems="center" className={css.actions}>
+          {renderActions({ actionClassName: css.action })}
+        </FlexStack>
       )}
     </div>
   );

package/src/ui/toolbar/toolbar.module.css

@@ -6,18 +6,12 @@
 
 .actions {
   margin-top: var(--space-xsmall);
-  display: flex;
-  align-items: center;
 }
 
 .action {
   flex: 0 0 auto;
 }
 
-.action + .action {
-  margin-left: var(--space-xsmall);
-}
-
 @media (min-width: 768px) {
   .root {
     display: flex;