@bundle-stats/ui 4.23.0-beta.4 → 4.23.0-beta.6

package/src/components/summary/summary.tsx

@@ -10,6 +10,7 @@ import {
   METRICS_WEBPACK_GENERAL,
 } from '../../constants';
 import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
@@ -77,9 +78,9 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.row}>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
       <Box outline padding="small" className={css.rowGroup}>
-        <div className={css.items}>
+        <FlexStack wrap="wrap" gap="medium">
           {METRICS_WEBPACK_GENERAL.map((metricId) => (
             <SummaryItem
               key={metricId}
@@ -93,15 +94,15 @@ export const Summary = ({
               showBaseline={showSummaryItemBaseline}
             />
           ))}
-        </div>
+        </FlexStack>
       </Box>
-    </div>
-    <div className={css.row}>
+    </FlexStack>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
       {[METRICS_GROUP_ASSETS, METRICS_GROUP_MODULES, METRICS_GROUP_PACKAGES].map((metricGroup) => (
         <Stack className={css.rowGroup} key={metricGroup.title}>
           <h3 className={css.rowGroupTitle}>{metricGroup.title}</h3>
           <Box outline padding="small">
-            <div className={css.items}>
+            <FlexStack wrap="wrap" gap="medium">
               {metricGroup.metrics.map((metricId) => (
                 <SummaryItem
                   key={metricId}
@@ -115,10 +116,10 @@ export const Summary = ({
                   showBaseline={showSummaryItemBaseline}
                 />
               ))}
-            </div>
+            </FlexStack>
           </Box>
         </Stack>
       ))}
-    </div>
+    </FlexStack>
   </Box>
 );

package/src/css/variables.css

@@ -146,9 +146,9 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
-  --color-accent-light: var(--color-gray);
-  --color-accent: var(--color-gray-dark);
-  --color-accent-dark: var(--color-gray-ultra-dark);
+  --color-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
 
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);

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

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;

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

@@ -28,7 +28,7 @@ export const Default: Story = {
   },
 };
 
-export const withCustomWrapper: Story = {
+export const WithCustomWrapper: Story = {
   args: {
     as: 'main',
     className: 'wrapper',
@@ -41,9 +41,9 @@ export const withCustomWrapper: Story = {
   },
 };
 
-export const withLargeSpace: Story = {
+export const WithLargeGap: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
@@ -54,14 +54,14 @@ export const withLargeSpace: Story = {
   },
 };
 
-export const withNestedStack: Story = {
+export const WithNestedStack: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
         <Box outline>Lorem ipsum 2</Box>
-        <FlexStack space="small">
+        <FlexStack gap="small">
           <Box outline>Lorem ipsum 3.1</Box>
           <Box outline>Lorem ipsum 3.2</Box>
         </FlexStack>
@@ -70,16 +70,61 @@ export const withNestedStack: Story = {
   },
 };
 
-export const singleItem: Story = {
+export const SingleItem: Story = {
   args: {
     children: <Box outline>Lorem ipsum</Box>,
   },
 };
 
-export const withAlignItems: Story = {
+export const WithDirectionColumn: Story = {
+  args: {
+    direction: 'column',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithDirectionRowReverse: Story = {
+  args: {
+    direction: 'row-reverse',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithWrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: 'medium',
+    style: { maxWidth: '320px' },
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+        <Box outline>Lorem ipsum 4</Box>
+        <Box outline>Lorem ipsum 5</Box>
+      </>
+    ),
+  },
+};
+
+export const WithAlignItems: Story = {
   args: {
     alignItems: 'center',
-    space: 'medium',
+    gap: 'medium',
     children: (
       <>
         <h1>Title</h1>
@@ -88,3 +133,17 @@ export const withAlignItems: Story = {
     ),
   },
 };
+
+export const WithJustifyContent: Story = {
+  args: {
+    justifyContent: 'space-between',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};

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

@@ -6,12 +6,25 @@ import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
 
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
   as?: T;
+  gap?: SpaceValue;
+  /**
+   * @deprecated Use `gap` instead.
+   */
   space?: SpaceValue;
   inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   alignItems?: 'top' | 'center' | 'bottom';
-}
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+};
 
 export const FlexStack = <T extends React.ElementType = 'div'>(
   props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
@@ -19,16 +32,23 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
   const {
     as: Component = 'div',
     className = '',
-    space = NO_SPACE,
+    gap,
+    space,
     inline = false,
+    direction = '',
+    wrap = '',
     alignItems = '',
+    justifyContent = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
     css.root,
-    css[`space--${space}`],
+    css[`gap--${gap ?? space ?? NO_SPACE}`],
+    css[`direction--${direction}`],
+    css[`wrap--${wrap}`],
     css[`align-items--${alignItems}`],
+    css[`justify-content--${justifyContent}`],
     inline && css.inline,
     className,
   );

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

@@ -49,13 +49,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 {
@@ -112,14 +112,14 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-ultra-light);
+  background: var(--color-accent);
   color: var(--color-background);
 }
 
 .solid:hover,
 .solid:active,
 .solid:focus {
-  background: var(--color-text-light);
+  background: var(--color-accent-dark);
   color: var(--color-background);
 }
 
@@ -186,6 +186,13 @@ 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);
@@ -289,6 +296,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }

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',

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/filters/filters.module.css

@@ -72,8 +72,6 @@
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  font-size: var(--size-xsmall);
   line-height: 1.1;
 }
 
@@ -102,8 +100,8 @@
 }
 
 .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);
 }

package/src/ui/filters/filters.tsx

@@ -20,12 +20,7 @@ const Filter = (props: FilterBooleanProps) => {
   const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <FlexStack
-      space="xxxsmall"
-      alignItems="center"
-      as="label"
-      className={cx(css.filter, className)}
-    >
+    <FlexStack gap="xxxsmall" alignItems="center" as="label" className={cx(css.filter, className)}>
       <input
         type="checkbox"
         id={`filter-${name}`}
@@ -100,9 +95,8 @@ const FilterDropdownItem = (props: FilterDropdownItemProps) => {
         className={css.filterGroupItemFilter}
       />
       <Button
-        kind="info"
         solid
-        size="small"
+        size="xsmall"
         type="button"
         onClick={onOnlyClick}
         disabled={disabled}
@@ -189,20 +183,26 @@ const FilterGroup = (props: FilterGroupProps) => {
       )}
       <DropdownGroup className={css.filterGroupItems}>
         {filteredGroupItems.length === 0 && (
-          <Stack className={css.filterGroupSearchNotFound}>
-            <p>{I18N.GROUP_NOT_FOUND}</p>
-            <div>
-              <Button
-                size="small"
-                kind="primary"
-                type="button"
-                onClick={() => setSearch('')}
-                className={css.filterGroupSearchNotFoundClear}
-              >
-                {I18N.GROUP_SEARCH_CLEAR}
-              </Button>
-            </div>
-          </Stack>
+          <FlexStack
+            alignItems="center"
+            justifyContent="center"
+            className={css.filterGroupSearchNotFound}
+          >
+            <Stack space="xxxsmall">
+              <p>{I18N.GROUP_NOT_FOUND}</p>
+              <div>
+                <Button
+                  solid
+                  size="xsmall"
+                  type="button"
+                  onClick={() => setSearch('')}
+                  className={css.filterGroupSearchNotFoundClear}
+                >
+                  {I18N.GROUP_SEARCH_CLEAR}
+                </Button>
+              </div>
+            </Stack>
+          </FlexStack>
         )}
         {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
           const id = getGroupItemKey(groupKey, itemKey);

package/src/ui/table/table.module.css

@@ -33,21 +33,28 @@
   border-top: 0;
 }
 
-.root tbody td a {
+.root tbody a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody td a:focus,
-.root tbody td a:active,
-.root tbody td a:hover {
+.root tbody a:focus,
+.root tbody a:active,
+.root tbody a:hover {
   color: var(--color-accent);
   text-decoration: underline;
 }
 
+/* hover current row */
+.root tbody tr th,
+.root tbody tr td {
+  transition: var(--transition-out);
+}
+
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
+  transition: var(--transition-in);
 }
 
 .empty {

package/src/ui/tabs/tabs.module.css

@@ -39,7 +39,7 @@
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
   transition: var(--transition-in);
 }
 

package/src/ui/toolbar/toolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 
+import { FlexStack } from '../../layout/flex-stack';
 import css from './toolbar.module.css';
 
 export const Toolbar = (props) => {
@@ -12,7 +13,9 @@ export const Toolbar = (props) => {
     <div className={rootClassName}>
       <div className={css.content}>{children}</div>
       {renderActions && (
-        <div className={css.actions}>{renderActions({ actionClassName: css.action })}</div>
+        <FlexStack gap="xsmall" alignItems="center" className={css.actions}>
+          {renderActions({ actionClassName: css.action })}
+        </FlexStack>
       )}
     </div>
   );

package/src/ui/toolbar/toolbar.module.css

@@ -6,18 +6,12 @@
 
 .actions {
   margin-top: var(--space-xsmall);
-  display: flex;
-  align-items: center;
 }
 
 .action {
   flex: 0 0 auto;
 }
 
-.action + .action {
-  margin-left: var(--space-xsmall);
-}
-
 @media (min-width: 768px) {
   .root {
     display: flex;

package/types/components/metrics-table/metrics-table.d.ts

@@ -13,9 +13,10 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
     sort?: MetricsTableHeaderProps['sort'];
     updateSort?: MetricsTableHeaderProps['updateSort'];
     renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+    onRowClick?: (item: ReportMetricRow) => void;
     emptyMessage?: React.ReactNode;
     showAllItems: boolean;
     setShowAllItems: (value: boolean) => void;
 }
-export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
+export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, onRowClick, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
 export {};

package/types/components/metrics-table-row-count/index.d.ts

@@ -0,0 +1 @@
+export * from './metrics-table-row-count';

package/types/components/metrics-table-row-count/metrics-table-row-count.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FlexStackProps } from '../../layout/flex-stack';
+export type MetricsTableRowCountProps = {
+    count: number;
+    total: number;
+} & FlexStackProps<'span'>;
+export declare const MetricsTableRowCount: (props: MetricsTableRowCountProps) => React.JSX.Element;

package/types/layout/flex-stack/flex-stack.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { SPACES } from '../../tokens';
 type SpaceValue = (typeof SPACES)[number];
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
     as?: T;
+    gap?: SpaceValue;
     space?: SpaceValue;
     inline?: boolean;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
     alignItems?: 'top' | 'center' | 'bottom';
-}
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+};
 export declare const FlexStack: <T extends React.ElementType = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon as BaseIcon } from '../icon';
 export declare const BUTTON_SIZE: {
+    readonly XSMALL: "xsmall";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";