Cleanup

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

@@ -154,8 +154,8 @@
 }
 
 .divider {
-  width: calc(100% + 32px) !important;
-  margin-left: -16px;
+  width: calc(100% + var(--cui-spacings-tera));
+  margin-left: calc(-1 * var(--cui-spacings-mega));
 }
 
 .buttons {
@@ -167,7 +167,8 @@
 
 .popover {
   max-width: min(410px, 100vw);
-  border: var(--cui-border-width-kilo) solid var(--cui-border-subtle) !important;
+  border-color: var(--cui-border-subtle);
+  box-shadow: none;
 }
 
 .popover::after {

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 = {

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

@@ -382,6 +382,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
               offset={4}
               placement={placement}
               closeButtonLabel={closeCalendarButtonLabel}
+              locale={locale}
               component={() => (
                 <IconButton
                   ref={calendarButtonRef}

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

@@ -1,36 +1,3 @@
-.item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  font-size: var(--cui-body-m-font-size);
-  line-height: var(--cui-body-m-line-height);
-  text-align: left;
-  background: var(--cui-bg-elevated) !important;
-}
-
-@media (max-width: 479px) {
-  .item {
-    padding: var(--cui-spacings-kilo) 0 !important;
-  }
-
-  .item:first-child {
-    padding-top: var(--cui-spacings-bit) !important;
-  }
-
-  .item:last-child {
-    padding-bottom: var(--cui-spacings-bit) !important;
-  }
-
-  .divider {
-    margin: var(--cui-spacings-byte) 0 !important;
-  }
-}
-
-.icon {
-  margin-right: var(--cui-spacings-kilo);
-}
-
 .trigger {
   display: inline-block;
 }
@@ -41,7 +8,6 @@
   background-color: var(--cui-bg-elevated);
   border: 1px solid var(--cui-border-subtle);
   border-radius: var(--cui-border-radius-byte);
-  box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
 }
 
 .content {
@@ -57,6 +23,7 @@
   visibility: hidden;
   background-color: var(--cui-bg-elevated);
   border: none;
+  box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
   opacity: 0;
 }
 
@@ -67,30 +34,37 @@
 }
 
 @media (min-width: 480px) {
-  .content:not(.with-actions) {
+  .content {
     padding: var(--cui-spacings-mega);
-    border: 1px solid var(--cui-border-normal);
+    border: var(--cui-border-width-kilo) solid var(--cui-border-normal);
     border-radius: var(--cui-border-radius-byte);
   }
 }
 
-.with-actions {
+.content.with-actions {
+  padding: 0;
+  border: none;
   border-radius: var(--cui-border-radius-byte);
 }
 
 .divider {
-  width: calc(100% - var(--cui-spacings-mega) * 2);
   margin: var(--cui-spacings-byte) auto;
 }
 
+@media (min-width: 480px) {
+  .divider {
+    width: calc(100% - var(--cui-spacings-mega) * 2);
+  }
+}
+
 .content.open::after {
   position: absolute;
   right: 0;
-  bottom: 1px;
+  bottom: 0;
   left: 0;
   display: block;
   height: var(--cui-spacings-kilo);
-  margin: 0 1px;
+  margin: 0;
   content: "";
   background: linear-gradient(
     color-mix(in sRGB, var(--cui-bg-elevated) 0%, transparent),
@@ -114,24 +88,28 @@
 .content[data-side="top"] .arrow {
   top: calc(100% - (var(--tooltip-arrow-size) / 2));
   left: calc(50% - (var(--tooltip-arrow-size) / 2));
+  margin-top: 1px;
   transform: rotate(45deg);
 }
 
 .content[data-side="right"] .arrow {
   right: calc(100% - (var(--tooltip-arrow-size) / 2));
   bottom: calc(50% - (var(--tooltip-arrow-size) / 2));
+  margin-right: 1px;
   transform: rotate(135deg);
 }
 
 .content[data-side="bottom"] .arrow {
   bottom: calc(100% - (var(--tooltip-arrow-size) / 2));
   left: calc(50% - (var(--tooltip-arrow-size) / 2));
+  margin-bottom: 1px;
   transform: rotate(225deg);
 }
 
 .content[data-side="left"] .arrow {
   bottom: calc(50% - (var(--tooltip-arrow-size) / 2));
   left: calc(100% - (var(--tooltip-arrow-size) / 2));
+  margin-left: 1px;
   transform: rotate(315deg);
 }
 

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

@@ -14,11 +14,12 @@
  */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { createRef } from 'react';
+import { createRef, type FC } from 'react';
+import { Add, Delete, type IconProps } from '@sumup-oss/icons';
 
 import { act, axe, render, userEvent, screen } from '../../util/test-utils.js';
 
-import { Popover, type PopoverProps } from './Popover.js';
+import { type Action, Popover, type PopoverProps } from './Popover.js';
 
 describe('Popover', () => {
   afterEach(() => {
@@ -56,6 +57,21 @@ describe('Popover', () => {
     onToggle: vi.fn(createStateSetter(true)),
   };
 
+  const actions: Action[] = [
+    {
+      onClick: vi.fn(),
+      children: 'Add',
+      icon: Add as FC<IconProps>,
+    },
+    { type: 'divider' },
+    {
+      onClick: vi.fn(),
+      children: 'Remove',
+      icon: Delete as FC<IconProps>,
+      destructive: true,
+    },
+  ];
+
   it('should forward a ref', () => {
     const ref = createRef<HTMLDialogElement>();
     renderPopover({ ...baseProps, ref });
@@ -140,6 +156,20 @@ describe('Popover', () => {
     expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
   });
 
+  it('should close the popover when clicking a popover item', async () => {
+    renderPopover({
+      ...baseProps,
+      children: undefined,
+      actions,
+    });
+
+    const popoverItems = screen.getAllByRole('menuitem');
+
+    await userEvent.click(popoverItems[0]);
+
+    expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+  });
+
   it('should move focus to the first popover item after opening', async () => {
     const isOpen = false;
     const onToggle = vi.fn(createStateSetter(isOpen));
@@ -187,8 +217,23 @@ describe('Popover', () => {
     });
   });
 
+  it('should render the popover with menu semantics by default ', async () => {
+    renderPopover({
+      ...baseProps,
+      children: undefined,
+      actions,
+    });
+
+    const menu = screen.getByRole('menu');
+    expect(menu).toBeVisible();
+    const menuitems = screen.getAllByRole('menuitem');
+    expect(menuitems.length).toBe(2);
+
+    await flushMicrotasks();
+  });
+
   it('should render the popover without menu semantics ', async () => {
-    renderPopover({ ...baseProps });
+    renderPopover({ ...baseProps, role: 'none' });
 
     const menu = screen.queryByRole('menu');
     expect(menu).toBeNull();
@@ -197,4 +242,17 @@ describe('Popover', () => {
 
     await flushMicrotasks();
   });
+
+  it('should hide dividers from the accessibility tree', async () => {
+    const { baseElement } = renderPopover({
+      ...baseProps,
+      children: undefined,
+      actions,
+    });
+
+    const dividers = baseElement.querySelectorAll('hr[aria-hidden="true"');
+    expect(dividers.length).toBe(1);
+
+    await flushMicrotasks();
+  });
 });

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

@@ -19,7 +19,7 @@ import { useState, type ReactNode } from 'react';
 
 import { Button } from '../Button/index.js';
 
-import { type Action, Popover } from './Popover.js';
+import { type Action, Popover, type PopoverProps } from './Popover.js';
 
 export default {
   title: 'Components/Popover',
@@ -54,14 +54,15 @@ function PopoverWrapper({ children }: { children: ReactNode }) {
   return <div style={{ width: 200, height: 250 }}>{children}</div>;
 }
 
-const popoverContent = <div style={{}}>Hello 👋</div>;
+const popoverContent = 'Hello 👋';
 
-export const Base = () => {
+export const Base = (args: PopoverProps) => {
   const [isOpen, setOpen] = useState(true);
 
   return (
     <PopoverWrapper>
       <Popover
+        {...args}
         isOpen={isOpen}
         fallbackPlacements={['bottom']}
         onToggle={setOpen}
@@ -70,19 +71,22 @@ export const Base = () => {
             Open popover
           </Button>
         )}
-      >
-        {popoverContent}
-      </Popover>
+      />
     </PopoverWrapper>
   );
 };
-export const WithActions = () => {
+
+Base.args = {
+  children: popoverContent,
+};
+
+export const WithActions = (args: PopoverProps) => {
   const [isOpen, setOpen] = useState(true);
 
   return (
     <PopoverWrapper>
       <Popover
-        actions={actions}
+        {...args}
         isOpen={isOpen}
         onToggle={setOpen}
         component={(props) => (
@@ -95,23 +99,30 @@ export const WithActions = () => {
   );
 };
 
-export const Offset = () => {
+WithActions.args = {
+  actions,
+};
+
+export const Offset = (args: PopoverProps) => {
   const [isOpen, setOpen] = useState(true);
 
   return (
     <PopoverWrapper>
       <Popover
+        {...args}
         isOpen={isOpen}
-        offset={20}
         onToggle={setOpen}
         component={(props) => (
           <Button size="s" variant="secondary" {...props}>
             Open popover
           </Button>
         )}
-      >
-        {popoverContent}
-      </Popover>
+      />
     </PopoverWrapper>
   );
 };
+
+Offset.args = {
+  actions,
+  offset: 20,
+};