fix(Input): enhance vertical centering for Safari (mainly iOS) (#1469)

dnbexperience · Jun 20, 2022 · dadb5f8 · dadb5f8
1 parent d1b1b19
commit dadb5f8
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 33 deletions.
diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -2048,9 +2048,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: var(--input-font-size);
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     user-select: none;
     -webkit-user-select: none;
@@ -2061,11 +2058,15 @@ legend.dnb-form-label {
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
     padding-left: var(--input-padding);
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;

diff --git a/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -2604,9 +2604,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: var(--input-font-size);
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     user-select: none;
     -webkit-user-select: none;
@@ -2617,11 +2614,15 @@ legend.dnb-form-label {
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
     padding-left: var(--input-padding);
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;

diff --git a/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -999,9 +999,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: var(--input-font-size);
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     user-select: none;
     -webkit-user-select: none;
@@ -1012,11 +1009,15 @@ legend.dnb-form-label {
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
     padding-left: var(--input-padding);
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;

diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -1593,9 +1593,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: var(--input-font-size);
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     user-select: none;
     -webkit-user-select: none;
@@ -1606,11 +1603,15 @@ legend.dnb-form-label {
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
     padding-left: var(--input-padding);
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;

diff --git a/packages/dnb-eufemia/src/components/input/style/_input.scss b/packages/dnb-eufemia/src/components/input/style/_input.scss
@@ -53,14 +53,6 @@
     z-index: 2; // to make sure we are over the placeholder
   }
 
-  input#{&}__input {
-    // because we inherit the size on the input (reset.css)
-    font-size: var(--input-font-size);
-    line-height: var(
-      --font-size-basis
-    ); // same as font-size - Desktop Safari fix
-  }
-
   &__input[disabled] {
     user-select: none;
     -webkit-user-select: none; // Safari / Touch fix
@@ -80,14 +72,24 @@
     padding-right: var(
       --input-padding
     ); // we may expand things because of the ellipsis
+  }
 
-    text-align: inherit;
+  &__placeholder,
+  &__input,
+  input#{&}__input // Safari fix
+  {
+    // reset browser styling
+    padding-top: 0; // Safari fix
+    padding-bottom: 0; // Safari fix
 
     color: inherit;
     background-color: transparent;
 
     // because we inherit the size on the input (reset.css)
     font-size: var(--input-font-size);
+
+    // because we inherit the size on the input (reset.css)
+    line-height: inherit; // Safari fix
   }
 
   &__placeholder {