Merge pull request #2084 from relative-ci/ui-hovercards

feat(ui): Add HoverCard component
relative-ci · Feb 27, 2022 · 9e7af4b · 9e7af4b
2 parents 04bf006 + 0c331d2
commit 9e7af4b
Show file tree

Hide file tree

Showing 38 changed files with 264,921 additions and 36,767 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui/build/storybook/src/ui/hover-card/__snapshots__/hover-card.stories.storyshot b/packages/ui/build/storybook/src/ui/hover-card/__snapshots__/hover-card.stories.storyshot
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots UI/HoverCard Default 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots UI/HoverCard With Render Fn 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -15,7 +15,7 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit && npm run test:storyshots",
+    "test": "npm run test:unit",
     "test:unit": "jest src --passWithNoTests",
     "test:storyshots": "jest build/storybook ",
     "chromatic": "chromatic --exit-zero-on-changes"
@@ -86,10 +86,10 @@
   },
   "dependencies": {
     "@bundle-stats/utils": "^3.2.5",
+    "ariakit": "2.0.0-alpha.18",
     "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"
   }
 }
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -14,7 +14,7 @@ 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';
@@ -83,40 +83,42 @@ const getRenderRowHeader =
     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 && (
-              <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>
+      <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
@@ -126,7 +128,7 @@ const getRenderRowHeader =
           chunks={chunks}
           CustomComponentLink={CustomComponentLink}
         />
-      </Popover>
+      </HoverCard>
     );
   };
 

diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.module.css b/packages/ui/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;

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.jsx b/packages/ui/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,22 +37,22 @@ 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}
               chunks={chunks}
               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,

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -15,7 +15,7 @@ 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';
@@ -116,15 +116,23 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
         );
 
         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}
               fullName={item.label}
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </Popover>
+          </HoverCard>
         );
       })}
     </span>

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.module.css b/packages/ui/src/components/bundle-packages/bundle-packages.module.css
@@ -35,6 +35,10 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameLabel {
+  align-items: center;
+}
+
 .packagePopover {
   min-width: 320px;
 }

diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx b/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx
@@ -5,34 +5,33 @@ 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) => {
   const { className, title, info, popoverInfo, popoverHref } = 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>
   );
 };
 

diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css b/packages/ui/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);
 }

diff --git a/packages/ui/src/components/module-info/module-info.jsx b/packages/ui/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>
         );
       })}

diff --git a/packages/ui/src/components/module-info/module-info.module.css b/packages/ui/src/components/module-info/module-info.module.css
@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }