@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.11

package/src/layout/flex-stack/flex-stack.module.css

@@ -1,48 +1,44 @@
 .root {
   display: flex;
-  align-items: stretch;
   justify-content: flex-start;
-}
-
-.root > .item:last-child {
-  margin-right: 0;
+  gap: 0;
 }
 
 /** Space variation */
-.space--xxxsmall > .item {
-  margin: 0 var(--space-xxxsmall) 0 0;
+.space--xxxsmall {
+  gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall > .item {
-  margin: 0 var(--space-xxsmall) 0 0;
+.space--xxsmall {
+  gap: var(--space-xxsmall);
 }
 
-.space--xsmall > .item {
-  margin: 0 var(--space-xsmall) 0 0;
+.space--xsmall {
+  gap: var(--space-xsmall);
 }
 
-.space--small > .item {
-  margin: 0 var(--space-small) 0 0;
+.space--small {
+  gap: var(--space-small);
 }
 
-.space--medium > .item {
-  margin: 0 var(--space-medium) 0 0;
+.space--medium {
+  gap: var(--space-medium);
 }
 
-.space--large > .item {
-  margin: 0 var(--space-large) 0 0;
+.space--large {
+  gap: var(--space-large);
 }
 
-.space--xlarge > .item {
-  margin: 0 var(--space-xlarge) 0 0;
+.space--xlarge {
+  gap: var(--space-xlarge);
 }
 
-.space--xxlarge > .item {
-  margin: 0 var(--space-xxlarge) 0 0;
+.space--xxlarge {
+  gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge > .item {
-  margin: 0 var(--space-xxxlarge) 0 0;
+.space--xxxlarge {
+  gap: var(--space-xxxlarge);
 }
 
 /** Align items variation */

package/src/layout/flex-stack/flex-stack.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 
 import { NO_SPACE, SPACES } from '../../tokens';
-import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
@@ -22,22 +21,17 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
     className = '',
     space = NO_SPACE,
     inline = false,
-    children = null,
     alignItems = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
-    className,
     css.root,
     css[`space--${space}`],
     css[`align-items--${alignItems}`],
     inline && css.inline,
+    className,
   );
 
-  return (
-    <Component {...restProps} className={rootClassName}>
-      {React.Children.map(children, getRenderChildWithClassName(css.item))}
-    </Component>
-  );
+  return <Component {...restProps} className={rootClassName} />;
 };

package/src/query-state.tsx

@@ -30,7 +30,7 @@ export const useComponentQueryState = (componentName: string) => {
 
       setQueryState({ [componentName]: newState });
     },
-    [componentState],
+    [componentState, setQueryState],
   );
 
   return [componentState, setState];

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,57 +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);
-}
-
-.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/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,66 @@
+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 {
+  dropdownClassName?: string;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  glyph?: string;
+  disabled?: boolean;
+}
+
+export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    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, className)}
+      >
+        {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,19 @@
-/* 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 {
+  margin: 0;
   flex: 0 0 auto;
   height: 1em;
 }
@@ -25,7 +26,47 @@
   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);
+  transition: var(--transition-out);
+}
+
+.filterSingle:hover,
+.filterSingle:active,
+.filterSingle:focus {
+  border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
+}
+
+/** Filter group */
+.filterGroupItems {
+  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
+  overflow: auto;
+}
+
+.filterGroupItem {
+  position: relative;
+}
+
+.filterGroupItemFilter {
+  padding-right: 24px; /* space for only button */
+}
+
+.filterGroupOnlyButton {
   display: none;
   position: absolute;
   right: 2px;
@@ -37,10 +78,11 @@
 }
 
 /** cover item text */
-.filterOnlyButton::before {
+.filterGroupOnlyButton::before {
   content: ' ';
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   right: 100%;
   bottom: 0;
@@ -48,53 +90,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 +114,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 +121,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);
-}