FIXUP: hovercard

relative-ci · Feb 27, 2022 · 3d58ee1 · 3d58ee1
1 parent a8e3ac1
commit 3d58ee1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/packages/ui/src/ui/hover-card/hover-card.jsx b/packages/ui/src/ui/hover-card/hover-card.jsx
@@ -1,22 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Hovercard, HovercardAnchor, HovercardArrow, useHovercardState } from 'ariakit/hovercard';
+import { Role } from 'ariakit/role';
+import {
+  HovercardAnchor,
+  HovercardArrow,
+  useHovercard,
+  useHovercardState,
+} from 'ariakit/hovercard';
 
 import { Icon } from '../icon';
 import css from './hover-card.module.css';
 
 export const HoverCard = (props) => {
   const { className = '', href = '', children, hoverContent } = props;
-  const hovercard = useHovercardState({ gutter: 8 });
+  const state = useHovercardState({ gutter: 8 });
+  const hoverCardProps = useHovercard({ state, portal: true });
 
   return (
     <div>
-      <HovercardAnchor state={hovercard} href={href} className={cx(css.anchor, className)}>
+      <HovercardAnchor state={state} href={href} className={cx(css.anchor, className)}>
         {children}
       </HovercardAnchor>
-
-      <Hovercard state={hovercard} className={css.hoverCard}>
+      <Role {...hoverCardProps} className={css.hoverCard} style={{ zIndex: 10000 }}>
         <HovercardArrow size={24} />
         {hoverContent}
         <Icon
@@ -25,9 +31,9 @@ export const HoverCard = (props) => {
           as="button"
           type="button"
           className={css.closeBtn}
-          onClick={hovercard.hide}
+          onClick={state.hide}
         />
-      </Hovercard>
+      </Role>
     </div>
   );
 };

diff --git a/packages/ui/src/ui/hover-card/hover-card.module.css b/packages/ui/src/ui/hover-card/hover-card.module.css
@@ -1,9 +1,19 @@
+.anchor {
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor:hover {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
 .hoverCard {
   padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
-  max-width: 360px;
+  max-width: 320px;
   outline: none;
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
   background: var(--color-light);
   font-size: var(--size-small);
 }

diff --git a/packages/ui/src/ui/hover-card/hover-card.stories.jsx b/packages/ui/src/ui/hover-card/hover-card.stories.jsx
@@ -7,6 +7,15 @@ export default {
   component: HoverCard,
 };
 
-const Template = (props) => <HoverCard {...props} />;
+const Template = (props) => (
+  <>
+    <HoverCard {...props} style={{ zIndex: 2 }} />
+    <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
+      vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
+      eget risus
+    </p>
+  </>
+);
 
-export const Default = () => <HoverCard hoverContent={<p>main.js info</p>}>main.js</HoverCard>;
+export const Default = () => <Template hoverContent={<p>main.js info</p>}>main.js</Template>;