[DST-65]: Adding Space for Popover based on theme (#3232)

Co-authored-by: Sebastian Sebald <[email protected]>

.changeset/smooth-snakes-speak.md

@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/system": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+---
+
+[DST-65]: Spacing of Popover can me customized based on themes

packages/components/src/Autocomplete/Autocomplete.test.tsx

@@ -47,6 +47,13 @@ const theme: Theme = {
       action: cva(),
     },
     Underlay: cva(),
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
     ListBox: {
       container: cva(),
       list: cva(),

packages/components/src/ComboBox/ComboBox.test.tsx

@@ -48,6 +48,13 @@ const theme: Theme = {
       section: cva(),
       sectionTitle: cva(),
     },
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
   },
 };
 

packages/components/src/DatePicker/DatePicker.test.tsx

@@ -50,6 +50,13 @@ const theme: Theme = {
       icon: cva(''),
       select: cva(''),
     },
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
     HelpText: {
       container: cva(),
       icon: cva(),

packages/components/src/Menu/Menu.test.tsx

@@ -24,6 +24,7 @@ const theme: Theme = {
   components: {
     Button: cva('disabled:bg-disabled-bg p-3'),
     Divider: cva(),
+
     Menu: {
       container: cva('bg-white focus:text-pink-600', {
         variants: {
@@ -54,6 +55,13 @@ const theme: Theme = {
       }),
     },
     Underlay: cva(),
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
   },
 };
 

packages/components/src/Overlay/Popover.test.tsx

@@ -13,6 +13,13 @@ import { setup } from '../test.utils';
 const theme: Theme = {
   name: 'test',
   components: {
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
     Underlay: cva(),
   },
 };

packages/components/src/Overlay/Popover.tsx

@@ -8,6 +8,7 @@ import { OverlayTriggerState } from '@react-stately/overlays';
 import { Overlay } from './Overlay';
 import { Underlay } from './Underlay';
 import { FocusScope } from '@react-aria/focus';
+import { useClassNames } from '@marigold/system';
 
 export interface PopoverProps
   extends Pick<AriaPopoverProps, 'triggerRef' | 'scrollRef' | 'isNonModal'> {
@@ -54,13 +55,17 @@ const PopoverWrapper = forwardRef(
       },
       state
     );
+    const classNames = useClassNames({
+      component: 'Popover',
+      variant: placement,
+    });
 
     return (
       <FocusScope restoreFocus>
         {!isNonModal && <Underlay {...underlayProps} />}
         <div
           {...popoverProps}
-          className={placement === 'top' ? 'mb-0.5' : 'mt-0.5'}
+          className={classNames}
           style={{
             ...popoverProps.style,
             minWidth: props.triggerRef.current

packages/components/src/Select/Select.test.tsx

@@ -28,6 +28,13 @@ const theme: Theme = {
       }),
       indicator: cva(),
     },
+    Popover: cva(['mt-0.5'], {
+      variants: {
+        variant: {
+          top: ['mb-0.5'],
+        },
+      },
+    }),
     HelpText: {
       container: cva('', {
         variants: {

packages/system/src/types/theme.ts

@@ -46,6 +46,7 @@ export type Theme = {
     Footer?: ComponentStyleFunction<string, string>;
     Header?: ComponentStyleFunction<string, string>;
     Headline?: ComponentStyleFunction<string, string>;
+    Popover?: ComponentStyleFunction<string, string>;
     HelpText?: Record<
       'container' | 'icon',
       ComponentStyleFunction<string, string>

themes/theme-b2b/src/components/Popover.styles.ts

@@ -0,0 +1,12 @@
+import { ThemeComponent, cva } from '@marigold/system';
+
+export const Popover: ThemeComponent<'Popover'> = cva(['mt-0.5'], {
+  variants: {
+    variant: {
+      top: ['mb-0.5'],
+      bottom: ['mt-0.5'],
+      right: [''],
+      left: [''],
+    },
+  },
+});

themes/theme-b2b/src/components/index.ts

@@ -39,3 +39,4 @@ export * from './Tooltip.styles';
 export * from './Slider.styles';
 export * from './Calendar.styles';
 export * from './DatePicker.styles';
+export * from './Popover.styles';

themes/theme-core/src/components/Popover.styles.ts

@@ -0,0 +1,12 @@
+import { ThemeComponent, cva } from '@marigold/system';
+
+export const Popover: ThemeComponent<'Popover'> = cva(['mt-0.5'], {
+  variants: {
+    variant: {
+      top: ['mb-0.5'],
+      bottom: ['mt-0.5'],
+      right: [''],
+      left: [''],
+    },
+  },
+});

themes/theme-core/src/components/index.ts

@@ -34,3 +34,4 @@ export * from './Text.styles';
 export * from './TextArea.styles';
 export * from './Tooltip.styles';
 export * from './Underlay.styles';
+export * from './Popover.styles';