@bundle-stats/ui 4.13.0-beta.2 → 4.13.0-beta.21

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);
-}

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,
+          },
+        ],
+      },
+    }}
+  />
+);