@bundle-stats/ui 4.13.0-beta.7 → 4.13.0-beta.9

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

@@ -22,15 +22,13 @@
 }
 
 /** Leaf wrapper button */
-.leafAction {
-  position: relative;
+.leaf {
+  position: absolute;
   appearance: none;
   border: 0;
   border-radius: 0;
   padding: 0;
   background: none;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -39,7 +37,7 @@
   text-align: left;
 }
 
-.leafAction::before {
+.leaf::before {
   content: "";
   display: block;
   position: absolute;
@@ -55,7 +53,7 @@
   opacity: 0.6;
 }
 
-.leaf:hover .leafAction::before {
+.leaf:hover::before {
   transition: var(--ui-transition-in);
   opacity: 0.4;
 }
@@ -74,7 +72,7 @@
 }
 
 /** Align label to other elements on the first column leafs */
-.leaf[x="1"] .leafContent {
+.leafFirstCol .leafContent {
   padding-left: var(--space-small);
 }
 
@@ -113,40 +111,40 @@
 }
 
 /** Tile diff variation */
-.leaf-NO_CHANGE .leafAction {
+.leaf-NO_CHANGE {
   color: var(--color-text-light);
 }
 
-.leaf-NO_CHANGE .leafAction::before {
+.leaf-NO_CHANGE::before {
   color: var(--color-gray-50);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover .leafAction::before {
+.leaf-NO_CHANGE:hover::before {
   opacity: 0.2;
 }
 
-.leaf-HIGH_NEGATIVE .leafAction::before {
+.leaf-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE .leafAction::before {
+.leaf-NEGATIVE::before {
   color: var(--color-red-50);
 }
 
-.leaf-LOW_NEGATIVE .leafAction::before {
+.leaf-LOW_NEGATIVE::before {
   color: var(--color-red-25);
 }
 
-.leaf-LOW_POSITIVE .leafAction::before {
+.leaf-LOW_POSITIVE::before {
   color: var(--color-green-25);
 }
 
-.leaf-POSITIVE .leafAction::before {
+.leaf-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE .leafAction::before {
+.leaf-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 

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

@@ -11,9 +11,9 @@ import { Delta } from '../delta';
 import { RunInfo } from '../run-info';
 import css from './metrics-treemap.module.css';
 
-const SQUARIFY_RATIO = 1.78;
-const PADDING_OUTER = 1;
-const PADDING_INNER = 1;
+const SQUARIFY_RATIO = 1.33;
+const PADDING_OUTER = 0;
+const PADDING_INNER = 2;
 
 type TileSizeDisplay = 'minimal' | 'small' | 'default';
 
@@ -142,11 +142,6 @@ const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject
   );
 };
 
-const LeafAction = forwardRef((props: React.ComponentProps<'button'>, ref) => (
-  // @ts-expect-error
-  <button type="button" xmlns="http://www.w3.org/1999/xhtml" ref={ref} {...props} />
-));
-
 interface TreeNode {
   id: string;
   value: number;
@@ -161,8 +156,8 @@ interface RootTree {
 }
 
 interface LeafProps {
-  x: number;
-  y: number;
+  left: number;
+  top: number;
   width: number;
   height: number;
   data: TreeNode;
@@ -170,7 +165,7 @@ interface LeafProps {
 }
 
 const Leaf = (props: LeafProps) => {
-  const { x, y, width, height, data, onClick } = props;
+  const { left, top, width, height, data, onClick } = props;
 
   const { item } = data;
   const runInfo = item.runs?.[0] as MetricRunInfo;
@@ -178,30 +173,35 @@ const Leaf = (props: LeafProps) => {
   const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
   const handleOnClick = useCallback(() => onClick?.(item.key), [item.key, onClick]);
 
-  const leafContentRef = useRef<HTMLElement>(null);
+  const leafContentRef = useRef<HTMLButtonElement>(null);
   const hover = useHoverDirty(leafContentRef);
 
   const leafClassName = cx(
     css.leaf,
     css[`leaf-${runInfo.deltaType}`],
     sizeDisplay === 'small' && css.leafSmall,
+    left === 0 && css.leafFirstCol,
   );
 
   return (
-    <foreignObject height={height} width={width} x={x} y={y} className={leafClassName}>
-      <LeafAction onClick={handleOnClick} ref={leafContentRef} className={css.leafAction}>
-        {hover ? (
-          <LeafContentWithTooltip
-            sizeDisplay={sizeDisplay}
-            item={item}
-            runInfo={runInfo}
-            parentRef={leafContentRef}
-          />
-        ) : (
-          <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
-        )}
-      </LeafAction>
-    </foreignObject>
+    <button
+      type="button"
+      onClick={handleOnClick}
+      ref={leafContentRef}
+      style={{ left, top, width, height }}
+      className={leafClassName}
+    >
+      {hover ? (
+        <LeafContentWithTooltip
+          sizeDisplay={sizeDisplay}
+          item={item}
+          runInfo={runInfo}
+          parentRef={leafContentRef}
+        />
+      ) : (
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      )}
+    </button>
   );
 };
 
@@ -275,7 +275,7 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
   return (
     <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
       {cells.length > 0 ? (
-        <svg viewBox={`0 0 ${width} ${height}`} className={css.canvas}>
+        <div className={css.canvas}>
           {cells.map((leaf) => {
             if (!leaf.parent) {
               return null;
@@ -283,17 +283,17 @@ export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps
 
             return (
               <Leaf
-                x={leaf.x0}
-                y={leaf.y0}
+                data={leaf.data as TreeNode}
+                left={leaf.x0}
+                top={leaf.y0}
                 width={leaf.x1 - leaf.x0}
                 height={leaf.y1 - leaf.y0}
-                data={leaf.data as TreeNode}
                 onClick={onItemClick}
                 key={leaf.id}
               />
             );
           })}
-        </svg>
+        </div>
       ) : (
         <div className={css.emptyMessage}>
           <div className={css.emptyMessageWrapper}>{emptyMessage}</div>

package/src/ui/dropdown/dropdown.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Dropdown, DropdownItem } from '.';
+
+export default {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+export const Defualt = () => (
+  <Dropdown glyph="filter" label="Toggle">
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);
+
+export const Disabled = () => (
+  <Dropdown glyph="filter" label="Toggle" disabled>
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);

package/src/ui/dropdown/dropdown.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import cx from 'classnames';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+
+import { Button, BUTTON_SIZE } from '../button';
+import css from './dropdown.module.css';
+
+interface DropdownItemProps {
+  isActive?: boolean;
+}
+
+export const DropdownItem = (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => {
+  const { className = '', isActive = false, ...restProps } = props;
+
+  return (
+    <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
+  );
+};
+
+interface DropdownProps {
+  buttonClassName?: string;
+  dropdownClassName?: string;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  glyph?: string;
+  disabled?: boolean;
+}
+
+export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
+  const {
+    buttonClassName = '',
+    dropdownClassName = '',
+    label = null,
+    ariaLabel = '',
+    glyph = '',
+    disabled = false,
+    children,
+  } = props;
+
+  const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
+  const menuState = useMenuState();
+
+  return (
+    <>
+      <MenuButton
+        as={Button}
+        outline
+        size={BUTTON_SIZE.SMALL}
+        glyph={glyph}
+        disabled={disabled}
+        state={menuState}
+        tabIndex={null}
+        className={cx(css.button, buttonClassName)}
+      >
+        {label}
+      </MenuButton>
+      <Menu
+        portal
+        state={menuState}
+        aria-label={dropdownAriaLabel}
+        className={cx(css.dropdown, dropdownClassName)}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};

package/src/ui/filters/filters.module.css

@@ -1,18 +1,18 @@
-/* Checkbox + label + button */
-.filter {
-  /* Update MenuItem padding */
-  padding-top: calc(var(--space-xxxsmall) / 2);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
 
+/* Filter (label with input + text) */
+.filter {
   position: relative;
   width: 100%;
   max-width: 240px;
+  color: var(--color-text);
 }
 
-.filterCheckbox {
-}
-
-.filterInput {
+.filterControl {
   flex: 0 0 auto;
   height: 1em;
 }
@@ -25,7 +25,42 @@
   text-overflow: ellipsis;
 }
 
-.filterOnlyButton {
+.filterControl[disabled] + .filterLabel {
+  color: var(--color-text-light);
+}
+
+.filter:hover {
+  color: var(--color-dark);
+}
+
+/** Filter single */
+.filterSingle {
+  padding: calc(var(--space-xxsmall) - 1px);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+  color: var(--color-text-ultra-light);
+}
+
+.filterSingle:hover,
+.filterSingle:active,
+.filterSingle:focus {
+  border-color: var(--color-outline-dark);
+}
+
+/** Filter group */
+.filterGroupItems {
+  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
+  overflow: auto;
+}
+
+.filterGroupItem {
+  position: relative;
+  padding-right: 10em;
+}
+
+.filterGroupOnlyButton {
   display: none;
   position: absolute;
   right: 2px;
@@ -37,7 +72,7 @@
 }
 
 /** cover item text */
-.filterOnlyButton::before {
+.filterGroupOnlyButton::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -48,53 +83,13 @@
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
 }
 
-/** filter disabled state */
-.filterInput[disabled] + .filterLabel {
-  color: var(--color-text-light);
-}
-
-.filterInput[disabled] + .filterOnlyButton {
-  display: none;
-}
-
 /** filter hover state */
-.filter {
-  color: var(--color-text);
-}
-
-.filter:hover {
-  color: var(--color-dark);
-}
-
-.filter:hover .filterOnlyButton {
+.filterGroupItem:hover .filterGroupOnlyButton {
   display: block;
 }
 
-/** Filter standard variation */
-.filterStandalone {
-  padding: 0;
-  width: auto;
-  color: var(--color-text-light);
-  z-index: var(--layout-xlow); /* show collapsed border */
-  font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.filterStandalone .filterCheckbox {
-  padding: calc(var(--space-xxsmall) - 1px) calc(var(--space-xxsmall) - 1px);
-  border: 1px solid var(--color-outline);
-}
-
-.filterStandalone:hover .filterCheckbox,
-.filterStandalone:active .filterCheckbox,
-.filterStandalone:focus .filterCheckbox {
-  z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
-}
-
 /** Filter group variation */
-.labelSuffixCustom {
+.filterGroupLabelSuffixCustom {
   color: var(--color-text);
   text-transform: lowercase;
 }
@@ -112,11 +107,6 @@
   color: var(--color-text-light);
 }
 
-.filterGroupItems {
-  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
-  overflow: auto;
-}
-
 .filterGroupActions {
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
@@ -124,12 +114,3 @@
   margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
-
-.item {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.itemButton {
-  border-radius: var(--radius-small);
-}

package/src/ui/filters/filters.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions'; // eslint-disable-line
+
+import { getWrapperDecorator } from '../../stories';
+import { Filters } from '.';
+
+export default {
+  title: 'UI/Filters',
+  component: Filters,
+  decorators: [getWrapperDecorator({ paddingLeft: '200px' })],
+} as Meta;
+
+export const Default = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+          {
+            key: 'OTHER',
+            label: 'Asset that is not CSS, JS or HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);
+
+export const Overflow = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      chunks: {
+        label: 'Chunks',
+        children: Array(22)
+          .fill('')
+          .map((_, currentIndex) => ({
+            key: `chunk-${currentIndex}`,
+            label: `Chunk ${currentIndex + 1}`,
+            defaultValue: true,
+          })),
+      },
+    }}
+  />
+);
+
+export const DisableOptions = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: false,
+        disabled: true,
+      },
+      entrypoint: {
+        label: 'Entrypoint',
+        defaultValue: false,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+            disabled: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);