Feat/popover with dialog

.changeset/chilled-coins-sniff.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Refactored the DateInput and Toggletip components to use the Popover component under the hood.

.changeset/tasty-radios-jog.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Updated the popover component to allow any content inside the popover by adding a `children` prop. Under the hood, the component now uses the dialog element instead of the portal component.

packages/circuit-ui/components/DateInput/DateInput.module.css

@@ -107,28 +107,21 @@
   z-index: calc(var(--cui-z-index-absolute) + 1);
 }
 
-.content {
-  color: var(--cui-fg-normal);
-  background-color: var(--cui-bg-elevated);
-  border: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
-  border-radius: var(--cui-border-radius-byte);
-  outline: 0;
-  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);
-}
-
 @media (max-width: 479px) {
   .content {
+    padding: 0;
+    border: none;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
+    box-shadow: none;
   }
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--cui-spacings-giga) var(--cui-spacings-mega)
-    var(--cui-spacings-byte) var(--cui-spacings-mega);
+  padding: var(--cui-spacings-byte) 0;
 }
 
 @media (min-width: 480px) {
@@ -151,16 +144,35 @@
 }
 
 .calendar {
-  padding: var(--cui-spacings-mega);
+  margin-bottom: var(--cui-spacings-mega);
+}
+
+@media (max-width: 479px) {
+  .calendar {
+    margin: var(--cui-spacings-mega) 0;
+  }
+}
+
+.divider {
+  width: calc(100% + var(--cui-spacings-tera));
+  margin-left: calc(-1 * var(--cui-spacings-mega));
 }
 
 .buttons {
   display: flex;
   flex-wrap: wrap;
   gap: var(--cui-spacings-kilo);
   justify-content: space-between;
-  padding: var(--cui-spacings-mega);
-  border-top: var(--cui-border-width-kilo) solid var(--cui-border-divider);
+}
+
+.popover {
+  max-width: min(410px, 100vw);
+  border-color: var(--cui-border-subtle);
+  box-shadow: none;
+}
+
+.popover::after {
+  visibility: hidden;
 }
 
 .apply {

packages/circuit-ui/components/DateInput/DateInput.spec.tsx

@@ -13,26 +13,50 @@
  * limitations under the License.
  */
 
-import { beforeEach, describe, expect, it, vi, type Mock } from 'vitest';
+import {
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+  type Mock,
+  afterEach,
+} from 'vitest';
 import { createRef } from 'react';
 import MockDate from 'mockdate';
 
-import { render, screen, axe, userEvent } from '../../util/test-utils.js';
+import { render, screen, axe, userEvent, act } from '../../util/test-utils.js';
 import { useMedia } from '../../hooks/useMedia/useMedia.js';
+import { ANIMATION_DURATION } from '../Modal/Modal.js';
 
 import { DateInput } from './DateInput.js';
 
 vi.mock('../../hooks/useMedia/useMedia.js');
+vi.mock('../../hooks/useScrollLock/useScrollLock.js');
 
 describe('DateInput', () => {
   const props = {
     onChange: vi.fn(),
     label: 'Date of birth',
   };
+  let originalHTMLDialogElement: typeof window.HTMLDialogElement;
 
   beforeEach(() => {
+    originalHTMLDialogElement = window.HTMLDialogElement;
     MockDate.set('2000-01-01');
     (useMedia as Mock).mockReturnValue(false);
+    vi.clearAllMocks();
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.resetAllMocks();
+    Object.defineProperty(window, 'HTMLDialogElement', {
+      writable: true,
+      value: originalHTMLDialogElement,
+    });
   });
 
   it('should forward a ref', () => {
@@ -228,7 +252,7 @@ describe('DateInput', () => {
     it('should focus the first input when clicking the label', async () => {
       render(<DateInput {...props} />);
 
-      await userEvent.click(screen.getByText('Date of birth'));
+      await userEvent.click(screen.getAllByText('Date of birth')[0]);
 
       expect(screen.getAllByRole('spinbutton')[0]).toHaveFocus();
     });
@@ -319,7 +343,6 @@ describe('DateInput', () => {
 
       expect(ref.current).toHaveValue('2000-01-12');
       expect(onChange).toHaveBeenCalled();
-      expect(openCalendarButton).toHaveFocus();
     });
 
     it('should allow users to clear the date', async () => {
@@ -348,7 +371,11 @@ describe('DateInput', () => {
 
       expect(ref.current).toHaveValue('');
       expect(onChange).toHaveBeenCalled();
-      expect(openCalendarButton).toHaveFocus();
+      expect(
+        screen.getByRole('button', {
+          name: /change date/i,
+        }),
+      ).toHaveFocus();
     });
 
     it('should close calendar on outside click', async () => {
@@ -452,7 +479,9 @@ describe('DateInput', () => {
 
         const closeButton = screen.getByRole('button', { name: /close/i });
         await userEvent.click(closeButton);
-
+        act(() => {
+          vi.advanceTimersByTime(ANIMATION_DURATION);
+        });
         expect(calendarDialog).not.toBeVisible();
         expect(ref.current).toHaveValue('2000-01-12');
         expect(onChange).not.toHaveBeenCalled();

packages/circuit-ui/components/DateInput/DateInput.stories.tsx

@@ -14,6 +14,7 @@
  */
 
 import { useState } from 'react';
+import { userEvent, within } from '@storybook/test';
 
 import { Stack } from '../../../../.storybook/components/index.js';
 
@@ -94,13 +95,24 @@ export const Validations = (args: DateInputProps) => (
 
 Validations.args = baseArgs;
 
+const openCalendar = async ({
+  canvasElement,
+}: {
+  canvasElement: HTMLCanvasElement;
+}) => {
+  const canvas = within(canvasElement);
+  const referenceEl = canvas.getAllByRole('button');
+
+  await userEvent.click(referenceEl[0]);
+};
+
 export const Optional = (args: DateInputProps) => <DateInput {...args} />;
 
 Optional.args = {
   ...baseArgs,
   optionalLabel: 'optional',
 };
-
+Optional.play = openCalendar;
 export const Readonly = (args: DateInputProps) => <DateInput {...args} />;
 
 Readonly.args = {