Show whether the preview is open on the Preview button

CHANGELOG.md

@@ -6,6 +6,10 @@ Lines marked **Upgrade step** need you to act after updating.
 
 ## [Unreleased]
 
+### Changed
+
+-   In the form editor, the Preview button is white while the side preview is open, so you can see the preview is on. (#301)
+
 ### Fixed
 
 -   Clicking "Log in" on the two-factor code screen now sends the code. Before, only Enter worked. (#299)

resources/js/components/Factory/Preview/PreviewToggle.test.ts

@@ -0,0 +1,37 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import PreviewToggle from "./PreviewToggle.vue";
+
+const mountToggle = (open: boolean) =>
+    mount(PreviewToggle, {
+        props: { modelValue: open, "onUpdate:modelValue": () => {} },
+    });
+
+describe("preview toggle", () => {
+    it("is a light, pressed button while the preview is open", () => {
+        const button = mountToggle(true).get("button");
+
+        expect(button.attributes("aria-pressed")).toBe("true");
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(["bg-white", "text-grey-900", "hover:bg-grey-100"]),
+        );
+        expect(button.classes()).not.toContain("text-white");
+    });
+
+    it("stays dark with a thin border while it is closed", () => {
+        const button = mountToggle(false).get("button");
+
+        expect(button.attributes("aria-pressed")).toBe("false");
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(["border-grey-600", "text-white", "hover:bg-grey-700"]),
+        );
+        expect(button.classes()).not.toContain("bg-white");
+    });
+
+    it("flips the state on click", async () => {
+        const wrapper = mount(PreviewToggle, { props: { modelValue: false } });
+        await wrapper.get("button").trigger("click");
+
+        expect(wrapper.emitted("update:modelValue")).toEqual([[true]]);
+    });
+});

resources/js/components/Factory/Preview/PreviewToggle.vue

@@ -3,8 +3,12 @@
   <button
     type="button"
     :aria-pressed="open"
-    class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"
-    :class="open ? 'border-grey-500 bg-grey-700' : 'border-grey-600'"
+    class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"
+    :class="
+      open
+        ? 'border-white bg-white text-grey-900 hover:bg-grey-100'
+        : 'border-grey-600 text-white hover:bg-grey-700'
+    "
     @click="open = !open"
   >
     <D9Icon name="eye" /><span class="sr-only xl:not-sr-only">Preview</span>