circled close button for alert

cybersemics · Jan 11, 2025 · 2b69061 · 2b69061
1 parent fa2c731
commit 2b69061
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 33 deletions.
diff --git a/src/commands/__tests__/delete.ts b/src/commands/__tests__/delete.ts
@@ -35,8 +35,8 @@ describe('delete', () => {
 
       await act(vi.runAllTimersAsync)
 
-      const popupValue = await screen.findByTestId('alert')!
-      expect(popupValue.textContent).toBe('Permanently deleted test✕')
+      const popupValue = await screen.findByTestId('alert-content')!
+      expect(popupValue.textContent).toBe('Permanently deleted test')
     })
   })
 

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -27,8 +27,6 @@ const Alert: FC = () => {
   const value = strip(alertStoreValue ?? alert?.value ?? '')
   const iconSize = useSelector(state => 0.78 * state.fontSize)
   const dispatch = useDispatch()
-  const paddingInline = useSelector(state => (state.fontSize * 16) / 14)
-  const paddingBlock = paddingInline * 0.75
 
   /** Dismiss the alert on close. */
   const onClose = useCallback(() => {
@@ -55,14 +53,7 @@ const Alert: FC = () => {
           <PopupBase
             disableTop
             cssRaw={css.raw({
-              position: 'fixed',
               boxSizing: 'border-box',
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'flex-start',
-              padding: '12px 16px',
-              gap: '8px',
               bottom: '36px',
               left: '50%',
               transform: 'translateX(-50%)',
@@ -73,14 +64,23 @@ const Alert: FC = () => {
             })}
             ref={popupRef}
             key={value}
-            data-testid='alert-content'
-            onClose={onClose}
-            closeButtonSize='sm'
+            circledCloseButton
             showXOnHover
-            style={{ padding: `${paddingBlock}px ${paddingInline}px` }}
           >
-            {renderedIcon}
-            {value}
+            <div
+              data-testid='alert-content'
+              className={css({
+                gap: '12px',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+                padding: '0.85em 1.1em',
+              })}
+            >
+              {renderedIcon}
+              {value}
+            </div>
           </PopupBase>
         </FadeTransition>
       ) : null}

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
@@ -1,23 +1,25 @@
+import { PropsWithChildren } from 'react'
 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,
-}: {
+type CloseButtonProps = {
   onClose: () => void
   disableSwipeToDismiss?: boolean
-  size?: 'sm' | 'md'
   cssRaw?: SystemStyleObject
-}) => {
-  const fontSize = useSelector(state => state.fontSize)
-  const padding = (fontSize / 2 + 2) / (size === 'sm' ? 2 : 1)
+  style?: React.CSSProperties
+}
+
+/** Base for a close button. */
+const BaseCloseButton = ({
+  onClose,
+  disableSwipeToDismiss,
+  cssRaw,
+  style,
+  children,
+}: PropsWithChildren<CloseButtonProps>) => {
   return (
     <a
       {...fastClick(onClose)}
@@ -33,14 +35,62 @@ const CloseButton = ({
           cssRaw,
         ),
       )}
-      style={{ fontSize: size === 'sm' ? fontSize / 2 : fontSize, padding: `${padding}px ${padding * 1.25}px` }}
+      style={style}
       aria-label={disableSwipeToDismiss ? 'no-swipe-to-dismiss' : undefined}
       data-testid='close-button'
       data-close-button
     >
-      ✕
+      {children}
     </a>
   )
 }
 
+/** A circled close button with an ✕. Sized using parent fontsize. */
+const CircledCloseButton = ({ cssRaw, ...props }: CloseButtonProps) => {
+  return (
+    <BaseCloseButton
+      {...props}
+      cssRaw={css.raw(
+        {
+          display: 'flex',
+          // inherit not yet supported by plugin
+          // eslint-disable-next-line @pandacss/no-hardcoded-color
+          color: 'inherit',
+          textDecoration: 'none',
+          borderRadius: '50%',
+          transform: 'translate(50%, -50%)',
+          // inherit not yet supported by plugin
+          // eslint-disable-next-line @pandacss/no-hardcoded-color
+          background: 'inherit',
+          border: 'inherit',
+        },
+        cssRaw,
+      )}
+    >
+      <svg width='1em' height='1em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path
+          d='M4.49642 12.1284L8.06394 8.56023L11.5039 12.0166L12.0802 11.4566L8.62388 8.00023L12.0802 4.54391L11.5039 3.98391L8.06394 7.44023L4.49642 3.87207L3.92017 4.43207L7.48833 8.00023L3.92017 11.5684L4.49642 12.1284Z'
+          fill='white'
+        />
+      </svg>
+    </BaseCloseButton>
+  )
+}
+
+/** A close button with an ✕. */
+const LetterCloseButton = (props: CloseButtonProps) => {
+  const fontSize = useSelector(state => state.fontSize)
+  const padding = fontSize / 2 + 2
+  return (
+    <BaseCloseButton {...props} style={{ fontSize, padding: `${padding}px ${padding * 1.25}px` }}>
+      ✕
+    </BaseCloseButton>
+  )
+}
+
+/** A close button with an ✕. */
+const CloseButton = ({ circled, ...props }: CloseButtonProps & { circled?: boolean }) => {
+  return circled ? <CircledCloseButton {...props} /> : <LetterCloseButton {...props} />
+}
+
 export default CloseButton
diff --git a/src/components/PopupBase.tsx b/src/components/PopupBase.tsx
@@ -22,15 +22,15 @@ export type PopupBaseProps = PropsWithChildren<
     onClose?: () => void
     disableTop?: boolean
     cssRaw?: SystemStyleObject
-    closeButtonSize?: 'sm' | 'md'
+    circledCloseButton?: boolean
     showXOnHover?: boolean
   } & Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>
 >
 
 /** A popup component that can be dismissed. */
 const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
   (
-    { children, importFileId, onClose, cssRaw, style, disableTop = false, closeButtonSize, showXOnHover, ...props },
+    { children, importFileId, onClose, cssRaw, style, disableTop = false, circledCloseButton, showXOnHover, ...props },
     ref,
   ) => {
     const dispatch = useDispatch()
@@ -94,8 +94,8 @@ const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
         )}
         {onClose ? (
           <CloseButton
+            circled={circledCloseButton}
             cssRaw={showXOnHover ? { visibility: 'hidden' } : undefined}
-            size={closeButtonSize}
             onClose={onClose}
             disableSwipeToDismiss
           />