Fix styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/date-range-picker/components.tsx

@@ -5,13 +5,7 @@ import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
 import { parseDate } from '@internationalized/date';
 
 export const WithLabel = () => {
-  return (
-    <DateRangePicker
-      label="Date range"
-      description="Select a start and end date for your event."
-      style={{ maxWidth: '360px' }}
-    />
-  );
+  return <DateRangePicker label="Date range" style={{ maxWidth: '280px' }} />;
 };
 
 export const Sizes = () => {

packages/ui/src/components/DateRangePicker/DateRangePicker.module.css

@@ -134,7 +134,6 @@
     color: var(--bui-fg-primary);
     caret-color: transparent;
     outline: none;
-    tabular-nums: unset;
     font-variant-numeric: tabular-nums;
 
     &[data-placeholder] {
@@ -210,7 +209,6 @@
   ============================================================ */
 
   .bui-DateRangePickerCalendar {
-    padding: var(--bui-space-3);
     width: fit-content;
     outline: none;
   }
@@ -318,7 +316,9 @@
       text-decoration: line-through;
     }
 
-    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not([data-selected]) {
+    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(
+        [data-selected]
+      ) {
       background-color: var(--bui-bg-neutral-2);
       border-radius: var(--bui-radius-full);
     }
@@ -330,7 +330,9 @@
     }
 
     /* Today marker */
-    &[data-today]:not([data-selected]):not([data-selection-start]):not([data-selection-end]) {
+    &[data-today]:not([data-selected]):not([data-selection-start]):not(
+        [data-selection-end]
+      ) {
       font-weight: var(--bui-font-weight-bold);
     }
 
@@ -380,10 +382,9 @@
 
   /* Round the left edge of ::before when the cell is the first in its row
      (our class is on an inner element inside <td>, hence td:first-child > *) */
-  .bui-DateRangePickerCalendarCell[data-selected]:not([data-selection-start]):is(
-      td:first-child > *,
-      [aria-disabled] + td > *
-    )::before {
+  .bui-DateRangePickerCalendarCell[data-selected]:not(
+      [data-selection-start]
+    ):is(td:first-child > *, [aria-disabled] + td > *)::before {
     border-start-start-radius: var(--bui-radius-full);
     border-end-start-radius: var(--bui-radius-full);
   }

packages/ui/src/components/DateRangePicker/DateRangePicker.tsx

@@ -15,18 +15,14 @@
  */
 
 import { forwardRef, useEffect } from 'react';
-import {
-  DateRangePicker as AriaDateRangePicker,
-  Popover,
-} from 'react-aria-components';
-import clsx from 'clsx';
+import { DateRangePicker as AriaDateRangePicker } from 'react-aria-components';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
+import { Popover } from '../Popover';
 import { DateRangePickerGroup } from './DateRangePickerGroup';
 import { DateRangePickerCalendar } from './DateRangePickerCalendar';
 import { useDefinition } from '../../hooks/useDefinition';
 import { DateRangePickerDefinition } from './definition';
-import { PopoverDefinition } from '../Popover/definition';
 import type { DateRangePickerProps } from './types';
 
 /**
@@ -42,7 +38,6 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       DateRangePickerDefinition,
       props,
     );
-    const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});
 
     const { classes, label, description, secondaryLabel } = ownProps;
 
@@ -75,7 +70,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
         />
         <DateRangePickerGroup dataSize={dataAttributes['data-size']} />
         <FieldError />
-        <Popover className={clsx(popoverOwnProps.classes.root)}>
+        <Popover hideArrow>
           <DateRangePickerCalendar />
         </Popover>
       </AriaDateRangePicker>