@marimo-team/islands 0.23.16-dev76 → 0.23.16-dev8

package/src/plugins/impl/__tests__/FormPlugin.test.tsx

@@ -0,0 +1,162 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FormWrapper } from "../FormPlugin";
+
+describe("FormPlugin", () => {
+  it("submits the form on Ctrl+Enter and calls setValue", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+    });
+  });
+
+  it("submits the form on Ctrl+Enter and runs validation when shouldValidate is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue("Validation failed message");
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={true}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(validate).toHaveBeenCalledWith({ value: "new-val" });
+      // should not submit (setValue not called) due to validation failure
+      expect(setValue).not.toHaveBeenCalled();
+      // error message displayed
+      expect(screen.getByText("Validation failed message")).toBeInTheDocument();
+    });
+  });
+
+  it("clears inputs on submission when clearOnSubmit is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    let mockUIElement: (HTMLElement & { reset?: () => void }) | null = null;
+    const mockReset = vi.fn();
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={true}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <div
+          ref={(el) => {
+            if (el && !mockUIElement) {
+              mockUIElement = document.createElement("marimo-ui-element");
+              mockUIElement.setAttribute("data-testid", "mock-ui-element");
+              mockUIElement.reset = mockReset;
+              const inputEl = document.createElement("input");
+              inputEl.type = "text";
+              mockUIElement.appendChild(inputEl);
+              el.appendChild(mockUIElement);
+            }
+          }}
+        />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+      expect(mockReset).toHaveBeenCalled();
+    });
+  });
+
+  it("does not submit on Shift+Enter", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Shift+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+
+    expect(setValue).not.toHaveBeenCalled();
+    expect(validate).not.toHaveBeenCalled();
+  });
+});

package/src/plugins/layout/CalloutPlugin.tsx

@@ -18,6 +18,10 @@ interface Data {
    * The kind of callout
    */
   kind: Intent;
+  /**
+   * An optional bold title line
+   */
+  title?: string;
 }
 
 export class CalloutPlugin implements IStatelessPlugin<Data> {
@@ -26,9 +30,12 @@ export class CalloutPlugin implements IStatelessPlugin<Data> {
   validator = z.object({
     html: z.string(),
     kind: zodIntent,
+    title: z.string().optional(),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
-    return <CalloutOutput html={data.html} kind={data.kind} />;
+    return (
+      <CalloutOutput html={data.html} kind={data.kind} title={data.title} />
+    );
   }
 }

package/src/stories/callout.stories.tsx

@@ -71,3 +71,15 @@ export const Success = {
 
   name: "success",
 };
+
+export const WithTitle = {
+  render: () => (
+    <CalloutOutput
+      html="<p>CalloutOutput with a title and <strong>HTML</strong></p>"
+      kind="warn"
+      title="Watch out"
+    />
+  ),
+
+  name: "with title",
+};

package/src/components/editor/output/CalloutOutput.styles.ts

@@ -1,22 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { cva } from "class-variance-authority";
-
-export const calloutStyles = cva(
-  "border rounded-lg p-12 mt-12 mb-12 text-foreground shadow-[4px_4px_0px_0px]",
-  {
-    variants: {
-      kind: {
-        neutral: "border-(--slate-9) shadow-(color:--slate-8)",
-        // @deprecated, use danger instead
-        alert: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
-        info: "bg-(--sky-1) border-(--sky-8) shadow-(color:--sky-7)",
-        danger: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
-        warn: "bg-(--amber-2) border-(--amber-9) shadow-(color:--amber-8)",
-        success: "bg-(--grass-2) border-(--grass-9) shadow-(color:--grass-8)",
-      },
-    },
-    defaultVariants: {
-      kind: "neutral",
-    },
-  },
-);