@sproutsocial/seeds-react-panel 1.0.11 → 1.1.0

package/src/__tests__/Panel.test.tsx

@@ -192,6 +192,50 @@ describe("Panel (desktop / inline mode)", () => {
   });
 });
 
+describe("Panel (hybrid routing)", () => {
+  it("renders the Tailwind path (seeds-panel class, no sc- class) by default", () => {
+    renderPanel({ defaultOpen: true });
+
+    const panel = screen.getByRole("complementary");
+    expect(panel).toHaveClass("seeds-panel");
+    expect(panel.className).not.toMatch(/\bsc-/);
+  });
+
+  it("stays on the Tailwind path when only the domain width prop is set", () => {
+    // `width` is a Panel domain prop whose name also lives in
+    // STYLED_SYSTEM_PROPS. It is destructured out before the routing gate, so
+    // setting it must NOT force the styled path — it stays Tailwind and the
+    // width is applied inline as flex-basis.
+    renderPanel({ defaultOpen: true, width: 500 });
+
+    const panel = screen.getByRole("complementary");
+    expect(panel).toHaveClass("seeds-panel");
+    expect(panel.className).not.toMatch(/\bsc-/);
+    expect(panel).toHaveStyle("flex-basis: 500px");
+  });
+
+  it("routes to the styled-components path for COMMON styled-system props", () => {
+    // A margin prop (COMMON mixin) is a genuine styled-system prop, so the
+    // panel must fall back to the styled container: it is not the Tailwind
+    // element (no seeds-panel class) and only the styled path produces a
+    // styled-components rule (flex-grow: 0 is set statically on PanelContainer).
+    renderPanel({ defaultOpen: true, mt: 400 });
+
+    const panel = screen.getByRole("complementary");
+    expect(panel).not.toHaveClass("seeds-panel");
+    expect(panel).toHaveStyleRule("flex-grow", "0");
+  });
+
+  it("merges a forwarded className onto seeds-panel on the Tailwind path", () => {
+    renderPanel({ defaultOpen: true, className: "mx-200 p-300" });
+
+    const panel = screen.getByRole("complementary");
+    expect(panel).toHaveClass("seeds-panel");
+    expect(panel).toHaveClass("mx-200");
+    expect(panel).toHaveClass("p-300");
+  });
+});
+
 describe("Panel (mobile / drawer mode)", () => {
   let originalMatchMedia: typeof window.matchMedia | undefined;
 
@@ -392,9 +436,11 @@ describe("Panel (mobile / drawer mode)", () => {
 
     // The footer compensates for the Drawer popup's --bleed (3rem of overscroll
     // below the viewport) so its actions stay fully visible above the fold.
+    // The Tailwind footer is a plain <div> with the margin applied inline, so we
+    // assert the computed inline style rather than a styled-components rule.
     expect(
       screen.getByText("footer content").closest("[data-panel-footer]")
-    ).toHaveStyleRule("margin-bottom", "var(--bleed,0px)");
+    ).toHaveStyle("margin-bottom: var(--bleed, 0px)");
   });
 });
 

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/panel.css

@@ -0,0 +1,92 @@
+/**
+ * Seeds Panel component classes.
+ * Component-scoped port of the static styled-components chrome in styles.ts.
+ * Used by PanelTailwind.tsx and the Tailwind sub-component paths.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
+ * CSS variable definitions (and dark mode support).
+ *
+ * Runtime geometry (flex-basis, the gap margin, the direction shape, and the
+ * inner min-width/min-height) is applied as inline style on the elements, not
+ * here — the jsdom tests assert those computed values and CSS is not loaded in
+ * that environment. Only static chrome lives in these classes.
+ *
+ * All rules live in `@layer components` so consumer Tailwind utilities (e.g.
+ * mx-200, p-300, inline-flex) win the cascade and can override these component
+ * defaults, rather than tying/beating them on specificity. Unlayered rules
+ * would outrank any layered utility per the CSS cascade-layers spec.
+ */
+
+@layer components {
+  /* Container --------------------------------------------------------------- */
+
+  .seeds-panel {
+    background: var(--color-container-bg-base);
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: var(--radius-800);
+    transition: flex-basis var(--duration-medium) ease-in-out,
+      margin var(--duration-medium) ease-in-out;
+  }
+
+  .seeds-panel-inner {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Header ------------------------------------------------------------------ */
+
+  .seeds-panel-header {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-400);
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  /* Content ----------------------------------------------------------------- */
+
+  /* overflow-y (and, when headerless, display/flex-direction) are set inline
+     by PanelContentTailwind because the tests assert them under jsdom. */
+  .seeds-panel-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--space-450);
+    color: var(--color-text-body);
+  }
+
+  /* Headerless content renders flush; the children own all chrome/padding. */
+  .seeds-panel-content--headerless {
+    padding: 0;
+  }
+
+  /* Footer ------------------------------------------------------------------ */
+
+  /* margin-bottom (var(--bleed, 0px)) is set inline by PanelFooterTailwind. */
+  .seeds-panel-footer {
+    flex: 0 0 auto;
+    overflow: hidden;
+    padding: var(--space-450);
+  }
+
+  /* Mobile actions header --------------------------------------------------- */
+
+  .seeds-panel-mobile-actions-header {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--space-400);
+    padding-left: var(--space-450);
+    padding-right: var(--space-450);
+  }
+
+  .seeds-panel-mobile-actions-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+}