From 0f160f9c8218ea2991bed7ca9702ddeab7c31400 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Fri, 12 Jun 2020 14:52:31 +0200
Subject: [PATCH] Handle custom input size with CSS to fix different behaviour
 across browsers (#101)

---
 .../__snapshots__/ForgotPassword.test.jsx.snap        |  3 +++
 .../Login/__tests__/__snapshots__/Login.test.jsx.snap |  8 ++++++++
 .../__tests__/__snapshots__/NewPassword.test.jsx.snap |  6 ++++++
 src/lib/components/ui/TextField/TextField.jsx         | 11 +++++++++++
 .../__tests__/__snapshots__/TextField.test.jsx.snap   |  7 +++++++
 src/lib/styles/tools/forms/_foundation.scss           | 11 +++++++++--
 6 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
index 5fb4f45a..d63b7dec 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
@@ -72,6 +72,7 @@ exports[`rendering renders correctly 1`] = `
         rootVariantOutline"
                   htmlFor="resetEmailInput"
                   id="resetEmailInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -224,6 +225,7 @@ exports[`rendering renders correctly 2`] = `
         rootVariantOutline"
                   htmlFor="resetEmailInput"
                   id="resetEmailInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -404,6 +406,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         rootVariantOutline"
                   htmlFor="custom-id__resetEmailInput"
                   id="custom-id__resetEmailInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
index dd45c4bb..84f4b01b 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
@@ -74,6 +74,7 @@ exports[`rendering renders correctly 1`] = `
         rootVariantOutline"
                   htmlFor="usernameInput"
                   id="usernameInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -140,6 +141,7 @@ exports[`rendering renders correctly 1`] = `
         rootVariantOutline"
                   htmlFor="passwordInput"
                   id="passwordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -321,6 +323,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         rootVariantOutline"
                   htmlFor="custom-id__usernameInput"
                   id="custom-id__usernameInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -387,6 +390,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         rootVariantOutline"
                   htmlFor="custom-id__passwordInput"
                   id="custom-id__passwordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -557,6 +561,7 @@ exports[`rendering renders correctly with translations 1`] = `
         rootVariantOutline"
                   htmlFor="usernameInput"
                   id="usernameInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -623,6 +628,7 @@ exports[`rendering renders correctly with translations 1`] = `
         rootVariantOutline"
                   htmlFor="passwordInput"
                   id="passwordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -773,6 +779,7 @@ exports[`rendering renders correctly with username 1`] = `
         rootVariantOutline"
                   htmlFor="usernameInput"
                   id="usernameInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -839,6 +846,7 @@ exports[`rendering renders correctly with username 1`] = `
         rootVariantOutline"
                   htmlFor="passwordInput"
                   id="passwordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
index 8c30be3f..974ab870 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
@@ -72,6 +72,7 @@ exports[`rendering renders correctly 1`] = `
         rootVariantOutline"
                   htmlFor="newPasswordInput"
                   id="newPasswordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -138,6 +139,7 @@ exports[`rendering renders correctly 1`] = `
         rootVariantOutline"
                   htmlFor="newPasswordRepeatInput"
                   id="newPasswordRepeatInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -317,6 +319,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         rootVariantOutline"
                   htmlFor="custom-id__newPasswordInput"
                   id="custom-id__newPasswordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -383,6 +386,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         rootVariantOutline"
                   htmlFor="custom-id__newPasswordRepeatInput"
                   id="custom-id__newPasswordRepeatInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -550,6 +554,7 @@ exports[`rendering renders correctly with translations 1`] = `
         rootVariantOutline"
                   htmlFor="newPasswordInput"
                   id="newPasswordInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
@@ -616,6 +621,7 @@ exports[`rendering renders correctly with translations 1`] = `
         rootVariantOutline"
                   htmlFor="newPasswordRepeatInput"
                   id="newPasswordRepeatInput__label"
+                  style={Object {}}
                 >
                   <div
                     className="label"
diff --git a/src/lib/components/ui/TextField/TextField.jsx b/src/lib/components/ui/TextField/TextField.jsx
index 5863088a..824c6283 100644
--- a/src/lib/components/ui/TextField/TextField.jsx
+++ b/src/lib/components/ui/TextField/TextField.jsx
@@ -65,6 +65,16 @@ export const TextField = (props) => {
     rootVariantClass = styles.rootVariantOutline;
   }
 
+  const inlineStyle = (inputSize) => {
+    const style = {};
+
+    if (inputSize) {
+      style['--rui-custom-input-size'] = inputSize;
+    }
+
+    return style;
+  };
+
   const propsToTransfer = transferProps(
     props,
     ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'inFormLayout', 'inputSize', 'isLabelVisible',
@@ -86,6 +96,7 @@ export const TextField = (props) => {
       `).trim()}
       htmlFor={props.id}
       id={`${props.id}__label`}
+      style={inlineStyle(props.inputSize)}
     >
       <div
         className={(`
diff --git a/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap b/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
index 3285d14d..6a63b7c4 100644
--- a/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
+++ b/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
@@ -13,6 +13,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
         rootVariantOutline"
   htmlFor="test"
   id="test__label"
+  style={Object {}}
 >
   <div
     className="label"
@@ -50,6 +51,11 @@ exports[`rendering renders correctly with all props 1`] = `
         rootVariantFilled"
   htmlFor="test"
   id="test__label"
+  style={
+    Object {
+      "--rui-custom-input-size": 3,
+    }
+  }
 >
   <div
     className="label
@@ -98,6 +104,7 @@ exports[`rendering renders correctly with hidden label 1`] = `
         rootVariantOutline"
   htmlFor="test"
   id="test__label"
+  style={Object {}}
 >
   <div
     className="label
diff --git a/src/lib/styles/tools/forms/_foundation.scss b/src/lib/styles/tools/forms/_foundation.scss
index 4ea84e08..c3e317b8 100644
--- a/src/lib/styles/tools/forms/_foundation.scss
+++ b/src/lib/styles/tools/forms/_foundation.scss
@@ -1,6 +1,7 @@
 // 1. Get ready for positioning of bottom line and caret.
 // 2. Override hover style of disabled input.
-// 3. Always prefer the `size` attribute when defined.
+// 3. Always prefer the `size` attribute when defined. Use CSS for sizing to normalize resulting
+//    width across browsers.
 // 4. Let inputs properly fit various layout scenarios.
 // 5. Leave out space for Select Field caret.
 
@@ -67,7 +68,13 @@
 
 @mixin form-field-input-text() {
   &[size] {
-    width: auto; // 3.
+    width:
+      calc(
+        1ch * var(--rui-custom-input-size)
+        + 2 * var(--rui-local-padding-horizontal)
+        + 2 * #{$form-field-border-width}
+      ); // 3.
+
     min-width: auto; // 3.
   }
 }