[Numeric Input] - Update editor screen to be more organized

.changeset/nice-turkeys-dress.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+[Numeric Input] - Adjust editor to organize settings more logically

packages/perseus-editor/src/components/heading.tsx

@@ -51,6 +51,7 @@ const styles = StyleSheet.create({
         marginInline: -10,
         backgroundColor: color.offBlack8,
         padding: spacing.xSmall_8,
+        width: "calc(100% + 20px)",
     },
     heading: {
         flexDirection: "row",

packages/perseus-editor/src/styles/perseus-editor.less

@@ -224,6 +224,16 @@
     .categorizer-container {
         overflow-x: scroll;
     }
+
+    .section-accordion {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .delete-item-button {
+        align-self: center;
+        padding-right: 0.5em;
+    }
 }
 
 .perseus-widget-editor-title-id > svg {

packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx

@@ -1,4 +1,5 @@
 import {Dependencies} from "@khanacademy/perseus";
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {render, screen, waitFor} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
@@ -21,7 +22,9 @@ describe("numeric-input-editor", () => {
     });
 
     it("should render", async () => {
-        render(<NumericInputEditor onChange={() => undefined} />);
+        render(<NumericInputEditor onChange={() => undefined} />, {
+            wrapper: RenderStateRoot,
+        });
 
         await waitFor(async () =>
             expect(
@@ -33,7 +36,9 @@ describe("numeric-input-editor", () => {
     it("should be possible to select normal width", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
         await userEvent.click(
             screen.getByRole("button", {name: "Normal (80px)"}),
@@ -48,7 +53,9 @@ describe("numeric-input-editor", () => {
     it("should be possible to select small width", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
         await userEvent.click(
             screen.getByRole("button", {name: "Small (40px)"}),
@@ -63,7 +70,9 @@ describe("numeric-input-editor", () => {
     it("should be possible to select right alignment", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
         await userEvent.click(
             screen.getByRole("checkbox", {name: "Right alignment"}),
@@ -75,7 +84,9 @@ describe("numeric-input-editor", () => {
     it("should be possible to select coefficient", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
         await userEvent.click(
             screen.getByRole("checkbox", {name: "Coefficient"}),
@@ -87,9 +98,10 @@ describe("numeric-input-editor", () => {
     it("should be possible to select strictly match only these formats", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
-        await userEvent.click(screen.getByLabelText("Toggle options"));
         await userEvent.click(
             screen.getByRole("checkbox", {
                 name: "Strictly match only these formats",
@@ -114,7 +126,9 @@ describe("numeric-input-editor", () => {
     it("should be possible to update label text", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
         const input = screen.getByRole("textbox", {
             name: "Aria label",
@@ -128,26 +142,13 @@ describe("numeric-input-editor", () => {
         );
     });
 
-    it("should be possible to toggle options", async () => {
-        render(<NumericInputEditor onChange={() => {}} />);
-
-        await userEvent.click(
-            screen.getByRole("link", {name: "Toggle options"}),
-        );
-
-        expect(
-            screen.getByText("Unsimplified answers are"),
-        ).toBeInTheDocument();
-    });
-
     it("should be possible to set unsimplified answers to ungraded", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
-        await userEvent.click(
-            screen.getByRole("link", {name: "Toggle options"}),
-        );
         await userEvent.click(screen.getByRole("button", {name: "ungraded"}));
 
         expect(onChangeMock).toBeCalledWith(
@@ -162,11 +163,10 @@ describe("numeric-input-editor", () => {
     it("should be possible to set unsimplified answers to accepted", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
-        await userEvent.click(
-            screen.getByRole("link", {name: "Toggle options"}),
-        );
         await userEvent.click(screen.getByRole("button", {name: "accepted"}));
 
         expect(onChangeMock).toBeCalledWith(
@@ -181,11 +181,10 @@ describe("numeric-input-editor", () => {
     it("should be possible to set unsimplified answers to wrong", async () => {
         const onChangeMock = jest.fn();
 
-        render(<NumericInputEditor onChange={onChangeMock} />);
+        render(<NumericInputEditor onChange={onChangeMock} />, {
+            wrapper: RenderStateRoot,
+        });
 
-        await userEvent.click(
-            screen.getByRole("link", {name: "Toggle options"}),
-        );
         await userEvent.click(screen.getByRole("button", {name: "wrong"}));
 
         expect(onChangeMock).toBeCalledWith(
@@ -210,11 +209,10 @@ describe("numeric-input-editor", () => {
         it(`should be possible to set suggested answer format to: ${name}`, async () => {
             const onChangeMock = jest.fn();
 
-            render(<NumericInputEditor onChange={onChangeMock} />);
+            render(<NumericInputEditor onChange={onChangeMock} />, {
+                wrapper: RenderStateRoot,
+            });
 
-            await userEvent.click(
-                screen.getByRole("link", {name: "Toggle options"}),
-            );
             await userEvent.click(screen.getByTitle(name));
 
             expect(onChangeMock).toBeCalledWith(