@bundle-stats/ui 3.2.5 → 3.2.6-beta.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.6-beta.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6-beta.1) (2022-02-25)
+
+
+### Bug Fixes
+
+* **ui:** Add border-radius to flags ([4f7663b](https://github.com/relative-ci/bundle-stats/commit/4f7663b29a954cf1ace9caa9739acd9f37aa3b95))
+* **ui:** Box - add border-radius to outline ([bd78d20](https://github.com/relative-ci/bundle-stats/commit/bd78d2052db4b781afc3a1d9e8dd583986d0093d))
+* **ui:** Normlize border-radius usage ([e8a6b30](https://github.com/relative-ci/bundle-stats/commit/e8a6b302729112d75a82c74ef1d952fc639d16ab))
+* **ui:** Table - remove last row bottom line ([9398a93](https://github.com/relative-ci/bundle-stats/commit/9398a936e1d937aed188f96ce56ebfa56f3af7d7))
+
+
+### Features
+
+* **ui:** Add Tag component ([f796f9c](https://github.com/relative-ci/bundle-stats/commit/f796f9c909703dab3a513059215a2ce24bc12244))
+
+
+
+
+
 ## [3.2.5](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5) (2022-02-15)
 
 

package/lib/components/bundle-assets/bundle-assets.js

@@ -33,6 +33,8 @@ var _popover = require("../../ui/popover");
 
 var _tooltip = require("../../ui/tooltip");
 
+var _tag = require("../../ui/tag");
+
 var _filters = require("../../ui/filters");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
@@ -151,16 +153,22 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
       }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
         className: _bundleAssetsModule["default"].notPredictiveIcon,
         glyph: "warning"
-      })), isChunk && /*#__PURE__*/_react["default"].createElement("span", {
+      })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Chunk",
-        className: _bundleAssetsModule["default"].flagChunk
-      }, "c"), isEntry && /*#__PURE__*/_react["default"].createElement("span", {
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagChunk)
+      }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Entrypoint",
-        className: _bundleAssetsModule["default"].flagEntry
-      }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagEntry)
+      }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Initial",
-        className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagInitial)
+      }))
     }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
       className: _bundleAssetsModule["default"].assetInfo,
       item: item,

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -30,41 +30,28 @@
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-}
-
-.flag + .flag {
+.tag + .tag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.tagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.tagEntry::before {
+  content: 'e';
+}
+
+.tagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.tagInitial::before {
+  content: 'i';
+}
+
+.tagChunk::before {
+  content: 'c';
 }
 
 /* Tooltip not predictive */

package/lib/components/bundle-packages/bundle-packages.js

@@ -31,6 +31,8 @@ var _popover = require("../../ui/popover");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _fileName = require("../../ui/file-name");
@@ -139,10 +141,12 @@ var PackageRowHeader = function PackageRowHeader(_ref2) {
     className: _bundlePackagesModule["default"].packageNames
   }, packageNames.map(function (packageName, index) {
     // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].duplicate,
-      title: "Duplicate package"
-    }, "D");
+    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      title: "Duplicate package",
+      kind: _tag.Tag.KINDS.DANGER,
+      size: _tag.Tag.SIZES.SMALL,
+      className: _bundlePackagesModule["default"].tagDuplicate
+    });
 
     return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
       className: _bundlePackagesModule["default"].packageName,

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -12,20 +12,12 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
+.tagDuplicate {
   margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
+}
 
-  background: var(--color-danger);
-  color: var(--color-light);
+.tagDuplicate::before {
+  content: 'd';
 }
 
 .packageName {

package/lib/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

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

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib/css/variables.css

@@ -170,7 +170,7 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
-  --color-shadow: rgba(0, 0, 0, 0.2);
+  --color-shadow: rgba(0, 0, 0, 0.1);
 
   --transition-in: all 0.2s ease-in;
   --transition-out: all 0.17s ease-out;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: var(--space-xxxsmall);
-  --radius-medium: var(--space-xxsmall);
-  --radius-large: var(--space-small);
+  --radius-small: 2px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;

package/lib/layout/box/box.module.css

@@ -4,6 +4,15 @@
 
 .outline {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+}
+
+.outline > :first-child {
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+}
+
+.outline > :last-child {
+  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib/ui/dropdown/dropdown.js

@@ -39,8 +39,7 @@ var Dropdown = function Dropdown(props) {
     className: rootClassName,
     tabIndex: null
   }), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall",
-    className: _dropdownModule["default"].label
+    space: "xxxsmall"
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph

package/lib/ui/dropdown/dropdown.module.css

@@ -2,15 +2,9 @@
   background: none;
   border: none;
   padding: 0;
-}
 
-.root:focus {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
-}
-
-.label {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -24,7 +18,11 @@
   color: var(--color-text-light);
 }
 
-.label:hover {
+.root:hover,
+.root:focus,
+.root:active {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -33,6 +31,7 @@
   position: absolute;
   left: 0;
   top: 100%;
+  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;

package/lib/ui/filters/filters.js

@@ -92,7 +92,8 @@ Filter.defaultProps = {
 };
 
 var FilterGroup = function FilterGroup(props) {
-  var groupKey = props.groupKey,
+  var className = props.className,
+      groupKey = props.groupKey,
       data = props.data,
       values = props.values,
       onCheckboxChange = props.onCheckboxChange,
@@ -138,6 +139,7 @@ var FilterGroup = function FilterGroup(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
+    className: className,
     label: dropdownLabel,
     ariaLabel: "".concat(groupLabel, ": ").concat(filterSuffix)
   }, function (_ref7) {
@@ -188,6 +190,7 @@ var FilterGroup = function FilterGroup(props) {
 };
 
 FilterGroup.propTypes = {
+  className: _propTypes["default"].string,
   groupKey: _propTypes["default"].string.isRequired,
   data: _propTypes["default"].object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -196,6 +199,9 @@ FilterGroup.propTypes = {
   onCheckboxChange: _propTypes["default"].func.isRequired,
   toggleFilters: _propTypes["default"].func.isRequired
 };
+FilterGroup.defaultProps = {
+  className: ''
+};
 
 var Filters = function Filters(props) {
   var className = props.className,
@@ -231,16 +237,15 @@ var Filters = function Filters(props) {
       });
     }
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _filtersModule["default"].item
-    }, /*#__PURE__*/_react["default"].createElement(FilterGroup, {
+    return /*#__PURE__*/_react["default"].createElement(FilterGroup, {
+      className: _filtersModule["default"].item,
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    }));
+    });
   })));
 };
 

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

@@ -11,6 +11,7 @@
 }
 
 .filterInput {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -129,11 +130,20 @@
 }
 
 .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 */
 }

package/lib/ui/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "Tabs", {
     return _tabs.Tabs;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _tag.Tag;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
@@ -146,4 +152,6 @@ var _table = require("./table");
 
 var _tabs = require("./tabs");
 
+var _tag = require("./tag");
+
 var _tooltip = require("./tooltip");

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

@@ -13,10 +13,6 @@
   text-align: left;
 }
 
-tr:last-child .cell {
-  border-bottom-width: 1px;
-}
-
 .root thead .cell {
   border-width: 0 0 2px;
   text-transform: uppercase;

package/lib/ui/tag/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _tag = require("./tag");
+
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tag[key];
+    }
+  });
+});

package/lib/ui/tag/tag.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = exports.SIZES = exports.KINDS = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tagModule = _interopRequireDefault(require("./tag.module.css"));
+
+var _excluded = ["className", "as", "kind", "size"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+exports.KINDS = KINDS;
+var SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+exports.SIZES = SIZES;
+
+var Tag = function Tag(props) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'span' : _props$as,
+      _props$kind = props.kind,
+      kind = _props$kind === void 0 ? KINDS.DEFAULT : _props$kind,
+      _props$size = props.size,
+      size = _props$size === void 0 ? SIZES.MEDIUM : _props$size,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var rootClassName = (0, _classnames["default"])(_tagModule["default"].root, className, _tagModule["default"][kind], _tagModule["default"][size]);
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+    className: rootClassName
+  }, restProps));
+};
+
+exports.Tag = Tag;
+Tag.propTypes = {
+  className: _propTypes["default"].string,
+  as: _propTypes["default"].elementType,
+  kind: _propTypes["default"].oneOf(Object.values(KINDS)),
+  size: _propTypes["default"].oneOf(Object.values(SIZES))
+};
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM
+};
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

package/lib/ui/tag/tag.module.css

@@ -0,0 +1,55 @@
+.root {
+  display: inline-block;
+  font-family: var(--font-family);
+  font-weight: bold;
+  background: var(--color-text-light);
+  color: var(--color-light);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/** Kind variation */
+.success {
+  background: var(--color-success);
+}
+
+.info {
+  background: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-dark);
+}
+
+.danger {
+  background: var(--color-danger);
+}
+
+/** Size variation */
+/** default: medium */
+.root {
+  border-radius: var(--radius-medium);
+  padding: var(--space-xxxsmall);
+  min-width: var(--space-small);
+  height: var(--space-small);
+  font-size: 9px;
+  line-height: 1;
+}
+
+.small {
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2);
+  height: var(--space-xsmall);
+  min-width: var(--space-xsmall);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.large {
+  border-radius: var(--radius-large);
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  min-width: var(--space-medium);
+  height: var(--space-medium);
+  font-size: 12px;
+  line-height: var(--space-small);
+}

package/lib/ui/tag/tag.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.OneLetter = exports.Default = void 0;
+
+var _ = require(".");
+
+var _default = {
+  title: 'UI/Tag',
+  component: _.Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(_.Tag.KINDS)
+    },
+    size: {
+      control: 'select',
+      options: Object.values(_.Tag.SIZES)
+    }
+  },
+  args: {
+    children: 'tag'
+  }
+};
+exports["default"] = _default;
+
+var Default = _.Tag.bind();
+
+exports.Default = Default;
+
+var OneLetter = _.Tag.bind();
+
+exports.OneLetter = OneLetter;
+OneLetter.args = {
+  children: 'd'
+};

package/lib/ui/tooltip/tooltip.module.css

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

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -14,6 +14,7 @@ import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { Popover } from '../../ui/popover';
 import { Tooltip } from '../../ui/tooltip';
+import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
@@ -100,16 +101,22 @@ const getRenderRowHeader = _ref4 => {
       }, /*#__PURE__*/React.createElement(Icon, {
         className: css.notPredictiveIcon,
         glyph: "warning"
-      })), isChunk && /*#__PURE__*/React.createElement("span", {
+      })), isChunk && /*#__PURE__*/React.createElement(Tag, {
         title: "Chunk",
-        className: css.flagChunk
-      }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
+        size: Tag.SIZES.SMALL,
+        kind: Tag.KINDS.INFO,
+        className: cx(css.tag, css.tagChunk)
+      }), isEntry && /*#__PURE__*/React.createElement(Tag, {
         title: "Entrypoint",
-        className: css.flagEntry
-      }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
+        size: Tag.SIZES.SMALL,
+        kind: Tag.KINDS.INFO,
+        className: cx(css.tag, css.tagEntry)
+      }), isInitial && /*#__PURE__*/React.createElement(Tag, {
         title: "Initial",
-        className: css.flagInitial
-      }, "i"))
+        size: Tag.SIZES.SMALL,
+        kind: Tag.KINDS.INFO,
+        className: cx(css.tag, css.tagInitial)
+      }))
     }, /*#__PURE__*/React.createElement(AssetInfo, {
       className: css.assetInfo,
       item: item,