diff --git a/.changeset/legal-pianos-own.md b/.changeset/legal-pianos-own.md new file mode 100644 index 0000000000..a34ae1e995 --- /dev/null +++ b/.changeset/legal-pianos-own.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-svelte": patch +--- + +Popover: add the ability to add classes to the s-popover--content element diff --git a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte b/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte index aa97f5ec68..4a6e078d87 100644 --- a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte +++ b/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte @@ -267,3 +267,20 @@

Last Event: {lastEvent}

+ + +
+ + + + + + No padding
+ No margin +
+
+
+
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts index e016f8c0b4..2aa11b7fc4 100644 --- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts +++ b/packages/stacks-svelte/src/components/Popover/Popover.test.ts @@ -142,7 +142,7 @@ describe("Popover", () => { expect(screen.getByRole("menu")).to.exist; }); - it("add classes to the popover content when the class prop is provided", async () => { + it("add classes to the s-popover element when the class prop is provided", async () => { render(Popover, { props: { ...defaultProps, @@ -165,6 +165,34 @@ describe("Popover", () => { expect(screen.getByRole("dialog")).to.have.class("custom-class"); }); + it("add classes to the s-popover--content element when the contentClass prop is provided", async () => { + const { container } = render(Popover, { + props: { + ...defaultProps, + autoshow: true, + children: createSvelteComponentsSnippet([ + defaultChildren.reference, + { + component: PopoverContent, + props: { + contentClass: "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"); + }); + it("add classes to the popover close button component when the class prop is provided", 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..e50ece48ee 100644 --- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte +++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte @@ -10,16 +10,25 @@ */ role?: string | null; /** - * Additional CSS classes added to the element + * Additional CSS classes added to the s-popover element */ class?: string; + /** + * Additional CSS classes added to the s-popover--content element + */ + contentClass?: string; /** * Children snippet */ children?: Snippet; } - let { role = null, class: className = "", children }: Props = $props(); + let { + role = null, + class: className = "", + contentClass = "", + children, + }: Props = $props(); let pstate = usePopoverContext("PopoverContent"); @@ -34,6 +43,14 @@ return result; }); + let contentClasses = $derived.by(() => { + let result = "s-popover--content"; + if (contentClass) { + result += " " + contentClass; + } + return result; + }); + let computedClass = $derived( `${classes}${pstate.visible ? " is-visible" : ""}` ); @@ -58,7 +75,7 @@ onfocusout={pstate.closeTooltip} data-popper-placement={pstate.computedPlacement} > -
+
{@render children?.()}