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

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

@@ -29,7 +29,7 @@ const VERTICAL_SPACING = 4;
 const LINE_HEIGHT = 16;
 const LINE_HEIGHT_SMALL = 13.3;
 
-function resolveLeafSizeDisplay(width: number, height: number): TileSizeDisplay {
+function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
   if (
     height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
     width > PADDING_LEFT + PADDING_RIGHT + 128
@@ -47,19 +47,19 @@ function resolveLeafSizeDisplay(width: number, height: number): TileSizeDisplay
   return 'minimal';
 }
 
-interface LeafTooltipContentProps {
+interface TileTooltipContentProps {
   item: ReportMetricRow;
 }
 
-const LeafTooltipContent = (props: LeafTooltipContentProps) => {
+const TileTooltipContent = (props: TileTooltipContentProps) => {
   const { item } = props;
 
   const currentRun = item.runs[0] as MetricRunInfo;
   const baselineRun = item.runs[item.runs.length - 1] as MetricRunInfoBaseline;
 
   return (
-    <Stack space="small" className={css.leafTooltipContent}>
-      <h3 className={css.leafTooltipContentTitle}>
+    <Stack space="small" className={css.tileTooltipContent}>
+      <h3 className={css.tileTooltipContentTitle}>
         <FileName as="code" name={item.label} />
       </h3>
       <RunInfo
@@ -72,21 +72,21 @@ const LeafTooltipContent = (props: LeafTooltipContentProps) => {
   );
 };
 
-interface LeafContentProps {
+interface TileContentProps {
   sizeDisplay: 'minimal' | 'small' | 'default';
   item: ReportMetricRow;
   runInfo: MetricRunInfo;
 }
 
-const LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivElement>) => {
+const TileContent = forwardRef((props: TileContentProps, ref: React.Ref<HTMLDivElement>) => {
   const { sizeDisplay, item, runInfo } = props;
 
   if (sizeDisplay === 'minimal') {
-    return <div className={css.leafContent} ref={ref} />;
+    return <div className={css.tileContent} ref={ref} />;
   }
 
   return (
-    <div className={css.leafContent} ref={ref}>
+    <div className={css.tileContent} ref={ref}>
       <FileName as="p" className={css.leadContentLabel} name={item.label} />
       {sizeDisplay !== 'small' && (
         <p className={css.leadContentValue}>
@@ -102,7 +102,7 @@ const LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivE
   );
 });
 
-const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject<Element> }) => {
+const TileContentWithTooltip = (props: TileContentProps & { parentRef: RefObject<Element> }) => {
   const { sizeDisplay, item, runInfo, parentRef } = props;
 
   const pointer = useMouseHovered(parentRef, { whenHovered: true });
@@ -131,12 +131,12 @@ const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject
 
   return (
     <>
-      <TooltipAnchor state={tooltipState} className={css.leafContentTooltipAnchor}>
-        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
+        <TileContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
       </TooltipAnchor>
       <Tooltip state={tooltipState} className={css.tooltip}>
-        <TooltipArrow state={tooltipState} size={16} className={css.leafTooltipArrow} />
-        <LeafTooltipContent item={item} />
+        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+        <TileTooltipContent item={item} />
       </Tooltip>
     </>
   );
@@ -155,7 +155,7 @@ interface RootTree {
   children: Array<TreeNode>;
 }
 
-interface LeafProps {
+interface TileProps {
   left: number;
   top: number;
   width: number;
@@ -164,42 +164,42 @@ interface LeafProps {
   onClick?: (id: string) => void;
 }
 
-const Leaf = (props: LeafProps) => {
+const Tile = (props: TileProps) => {
   const { left, top, width, height, data, onClick } = props;
 
   const { item } = data;
   const runInfo = item.runs?.[0] as MetricRunInfo;
 
-  const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
+  const sizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
   const handleOnClick = useCallback(() => onClick?.(item.key), [item.key, onClick]);
 
-  const leafContentRef = useRef<HTMLButtonElement>(null);
-  const hover = useHoverDirty(leafContentRef);
+  const contentRef = useRef<HTMLButtonElement>(null);
+  const hover = useHoverDirty(contentRef);
 
-  const leafClassName = cx(
-    css.leaf,
-    css[`leaf-${runInfo.deltaType}`],
-    sizeDisplay === 'small' && css.leafSmall,
-    left === 0 && css.leafFirstCol,
+  const className = cx(
+    css.tile,
+    css[`tile-${runInfo.deltaType}`],
+    sizeDisplay === 'small' && css.tileSmall,
+    left === 0 && css.tileFirstCol,
   );
 
   return (
     <button
       type="button"
       onClick={handleOnClick}
-      ref={leafContentRef}
+      ref={contentRef}
       style={{ left, top, width, height }}
-      className={leafClassName}
+      className={className}
     >
       {hover ? (
-        <LeafContentWithTooltip
+        <TileContentWithTooltip
           sizeDisplay={sizeDisplay}
           item={item}
           runInfo={runInfo}
-          parentRef={leafContentRef}
+          parentRef={contentRef}
         />
       ) : (
-        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+        <TileContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
       )}
     </button>
   );
@@ -217,8 +217,8 @@ function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
   const treemapHierarchy = useMemo(() => {
     const children = items.map((item) => {
       /**
-       * Set leaf value to the largest run value to allow to
-       * display the impact of deleted / items
+       * Set tile value to the largest run value to allow to
+       * display the impact of deleted/new entries
        */
       const values = item.runs.map((run) => run?.value || 0);
       const value = Math.max(...values);
@@ -245,7 +245,7 @@ function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
     return customHierarchy;
   }, [items]);
 
-  const cells = useMemo(() => {
+  const tiles = useMemo(() => {
     const createTremapLayout = treemap()
       .size([width, height])
       .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
@@ -254,10 +254,10 @@ function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
     // @ts-expect-error
     const tremapLayout = createTremapLayout(treemapHierarchy);
 
-    return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
+    return tremapLayout.leaves().filter((tile) => Boolean(tile.parent));
   }, [height, width, treemapHierarchy]);
 
-  return cells;
+  return tiles;
 }
 
 interface MetricsTreemapProps {
@@ -270,26 +270,26 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
   const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
 
   const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
-  const cells = useMetricsTreemapHierarchy({ items, width, height });
+  const tiles = useMetricsTreemapHierarchy({ items, width, height });
 
   return (
     <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
-      {cells.length > 0 ? (
+      {tiles.length > 0 ? (
         <div className={css.canvas}>
-          {cells.map((leaf) => {
-            if (!leaf.parent) {
+          {tiles.map((tile) => {
+            if (!tile.parent) {
               return null;
             }
 
             return (
-              <Leaf
-                data={leaf.data as TreeNode}
-                left={leaf.x0}
-                top={leaf.y0}
-                width={leaf.x1 - leaf.x0}
-                height={leaf.y1 - leaf.y0}
+              <Tile
+                data={tile.data as TreeNode}
+                left={tile.x0}
+                top={tile.y0}
+                width={tile.x1 - tile.x0}
+                height={tile.y1 - tile.y0}
                 onClick={onItemClick}
-                key={leaf.id}
+                key={tile.id}
               />
             );
           })}

package/src/css/variables.css

@@ -192,9 +192,9 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 4px;
-  --radius-medium: 5px;
-  --radius-large: 6px;
+  --radius-small: 5px;
+  --radius-medium: 7px;
+  --radius-large: 9px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);
 

package/src/ui/button/button.module.css

@@ -1,14 +1,21 @@
 .root {
+  /* use for vertical padding and to compute gap and horizontal spacing */
+  --button-space: 0px;
+  /* button border width */
+  --border-width: 0px;
+
   display: inline-flex;
   align-items: center;
-  gap: var(--space-xxsmall);
+  justify-content: center;
+  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
   appearance: none;
   padding: 0;
-  border: 0;
+  border: var(--border-width) solid transparent;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
   font-family: var(--font-family);
+  white-space: nowrap;
 }
 
 a.root {
@@ -18,6 +25,7 @@ a.root {
 .root:hover,
 .root:active,
 .root:focus {
+  outline: none;
   color: var(--color-text-light);
   transition: var(--transition-in);
 }
@@ -98,7 +106,7 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-light);
+  background: var(--color-text-ultra-light);
   color: var(--color-background);
 }
 
@@ -106,7 +114,7 @@ a.root {
 .solid:active,
 .solid:focus {
   box-shadow: var(--outline-hover);
-  background: var(--color-text);
+  background: var(--color-text-light);
   color: var(--color-background);
 }
 
@@ -170,11 +178,51 @@ a.root {
   background: var(--color-success-dark);
 }
 
+/**
+ * Size variation
+ */
+.small {
+  --button-space: var(--space-xxsmall);
+
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+}
+
+.small .glyph {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.medium {
+  --button-space: var(--space-xsmall);
+
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.medium .glyph {
+  width: calc(var(--space-small) + var(--space-xxxsmall));
+  height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.large {
+  --button-space: var(--space-small);
+
+  font-size: var(--size-large);
+  line-height: var(--space-medium);
+}
+
+.large .glyph {
+  width: var(--space-medium);
+  height: var(--space-medium);
+}
+
 /**
  * Outline variation
  */
 .outline {
-  border: 1px solid var(--color-outline);
+  --border-width: 1px;
+  border-color: var(--color-outline);
 }
 
 .outline:hover,
@@ -244,58 +292,12 @@ a.root {
   border-color: var(--color-outline-success-dark);
 }
 
-/**
- * Size variation
- */
-.small {
-  font-size: var(--size-small);
-  gap: var(--space-xxxsmall);
-  line-height: var(--space-small);
-}
-
-.small .glyph {
-  width: calc(var(--space-xsmall) + 2px);
-  height: calc(var(--space-xsmall) + 2px);
-  margin: 1px; /* compensate to keep the same height when the text is not provided */
-}
-
-.medium {
-  font-size: var(--size-medium);
-  gap: var(--space-xxsmall);
-  line-height: var(--space-small);
-}
-
-.large {
-  font-size: var(--size-large);
-  gap: var(--space-xxsmall);
-  line-height: var(--space-small);
-}
 
 /**
  * Padding variation
  */
-.padding--small {
-  padding: var(--space-xxsmall);
-}
-
-.outline--padding--small {
-  padding: calc(var(--space-xxsmall) - 1px);
-}
-
-.padding--medium {
-  padding:  var(--space-xsmall);
-}
-
-.outline--padding--medium {
-  padding:  calc(var(--space-xsmall) - 1px);
-}
-
-.padding--large {
-  padding: var(--space-small);
-}
-
-.outline--padding--large {
-  padding: calc(var(--space-small) - 1px);
+.padding {
+  padding: calc(var(--button-space) - var(--border-width));
 }
 
 /**

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

@@ -62,7 +62,14 @@ export const All = () => (
         <h3>With icon</h3>
         <Items>
           {Object.values(BUTTON_KIND).map((kind) => (
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
@@ -106,12 +113,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -125,10 +132,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -179,12 +186,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}
@@ -198,10 +205,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}

package/src/ui/button/button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
@@ -50,7 +51,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     radius = '',
     padding = '',
     as: Component = ButtonBaseComponent,
-    children,
+    children = null,
     Icon = BaseIcon,
     glyph,
     rightGlyph,
@@ -61,10 +62,12 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   const resolvedPadding = padding || ((outline || solid) && size);
   const resolvedRadius = radius || ((outline || solid) && size);
 
+  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
+
   const rootClassName = cx(
     css.root,
-    css[size],
     kind && css[kind],
+    css[resolvedSize],
 
     outline && css.outline,
     outline && css[`outline--${kind}`],
@@ -72,22 +75,20 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     solid && css.solid,
     solid && css[`solid--${kind}`],
 
-    resolvedPadding && css[`padding--${resolvedPadding}`],
-    resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`],
+    resolvedPadding && css.padding,
     resolvedRadius && css[`radius--${resolvedRadius}`],
 
     active && css.active,
     active && outline && css[`active-outline-${kind}`],
 
-    css[size],
     className,
   );
 
   return (
     <Component {...restProps} className={rootClassName}>
-      {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
-      {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}
     </Component>
   );
 };

package/src/ui/icon/icon.tsx

@@ -5,7 +5,7 @@ import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
+  ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
   CANCEL: 'close',
   CHEVRON_DOWN: 'chevron-down',
   CHEVRON_UP: 'chevron-up',

package/types/ui/icon/icon.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const ICONS: {
     readonly ARROW: "arrow";
-    readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
     readonly CANCEL: "close";
     readonly CHEVRON_DOWN: "chevron-down";
     readonly CHEVRON_UP: "chevron-up";
@@ -36,7 +36,7 @@ export declare const Icon: {
     (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
     ICONS: {
         readonly ARROW: "arrow";
-        readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+        readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
         readonly CANCEL: "close";
         readonly CHEVRON_DOWN: "chevron-down";
         readonly CHEVRON_UP: "chevron-up";