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

package/lib-esm/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-esm/components/bundle-packages/bundle-packages.js

@@ -12,6 +12,7 @@ import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
 import { Popover } from '../../ui/popover';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
@@ -89,10 +90,12 @@ const PackageRowHeader = _ref2 => {
     className: css.packageNames
   }, packageNames.map((packageName, index) => {
     // Render duplicate flag only for the last entry
-    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
-      className: css.duplicate,
-      title: "Duplicate package"
-    }, "D");
+    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement(Tag, {
+      title: "Duplicate package",
+      kind: Tag.KINDS.DANGER,
+      size: Tag.SIZES.SMALL,
+      className: css.tagDuplicate
+    });
     return /*#__PURE__*/React.createElement(Popover, {
       className: css.packageName,
       icon: duplicateFlag,

package/lib-esm/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-esm/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-esm/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-esm/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-esm/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-esm/ui/dropdown/dropdown.js

@@ -25,8 +25,7 @@ export const Dropdown = props => {
     className: rootClassName,
     tabIndex: null
   }), /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall",
-    className: css.label
+    space: "xxxsmall"
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph

package/lib-esm/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-esm/ui/filters/filters.js

@@ -54,6 +54,7 @@ Filter.defaultProps = {
 
 const FilterGroup = props => {
   const {
+    className,
     groupKey,
     data,
     values,
@@ -98,6 +99,7 @@ const FilterGroup = props => {
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
+    className: className,
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
   }, _ref4 => {
@@ -147,6 +149,7 @@ const FilterGroup = props => {
 };
 
 FilterGroup.propTypes = {
+  className: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -155,6 +158,9 @@ FilterGroup.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   toggleFilters: PropTypes.func.isRequired
 };
+FilterGroup.defaultProps = {
+  className: ''
+};
 export const Filters = props => {
   const {
     className,
@@ -191,16 +197,15 @@ export const Filters = props => {
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: css.item
-    }, /*#__PURE__*/React.createElement(FilterGroup, {
+    return /*#__PURE__*/React.createElement(FilterGroup, {
+      className: css.item,
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    }));
+    });
   })));
 };
 Filters.defaultProps = {

package/lib-esm/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-esm/ui/index.js

@@ -15,4 +15,5 @@ export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';
 export { Tabs } from './tabs';
+export { Tag } from './tag';
 export { Tooltip } from './tooltip';

package/lib-esm/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-esm/ui/tag/index.js

@@ -0,0 +1 @@
+export * from './tag';

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

@@ -0,0 +1,45 @@
+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 PropTypes from 'prop-types';
+import cx from 'classnames';
+import css from './tag.module.css';
+export const KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+export const Tag = props => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KINDS.DEFAULT,
+    size = SIZES.MEDIUM,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: rootClassName
+  }, restProps));
+};
+Tag.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  kind: PropTypes.oneOf(Object.values(KINDS)),
+  size: PropTypes.oneOf(Object.values(SIZES))
+};
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM
+};
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

package/lib-esm/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-esm/ui/tag/tag.stories.js

@@ -0,0 +1,23 @@
+import { Tag } from '.';
+export 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'
+  }
+};
+export const Default = Tag.bind();
+export const OneLetter = Tag.bind();
+OneLetter.args = {
+  children: 'd'
+};

package/lib-esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.5",
+  "version": "3.2.6-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,8 +36,8 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.17.3",
-    "@babel/core": "7.17.3",
+    "@babel/cli": "7.17.6",
+    "@babel/core": "7.17.5",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
@@ -54,7 +54,7 @@
     "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.4.3",
+    "chromatic": "6.5.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.20.2",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.6",
+    "postcss": "8.4.7",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.5",
+    "@bundle-stats/utils": "^3.2.6-beta.1",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "reakit": "1.3.11",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "0347f5be371851764895fe6527b9ff3aad6d4cea"
+  "gitHead": "7131e3602cc523fb84d8dc712f88fb5b47773f70"
 }

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

@@ -2,7 +2,12 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, FILE_TYPE_LABELS } from '@bundle-stats/utils';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+} from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
@@ -11,6 +16,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';
@@ -71,47 +77,58 @@ TooltipNotPredictive.propTypes = {
   runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 };
 
-const getRenderRowHeader = ({ labels, CustomComponentLink, chunks }) => (item) => {
-  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
+const getRenderRowHeader =
+  ({ labels, CustomComponentLink, chunks }) =>
+  (item) => {
+    const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
 
-  return (
-    <Popover
-      label={<FileName name={label} />}
-      icon={
-        <div className={css.assetInfoFlags}>
-          {isNotPredictive && (
-            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-              <Icon className={css.notPredictiveIcon} glyph="warning" />
-            </Tooltip>
-          )}
-          {isChunk && (
-            <span title="Chunk" className={css.flagChunk}>
-              c
-            </span>
-          )}
-          {isEntry && (
-            <span title="Entrypoint" className={css.flagEntry}>
-              e
-            </span>
-          )}
-          {isInitial && (
-            <span title="Initial" className={css.flagInitial}>
-              i
-            </span>
-          )}
-        </div>
-      }
-    >
-      <AssetInfo
-        className={css.assetInfo}
-        item={item}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </Popover>
-  );
-};
+    return (
+      <Popover
+        label={<FileName name={label} />}
+        icon={
+          <div className={css.assetInfoFlags}>
+            {isNotPredictive && (
+              <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
+                <Icon className={css.notPredictiveIcon} glyph="warning" />
+              </Tooltip>
+            )}
+            {isChunk && (
+              <Tag
+                title="Chunk"
+                size={Tag.SIZES.SMALL}
+                kind={Tag.KINDS.INFO}
+                className={cx(css.tag, css.tagChunk)}
+              />
+            )}
+            {isEntry && (
+              <Tag
+                title="Entrypoint"
+                size={Tag.SIZES.SMALL}
+                kind={Tag.KINDS.INFO}
+                className={cx(css.tag, css.tagEntry)}
+              />
+            )}
+            {isInitial && (
+              <Tag
+                title="Initial"
+                size={Tag.SIZES.SMALL}
+                kind={Tag.KINDS.INFO}
+                className={cx(css.tag, css.tagInitial)}
+              />
+            )}
+          </div>
+        }
+      >
+        <AssetInfo
+          className={css.assetInfo}
+          item={item}
+          labels={labels}
+          chunks={chunks}
+          CustomComponentLink={CustomComponentLink}
+        />
+      </Popover>
+    );
+  };
 
 export const BundleAssets = (props) => {
   const {