@bundle-stats/ui 4.23.0-beta.3 → 4.23.0-beta.5

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

@@ -3,28 +3,32 @@
   --button-space: 0px;
   /* button border width */
   --border-width: 0px;
+  /* line height in pixels to prevent layout shift when rendering a glyph */
+  --line-height: var(--space-small);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  gap: calc(var(--button-space) * 0.66);
   appearance: none;
   padding: 0;
   border: var(--border-width) solid transparent;
   background: none;
-  transition: var(--transition-out);
   color: var(--color-text-ultra-light);
+  font-size: var(--size-medium);
   font-family: var(--font-family);
+  line-height: var(--line-height);
   white-space: nowrap;
+  transition: var(--transition-out);
 }
 
 a.root {
   text-decoration: none;
 }
 
+.root:focus,
 .root:hover,
-.root:active,
-.root:focus {
+.root:active {
   outline: none;
   color: var(--color-text-light);
   transition: var(--transition-in);
@@ -32,6 +36,8 @@ a.root {
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,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 {
@@ -106,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);
 }
 
@@ -180,40 +186,30 @@ 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);
 
   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));
+  --line-height: calc(var(--space-small) + var(--space-xxxsmall));
 }
 
 .large {
   --button-space: var(--space-small);
+  --line-height: var(--space-medium);
 
   font-size: var(--size-large);
-  line-height: var(--space-medium);
-}
-
-.large .glyph {
-  width: var(--space-medium);
-  height: var(--space-medium);
 }
 
 /**
@@ -300,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.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/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,10 @@
 
 /** done state */
 .root svg {
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
 }

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

@@ -45,6 +45,9 @@
   border-radius: var(--radius-small);
   padding: var(--space-xxxsmall);
   background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-align: left;
   text-decoration: none;
   cursor: default;
@@ -70,14 +73,13 @@
   color: var(--color-primary-dark);
 }
 
-
 .group {
   position: relative;
   padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
 }
 
 .group::before {
-  content: " ";
+  content: ' ';
   display: block;
   position: absolute;
   left: var(--space-xxxsmall);

package/src/ui/dropdown/dropdown.stories.tsx

@@ -15,6 +15,12 @@ const meta = {
       <>
         <DropdownItem>Option 1</DropdownItem>
         <DropdownItem>Option 2</DropdownItem>
+        <DropdownItem as="a" href="#">
+          Option 3
+        </DropdownItem>
+        <DropdownItem as="button" onClick={() => alert('Select option')}>
+          Option 4
+        </DropdownItem>
       </>
     ),
   },

package/src/ui/filters/filters.module.css

@@ -45,9 +45,9 @@
   transition: var(--transition-out);
 }
 
-.filterSingle:hover,
+.filterSingle:focus,
 .filterSingle:active,
-.filterSingle:focus {
+.filterSingle:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);
 }
@@ -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

@@ -100,9 +100,8 @@ const FilterDropdownItem = (props: FilterDropdownItemProps) => {
         className={css.filterGroupItemFilter}
       />
       <Button
-        kind="info"
         solid
-        size="small"
+        size="xsmall"
         type="button"
         onClick={onOnlyClick}
         disabled={disabled}
@@ -189,20 +188,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/hover-card/hover-card.module.css

@@ -10,13 +10,12 @@
   transition: var(--transition-out);
 }
 
+.anchor:focus,
+.anchor:active,
 .anchor:hover {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.anchor:focus {
+  color: var(--color-accent-dark);
   outline: 0;
+  transition: var(--transition-in);
 }
 
 .hoverCard {

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

@@ -3,7 +3,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -27,7 +27,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 /** Size modifier */

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:hover,
-.root tbody td a:focus,
-.root tbody td a:active {
-  color: var(--color-primary);
+.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

@@ -13,7 +13,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .item::after {
@@ -24,27 +24,31 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background: transparent;
+  background: currentColor;
+  opacity: 0;
+  transition: var(--transition-out);
 }
 
-.item:hover,
+.item:focus,
 .item:active,
-.item:focus {
-  color: var(--color-primary);
+.item:hover {
+  color: var(--color-accent);
   outline: none;
-  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .itemActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .itemActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }

package/src/ui/tag/tag.module.css

@@ -10,7 +10,6 @@
 
 a.root {
   text-decoration: none;
-  transition: var(--transition-out);
 }
 
 a.root:hover,
@@ -19,7 +18,6 @@ a.root:active {
   opacity: 0.8;
   color: var(--color-light);
   text-decoration: none;
-  transition: var(--transition-in);
 }
 
 /** Kind variation */

package/src/ui/textarea/textarea.module.css

@@ -4,7 +4,7 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -28,7 +28,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 .root[readonly=''] {

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -6,6 +6,6 @@ export type MetricRunInfoProps = {
     baseline?: number;
     showMetricDescription?: boolean;
     titleWrapper?: ElementType;
-    showDeltaValue?: boolean;
+    showDeltaAbsoluteValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

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";