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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.7-beta.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.7-beta.2...v3.2.7-beta.3) (2022-03-09)
+## [3.2.7-beta.5](https://github.com/relative-ci/bundle-stats/compare/v3.2.7-beta.4...v3.2.7-beta.5) (2022-03-09)
 
 **Note:** Version bump only for package @bundle-stats/ui
 
@@ -11,19 +11,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [3.2.7-beta.2](https://github.com/relative-ci/bundle-stats/compare/v3.2.7-beta.1...v3.2.7-beta.2) (2022-03-08)
-
-**Note:** Version bump only for package @bundle-stats/ui
-
-
-
-
-
-## [3.2.7-beta.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7-beta.1) (2022-03-08)
+## [3.2.7-beta.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7-beta.4) (2022-03-09)
 
 
 ### Bug Fixes
 
+* **ui:** App - consistent vertical spacing ([4f29d3d](https://github.com/relative-ci/bundle-stats/commit/4f29d3d47edc7f89858f0948d0cdc1e22ce5b157))
 * **ui:** HoverCard - prevent default on close ([9fae6a4](https://github.com/relative-ci/bundle-stats/commit/9fae6a4825d1a016e3b626168f73ca0a90213d10))
 * **ui:** MetricsTable - consistent toolbar spacing ([fcaf38d](https://github.com/relative-ci/bundle-stats/commit/fcaf38df698329bc00bc267e72289fec8064cc61))
 

package/lib/app/app.js

@@ -236,7 +236,7 @@ var AppComponent = function AppComponent(_ref2) {
     path: _constants.URLS.OVERVIEW,
     render: function render() {
       return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "large"
+        space: "medium"
       }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
         duplicatePackagesCount: duplicatePackagesCount,
         showDelta: jobs.length > 1

package/lib/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

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

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _hovercard = require("ariakit/hovercard");
 
-var _icon = require("../icon");
-
 var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -75,14 +73,7 @@ var HoverCard = function HoverCard(props) {
     size: 24
   }), typeof children === 'function' ? children({
     close: state.hide
-  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "close",
-    size: "small",
-    as: "button",
-    type: "button",
-    className: _hoverCardModule["default"].closeBtn,
-    onClick: handleOnClose
-  })));
+  }) : children));
 };
 
 exports.HoverCard = HoverCard;

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

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

package/lib-esm/app/app.js

@@ -176,7 +176,7 @@ const AppComponent = _ref2 => {
     exact: true,
     path: URLS.OVERVIEW,
     render: () => /*#__PURE__*/React.createElement(Stack, {
-      space: "large"
+      space: "medium"
     }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
       duplicatePackagesCount: duplicatePackagesCount,
       showDelta: jobs.length > 1

package/lib-esm/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

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

@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardState } from 'ariakit/hovercard';
-import { Icon } from '../icon';
 import css from './hover-card.module.css';
 
 const resolveComponent = (as, href) => {
@@ -57,14 +56,7 @@ export const HoverCard = props => {
     size: 24
   }), typeof children === 'function' ? children({
     close: state.hide
-  }) : children, /*#__PURE__*/React.createElement(Icon, {
-    glyph: "close",
-    size: "small",
-    as: "button",
-    type: "button",
-    className: css.closeBtn,
-    onClick: handleOnClose
-  })));
+  }) : children));
 };
 HoverCard.propTypes = {
   /** Adopted child class name */

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

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.7-beta.3",
+  "version": "3.2.7-beta.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.7-beta.3",
+    "@bundle-stats/utils": "^3.2.7-beta.5",
     "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": "23478e08f6882f7c20f373f5bb9bc3beaaea4ea7"
+  "gitHead": "06fce09ac6b206ed1bf3a5c7bd187d4b82e2a0d0"
 }

package/src/app/app.jsx

@@ -182,7 +182,7 @@ const AppComponent = ({ version, jobs }) => {
             exact
             path={URLS.OVERVIEW}
             render={() => (
-              <Stack space="large">
+              <Stack space="medium">
                 {duplicatePackagesInsights && (
                   <Container>
                     <DuplicatePackagesWarning

package/src/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

package/src/ui/hover-card/hover-card.jsx

@@ -9,7 +9,6 @@ import {
   useHovercardState,
 } from 'ariakit/hovercard';
 
-import { Icon } from '../icon';
 import css from './hover-card.module.css';
 
 const resolveComponent = (as, href) => {
@@ -53,14 +52,6 @@ export const HoverCard = (props) => {
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}
-        <Icon
-          glyph="close"
-          size="small"
-          as="button"
-          type="button"
-          className={css.closeBtn}
-          onClick={handleOnClose}
-        />
       </Hovercard>
     </div>
   );

package/src/ui/hover-card/hover-card.module.css

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}