fix: hide placeholder on #input focus

dnbexperience · Mar 1, 2019 · 1d72d9b · 1d72d9b
1 parent c5df673
commit 1d72d9b
Show file tree

Hide file tree

Showing 16 changed files with 10 additions and 129 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -695,9 +695,6 @@ exports[`Button scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -893,8 +890,6 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-button ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-button :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-button details {
     display: block; }
   .dnb-button summary {

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -785,9 +785,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -983,8 +980,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-form-label ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-label :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-label details {
     display: block; }
   .dnb-form-label summary {
@@ -1173,9 +1168,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1371,8 +1363,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-form-status ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-status :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-status details {
     display: block; }
   .dnb-form-status summary {
@@ -1591,9 +1581,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1789,8 +1776,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-dropdown ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-dropdown :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-dropdown details {
     display: block; }
   .dnb-dropdown summary {

diff --git a/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap
@@ -296,9 +296,6 @@ exports[`FormLabel scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -494,8 +491,6 @@ exports[`FormLabel scss have to match snapshot 1`] = `
   .dnb-form-label ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-label :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-label details {
     display: block; }
   .dnb-form-label summary {

diff --git a/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -345,9 +345,6 @@ exports[`FormStatus scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -543,8 +540,6 @@ exports[`FormStatus scss have to match snapshot 1`] = `
   .dnb-form-status ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-status :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-status details {
     display: block; }
   .dnb-form-status summary {

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -357,9 +357,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -555,8 +552,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   .dnb-button ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-button :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-button details {
     display: block; }
   .dnb-button summary {
@@ -898,9 +893,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1096,8 +1088,6 @@ a.dnb-button {
   .dnb-form-label ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-label :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-label details {
     display: block; }
   .dnb-form-label summary {
@@ -1286,9 +1276,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1484,8 +1471,6 @@ a.dnb-button {
   .dnb-form-status ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-status :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-status details {
     display: block; }
   .dnb-form-status summary {
@@ -1704,9 +1689,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1902,8 +1884,6 @@ a.dnb-button {
   .dnb-input ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-input :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-input details {
     display: block; }
   .dnb-input summary {
@@ -2178,9 +2158,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -2376,8 +2353,6 @@ a.dnb-button {
   .dnb-input-masked ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-input-masked :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-input-masked details {
     display: block; }
   .dnb-input-masked summary {

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -201,9 +201,10 @@ exports[`Input scss have to match default theme snapshot 1`] = `
     background-color: var(--color-mint-green);
     color: var(--input-text-color--focus);
     text-shadow: none; }
+  .dnb-input__input:focus ~ .dnb-input__placeholder {
+    display: none; }
   .dnb-input__shell[data-input-state='focus'][data-has-content='false'] .dnb-input__placeholder {
-    transition: color 100ms ease-out;
-    color: var(--color-sea-green-alt-30); }
+    display: none; }
 "
 `;
 
@@ -525,9 +526,6 @@ exports[`Input scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -723,8 +721,6 @@ exports[`Input scss have to match snapshot 1`] = `
   .dnb-button ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-button :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-button details {
     display: block; }
   .dnb-button summary {
@@ -1066,9 +1062,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1264,8 +1257,6 @@ a.dnb-button {
   .dnb-form-label ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-label :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-label details {
     display: block; }
   .dnb-form-label summary {
@@ -1454,9 +1445,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1652,8 +1640,6 @@ a.dnb-button {
   .dnb-form-status ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-form-status :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-form-status details {
     display: block; }
   .dnb-form-status summary {
@@ -1872,9 +1858,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -2070,8 +2053,6 @@ a.dnb-button {
   .dnb-input ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-input :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-input details {
     display: block; }
   .dnb-input summary {

diff --git a/...js-input-screenshot-have-to-match-search-type-with-focus-state-1-08a2d.snap.png b/...js-input-screenshot-have-to-match-search-type-with-focus-state-1-08a2d.snap.png
diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss
@@ -75,11 +75,14 @@
     text-shadow: none;
   }
 
-  // Adjusting opacity of placeholder when:
-  // 1: input is in focus and 2. input has no content
+  // IE11 fallback - hide placeholder on focus
+  &__input:focus ~ .dnb-input__placeholder {
+    display: none;
+  }
+
+  // hide placeholder on focus
   &__shell[data-input-state='focus'][data-has-content='false']
     .dnb-input__placeholder {
-    transition: color 100ms ease-out;
-    color: var(--color-sea-green-alt-30);
+    display: none;
   }
 }
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -303,9 +303,6 @@ exports[`Logo scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -501,8 +498,6 @@ exports[`Logo scss have to match snapshot 1`] = `
   .dnb-logo ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-logo :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-logo details {
     display: block; }
   .dnb-logo summary {

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -735,9 +735,6 @@ exports[`Modal scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -933,8 +930,6 @@ exports[`Modal scss have to match snapshot 1`] = `
   .dnb-button ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-button :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-button details {
     display: block; }
   .dnb-button summary {
@@ -1272,9 +1267,6 @@ a.dnb-button {
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -1470,8 +1462,6 @@ a.dnb-button {
   .dnb-modal ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-modal :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-modal details {
     display: block; }
   .dnb-modal summary {

diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -317,9 +317,6 @@ exports[`Slider scss have to match snapshot 1`] = `
   /**
    * Remove the inner border and padding of focus outlines in Firefox.
    */
-  /**
-   * Restore the focus outline styles unset by the previous rule in Firefox.
-   */
   /* Interactive
    */
   /*
@@ -515,8 +512,6 @@ exports[`Slider scss have to match snapshot 1`] = `
   .dnb-slider ::-moz-focus-inner {
     border-style: none;
     padding: 0; }
-  .dnb-slider :-moz-focusring {
-    outline: 1px dotted ButtonText; }
   .dnb-slider details {
     display: block; }
   .dnb-slider summary {