@bundle-stats/ui 3.2.6-beta.4 → 3.2.7-beta.3

package/lib-esm/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

package/lib-esm/components/summary-item/summary-item.js

@@ -57,7 +57,7 @@ export const SummaryItem = _ref2 => {
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {

package/lib-esm/css/variables.css

@@ -181,7 +181,7 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: 2px;
+  --radius-small: 3px;
   --radius-medium: var(--space-xxxsmall);
   --radius-large: var(--space-xxsmall);
 

package/lib-esm/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/lib-esm/ui/dropdown/dropdown.js

@@ -8,6 +8,7 @@ import css from './dropdown.module.css';
 export const Dropdown = props => {
   const {
     className,
+    buttonClassName,
     label,
     ariaLabel,
     glyph,
@@ -19,7 +20,7 @@ export const Dropdown = props => {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(MenuButton, {
     state: menuState,
-    className: css.button,
+    className: cx(css.button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall"
@@ -39,6 +40,7 @@ export const Dropdown = props => {
 };
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
   glyph: null
@@ -47,6 +49,9 @@ Dropdown.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
 
+  /** Button adopted child class name */
+  buttonClassName: PropTypes.string,
+
   /** Button label */
   label: PropTypes.node,
 

package/lib-esm/ui/filters/filters.js

@@ -13,6 +13,7 @@ import css from './filters.module.css';
 const Filter = props => {
   const {
     className,
+    buttonClassName,
     label,
     name,
     getOnOnlyClick,
@@ -25,7 +26,7 @@ const Filter = props => {
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     as: "label",
-    className: css.filterCheckbox
+    className: cx(css.filterCheckbox, buttonClassName)
   }, /*#__PURE__*/React.createElement("input", _extends({
     className: css.filterInput,
     type: "checkbox",
@@ -43,18 +44,21 @@ const Filter = props => {
 
 Filter.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   getOnOnlyClick: PropTypes.func
 };
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null
 };
 
 const FilterGroup = props => {
   const {
     className,
+    buttonClassName,
     groupKey,
     data,
     values,
@@ -100,6 +104,7 @@ const FilterGroup = props => {
 
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: className,
+    buttonClassName: buttonClassName,
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
   }, _ref4 => {
@@ -150,6 +155,7 @@ const FilterGroup = props => {
 
 FilterGroup.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -159,7 +165,8 @@ FilterGroup.propTypes = {
   toggleFilters: PropTypes.func.isRequired
 };
 FilterGroup.defaultProps = {
-  className: ''
+  className: '',
+  buttonClassName: ''
 };
 export const Filters = props => {
   const {
@@ -181,6 +188,7 @@ export const Filters = props => {
   return /*#__PURE__*/React.createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall",
     className: css.items
   }, Object.entries(filters).map(_ref7 => {
     let [name, data] = _ref7;
@@ -189,6 +197,7 @@ export const Filters = props => {
       return /*#__PURE__*/React.createElement(Filter, {
         key: name,
         className: cx(css.item, css.filterStandalone),
+        buttonClassName: css.itemButton,
         name: name,
         label: data.label,
         onChange: onCheckboxChange,
@@ -199,6 +208,7 @@ export const Filters = props => {
 
     return /*#__PURE__*/React.createElement(FilterGroup, {
       className: css.item,
+      buttonClassName: css.itemButton,
       key: name,
       groupKey: name,
       data: data,

package/lib-esm/ui/filters/filters.module.css

@@ -130,20 +130,10 @@
 }
 
 .item {
-  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:first-child {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
-}
-
-.item:last-child {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }

package/lib-esm/ui/hover-card/hover-card.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardState } from 'ariakit/hovercard';
@@ -36,6 +36,10 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
+  const handleOnClose = useCallback(event => {
+    state.hide();
+    event.preventDefault();
+  }, [state]);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -59,7 +63,7 @@ export const HoverCard = props => {
     as: "button",
     type: "button",
     className: css.closeBtn,
-    onClick: state.hide
+    onClick: handleOnClose
   })));
 };
 HoverCard.propTypes = {

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -32,7 +32,7 @@ button.anchor:hover {
 
 .closeBtn {
   position: absolute;
-  right: 0;
+  right: var(--space-xxxsmall);
   top: var(--space-xxxsmall);
   width: var(--space-large);
   height: var(--space-large);

package/lib-esm/ui/table/table.module.css

@@ -1,7 +1,7 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
 }
@@ -14,9 +14,10 @@
 }
 
 .root thead .cell {
-  border-width: 0 0 2px;
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
+  background: var(--color-highlight);
 }
 
 .root thead .cell:empty {
@@ -27,6 +28,10 @@
   font-weight: normal;
 }
 
+.root tbody tr:first-child .cell {
+  border-top: 0;
+}
+
 .root tbody .cell a {
   color: inherit;
   text-decoration: none;
@@ -40,10 +45,6 @@
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
 .root tbody tr:hover .cell {
   background-color: var(--color-highlight-warning);
 }
@@ -58,12 +59,27 @@
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:first-child,
+.outline tbody:first-child tr:first-child .cell:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:last-child,
+.outline tbody:first-child tr:first-child .cell:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child .cell:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child .cell:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.6-beta.4",
+  "version": "3.2.7-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -76,21 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "^2.2.6",
-    "core-js": "^3.20.2",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0 || ^17.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0",
+    "classnames": "2.2.6",
+    "core-js": "3.20.2",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.6-beta.4",
-    "ariakit": "2.0.0-alpha.18",
+    "@bundle-stats/utils": "^3.2.7-beta.3",
+    "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "e0b0ae9d98c4e559e327a672833d46a14d8920a0"
+  "gitHead": "23478e08f6882f7c20f373f5bb9bc3beaaea4ea7"
 }

package/src/app/app.module.css

@@ -42,7 +42,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {

package/src/app/header/header.jsx

@@ -4,21 +4,11 @@ import cx from 'classnames';
 
 import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
-import { Logo } from '../../ui/logo';
-
 import css from './header.module.css';
 
 export const Header = ({ className, jobs }) => (
   <Container as="header" className={cx(css.root, className)}>
     <div className={css.inner}>
-      <a
-        className={css.branding}
-        href="https://github.com/relative-ci/bundle-stats"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-      >
-        <Logo className={css.brandingLogo}>BundleStats</Logo>
-      </a>
       <JobsHeader className={css.jobs} jobs={jobs} />
     </div>
   </Container>

package/src/components/bundle-assets/bundle-assets.jsx

@@ -172,7 +172,7 @@ export const BundleAssets = (props) => {
       <Toolbar
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
-          <FlexStack space="xsmall" className={cx(css.dropdown, actionClassName)}>
+          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
             <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
@@ -181,7 +181,7 @@ export const BundleAssets = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

package/src/components/bundle-modules/bundle-modules.jsx

@@ -192,7 +192,7 @@ export const BundleModules = ({
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             search={search}

package/src/components/bundle-packages/bundle-packages.jsx

@@ -199,7 +199,7 @@ export const BundlePackages = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

package/src/components/job-header/job-header.jsx

@@ -8,6 +8,7 @@ import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './job-header.module.css';
 
 export const JobHeader = (props) => {
@@ -20,7 +21,7 @@ export const JobHeader = (props) => {
     <Stack className={rootClassName} space="xxsmall">
       <h1 className={css.title}>
         <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <span className={css.tag}>{tag}</span>}
+        {tag && <Tag className={css.tag}>{tag}</Tag>}
       </h1>
       <FlexStack className={css.meta} space="xxsmall">
         {builtAt && (

package/src/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/src/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

package/src/components/summary-item/summary-item.jsx

@@ -54,7 +54,7 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
       <FlexStack as="h3" space="xxxsmall" className={css.title}>
         <span>{metric.label}</span>
 

package/src/css/variables.css

@@ -181,7 +181,7 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: 2px;
+  --radius-small: 3px;
   --radius-medium: var(--space-xxxsmall);
   --radius-large: var(--space-xxsmall);
 

package/src/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/src/ui/dropdown/dropdown.jsx

@@ -8,13 +8,13 @@ import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
 export const Dropdown = (props) => {
-  const { className, label, ariaLabel, glyph, children } = props;
+  const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
   const rootClassName = cx(css.root, className);
   const menuState = useMenuState();
 
   return (
     <div className={rootClassName}>
-      <MenuButton state={menuState} className={css.button} tabIndex={null}>
+      <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
         <FlexStack space="xxxsmall">
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
@@ -36,6 +36,7 @@ export const Dropdown = (props) => {
 
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
   glyph: null,
@@ -45,6 +46,9 @@ Dropdown.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
 
+  /** Button adopted child class name */
+  buttonClassName: PropTypes.string,
+
   /** Button label */
   label: PropTypes.node,
 

package/src/ui/filters/filters.jsx

@@ -9,7 +9,7 @@ import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
 const Filter = (props) => {
-  const { className, label, name, getOnOnlyClick, ...inputProps } = props;
+  const { className, buttonClassName, label, name, getOnOnlyClick, ...inputProps } = props;
   const id = `filter-${name}`;
 
   const rootClassName = cx(css.filter, className);
@@ -17,7 +17,7 @@ const Filter = (props) => {
   return (
     <div className={rootClassName}>
       {/* eslint-disable */}
-      <FlexStack space="xxxsmall" as="label" className={css.filterCheckbox}>
+      <FlexStack space="xxxsmall" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
         {/* eslint-enabled */}
         <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
         <span className={css.filterLabel} title={label}>
@@ -36,6 +36,7 @@ const Filter = (props) => {
 
 Filter.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   getOnOnlyClick: PropTypes.func,
@@ -43,11 +44,13 @@ Filter.propTypes = {
 
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null,
 };
 
 const FilterGroup = (props) => {
-  const { className, groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { className, buttonClassName, groupKey, data, values, onCheckboxChange, toggleFilters } =
+    props;
 
   const { label: groupLabel, ...groupData } = data;
 
@@ -89,6 +92,7 @@ const FilterGroup = (props) => {
   return (
     <Dropdown
       className={className}
+      buttonClassName={buttonClassName}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
@@ -150,6 +154,7 @@ const FilterGroup = (props) => {
 
 FilterGroup.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -159,6 +164,7 @@ FilterGroup.propTypes = {
 
 FilterGroup.defaultProps = {
   className: '',
+  buttonClassName: '',
 };
 
 export const Filters = (props) => {
@@ -169,13 +175,14 @@ export const Filters = (props) => {
 
   return (
     <form className={rootClassName}>
-      <FlexStack className={css.items}>
+      <FlexStack space="xxsmall" className={css.items}>
         {Object.entries(filters).map(([name, data]) => {
           if (typeof data?.defaultValue !== 'undefined') {
             return (
               <Filter
                 key={name}
                 className={cx(css.item, css.filterStandalone)}
+                buttonClassName={css.itemButton}
                 name={name}
                 label={data.label}
                 onChange={onCheckboxChange}
@@ -188,6 +195,7 @@ export const Filters = (props) => {
           return (
             <FilterGroup
               className={css.item}
+              buttonClassName={css.itemButton}
               key={name}
               groupKey={name}
               data={data}

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

@@ -130,20 +130,10 @@
 }
 
 .item {
-  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:first-child {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
-}
-
-.item:last-child {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }