show x on hover

cybersemics · Jan 2, 2025 · d314aae · d314aae
1 parent 064d901
commit d314aae
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -51,7 +51,7 @@ const Alert: FC = () => {
           {/* Specify a key to force the component to re-render and thus recalculate useSwipeToDismissProps when the alert changes. Otherwise the alert gets stuck off screen in the dismiss state. */}
           <PopupBase
             disableTop
-            className={css({
+            cssRaw={css.raw({
               position: 'fixed',
               boxSizing: 'border-box',
               display: 'flex',
@@ -73,6 +73,7 @@ const Alert: FC = () => {
             data-testid='alert-content'
             onClose={onClose}
             closeButtonSize='sm'
+            showXOnHover
           >
             {renderedIcon}
             {value}

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
@@ -1,17 +1,20 @@
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
 import { upperRightRecipe } from '../../styled-system/recipes'
+import { SystemStyleObject } from '../../styled-system/types'
 import fastClick from '../util/fastClick'
 
 /** A close button with an ✕. */
 const CloseButton = ({
   onClose,
   disableSwipeToDismiss,
   size = 'md',
+  cssRaw,
 }: {
   onClose: () => void
   disableSwipeToDismiss?: boolean
   size?: 'sm' | 'md'
+  cssRaw?: SystemStyleObject
 }) => {
   const fontSize = useSelector(state => state.fontSize)
   const padding = (fontSize / 2 + 2) / (size === 'sm' ? 2 : 1)
@@ -20,14 +23,18 @@ const CloseButton = ({
       {...fastClick(onClose)}
       className={cx(
         upperRightRecipe(),
-        css({
-          color: 'inherit',
-          textDecoration: 'none',
-        }),
+        css(
+          {
+            color: 'inherit',
+            textDecoration: 'none',
+          },
+          cssRaw,
+        ),
       )}
       style={{ fontSize: size === 'sm' ? fontSize / 2 : fontSize, padding: `${padding}px ${padding * 1.25}px` }}
       aria-label={disableSwipeToDismiss ? 'no-swipe-to-dismiss' : undefined}
       data-testid='close-button'
+      data-close-button
     >
       ✕
     </a>

diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
@@ -18,7 +18,7 @@ const Popup = React.forwardRef<
   return (
     <PopupBase
       ref={ref}
-      className={css(
+      cssRaw={css.raw(
         {
           boxShadow: 'none',
           border: 'none',

diff --git a/src/components/PopupBase.tsx b/src/components/PopupBase.tsx
@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { css } from '../../styled-system/css'
+import { SystemStyleObject } from '../../styled-system/types'
 import { alertActionCreator as alert } from '../actions/alert'
 import { clearMulticursorsActionCreator as clearMulticursors } from '../actions/clearMulticursors'
 import { deleteResumableFile } from '../actions/importFiles'
@@ -19,13 +21,18 @@ export type PopupBaseProps = PropsWithChildren<
     /** If defined, will show a small x in the upper right corner. */
     onClose?: () => void
     disableTop?: boolean
+    cssRaw?: SystemStyleObject
     closeButtonSize?: 'sm' | 'md'
-  } & React.HTMLAttributes<HTMLDivElement>
+    showXOnHover?: boolean
+  } & Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>
 >
 
 /** A popup component that can be dismissed. */
 const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
-  ({ children, importFileId, onClose, className, style, disableTop = false, closeButtonSize, ...props }, ref) => {
+  (
+    { children, importFileId, onClose, cssRaw, style, disableTop = false, closeButtonSize, showXOnHover, ...props },
+    ref,
+  ) => {
     const dispatch = useDispatch()
 
     const fontSize = useSelector(state => state.fontSize)
@@ -42,7 +49,16 @@ const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
 
     return (
       <div
-        className={className}
+        className={css(
+          showXOnHover && {
+            '&:hover': {
+              '& [data-close-button]': {
+                visibility: 'visible',
+              },
+            },
+          },
+          cssRaw,
+        )}
         {...(isTouch ? useSwipeToDismissProps : null)}
         ref={combinedRefs}
         // merge style with useSwipeToDismissProps.style (transform, transition, and touchAction for sticking to user's touch)
@@ -76,7 +92,14 @@ const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
             cancel
           </a>
         )}
-        {onClose ? <CloseButton size={closeButtonSize} onClose={onClose} disableSwipeToDismiss /> : null}
+        {onClose ? (
+          <CloseButton
+            cssRaw={showXOnHover ? { visibility: 'hidden' } : undefined}
+            size={closeButtonSize}
+            onClose={onClose}
+            disableSwipeToDismiss
+          />
+        ) : null}
       </div>
     )
   },