From fd10c294a352642f1f98a8c2d70eb4fbd7d93a22 Mon Sep 17 00:00:00 2001 From: Osama Abdul Latif <62595605+OsamaAbdellateef@users.noreply.github.com> Date: Mon, 14 Aug 2023 12:53:59 +0300 Subject: [PATCH] [DST-65]: Adding Space for Popover based on theme (#3232) Co-authored-by: Sebastian Sebald --- .changeset/smooth-snakes-speak.md | 8 ++++++++ .../src/Autocomplete/Autocomplete.test.tsx | 7 +++++++ packages/components/src/ComboBox/ComboBox.test.tsx | 7 +++++++ .../components/src/DatePicker/DatePicker.test.tsx | 7 +++++++ packages/components/src/Menu/Menu.test.tsx | 8 ++++++++ packages/components/src/Overlay/Popover.test.tsx | 7 +++++++ packages/components/src/Overlay/Popover.tsx | 7 ++++++- packages/components/src/Select/Select.test.tsx | 7 +++++++ packages/system/src/types/theme.ts | 1 + themes/theme-b2b/src/components/Popover.styles.ts | 12 ++++++++++++ themes/theme-b2b/src/components/index.ts | 1 + themes/theme-core/src/components/Popover.styles.ts | 12 ++++++++++++ themes/theme-core/src/components/index.ts | 1 + 13 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 .changeset/smooth-snakes-speak.md create mode 100644 themes/theme-b2b/src/components/Popover.styles.ts create mode 100644 themes/theme-core/src/components/Popover.styles.ts diff --git a/.changeset/smooth-snakes-speak.md b/.changeset/smooth-snakes-speak.md new file mode 100644 index 0000000000..c5ec2c4853 --- /dev/null +++ b/.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 diff --git a/packages/components/src/Autocomplete/Autocomplete.test.tsx b/packages/components/src/Autocomplete/Autocomplete.test.tsx index 07abbd0b47..465c0f8b78 100644 --- a/packages/components/src/Autocomplete/Autocomplete.test.tsx +++ b/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(), diff --git a/packages/components/src/ComboBox/ComboBox.test.tsx b/packages/components/src/ComboBox/ComboBox.test.tsx index 63384fcce3..03c4f458ce 100644 --- a/packages/components/src/ComboBox/ComboBox.test.tsx +++ b/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'], + }, + }, + }), }, }; diff --git a/packages/components/src/DatePicker/DatePicker.test.tsx b/packages/components/src/DatePicker/DatePicker.test.tsx index 38f79aa9e1..d1e8776f0e 100644 --- a/packages/components/src/DatePicker/DatePicker.test.tsx +++ b/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(), diff --git a/packages/components/src/Menu/Menu.test.tsx b/packages/components/src/Menu/Menu.test.tsx index 940fab1b96..dafb7d66e8 100644 --- a/packages/components/src/Menu/Menu.test.tsx +++ b/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'], + }, + }, + }), }, }; diff --git a/packages/components/src/Overlay/Popover.test.tsx b/packages/components/src/Overlay/Popover.test.tsx index c5e398e3fc..f70380cd44 100644 --- a/packages/components/src/Overlay/Popover.test.tsx +++ b/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(), }, }; diff --git a/packages/components/src/Overlay/Popover.tsx b/packages/components/src/Overlay/Popover.tsx index 58b7956da8..47e847ac0d 100644 --- a/packages/components/src/Overlay/Popover.tsx +++ b/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 { @@ -54,13 +55,17 @@ const PopoverWrapper = forwardRef( }, state ); + const classNames = useClassNames({ + component: 'Popover', + variant: placement, + }); return ( {!isNonModal && }
; Header?: ComponentStyleFunction; Headline?: ComponentStyleFunction; + Popover?: ComponentStyleFunction; HelpText?: Record< 'container' | 'icon', ComponentStyleFunction diff --git a/themes/theme-b2b/src/components/Popover.styles.ts b/themes/theme-b2b/src/components/Popover.styles.ts new file mode 100644 index 0000000000..6384bf9ac1 --- /dev/null +++ b/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: [''], + }, + }, +}); diff --git a/themes/theme-b2b/src/components/index.ts b/themes/theme-b2b/src/components/index.ts index c87ee94b14..9fd9222a47 100644 --- a/themes/theme-b2b/src/components/index.ts +++ b/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'; diff --git a/themes/theme-core/src/components/Popover.styles.ts b/themes/theme-core/src/components/Popover.styles.ts new file mode 100644 index 0000000000..6384bf9ac1 --- /dev/null +++ b/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: [''], + }, + }, +}); diff --git a/themes/theme-core/src/components/index.ts b/themes/theme-core/src/components/index.ts index 1cf6745d86..a40d4ea334 100644 --- a/themes/theme-core/src/components/index.ts +++ b/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';