From 11fc3697ed279e80b7b74383f4edea62b39f328d Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 9 Aug 2019 20:24:54 +0000
Subject: [PATCH] fix: addressed chrome browser issues (#2453)

---
 .../sections/General/CommentEditingConfig.css |  3 --
 .../sections/General/CommentLengthConfig.tsx  |  8 +++--
 .../sections/Moderation/PerspectiveConfig.tsx |  4 ++-
 .../Moderation/RecentCommentHistoryConfig.tsx |  4 ++-
 .../__snapshots__/general.spec.tsx.snap       | 12 ++++----
 .../__snapshots__/moderation.spec.tsx.snap    | 22 ++++++--------
 .../framework/components/DurationField.css    |  6 +++-
 .../framework/components/DurationField.tsx    | 29 ++++++++-----------
 .../__snapshots__/DurationField.spec.tsx.snap | 15 ++++------
 9 files changed, 49 insertions(+), 54 deletions(-)
 delete mode 100644 src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.css

diff --git a/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.css b/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.css
deleted file mode 100644
index d0a099916..000000000
--- a/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.commentEditingTextInput {
-  width: 120px;
-}
diff --git a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
index 6fd334902..06eb640b9 100644
--- a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
@@ -79,7 +79,9 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
             >
               <TextField
                 id="configure-general-commentLength-min"
-                className={styles.commentLengthTextInput}
+                classes={{
+                  input: styles.commentLengthTextInput,
+                }}
                 {...input}
                 disabled={disabled}
                 autoComplete="off"
@@ -123,7 +125,9 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
             >
               <TextField
                 id="configure-general-commentLength-max"
-                className={styles.commentLengthTextInput}
+                classes={{
+                  input: styles.commentLengthTextInput,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
index 40b630f2d..1fccd4232 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
@@ -97,7 +97,9 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
             <>
               <TextField
                 id="configure-moderation-perspective-threshold"
-                className={styles.thresholdTextField}
+                classes={{
+                  input: styles.thresholdTextField,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
index 1cf8a16be..d446dbb2b 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
@@ -111,7 +111,9 @@ const RecentCommentHistoryConfig: FunctionComponent<Props> = ({ disabled }) => {
           {({ input, meta }) => (
             <>
               <TextField
-                className={styles.thresholdTextField}
+                classes={{
+                  input: styles.thresholdTextField,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
index 3e1152f05..4ca942623 100644
--- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -408,13 +408,13 @@ Markdown can be found
                 Minimum Comment Length
               </label>
               <div
-                className="TextField-root CommentLengthConfig-commentLengthTextInput"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-general-commentLength-min"
                   name="charCount.min"
@@ -447,13 +447,13 @@ Markdown can be found
                 Maximum Comment Length
               </label>
               <div
-                className="TextField-root CommentLengthConfig-commentLengthTextInput"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-general-commentLength-max"
                   name="charCount.max"
@@ -526,7 +526,7 @@ moderation panel.
                 >
                   <select
                     aria-label="unit"
-                    className="SelectField-select DurationField-unit"
+                    className="SelectField-select DurationField-select"
                     disabled={false}
                     name="editCommentWindowLength-unit"
                     onBlur={[Function]}
@@ -671,7 +671,7 @@ moderation panel.
                 >
                   <select
                     aria-label="unit"
-                    className="SelectField-select DurationField-unit"
+                    className="SelectField-select DurationField-select"
                     disabled={false}
                     name="closeCommenting.timeout-unit"
                     onBlur={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index 33caff810..0ef6117ec 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -158,16 +158,12 @@ and submitted comments are counted.
                     type="text"
                     value="7"
                   />
-                  <div
-                    className="TextField-adornment"
-                  >
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                    >
-                      Days
-                    </p>
-                  </div>
                 </div>
+                <p
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DurationField-unit"
+                >
+                  Days
+                </p>
               </div>
             </fieldset>
             <fieldset
@@ -259,13 +255,13 @@ comment history timeframe (does not include comments pending for
 toxicity, spam or pre-moderation.)
               </p>
               <div
-                className="TextField-root RecentCommentHistoryConfig-thresholdTextField"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input RecentCommentHistoryConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   name="recentCommentHistory.triggerRejectionRate"
                   onBlur={[Function]}
@@ -519,13 +515,13 @@ the
 comment is toxic, according to Perspective API. By default the threshold is set to 80%.
               </p>
               <div
-                className="TextField-root PerspectiveConfig-thresholdTextField"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input PerspectiveConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-moderation-perspective-threshold"
                   name="integrations.perspective.threshold"
diff --git a/src/core/client/framework/components/DurationField.css b/src/core/client/framework/components/DurationField.css
index 53226f7f5..4486de035 100644
--- a/src/core/client/framework/components/DurationField.css
+++ b/src/core/client/framework/components/DurationField.css
@@ -2,7 +2,11 @@
   width: calc(6 * var(--mini-unit));
 }
 
-.unit {
+.select {
   height: 100%;
   min-width: calc(17 * var(--mini-unit));
 }
+
+.unit {
+  line-height: 36px;
+}
diff --git a/src/core/client/framework/components/DurationField.tsx b/src/core/client/framework/components/DurationField.tsx
index 584848df8..d63e5fedf 100644
--- a/src/core/client/framework/components/DurationField.tsx
+++ b/src/core/client/framework/components/DurationField.tsx
@@ -142,20 +142,6 @@ class DurationField extends Component<Props, State> {
       return null;
     }
 
-    let adornment: React.ReactNode = null;
-    if (this.state.elementCallbacks.length === 1) {
-      const unit = this.state.elementCallbacks[0];
-      adornment = (
-        <Localized
-          id="framework-durationField-unit"
-          $unit={unit}
-          $value={parseInt(this.state.value, 10)}
-        >
-          <Typography variant="bodyCopy">{unit}</Typography>
-        </Localized>
-      );
-    }
-
     return (
       <Flex itemGutter>
         <TextField
@@ -168,18 +154,27 @@ class DurationField extends Component<Props, State> {
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck={false}
-          adornment={adornment}
           textAlignCenter
           aria-label="value"
         />
-        {!adornment && (
+        {this.state.elementCallbacks.length === 1 ? (
+          <Localized
+            id="framework-durationField-unit"
+            $unit={this.state.elementCallbacks[0]}
+            $value={parseInt(this.state.value, 10)}
+          >
+            <Typography variant="bodyCopy" className={styles.unit}>
+              {this.state.elementCallbacks[0]}
+            </Typography>
+          </Localized>
+        ) : (
           <SelectField
             name={`${name}-unit`}
             onChange={this.handleUnitChange}
             disabled={disabled}
             aria-label="unit"
             classes={{
-              select: styles.unit,
+              select: styles.select,
             }}
             value={(this.state.unit || this.state.units[0]).toString()}
           >
diff --git a/src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap b/src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap
index 3fe60e34b..8d950bef9 100644
--- a/src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap
+++ b/src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap
@@ -5,7 +5,6 @@ exports[`accepts invalid input 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -22,7 +21,7 @@ exports[`accepts invalid input 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -72,7 +71,6 @@ exports[`renders correctly with default units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -89,7 +87,7 @@ exports[`renders correctly with default units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -139,7 +137,6 @@ exports[`renders correctly with specified units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -156,7 +153,7 @@ exports[`renders correctly with specified units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -195,7 +192,6 @@ exports[`use best matching unit 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -212,7 +208,7 @@ exports[`use best matching unit 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -262,7 +258,6 @@ exports[`use initial unit if 0 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -279,7 +274,7 @@ exports[`use initial unit if 0 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}