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

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

@@ -2,15 +2,21 @@ 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';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 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,60 @@ 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 (
+      <HoverCard
+        label={
+          <FlexStack space="xxxsmall" className={css.assetName}>
+            <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>
+            <FileName name={label} />
+          </FlexStack>
+        }
+      >
+        <AssetInfo
+          className={css.assetInfo}
+          item={item}
+          labels={labels}
+          chunks={chunks}
+          CustomComponentLink={CustomComponentLink}
+        />
+      </HoverCard>
+    );
+  };
 
 export const BundleAssets = (props) => {
   const {

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

@@ -8,6 +8,11 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {
+  display: inline-flex;
+  align-items: center;
+}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -30,41 +35,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/src/components/bundle-modules/bundle-modules.jsx

@@ -18,7 +18,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -37,11 +37,11 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 
   return (
     <div onMouseEnter={handleOnMouseEnter}>
-      {!showPopopver ?
+      {!showPopopver ? (
         content
-        : (
-        <Popover ariaLabel="View module info" label={content}>
-          {({ popoverToggle }) => (
+      ) : (
+        <HoverCard label={content}>
+          {({ close }) => (
             <ModuleInfo
               className={css.namePopover}
               item={row}
@@ -49,10 +49,10 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
               chunkIds={chunkIds}
               labels={labels}
               customComponentLink={CustomComponentLink}
-              onClick={popoverToggle}
+              onClick={close}
             />
           )}
-        </Popover>
+        </HoverCard>
       )}
     </div>
   );
@@ -76,9 +76,17 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader = ({ labels, chunks, CustomComponentLink }) => (row) => (
-  <RowHeader row={row} chunks={chunks} labels={labels} CustomComponentLink={CustomComponentLink} />
-);
+const getRenderRowHeader =
+  ({ labels, chunks, CustomComponentLink }) =>
+  (row) =>
+    (
+      <RowHeader
+        row={row}
+        chunks={chunks}
+        labels={labels}
+        CustomComponentLink={CustomComponentLink}
+      />
+    );
 
 export const BundleModules = ({
   className,
@@ -240,10 +248,12 @@ BundleModules.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   /** Chunks data */
-  chunks: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  })).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ).isRequired,
 
   /** total row count */
   totalRowCount: PropTypes.number,

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

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -15,8 +15,9 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 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';
@@ -27,7 +28,8 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const normalizedPackagePath =
+    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (
@@ -105,13 +107,24 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
       {packageNames.map((packageName, index) => {
         // Render duplicate flag only for the last entry
         const duplicateFlag = index === packageNames.length - 1 && item.duplicate && (
-          <span className={css.duplicate} title="Duplicate package">
-            D
-          </span>
+          <Tag
+            title="Duplicate package"
+            kind={Tag.KINDS.DANGER}
+            size={Tag.SIZES.SMALL}
+            className={css.tagDuplicate}
+          />
         );
 
         return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
+          <HoverCard
+            className={css.packageName}
+            label={
+              <FlexStack space="xxxsmall" className={css.packageNameLabel}>
+                {duplicateFlag}
+                <span>{packageName}</span>
+              </FlexStack>
+            }
+          >
             <PackagePopoverContent
               name={packageName}
               path={path}
@@ -119,7 +132,7 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </Popover>
+          </HoverCard>
         );
       })}
     </span>

package/src/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 {
@@ -43,6 +35,10 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameLabel {
+  align-items: center;
+}
+
 .packagePopover {
   min-width: 320px;
 }

package/src/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/src/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/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,7 +5,8 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
 
 export const MetricsTableTitle = (props) => {
@@ -13,26 +14,24 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="xxxsmall" className={rootClassName}>
-      <FlexStack space="xxxsmall">
-        <span>{title}</span>
-        {info && <span className={css.info}>{info}</span>}
-        {(popoverInfo || popoverHref) && (
-          <Popover icon="help">
-            <Stack space="xxxsmall">
-              {popoverInfo && <p>{popoverInfo}</p>}
-              {popoverHref && (
-                <p>
-                  <a href={popoverHref} target="_blank" rel="noreferrer">
-                    {I18N.READ_MORE}
-                  </a>
-                </p>
-              )}
-            </Stack>
-          </Popover>
-        )}
-      </FlexStack>
-    </Stack>
+    <FlexStack space="xxxsmall" className={rootClassName}>
+      <span>{title}</span>
+      {info && <span className={css.info}>{info}</span>}
+      {(popoverInfo || popoverHref) && (
+        <HoverCard label={<Icon glyph="help" />}>
+          <Stack space="xxxsmall">
+            {popoverInfo && <p>{popoverInfo}</p>}
+            {popoverHref && (
+              <p>
+                <a href={popoverHref} target="_blank" rel="noreferrer">
+                  {I18N.READ_MORE}
+                </a>
+              </p>
+            )}
+          </Stack>
+        </HoverCard>
+      )}
+    </FlexStack>
   );
 };
 

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

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

package/src/components/module-info/module-info.jsx

@@ -51,11 +51,7 @@ export const ModuleInfo = (props) => {
               </div>
             )}
 
-            <FileName
-              className={css.fileName}
-              as="code"
-              name={run?.name || '-'}
-            />
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
           </Stack>
         );
       })}

package/src/components/module-info/module-info.module.css

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

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

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
+import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -11,32 +12,25 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = ({ description, url }) => {
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" className={css.readMoreBtn} onClick={readMoreOnClick}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfoPopover.propTypes = {
+const MetricInfo = ({ description, url }) => (
+  <Stack space="xxxsmall">
+    <p>{description}</p>
+    {url && (
+      <p>
+        <a href={url} className={css.readMoreLink}>
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: '',
 };
 
@@ -65,9 +59,9 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+            <MetricInfo {...metric} />
+          </HoverCard>
         )}
       </FlexStack>
 

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

@@ -1,4 +1,5 @@
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -7,25 +8,6 @@
   white-space: nowrap;
 }
 
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 
 export const TotalSizeTypeTitle = ({ className }) => (
   <FlexStack space="xxxsmall" className={cx(css.title, className)}>
     <span>{I18N.ASSET_TOTALS}</span>
-    <Popover icon="help">
+    <HoverCard label={<Icon glyph="help" />}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <a
-            href={config.documentation.assets}
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a href={config.documentation.assets} target="_blank" rel="noreferrer">
             {I18N.READ_MORE}
           </a>
         </p>
       </Stack>
-    </Popover>
+    </HoverCard>
   </FlexStack>
 );
 

package/src/css/variables.css

@@ -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;