@bundle-stats/ui 3.2.1-beta.8 → 3.2.2

package/src/components/summary-item/summary-item.module.css

@@ -1,5 +1,4 @@
 .title {
-  margin: 0;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -31,20 +30,20 @@
   display: block;
   color: var(--color-heading);
   font-size: var(--size-large);
-  line-height: 1.3;
+  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
 .delta {
-  margin: var(--space-xxxsmall) 0 0;
   font-size: var(--size-small);
+  line-height: var(--space-medium);
 }
 
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: 1.3;
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -60,9 +59,4 @@
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
-  min-height: var(--space-medium);
-}
-
-.large .baselineMetric {
-  font-size: var(--size-medium);
 }

package/src/css/variables.css

@@ -27,20 +27,20 @@
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #e9e9ea;
-  --color-gray-100: #c8c9ca;
-  --color-gray-200: #a4a5a6;
-  --color-gray-300: #7f8082;
-  --color-gray-400: #636568;
-  --color-gray-500: #484a4d;
-  --color-gray-600: #414346;
-  --color-gray-700: #383a3d;
-  --color-gray-800: #303234;
-  --color-gray-900: #212225;
+  --color-gray-50: #eceded;
+  --color-gray-100: #d0d1d2;
+  --color-gray-200: #b1b2b4;
+  --color-gray-300: #929395;
+  --color-gray-400: #7a7c7f;
+  --color-gray-500: #636568;
+  --color-gray-600: #5b5d60;
+  --color-gray-700: #515355;
+  --color-gray-800: #47494b;
+  --color-gray-900: #35373a;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -181,6 +181,10 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --radius-small: var(--space-xxxsmall);
+  --radius-medium: var(--space-xxsmall);
+  --radius-large: var(--space-small);
+
   /** Layout */
   --max-width: 80rem;
 }

package/src/hooks/search-params.js

@@ -8,7 +8,7 @@ const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 
 const getSearchPattern = (search) => {
-  let searchPattern = new RegExp(/.*/);
+  let searchPattern = /.*/;
 
   if (!search || !search.trim()) {
     return searchPattern;

package/src/layout/box/box.jsx

@@ -31,7 +31,7 @@ export const Box = (props) => {
     outline && css.outline,
   );
 
-  return <Component className={rootClassName} {...restProps} />;
+  return <Component {...restProps} className={rootClassName} />;
 };
 
 Box.defaultProps = {

package/src/layout/stack/stack.jsx

@@ -7,11 +7,11 @@ import { getRenderChildWithClassName } from '../../utils';
 import css from './stack.module.css';
 
 export const Stack = (props) => {
-  const { as: Component, className, space, children } = props;
+  const { as: Component, className, space, children, ...restProps } = props;
   const rootClassName = cx(className, css.root, css[`space--${space}`]);
 
   return (
-    <Component className={rootClassName}>
+    <Component {...restProps} className={rootClassName}>
       {React.Children.map(children, getRenderChildWithClassName(css.item))}
     </Component>
   );

package/src/ui/icon/icon.jsx

@@ -6,6 +6,7 @@ import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
+  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',

package/src/ui/popover/popover.jsx

@@ -14,7 +14,7 @@ import css from './popover.module.css';
 export const Popover = ({ className, icon, label, ariaLabel, children }) => {
   const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 24,
+    gutter: 12,
     modal: true,
     placement: 'top',
   });
@@ -32,7 +32,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
       event.preventDefault();
       popover.toggle();
     },
-    [popover]
+    [popover],
   );
 
   return (
@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
         {label && <span className={css.label}>{label}</span>}
       </UIPopoverDisclosure>
       <UIPopover className={css.popover} {...popover} tabIndex={0}>
-        <UIPopoverArrow className={css.arrow} {...popover} size={24} />
+        <UIPopoverArrow className={css.arrow} {...popover} size={16} />
 
         {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
 

package/src/ui/popover/popover.module.css

@@ -23,7 +23,8 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
+  border-radius: var(--radius-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/src/ui/tooltip/tooltip.module.css

@@ -12,6 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));