From 59b7a9405d854ca58d457f593c82eaf228ad8815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 29 Nov 2019 11:58:17 +0100 Subject: [PATCH] fix: enhance tertiary #button handling on touch devices --- .../__tests__/__snapshots__/Button.test.js.snap | 8 +++++++- .../button/style/themes/dnb-button-theme-ui.scss | 13 +++++++++---- 2 files changed, 16 insertions(+), 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 index 08556de28c5..7dd6d60ff47 100644 --- 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 index 635fa0069a8..a51ec157b87 100644 --- 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; + } } }