@khanacademy/perseus 1.1.0 → 1.1.1

package/src/widgets/matrix.jsx

@@ -3,6 +3,7 @@
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -324,8 +325,23 @@ class Matrix extends React.Component<Props, State> {
                                             <NumberInput {...inputProps} />
                                         );
                                     } else {
+                                        const updatedProps = {
+                                            ...inputProps,
+                                            style: StyleSheet.create({
+                                                // eslint-disable-next-line react-native/no-unused-styles
+                                                input: {
+                                                    ...inputProps.style,
+                                                    display: "inline-block",
+                                                    padding: 0,
+                                                    backgroundColor: outside
+                                                        ? "#f3f3f3"
+                                                        : "#fff",
+                                                },
+                                            }).input,
+                                        };
+
                                         MatrixInput = (
-                                            <TextInput {...inputProps} />
+                                            <TextInput {...updatedProps} />
                                         );
                                     }
                                     return (

package/src/widgets/numeric-input.jsx

@@ -3,7 +3,7 @@
 
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import classNames from "classnames";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
@@ -419,7 +419,6 @@ export class NumericInput extends React.Component<Props, State> {
         const rubric = this.props.reviewModeRubric;
         const answers = this.getAnswerBlurb(rubric);
         const answerBlurb = answers[0];
-        const classes = [];
 
         let labelText = this.props.labelText;
         if (labelText == null || labelText === "") {
@@ -449,12 +448,20 @@ export class NumericInput extends React.Component<Props, State> {
             );
         }
 
+        const styles = StyleSheet.create({
+            input: {
+                textAlign: this.props.rightAlign ? "right" : "left",
+                width: this.props.size === "small" ? 40 : 80,
+                padding: 0,
+                height: "auto",
+            },
+        });
+
         const input = (
             <InputWithExamples
                 ref={(ref) => (this.inputRef = ref)}
                 value={this.props.currentValue}
                 onChange={this.handleChange}
-                className={classNames(classes)}
                 labelText={labelText}
                 type={this._getInputType()}
                 examples={this.examples()}
@@ -463,8 +470,7 @@ export class NumericInput extends React.Component<Props, State> {
                 onBlur={this._handleBlur}
                 id={this.props.widgetId}
                 disabled={this.props.apiOptions.readOnly}
-                // $FlowFixMe[prop-missing]
-                highlightLint={this.props.highlightLint}
+                style={styles.input}
             />
         );
 
@@ -542,7 +548,7 @@ type RenderProps = {|
         name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi",
     |}>,
     labelText: string,
-    size: string,
+    size: "normal" | "small",
     coefficient: boolean,
     rightAlign?: boolean,
     static: boolean,