@khanacademy/math-input 16.5.1 → 17.0.1

package/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap

@@ -594,12 +594,12 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
-            data-test-id="PLUS"
+            class="default_xu2jcg-o_O-inlineStyles_771h91"
+            data-test-id="FRAC"
           >
             <button
               aria-disabled="false"
-              aria-label="Plus"
+              aria-label="Fraction, excluding the current expression"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -618,13 +618,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                   >
                     <path
                       clip-rule="evenodd"
-                      d="M12 20c0-.5523.4477-1 1-1h14c.5523 0 1 .4477 1 1s-.4477 1-1 1H13c-.5523 0-1-.4477-1-1z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M20 28c-.5523 0-1-.4477-1-1V13c0-.5523.4477-1 1-1s1 .4477 1 1v14c0 .5523-.4477 1-1 1z"
+                      d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
                       fill="#21242C"
                       fill-rule="evenodd"
                     />
@@ -634,12 +628,12 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_9isr9w"
-            data-test-id="MINUS"
+            class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
+            data-test-id="PLUS"
           >
             <button
               aria-disabled="false"
-              aria-label="Minus"
+              aria-label="Plus"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -662,18 +656,24 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                       fill="#21242C"
                       fill-rule="evenodd"
                     />
+                    <path
+                      clip-rule="evenodd"
+                      d="M20 28c-.5523 0-1-.4477-1-1V13c0-.5523.4477-1 1-1s1 .4477 1 1v14c0 .5523-.4477 1-1 1z"
+                      fill="#21242C"
+                      fill-rule="evenodd"
+                    />
                   </svg>
                 </div>
               </div>
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_771h91"
-            data-test-id="FRAC"
+            class="default_xu2jcg-o_O-inlineStyles_9isr9w"
+            data-test-id="MINUS"
           >
             <button
               aria-disabled="false"
-              aria-label="Fraction, excluding the current expression"
+              aria-label="Minus"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -692,7 +692,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                   >
                     <path
                       clip-rule="evenodd"
-                      d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
+                      d="M12 20c0-.5523.4477-1 1-1h14c.5523 0 1 .4477 1 1s-.4477 1-1 1H13c-.5523 0-1-.4477-1-1z"
                       fill="#21242C"
                       fill-rule="evenodd"
                     />
@@ -1647,12 +1647,12 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
-            data-test-id="PLUS"
+            class="default_xu2jcg-o_O-inlineStyles_771h91"
+            data-test-id="FRAC"
           >
             <button
               aria-disabled="false"
-              aria-label="Plus"
+              aria-label="Fraction, excluding the current expression"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -1671,13 +1671,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                   >
                     <path
                       clip-rule="evenodd"
-                      d="M12 20c0-.5523.4477-1 1-1h14c.5523 0 1 .4477 1 1s-.4477 1-1 1H13c-.5523 0-1-.4477-1-1z"
-                      fill="#21242C"
-                      fill-rule="evenodd"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M20 28c-.5523 0-1-.4477-1-1V13c0-.5523.4477-1 1-1s1 .4477 1 1v14c0 .5523-.4477 1-1 1z"
+                      d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
                       fill="#21242C"
                       fill-rule="evenodd"
                     />
@@ -1687,12 +1681,12 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_9isr9w"
-            data-test-id="MINUS"
+            class="default_xu2jcg-o_O-inlineStyles_wb5o9j"
+            data-test-id="PLUS"
           >
             <button
               aria-disabled="false"
-              aria-label="Minus"
+              aria-label="Plus"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -1715,18 +1709,24 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                       fill="#21242C"
                       fill-rule="evenodd"
                     />
+                    <path
+                      clip-rule="evenodd"
+                      d="M20 28c-.5523 0-1-.4477-1-1V13c0-.5523.4477-1 1-1s1 .4477 1 1v14c0 .5523-.4477 1-1 1z"
+                      fill="#21242C"
+                      fill-rule="evenodd"
+                    />
                   </svg>
                 </div>
               </div>
             </button>
           </div>
           <div
-            class="default_xu2jcg-o_O-inlineStyles_771h91"
-            data-test-id="FRAC"
+            class="default_xu2jcg-o_O-inlineStyles_9isr9w"
+            data-test-id="MINUS"
           >
             <button
               aria-disabled="false"
-              aria-label="Fraction, excluding the current expression"
+              aria-label="Minus"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
               type="button"
             >
@@ -1745,7 +1745,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                   >
                     <path
                       clip-rule="evenodd"
-                      d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
+                      d="M12 20c0-.5523.4477-1 1-1h14c.5523 0 1 .4477 1 1s-.4477 1-1 1H13c-.5523 0-1-.4477-1-1z"
                       fill="#21242C"
                       fill-rule="evenodd"
                     />

package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -140,7 +140,9 @@ describe("Keypad v2 with MathQuill", () => {
         userEvent.click(screen.getByRole("button", {name: "Square"}));
 
         // Assert
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
+            "a^{2}+b^{2}=c^{2}",
+        );
     });
 
     it("can write the Pythagorean theorem (complex)", () => {
@@ -177,7 +179,7 @@ describe("Keypad v2 with MathQuill", () => {
 
         // Assert
         expect(mockMathInputCallback).toHaveBeenLastCalledWith(
-            "c=\\sqrt{a^2+b^2}",
+            "c=\\sqrt{a^{2}+b^{2}}",
         );
     });
 
@@ -202,10 +204,12 @@ describe("Keypad v2 with MathQuill", () => {
         userEvent.click(screen.getByRole("button", {name: "b"}));
         userEvent.click(screen.getByRole("tab", {name: "Operators"}));
         userEvent.click(screen.getByRole("button", {name: "Square"}));
-        userEvent.type(screen.getByRole("textbox"), "=c^2");
+        userEvent.type(screen.getByRole("textbox"), "=c^{2}");
 
         // Assert
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
+            "a^{2}+b^{2}=c^{2}",
+        );
     });
 
     it("deletes from the input using the backspace button", () => {
@@ -242,7 +246,9 @@ describe("Keypad v2 with MathQuill", () => {
 
         // Assert
         // make sure the formula was typed correctly
-        expect(mockMathInputCallback).toHaveBeenLastCalledWith("a^2+b^2=c^2");
+        expect(mockMathInputCallback).toHaveBeenLastCalledWith(
+            "a^{2}+b^{2}=c^{2}",
+        );
 
         userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
         // delete: need 14 backspaces in MathQuill to delete `a^2+b^2=c^2`

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -31,7 +31,7 @@ export function V2KeypadWithMathquill() {
                 (baseConfig) => ({
                     ...baseConfig,
                     handlers: {
-                        edit: (_mathField) => {
+                        edit: (_mathField: MathFieldInterface) => {
                             setCursorContext(getCursorContext(_mathField));
                         },
                     },

package/src/components/keypad/shared-keys.tsx

@@ -37,21 +37,21 @@ export default function SharedKeys(props: Props) {
     return (
         <>
             <KeypadButton
-                keyConfig={Keys.PLUS}
+                keyConfig={Keys.FRAC}
                 onClickKey={onClickKey}
-                coord={[4, 0]}
+                coord={fractionCoord}
                 secondary
             />
             <KeypadButton
-                keyConfig={Keys.MINUS}
+                keyConfig={Keys.PLUS}
                 onClickKey={onClickKey}
-                coord={[5, 0]}
+                coord={[4, 0]}
                 secondary
             />
             <KeypadButton
-                keyConfig={Keys.FRAC}
+                keyConfig={Keys.MINUS}
                 onClickKey={onClickKey}
-                coord={fractionCoord}
+                coord={[5, 0]}
                 secondary
             />
 

package/src/full-keypad.stories.tsx

@@ -126,3 +126,17 @@ Everything.args = {
     showDismiss: true,
     extraKeys: ["a", "b", "c"],
 };
+
+export const EverythingMinusNavigationPad = Template.bind({});
+EverythingMinusNavigationPad.args = {
+    advancedRelations: true,
+    basicRelations: true,
+    divisionKey: true,
+    logarithms: true,
+    convertDotToTimes: false,
+    preAlgebra: true,
+    trigonometry: true,
+    expandedView: false,
+    showDismiss: true,
+    extraKeys: ["a", "b", "c"],
+};