fix: enhance tertiary #button handling on touch devices

dnbexperience · Nov 29, 2019 · 59b7a94 · 59b7a94
1 parent 4171c3a
commit 59b7a94
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 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
@@ -421,7 +421,13 @@ exports[`Button scss have to match default theme snapshot 1`] = `
       html[data-whatinput='keyboard'] .dnb-button--tertiary:active:not([disabled]), html[data-whatinput='keyboard']
       html:not([data-is-touch]) .dnb-button--tertiary:active:not([disabled]) {
         box-shadow: none; }
-      .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after,
+      html[data-is-touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-is-touch]
+      html:not([data-is-touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+        transition: none;
+        visibility: visible;
+        opacity: 1;
+        color: var(--color-emerald-green); }
+      html:not([data-is-touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-is-touch])
       html:not([data-is-touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
         visibility: hidden; }
     html[data-whatinput='keyboard']

diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -118,12 +118,17 @@
     @include active() {
       @include removeFakeFocus();
 
-      // NB: this could be interesting to have on touch
-      // @include buttonFocusRing('touch'); // also, make a touch ring
-
       // underline
       .dnb-button__text::after {
-        visibility: hidden;
+        html[data-is-touch] & {
+          transition: none;
+          visibility: visible;
+          opacity: 1;
+          color: var(--color-emerald-green);
+        }
+        html:not([data-is-touch]) & {
+          visibility: hidden;
+        }
       }
     }