feat(popover): add the ability to add extra css classes to s-popover--content element

.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

packages/stacks-svelte/src/components/Popover/Popover.stories.svelte

@@ -267,3 +267,20 @@
         <p>Last Event: {lastEvent}</p>
     </div>
 </Story>
+
+<Story name="Custom Classes" asChild>
+    <div class="hmn3 d-flex fd-column flex__center">
+        <Popover id="custom-classes">
+            <PopoverReference>
+                <Button>Custom Classes</Button>
+            </PopoverReference>
+            <PopoverContent
+                class="w-auto wmn0"
+                contentClass="p0 mn0 ta-center fw-bold"
+            >
+                No padding<br />
+                No margin
+            </PopoverContent>
+        </Popover>
+    </div>
+</Story>

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: () => "<span>Popover Content</span>",
+                            })),
+                        },
+                    },
+                ]),
+            },
+        });
+
+        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: {

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}
 >
-    <div class="s-popover--content p12 mn12">
+    <div class={contentClasses}>
         <div class="ps-relative">
             {@render children?.()}
         </div>