@bundle-stats/ui 4.9.3-beta.0 → 4.9.3-beta.2

package/lib-esm/ui/input-search/input-search.module.css

@@ -13,12 +13,6 @@
   right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
   background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.9.3-beta.0",
+  "version": "4.9.3-beta.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -39,9 +39,9 @@
     "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.13",
-    "@storybook/react": "7.6.13",
-    "@storybook/react-webpack5": "7.6.13",
+    "@storybook/addon-essentials": "7.6.15",
+    "@storybook/react": "7.6.15",
+    "@storybook/react-webpack5": "7.6.15",
     "@types/react": "18.2.55",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
@@ -59,9 +59,9 @@
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.4",
     "rimraf": "5.0.5",
-    "storybook": "7.6.13",
+    "storybook": "7.6.15",
     "typescript": "5.1.6",
-    "typescript-plugin-css-modules": "5.0.2"
+    "typescript-plugin-css-modules": "5.1.0"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -72,10 +72,10 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.9.3-beta.0",
+    "@bundle-stats/utils": "4.9.3-beta.2",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "c1e671f4c5524f5d25433bb6594bb21087c73f88"
+  "gitHead": "457a1e579bfd143165d6bfb15c392db9be88867c"
 }

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

@@ -1,11 +1,18 @@
 .root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxsmall);
   appearance: none;
   padding: 0;
   border: 0;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
-  line-height: 1;
+  font-family: var(--font-family);
+}
+
+a.root {
+  text-decoration: none;
 }
 
 .root:hover,
@@ -15,6 +22,15 @@
   transition: var(--transition-in);
 }
 
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 /**
  * Kind variation
  */
@@ -233,14 +249,27 @@
  */
 .small {
   font-size: var(--size-small);
+  gap: var(--space-xxxsmall);
+  line-height: var(--space-xsmall);
+}
+
+.small .glyph {
+  width: calc(var(--space-xsmall) + 2px);
+  height: calc(var(--space-xsmall) + 2px);
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
 .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);
 }
 
 /**

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

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../icon';
 import { Button } from '.';
 
 export default {
@@ -14,53 +15,73 @@ const Template: Story = ({ children = 'Action', ...props }) => (
   <Button {...props}>{children}</Button>
 );
 
+const Items = (props) => (
+  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
+);
+
 export const Default = Template.bind({});
 
 export const All = () => (
   <Stack space="large">
     <Stack space="medium">
       <h2>Size</h2>
-      <FlexStack space="small" alignItems="top">
+      <Items>
         {Object.values(Button.SIZE).map((size) => (
           <Button size={size} key={size}>
             Action {size}
           </Button>
         ))}
-      </FlexStack>
+      </Items>
     </Stack>
     <Stack space="medium">
       <h2>Kind</h2>
-      <Stack space="small">
-        <FlexStack space="small" alignItems="top">
+      <Stack space="medium">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>As link</h3>
+        <Items>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind} as="a" href="#">
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>With icon</h3>
+        <Items>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
     <Stack space="medium">
       <h2>Outline & Kind</h2>
-      <Stack space="small">
+      <Stack space="medium">
         {Object.values(Button.SIZE).map((size) => (
-          <FlexStack space="small" alignItems="top" key={size}>
+          <Items key={size}>
             <Button outline size={size}>
               Action default
             </Button>
@@ -69,10 +90,10 @@ export const All = () => (
                 Action {kind}
               </Button>
             ))}
-          </FlexStack>
+          </Items>
         ))}
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button outline active>
             Action default
           </Button>
@@ -81,9 +102,43 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button outline disabled>
             Action default
           </Button>
@@ -92,14 +147,14 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
     <Stack space="medium">
       <h2>Solid & Kind</h2>
-      <Stack space="small">
+      <Stack space="medium">
         {Object.values(Button.SIZE).map((size) => (
-          <FlexStack space="small" alignItems="top" key={size}>
+          <Items key={size}>
             <Button solid size={size}>
               Action default
             </Button>
@@ -108,10 +163,10 @@ export const All = () => (
                 Action {kind}
               </Button>
             ))}
-          </FlexStack>
+          </Items>
         ))}
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button solid active>
             Action default
           </Button>
@@ -120,9 +175,43 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button solid disabled>
             Action default
           </Button>
@@ -131,7 +220,7 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
   </Stack>

package/src/ui/button/button.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
+import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
 const SIZE = {
@@ -31,6 +32,9 @@ interface ButtonProps<T extends React.ElementType> {
   radius?: Size | 'circle' | 'none';
   padding?: Size | 'none';
   as?: T;
+  Icon?: React.ElementType;
+  glyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+  rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 
 export const Button = <T extends React.ElementType = 'button'>(
@@ -46,6 +50,10 @@ export const Button = <T extends React.ElementType = 'button'>(
     radius = '',
     padding = '',
     as: Component = ButtonBaseComponent,
+    children,
+    Icon = BaseIcon,
+    glyph,
+    rightGlyph,
     ...restProps
   } = props;
 
@@ -75,7 +83,13 @@ export const Button = <T extends React.ElementType = 'button'>(
     className,
   );
 
-  return <Component {...restProps} className={rootClassName} />;
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {children && <span className={css.content}>{children}</span>}
+      {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+    </Component>
+  );
 };
 
 Button.SIZE = SIZE;

package/src/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { Button } from '../button';
+import { ControlGroup } from '.';
+
+export default {
+  title: 'UI/ControlGroup',
+  component: ControlGroup,
+} as Meta;
+
+export const Default = () => (
+  <ControlGroup>
+    <Button outline type="button">
+      Option A
+    </Button>
+    <Button outline type="button">
+      Option B
+    </Button>
+    <Button outline type="button">
+      Option C
+    </Button>
+  </ControlGroup>
+);

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import css from './control-group.module.css';
+
+export const ControlGroup = (props: React.ComponentProps<typeof FlexStack>) => {
+  const { className = '', ...restProps } = props;
+  return (
+    <FlexStack
+      className={cx(css.root, className)}
+      space="no-space"
+      alignItems="center"
+      {...restProps}
+    />
+  );
+};

package/src/ui/control-group/index.ts

@@ -0,0 +1 @@
+export * from './control-group';

package/src/ui/dropdown/dropdown.jsx

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 
 import { FlexStack } from '../../layout/flex-stack';
-import { Button } from '../button';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
@@ -23,19 +22,17 @@ Item.defaultProps = {
 };
 
 export const Dropdown = (props) => {
-  const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
+  const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
   const rootClassName = cx(css.root, className);
   const menuState = useMenuState();
 
   return (
     <div className={rootClassName}>
       <MenuButton
-        as={Button}
-        outline
-        size={Button.SIZE.SMALL}
         state={menuState}
-        tabIndex={null}
         className={cx(css.button, buttonClassName)}
+        disabled={disabled}
+        tabIndex={null}
       >
         <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
@@ -62,6 +59,7 @@ Dropdown.defaultProps = {
   label: null,
   ariaLabel: '',
   glyph: null,
+  disabled: false,
 };
 
 Dropdown.propTypes = {
@@ -80,6 +78,9 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
+  /** Dropdown button disabled attribute */
+  disabled: PropTypes.bool,
+
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 };

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

@@ -3,9 +3,33 @@
 }
 
 .button {
+  background: none;
+  border: none;
+  padding: 0;
+
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxsmall) - 1px);
+
+  appearance: none;
+  background: none;
   font-size: var(--size-small);
   line-height: var(--space-small);
   white-space: nowrap;
+  color: var(--color-text-light);
+}
+
+.button[aria-expanded=true],
+.button:hover,
+.button:focus,
+.button:active {
+  outline: none;
+  box-shadow: var(--outline-hover);
+  color: var(--color-text);
+}
+
+.button[disabled] {
+  color: var(--color-text-ultra-light);
 }
 
 .dropdown {
@@ -17,7 +41,7 @@
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2);
 }
 
 .dropdown:focus {
@@ -31,7 +55,7 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: var(--space-xxxsmall) var(--space-xxxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
   background: none;
   text-align: left;
   color: var(--color-text-light);

package/src/ui/index.js

@@ -1,6 +1,7 @@
 export { Alert } from './alert';
 export { Button } from './button';
 export { Container } from './container';
+export { ControlGroup } from './control-group';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';

package/src/ui/input-search/input-search.module.css

@@ -13,12 +13,6 @@
   right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
   background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
 }

package/src/ui/input-search/input-search.tsx

@@ -71,14 +71,12 @@ export const InputSearch = (
       {value && (
         <Button
           radius="circle"
-          padding="small"
+          glyph={Icon.ICONS.CANCEL}
           type="button"
           onClick={clearButtonOnClick}
           aria-label="Clear search"
           className={css.cancelButton}
-        >
-          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
-        </Button>
+        />
       )}
     </div>
   );

package/types/ui/button/button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon as BaseIcon } from '../icon';
 declare const SIZE: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
@@ -23,6 +24,9 @@ interface ButtonProps<T extends React.ElementType> {
     radius?: Size | 'circle' | 'none';
     padding?: Size | 'none';
     as?: T;
+    Icon?: React.ElementType;
+    glyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+    rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 export declare const Button: {
     <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "button">(props: ButtonProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof ButtonProps<T>>): React.JSX.Element;

package/types/ui/control-group/control-group.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FlexStack } from '../../layout/flex-stack';
+export declare const ControlGroup: (props: React.ComponentProps<typeof FlexStack>) => React.JSX.Element;

package/types/ui/control-group/index.d.ts

@@ -0,0 +1 @@
+export * from './control-group';

package/types/ui/dropdown/dropdown.d.ts

@@ -6,6 +6,7 @@ export namespace Dropdown {
         let label: null;
         let ariaLabel: string;
         let glyph: null;
+        let disabled: boolean;
     }
     export namespace propTypes {
         let className_1: PropTypes.Requireable<string>;
@@ -18,6 +19,8 @@ export namespace Dropdown {
         export { ariaLabel_1 as ariaLabel };
         let glyph_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         export { glyph_1 as glyph };
+        let disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
         export let children: PropTypes.Validator<NonNullable<NonNullable<string | PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
     }
     export { Item };

package/types/ui/index.d.ts

@@ -1,6 +1,7 @@
 export { Alert } from "./alert";
 export { Button } from "./button";
 export { Container } from "./container";
+export { ControlGroup } from "./control-group";
 export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";
 export { FileName } from "./file-name";