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}
>
-