Handle custom input size with CSS to fix different behaviour across b…

…rowsers (#101)
react-ui-org · Jun 12, 2020 · 0f160f9 · 0f160f9
1 parent eb3a800
commit 0f160f9
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.
   }
 }