@bundle-stats/ui 4.12.2 → 4.13.0-beta.10

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/types.d.ts

@@ -8,8 +8,10 @@ interface FilterFieldData {
   defaultValue: boolean;
   disabled?: boolean;
 }
+
 type FilterGroupFieldData = {
   label: string;
   children: Array<{ key: string } & FilterFieldData>;
 };
+
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;

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

@@ -256,6 +256,7 @@ a.root {
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
+  margin: 1px; /* compensate to keep the same height when the text is not provided */
 }
 
 .medium {

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