[Numeric Input] Update UI of editor (#2015)

## Summary:
Many of the editor functions for Numeric Input were hidden behind a small configuration icon button, which was unintuitive. Also, the tooltip icons for the settings didn't align with their setting, making it difficult to understand where to get help for the options.

To fix these issues, and to modernize the UI, the editor screen was re-organized to make all functions easily findable. Also, Wonder Blocks components were used instead of custom items to make the editor experience consistent with other parts of the app.

Issue: LEMS-2456

## Test plan:
1. Open the [Editor Demo page](https://650db21c3f5d1b2f13c02952-ptwmwtryzl.chromatic.com/?path=/story/perseuseditor-editorpage--demo) in Storybook.
2. Add a Numeric Input widget to the page.
3. Using the revised UI, all settings options function just like with the original editor.

## Affected behavior:
### Before
![Editor - Before](https://github.com/user-attachments/assets/6c76991d-fe61-4c27-97a4-e2ca6967bfd5)

### After
![Editor - After](https://github.com/user-attachments/assets/27846422-6233-4884-b8f4-1a7d9b8eba47)

Author: mark-fitzgerald

Reviewers: SonicScrewdriver, mark-fitzgerald

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x)

Pull Request URL: #2015

Author: mark-fitzgerald

.changeset/flat-peaches-know.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+[Numeric Input] Re-organize editor and improve its UI

.changeset/nice-turkeys-dress.md

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

.eslintrc.js

@@ -324,6 +324,9 @@ module.exports = {
         "react/no-string-refs": "off", // on in react/recommended, but we have #legacy-code
         "react/no-find-dom-node": "off", // on in react/recommended, but we have #legacy-code
         "react/display-name": "off", // on in react/recommended, but doesn't seem that useful to fix
+        // On in react/recommended, but doesn't seem helpful
+        // (requires quotes to be escaped to catch developer mistakes when other characters are misplaced)
+        "react/no-unescaped-entities": "off",
         // This rule results in false-positives when using some types of React
         // components (such as functional components or hooks). Since
         // TypeScript is already checking that components are only using props

package.json

@@ -32,6 +32,7 @@
         "@khanacademy/mathjax-renderer": "^2.1.1",
         "@khanacademy/wonder-blocks-button": "7.0.5",
         "@khanacademy/wonder-blocks-layout": "3.0.5",
+        "@khanacademy/wonder-blocks-pill": "3.0.5",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@popperjs/core": "^2.10.2",
         "@rollup/plugin-alias": "^3.1.9",

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/components/perseus-editor-accordion.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
+    animated?: boolean;
     children: React.ReactNode | React.ReactNode[];
     header: string | React.ReactElement;
     expanded?: boolean;
@@ -16,8 +17,15 @@ type Props = {
 };
 
 const PerseusEditorAccordion = (props: Props) => {
-    const {children, header, expanded, containerStyle, panelStyle, onToggle} =
-        props;
+    const {
+        animated,
+        children,
+        header,
+        expanded,
+        containerStyle,
+        panelStyle,
+        onToggle,
+    } = props;
 
     return (
         <View
@@ -27,6 +35,7 @@ const PerseusEditorAccordion = (props: Props) => {
             className="perseus-editor-accordion"
         >
             <AccordionSection
+                animated={animated}
                 expanded={expanded}
                 onToggle={onToggle}
                 style={[styles.container, containerStyle]}

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

@@ -218,12 +218,33 @@
         &.leave {
             display: none;
         }
+
+        .inline-options {
+            float: inline-start; /* flexbox and inline-block don't work on <legend> elements, so going old-school here */
+            line-height: 24px; /* for alignment with items in same line (like pills or buttons) */
+            padding-inline-end: 0.5em;
+        }
+
+        .tooltip-for-legend {
+            display: inline-block;
+            line-height: 24px;
+        }
     }
 
     // Are any widgets capable of overflowing in the editor interface?
     .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 {
@@ -232,6 +253,33 @@
     margin-right: 10px;
 }
 
+.perseus-editor-accordion-container {
+    display: inline-grid;
+    width: 100%;
+
+    &.collapsed {
+        grid-template-rows: 0fr;
+        min-height: 0;
+        visibility: hidden;
+        transition:
+            all 0.25s step-end,
+            grid-template-rows 0.25s;
+    }
+
+    &.expanded {
+        grid-template-rows: 1fr;
+        min-height: 100%;
+        visibility: visible;
+        transition: grid-template-rows 0.5s;
+    }
+
+    .perseus-editor-accordion-content {
+        overflow: hidden;
+        margin: 0 -1px; /* allows focus ring on accordion to show */
+        padding: 0 1px;
+    }
+}
+
 .perseus-editor-widgets-selectors {
     background-color: @grayExtraLight;
     border: 1px solid @grayLighter;
@@ -538,25 +586,27 @@
 // Input Number / Text Input
 //
 .perseus-input-number-editor {
-    font-size: 14px;
-
-    .ui-title,
-    .msg-title {
-        display: inline-block;
-        text-align: center;
-    }
-
-    .ui-title {
-        width: 100px;
-    }
-
-    .msg-title {
-        margin-left: 5px;
-        width: 230px;
+    font-family: Lato, "Noto Sans", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+
+    .answer-option {
+        .unsimplified-options {
+            min-height: 48px;
+        }
     }
 
-    .options-container {
-        padding-left: 30px;
+    .perseus-textarea-pair {
+        font-size: 16px;
+        .perseus-textarea-underlay {
+            margin-bottom: 26px;
+        }
+        textarea {
+            background-color: #ffffff;
+            border: 1px solid rgba(33, 36, 44, 0.5);
+            border-radius: 4px;
+        }
     }
 
     .input-answer-editor-value,
@@ -565,38 +615,59 @@
     }
 
     .input-answer-editor-value-container {
-        border: @widgetBorder;
-        border-radius: @widgetBorderRadius;
-        float: left;
-        .size(100px, 53px);
-        overflow: hidden;
-        position: relative;
+        display: block;
+
+        input {
+            background: #ffffff;
+            border: 1px solid rgba(33, 36, 44, 0.5);
+            border-radius: 4px;
+            color: #21242c;
+            font-family: Lato, "Noto Sans", sans-serif;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 20px;
+            outline-offset: -2px;
+        }
 
         .numeric-input-value {
-            border: 0;
-            font-size: 13px;
-            outline-offset: -3px;
-            width: 100%;
+            margin-left: 8px;
+            width: 6em;
+        }
+
+        .max-error-input-value {
+            display: none;
+            width: 3em;
+        }
+
+        .max-error-plusmn {
+            cursor: default;
+            display: none;
+            height: 32px;
+            padding-top: 4px;
+            text-align: center;
+            vertical-align: top;
+            width: 1em;
         }
 
-        &.with-max-error {
+        &.with-max-error,
+        &:focus-within {
             .numeric-input-value {
-                width: 60%;
+                border-right: none;
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
             }
-        }
 
-        .max-error-container {
-            display: inline-block;
-            width: 40%;
-            .max-error-plusmn {
-                cursor: default;
+            .max-error-input-value {
+                border-left: none;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
                 display: inline-block;
-                width: 20%;
             }
-            .number-input {
-                border: 0;
-                font-size: 13px;
-                width: 80%;
+
+            .max-error-plusmn {
+                border-top: 1px solid rgba(33, 36, 44, 0.5);
+                border-bottom: 1px solid rgba(33, 36, 44, 0.5);
+                display: inline-block;
             }
         }
     }