diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts index 8d81b8934b..c1bf38f4fb 100644 --- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts +++ b/packages/stacks-svelte/src/components/Popover/Popover.test.ts @@ -195,6 +195,57 @@ describe("Popover", () => { ); }); + it("override classes to the popover content inner div when the innerContentClassOverride prop is provided", async () => { + const { container } = render(Popover, { + props: { + ...defaultProps, + autoshow: true, + children: createSvelteComponentsSnippet([ + defaultChildren.reference, + { + component: PopoverContent, + props: { + innerContentClassOverride: "custom-class", + children: createRawSnippet(() => ({ + render: () => "Popover Content", + })), + }, + }, + ]), + }, + }); + + const innerContentElement = container.querySelector( + ".s-popover--content" + ); + + expect(innerContentElement).to.exist; + expect(innerContentElement).to.have.class("custom-class"); + expect(innerContentElement).not.to.have.class("p12"); + expect(innerContentElement).not.to.have.class("mn12"); + }); + + it("popover content inner div should contain default classes when innerContentClassOverride prop is not provided", async () => { + const { container } = render(Popover, { + props: { + ...defaultProps, + autoshow: true, + children: createSvelteComponentsSnippet([ + defaultChildren.reference, + defaultChildren.content, + ]), + }, + }); + + const innerContentElement = container.querySelector( + ".s-popover--content" + ); + + expect(innerContentElement).to.exist; + expect(innerContentElement).to.have.class("p12"); + expect(innerContentElement).to.have.class("mn12"); + }); + it("should hide the popover content when the user click outside the popover", async () => { render(Popover, { props: { diff --git a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte index 2492d5ba02..f60c25759f 100644 --- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte +++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte @@ -13,13 +13,22 @@ * Additional CSS classes added to the element */ class?: string; + /** + * Override the default inner content class + */ + innerContentClassOverride?: string | null; /** * Children snippet */ children?: Snippet; } - let { role = null, class: className = "", children }: Props = $props(); + let { + role = null, + class: className = "", + innerContentClassOverride = null, + children, + }: Props = $props(); let pstate = usePopoverContext("PopoverContent"); @@ -34,6 +43,16 @@ return result; }); + let innerContentClass = $derived.by(() => { + let result = "s-popover--content "; + if (innerContentClassOverride != null) { + result += innerContentClassOverride; + } else { + result += "p12 mn12"; + } + return result; + }); + let computedClass = $derived( `${classes}${pstate.visible ? " is-visible" : ""}` ); @@ -58,7 +77,7 @@ onfocusout={pstate.closeTooltip} data-popper-placement={pstate.computedPlacement} > -