Merge pull request #1949 from adevinta/1948-component-dialog-apply-pa…

…dding-right-to-dialogtitle-when-dialogclosebutton-is-present feat(dialog): apply padding right to dialog title when closebutton is present
adevinta · Mar 15, 2024 · 0557130 · 0557130
2 parents 017b58f + 0c4976b
commit 0557130
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/dialog/package.json b/packages/components/dialog/package.json
@@ -47,6 +47,7 @@
     "@spark-ui/icon": "^2.1.2",
     "@spark-ui/icon-button": "^2.2.3",
     "@spark-ui/icons": "^1.21.6",
+    "@spark-ui/internal-utils": "^2.3.0",
     "class-variance-authority": "0.7.0"
   }
 }
diff --git a/packages/components/dialog/src/Dialog.test.tsx b/packages/components/dialog/src/Dialog.test.tsx
@@ -188,4 +188,31 @@ describe('Dialog', () => {
 
     expect(screen.getByText(/dialog contents/i).parentElement).not.toHaveClass('px-xl py-lg')
   })
+
+  it('should apply padding-right to the Dialog.Title if Dialog.CloseButton is present', async () => {
+    render(
+      <Dialog defaultOpen>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Edit profile</Dialog.Title>
+            </Dialog.Header>
+
+            <Dialog.Body>
+              <p>Dialog contents</p>
+            </Dialog.Body>
+
+            <Dialog.Footer>
+              <Button>Close</Button>
+            </Dialog.Footer>
+
+            <Dialog.CloseButton aria-label="Close" />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    )
+
+    expect(screen.getByText(/Edit profile/i)).toHaveClass('pr-3xl')
+  })
 })
diff --git a/packages/components/dialog/src/DialogCloseButton.tsx b/packages/components/dialog/src/DialogCloseButton.tsx
@@ -10,7 +10,7 @@ type CloseButtonElement = ElementRef<typeof Close>
 export type CloseButtonProps = CloseProps &
   Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>
 
-export const CloseButton = forwardRef<CloseButtonElement, CloseButtonProps>(
+const Root = forwardRef<CloseButtonElement, CloseButtonProps>(
   (
     {
       'aria-label': ariaLabel,
@@ -36,4 +36,8 @@ export const CloseButton = forwardRef<CloseButtonElement, CloseButtonProps>(
   )
 )
 
+export const CloseButton = Object.assign(Root, {
+  id: 'CloseButton',
+})
+
 CloseButton.displayName = 'Dialog.CloseButton'
diff --git a/packages/components/dialog/src/DialogContext.tsx b/packages/components/dialog/src/DialogContext.tsx
@@ -1,23 +1,44 @@
-import { createContext, type ReactNode, useContext, useState } from 'react'
+import { deepFind } from '@spark-ui/internal-utils'
+import {
+  createContext,
+  type ReactElement,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 export interface DialogContextState {
   isFullScreen: boolean
   setIsFullScreen: (value: boolean) => void
+  hasCloseButton: boolean
 }
 
 const DialogContext = createContext<DialogContextState | null>(null)
 
-export const DialogProvider = ({ children }: { children: ReactNode }) => {
+export const DialogProvider = ({ children: childrenProp }: { children: ReactNode }) => {
   const [isFullScreen, setIsFullScreen] = useState(false)
+  const [hasCloseButton, setHasCloseButton] = useState(false)
+
+  const closeButton = deepFind(childrenProp, node => {
+    const reactElementId = ((node as ReactElement)?.type as { id?: string }).id
+
+    return reactElementId === 'CloseButton'
+  })
+
+  useEffect(() => {
+    setHasCloseButton(!!closeButton)
+  }, [closeButton])
 
   return (
     <DialogContext.Provider
       value={{
         isFullScreen,
         setIsFullScreen,
+        hasCloseButton,
       }}
     >
-      {children}
+      {childrenProp}
     </DialogContext.Provider>
   )
 }

diff --git a/packages/components/dialog/src/DialogTitle.tsx b/packages/components/dialog/src/DialogTitle.tsx
@@ -2,15 +2,21 @@ import * as RadixDialog from '@radix-ui/react-dialog'
 import { cx } from 'class-variance-authority'
 import { ElementRef, forwardRef } from 'react'
 
+import { useDialog } from './DialogContext'
+
 export type TitleElement = ElementRef<typeof RadixDialog.Title>
 export type TitleProps = RadixDialog.DialogTitleProps
 
-export const Title = forwardRef<TitleElement, TitleProps>(({ className, ...others }, ref) => (
-  <RadixDialog.Title
-    ref={ref}
-    className={cx('text-headline-1 text-on-surface', className)}
-    {...others}
-  />
-))
+export const Title = forwardRef<TitleElement, TitleProps>(({ className, ...others }, ref) => {
+  const { hasCloseButton } = useDialog()
+
+  return (
+    <RadixDialog.Title
+      ref={ref}
+      className={cx('text-headline-1 text-on-surface', hasCloseButton && 'pr-3xl', className)}
+      {...others}
+    />
+  )
+})
 
 Title.displayName = 'Dialog.Title'