@khanacademy/math-input 10.0.0 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/math-input
 
+## 10.0.1
+
+### Patch Changes
+
+-   7b11736e: Fix cursor animation for MathInput
+
 ## 10.0.0
 
 ### Major Changes

package/dist/es/index.css

@@ -44,7 +44,7 @@
   outline: none !important;
 }
 .keypad-input .mq-editable-field .mq-root-block {
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
 .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
@@ -63,12 +63,11 @@
   margin-left: -1px !important;
   margin-right: -1px !important;
   opacity: 1 !important;
-  transition: opacity 500ms ease-out !important;
+  transition: opacity 300ms ease !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-cursor.mq-blink {
   opacity: 0 !important;
-  transition: opacity 500ms ease-in !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
@@ -77,12 +76,11 @@
   border-radius: 1px;
   opacity: 1 !important;
   padding: 0 4px 0 4px;
-  transition: border-color 500ms ease-out !important;
+  transition: border-color 300ms ease !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
   border-color: #1865f2 !important;
   opacity: 1 !important;
-  transition: border-color 500ms ease-in !important;
 }
 .keypad-input .mq-empty {
   background: transparent !important;

package/dist/index.css

@@ -44,7 +44,7 @@
   outline: none !important;
 }
 .keypad-input .mq-editable-field .mq-root-block {
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
 .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
@@ -63,12 +63,11 @@
   margin-left: -1px !important;
   margin-right: -1px !important;
   opacity: 1 !important;
-  transition: opacity 500ms ease-out !important;
+  transition: opacity 300ms ease !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-cursor.mq-blink {
   opacity: 0 !important;
-  transition: opacity 500ms ease-in !important;
   visibility: visible !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
@@ -77,12 +76,11 @@
   border-radius: 1px;
   opacity: 1 !important;
   padding: 0 4px 0 4px;
-  transition: border-color 500ms ease-out !important;
+  transition: border-color 300ms ease !important;
 }
 .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
   border-color: #1865f2 !important;
   opacity: 1 !important;
-  transition: border-color 500ms ease-in !important;
 }
 .keypad-input .mq-empty {
   background: transparent !important;

package/less/overrides.less

@@ -6,17 +6,18 @@
 @emptyBlockBorderRadius: 1px;
 @emptyBlockPadding: 4px;
 
-// NOTE(charlie): The 500ms animation length perfectly matches MathQuill's own
-// frequency for toggling the application of the .mq-blink class. If we were to
-// change this animation length at all, we'd need to modify MathQuill as well.
-@cursorAnimationDuration: 500ms;
+// Originally this was 500ms to match MathQuill's own
+// frequency for toggling the application of the .mq-blink class.
+// Due to the inconsistent nature of `setTimer` this caused weird
+// flickering in the animation, so keeping this below MQ's animation.
+@cursorAnimationDuration: 300ms;
 
 .keypad-input {
     outline: none !important;
 
     .mq-editable-field {
         .mq-root-block {
-            overflow-x: scroll;
+            overflow-x: auto;
         }
 
         .mq-cursor:not(:only-child),
@@ -40,13 +41,12 @@
 
             // Fade the cursor out, overriding MathQuill's default behavior.
             opacity: 1 !important;
-            transition: opacity @cursorAnimationDuration ease-out !important;
+            transition: opacity @cursorAnimationDuration ease !important;
             visibility: visible !important;
 
             &.mq-blink {
                 // And fade the cursor back in.
                 opacity: 0 !important;
-                transition: opacity @cursorAnimationDuration ease-in !important;
                 visibility: visible !important;
             }
         }
@@ -58,13 +58,12 @@
             border-radius: @emptyBlockBorderRadius;
             opacity: 1 !important;
             padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
-            transition: border-color @cursorAnimationDuration ease-out !important;
+            transition: border-color @cursorAnimationDuration ease !important;
 
             &.mq-blink {
                 // And animate it between blue and gray.
                 border-color: @wonderBlocksBlue !important;
                 opacity: 1 !important;
-                transition: border-color @cursorAnimationDuration ease-in !important;
             }
         }
     }

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "10.0.0",
+    "version": "10.0.1",
     "publishConfig": {
         "access": "public"
     },

package/src/full-math-input.stories.tsx

@@ -1,4 +1,3 @@
-import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
 import * as React from "react";
 
 import type {KeypadAPI} from "./types";
@@ -16,7 +15,6 @@ export default {
                 {name: "light background", value: "lightgrey", default: true},
             ],
         },
-        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
     },
 };
 
@@ -53,23 +51,24 @@ export const Basic = () => {
     }, [keypadElement, expression]);
 
     return (
-        <div style={{textAlign: "center"}}>
-            <div style={{padding: "1rem 0"}}>
-                <span
-                    style={{textAlign: "center", margin: 20, display: "block"}}
-                >
+        <div style={{padding: "1rem 2rem"}}>
+            <div>
+                <div>
                     NOTE: To properly test the input interaction, you will need
-                    to simulate a device using the dev tools.
-                </span>
-                <button onClick={() => setExpression(!expression)}>
-                    {`Use ${expression ? "Fraction" : "Expression"} Keypad`}
-                </button>
-                <button onClick={() => setV2Keypad(!v2Keypad)}>
-                    {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
-                </button>
-                <button onClick={() => toggleKeypad()}>
-                    {`Toggle Keypad`}
-                </button>
+                    to simulate a device using the dev tools. MathInput requires
+                    touch events (not click events).
+                </div>
+                <div style={{padding: "1rem 0"}}>
+                    <button onClick={() => setExpression(!expression)}>
+                        {`Use ${expression ? "Fraction" : "Expression"} Keypad`}
+                    </button>
+                    <button onClick={() => setV2Keypad(!v2Keypad)}>
+                        {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
+                    </button>
+                    <button onClick={() => toggleKeypad()}>
+                        {`Toggle Keypad`}
+                    </button>
+                </div>
             </div>
 
             <KeypadInput