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

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

@@ -3,35 +3,43 @@
   --button-space: 0px;
   /* button border width */
   --border-width: 0px;
+  /* line height in pixels to prevent layout shift when rendering a glyph */
+  --line-height: var(--space-small);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  gap: calc(var(--button-space) * 0.66);
   appearance: none;
   padding: 0;
   border: var(--border-width) solid transparent;
   background: none;
-  transition: var(--transition-out);
   color: var(--color-text-ultra-light);
+  font-size: var(--size-medium);
   font-family: var(--font-family);
+  line-height: var(--line-height);
   white-space: nowrap;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a.root {
   text-decoration: none;
 }
 
+.root:focus,
 .root:hover,
-.root:active,
-.root:focus {
+.root:active {
   outline: none;
   color: var(--color-text-light);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,13 +51,13 @@ a.root {
  * Kind variation
  */
 .primary {
-  color: var(--color-primary);
+  color: var(--color-accent);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-accent-dark);
 }
 
 .secondary {
@@ -106,25 +114,25 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-ultra-light);
+  background: var(--color-text-light);
   color: var(--color-background);
 }
 
 .solid:hover,
 .solid:active,
 .solid:focus {
-  background: var(--color-text-light);
+  background: var(--color-text);
   color: var(--color-background);
 }
 
 .solid--primary {
-  background: var(--color-primary);
+  background: var(--color-accent);
 }
 
 .solid--primary:hover,
 .solid--primary:active,
 .solid--primary:focus {
-  background: var(--color-primary-dark);
+  background: var(--color-accent-dark);
 }
 
 .solid--secondary {
@@ -180,40 +188,36 @@ a.root {
 /**
  * Size variation
  */
+.xsmall {
+  --button-space: var(--space-xxxsmall);
+  --line-height: var(--space-xsmall);
+
+  font-size: var(--size-xsmall);
+}
+
 .small {
   --button-space: var(--space-xxsmall);
+  --line-height: var(--space-small);
 
   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));
+  --line-height: var(--space-small);
 }
 
 .medium .glyph {
-  width: calc(var(--space-small) + var(--space-xxxsmall));
+  margin: calc(0px - var(--space-xxxsmall) / 2);
   height: calc(var(--space-small) + var(--space-xxxsmall));
+  width: calc(var(--space-small) + var(--space-xxxsmall));
 }
 
 .large {
   --button-space: var(--space-small);
+  --line-height: var(--space-medium);
 
   font-size: var(--size-large);
-  line-height: var(--space-medium);
-}
-
-.large .glyph {
-  width: var(--space-medium);
-  height: var(--space-medium);
 }
 
 /**
@@ -300,6 +304,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }
@@ -361,5 +369,10 @@ a.root {
  * Disabled state
  */
 .root[disabled] {
-  filter: grayscale(1);
+  opacity: 0.9;
+}
+
+.root[disabled] .icon,
+.root[disabled] .content {
+  opacity: 0.8;
 }

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/button/button.tsx

@@ -6,6 +6,7 @@ import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
 export const BUTTON_SIZE = {
+  XSMALL: 'xsmall',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large',
@@ -41,6 +42,7 @@ interface ButtonProps<T extends React.ElementType> {
 
 const ButtonComponent = <T extends React.ElementType = 'button'>(
   props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+  ref: React.Ref<HTMLButtonElement>,
 ) => {
   const {
     className = '',
@@ -86,7 +88,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   );
 
   return (
-    <Component {...restProps} className={rootClassName}>
+    <Component {...restProps} ref={ref} className={rootClassName}>
       {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
       {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}

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/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,12 @@
 
 /** done state */
 .root svg {
-  transition: var(--ui-transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--ui-transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/src/ui/dialog/dialog.module.css

@@ -1,15 +1,22 @@
+/** place overlays triggered from inside the dialog on top of the dialog */
+.portal {
+  --layer-overlay: calc(var(--layer-xxhigh) + 1);
+}
+
 .backdrop {
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .backdrop[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .backdrop[data-leave] {
@@ -34,17 +41,20 @@
   width: calc(100vw - 2 * var(--dialog-padding));
   position: relative;
   border-radius: var(--radius-medium);
-  padding: var(--dialog-padding);
+  border: 1px solid var(--color-outline);
+  padding: calc(var(--dialog-padding) - 1px);
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dialog[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .digalog[data-leave] {
@@ -86,6 +96,7 @@
   );
   padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** Width variation */

package/src/ui/dialog/dialog.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Dropdown, DropdownItem } from '../dropdown';
 import { Button } from '../button';
+import { HoverCard } from '../hover-card';
+import { Tooltip } from '../tooltip';
 import { Dialog, useDialogState } from '.';
 
 const meta: Meta<typeof Dialog> = {
@@ -40,6 +42,12 @@ const DialogComponent = (storyArgs: Story['args']) => {
           </Dropdown>
           <br />
           <br />
+          <Tooltip title="Tooltip content">Tooltip anchor</Tooltip>
+          <br />
+          <br />
+          <HoverCard label="HoverCard anchor">HoverCard content</HoverCard>
+          <br />
+          <br />
           {[1, 2, 3].map((item) => (
             <Fragment key={item}>
               <p>

package/src/ui/dialog/dialog.tsx

@@ -9,6 +9,7 @@ import {
 } from 'ariakit/dialog';
 
 import { Stack } from '../../layout/stack';
+import { getCreatePortalElement } from '../../utils/portal';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 
@@ -16,6 +17,11 @@ export const useDialogState = (options: DialogStateProps = {}) => {
   return useAriakitDialogState({ animated: true, ...options });
 };
 
+/**
+ * Raise the z-index of the overlays nested inside the dialog
+ */
+const createPortalElement = getCreatePortalElement(css.portal);
+
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 
 type DialogProps = {
@@ -48,6 +54,7 @@ export const Dialog = (props: DialogProps) => {
         className: css.backdrop,
       }}
       portal
+      portalElement={createPortalElement}
       className={rootClassName}
     >
       {!modal && (

package/src/ui/dropdown/dropdown.module.css

@@ -11,18 +11,24 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-small);
+  border: 1px solid var(--color-outline);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
-  min-width: 12em;
-  z-index: var(--layer-high);
-  padding: calc(var(--space-xxxsmall) / 2);
+  min-width: 16em;
+  z-index: var(--layer-overlay);
+  padding: calc(var(--space-xxxsmall) - 1px);
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdown[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .dropdown[data-leave] {
@@ -40,14 +46,17 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
   background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-align: left;
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height);
   text-decoration: none;
   cursor: default;
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item[data-active-item],
@@ -56,6 +65,7 @@
 .item:active {
   background: var(--color-highlight);
   color: var(--color-text);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {
@@ -69,3 +79,40 @@
   background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }
+
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
+.group {
+  position: relative;
+  padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
+}
+
+.group::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  left: var(--space-xxxsmall);
+  right: var(--space-xxxsmall);
+  top: 0px;
+  height: 1px;
+  border: none;
+  background: var(--color-outline);
+}
+
+.group:first-child {
+  padding-top: 0;
+}
+
+.group:first-child::before {
+  display: none;
+}
+
+.group:last-child {
+  padding-bottom: 0;
+}
+
+.group:empty {
+  display: none;
+}

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

@@ -15,6 +15,12 @@ const meta = {
       <>
         <DropdownItem>Option 1</DropdownItem>
         <DropdownItem>Option 2</DropdownItem>
+        <DropdownItem as="a" href="#">
+          Option 3
+        </DropdownItem>
+        <DropdownItem as="button" onClick={() => alert('Select option')}>
+          Option 4
+        </DropdownItem>
       </>
     ),
   },

package/src/ui/dropdown/dropdown.tsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariakit/menu';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 import { Icon } from '../icon';
 
+export type DropdownGroupProps = ComponentProps<'div'>;
+
+export const DropdownGroup = (props: DropdownGroupProps) => {
+  const { className, ...restProps } = props;
+  return <div className={cx(css.group, className)} {...restProps} />;
+};
+
 interface DropdownItemProps {
   isActive?: boolean;
 }
@@ -37,7 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
-    showChevron = true,
+    showChevron: initialShowChevron,
     disabled = false,
     placement,
     gutter = 4,
@@ -47,6 +56,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
   const menuState = useMenuState({ animated: true, placement, gutter, shift });
+  const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
 
   return (
     <>
@@ -58,6 +68,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         rightGlyph={showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined}
         disabled={disabled}
         state={menuState}
+        toggleOnClick
         tabIndex={null}
         className={cx(css.button, className)}
       >

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

@@ -42,14 +42,16 @@
   font-size: var(--size-small);
   line-height: var(--space-small);
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
-.filterSingle:hover,
+.filterSingle:focus,
 .filterSingle:active,
-.filterSingle:focus {
+.filterSingle:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 /** Filter group */
@@ -72,8 +74,6 @@
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  font-size: var(--size-xsmall);
   line-height: 1.1;
 }
 
@@ -101,23 +101,9 @@
   text-transform: lowercase;
 }
 
-.filterGroupSearchWrapper {
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: var(--space-xxxsmall);
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .filterGroupSearchNotFound {
-  padding: var(--space-xxsmall) 0;
   text-align: center;
+  min-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.filterGroupActions {
-  margin-top: var(--space-xxxsmall);
-  padding-top: var(--space-xxxsmall);
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxxsmall));
-  border-top: 1px solid var(--color-outline);
-}