perf(Dialog): replace :has(.Footer) with data-has-footer attribute

.changeset/perf-dialog-css-has-selector.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+perf(Dialog): replace `:has(.Footer)` with `[data-has-footer]` attribute selector for footer border detection

packages/react/src/Dialog/Dialog.module.css

@@ -324,7 +324,7 @@ Add a border between the body and footer if:
 - the dialog has a body that can scroll
 - the browser supports the `animation-timeline` property and its `scroll()` function
 */
-.Dialog:has(.Footer) {
+.Dialog[data-has-footer] {
   --can-scroll: 0;
 
   .DialogOverflowWrapper {

packages/react/src/Dialog/Dialog.test.tsx

@@ -40,6 +40,24 @@ describe('Dialog', () => {
     await waitFor(() => expect(getByRole('button', {name: 'Footer button'})).toHaveFocus())
   })
 
+  it('sets data-has-footer when footerButtons are provided', () => {
+    const {getByRole} = render(
+      <Dialog onClose={() => {}} footerButtons={[{buttonType: 'primary', content: 'OK'}]}>
+        Content
+      </Dialog>,
+    )
+    expect(getByRole('dialog')).toHaveAttribute('data-has-footer', '')
+  })
+
+  it('does not set data-has-footer when no footer is rendered', () => {
+    const {getByRole} = render(
+      <Dialog onClose={() => {}} renderFooter={() => null}>
+        Content
+      </Dialog>,
+    )
+    expect(getByRole('dialog')).not.toHaveAttribute('data-has-footer')
+  })
+
   it('calls `onClose` when clicking the close button', async () => {
     const user = userEvent.setup()
     const onClose = vi.fn()

packages/react/src/Dialog/Dialog.tsx

@@ -370,6 +370,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             {...(align && {'data-align': align})}
             data-width={width}
             data-height={height}
+            data-has-footer={footer != null ? '' : undefined}
             className={clsx(className, classes.Dialog)}
             style={style}
           >