From d52f9e2908077d62cb21658ae8e99f99be737ee4 Mon Sep 17 00:00:00 2001 From: Tobias Date: Fri, 11 Jan 2019 08:24:44 +0100 Subject: [PATCH] enhance the anker even more and make it compatible with the button anker --- .../pages/uilib/usage/accessibility/focus.md | 2 +- .../src/shared/menu/Card.js | 7 ++- .../src/shared/parts/Layout.js | 2 +- .../uilib/patterns/examples/HelperClasses.txt | 4 +- .../__snapshots__/Button.test.js.snap | 6 ++- .../src/components/button/style/_button.scss | 11 +++-- .../__snapshots__/Dropdown.test.js.snap | 6 ++- .../__snapshots__/InputMasked.test.js.snap | 6 ++- .../__snapshots__/Input.test.js.snap | 6 ++- .../dnb-ui-lib/src/components/modal/Modal.js | 2 +- .../__snapshots__/Modal.test.js.snap | 8 ++-- .../dnb-ui-lib/src/components/tabs/Tabs.js | 2 +- .../__tests__/__snapshots__/Tabs.test.js.snap | 2 +- .../src/patterns/helper-classes/Example.js | 4 +- .../src/patterns/helper-classes/details.md | 2 +- .../src/patterns/main-nav/MainNav.js | 2 +- packages/dnb-ui-lib/src/shared/tools.js | 9 ++-- .../dnb-ui-lib/src/style/core/dnb-core.scss | 47 ++++++++++++++----- 18 files changed, 82 insertions(+), 46 deletions(-) diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md index 76fbf8b70d6..36e07e0f032 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md @@ -14,7 +14,7 @@ Read more about the term Page Focus in the [Body Component](/uilib/components/bo ```html -
+
diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js index 84fd6cc0438..2f18a690aac 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/Card.js +++ b/packages/dnb-design-system-portal/src/shared/menu/Card.js @@ -70,9 +70,14 @@ const linkStyle = css` background-color: var(--color-white); transition: background-color 0.5s ease; + ${'' /* transition: transform ease-out 0.5s; + transform: scale3d(1, 1, 1); */} + &:focus, &:hover { background-color: var(--color-mint-green-50); + ${'' /* transform: scale3d(1.02, 1.02, 1); + transition: transform ease-out 0.3s; */} } ` @@ -142,7 +147,7 @@ export default class Card extends PureComponent { > diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js index 1834998a801..6c3465192cc 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js @@ -92,7 +92,7 @@ const Content = ({ className, children }) => ( className={classnames( 'dnb-style', 'dnb-page-content', - 'dnb-no-focus', + 'no-focus', className )} css={markdownStyle} diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt b/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt index 237d1a592a4..99745481a26 100644 --- a/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt +++ b/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt @@ -1,7 +1,7 @@
- Try to focus me + Try to focus me My main focus state has been removed and replaced by the helping class - .dnb-fake-focus. + .fake-focus.
I am only visible to screen readers, so you probably can't see me.. 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 9a2567ccc19..ba4389fd38d 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 @@ -449,9 +449,11 @@ exports[`Button scss have to match snapshot 1`] = ` border: none; } .dnb-button[type='button'] { appearance: none; } - a .dnb-button { - border-bottom: none; } button.dnb-button::-moz-focus-inner .dnb-button { border: none; } + +a.dnb-button { + border-bottom: none; + transition: none; } " `; diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss index 75cb5b550fb..08ea152086a 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss @@ -178,13 +178,14 @@ appearance: none; } - // make sure we style a nodes like a button - @at-root a & { - border-bottom: none; - } - /* Firefox includes a hidden border which messes up button dimensions */ @at-root button#{&}::-moz-focus-inner & { border: none; } } + +// make sure we style an Anker like a button +a.dnb-button { + border-bottom: none; + transition: none; +} 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 index 2aa104132c2..32bd323565d 100644 --- 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 @@ -479,11 +479,13 @@ exports[`Dropdown scss have to match snapshot 1`] = ` border: none; } .dnb-button[type='button'] { appearance: none; } - a .dnb-button { - border-bottom: none; } button.dnb-button::-moz-focus-inner .dnb-button { border: none; } +a.dnb-button { + border-bottom: none; + transition: none; } + /* * DNB FormLabel * diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index f0e14432815..43256abb868 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -339,11 +339,13 @@ exports[`InputMasked scss have to match snapshot 1`] = ` border: none; } .dnb-button[type='button'] { appearance: none; } - a .dnb-button { - border-bottom: none; } button.dnb-button::-moz-focus-inner .dnb-button { border: none; } +a.dnb-button { + border-bottom: none; + transition: none; } + /* * DNB FormLabel * 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 index 8806f9cf66f..9712456998f 100644 --- 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 @@ -421,11 +421,13 @@ exports[`Input scss have to match snapshot 1`] = ` border: none; } .dnb-button[type='button'] { appearance: none; } - a .dnb-button { - border-bottom: none; } button.dnb-button::-moz-focus-inner .dnb-button { border: none; } +a.dnb-button { + border-bottom: none; + transition: none; } + /* * DNB FormLabel * diff --git a/packages/dnb-ui-lib/src/components/modal/Modal.js b/packages/dnb-ui-lib/src/components/modal/Modal.js index e90f6eaa206..c99e8e4dacd 100644 --- a/packages/dnb-ui-lib/src/components/modal/Modal.js +++ b/packages/dnb-ui-lib/src/components/modal/Modal.js @@ -359,7 +359,7 @@ class ModalContent extends PureComponent { aria-hidden="true" aria-modal="true" tabIndex="-1" - className="dnb-modal__content__inner dnb-no-focus dnb-style" + className="dnb-modal__content__inner no-focus dnb-style" onClick={this.preventClick} onKeyDown={this.onKeyDownHandler} {...params} 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 index c1a8b9a4a26..3d44f49cbe5 100644 --- 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 @@ -294,7 +294,7 @@ exports[`Modal component have to match snapshot 1`] = ` aria-hidden="true" aria-labelledby={null} aria-modal="true" - className="dnb-modal__content__inner dnb-no-focus dnb-style" + className="dnb-modal__content__inner no-focus dnb-style" id={null} onClick={[Function]} onKeyDown={[Function]} @@ -707,11 +707,13 @@ exports[`Modal scss have to match snapshot 1`] = ` border: none; } .dnb-button[type='button'] { appearance: none; } - a .dnb-button { - border-bottom: none; } button.dnb-button::-moz-focus-inner .dnb-button { border: none; } +a.dnb-button { + border-bottom: none; + transition: none; } + .dnb-modal { font-family: var(--font-family-std, sans-serif); font-size: 1rem; diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js index d0c6e60fec8..7cd410c3b18 100644 --- a/packages/dnb-ui-lib/src/components/tabs/Tabs.js +++ b/packages/dnb-ui-lib/src/components/tabs/Tabs.js @@ -304,7 +304,7 @@ export default class Tabs extends PureComponent { return (
- Try to focus me + Try to focus me My main focus state has been removed and replaced by the - helping class .dnb-fake-focus. + helping class .fake-focus.
I am only visible to screen readers, so you probably can't see diff --git a/packages/dnb-ui-lib/src/patterns/helper-classes/details.md b/packages/dnb-ui-lib/src/patterns/helper-classes/details.md index f28e72a78e1..e21d7a797a7 100644 --- a/packages/dnb-ui-lib/src/patterns/helper-classes/details.md +++ b/packages/dnb-ui-lib/src/patterns/helper-classes/details.md @@ -1,6 +1,6 @@ | Selector | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `dnb-fake-focus` | Removes default focus outline from a focusable element and adds a custom visual focus state when is focused | +| `fake-focus` | Removes default focus outline from a focusable element and adds a custom visual focus state when is focused | | `dnb-sr-only` | Visually hides an element, but is still reachable by screen readers. `sr`=screen reade | | `dnb-not-sr-only` | The opposite of `dnb-sr-only` | | `dnb-unstyled-list` | Removes default styling for lists. Apply to the `ul` or `ol` elements" | diff --git a/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js b/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js index 84d0e403228..5cbee06468d 100644 --- a/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js +++ b/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js @@ -176,7 +176,7 @@ export default class MainNav extends PureComponent {
diff --git a/packages/dnb-ui-lib/src/shared/tools.js b/packages/dnb-ui-lib/src/shared/tools.js index 615f8a88a83..1e2b0245aec 100644 --- a/packages/dnb-ui-lib/src/shared/tools.js +++ b/packages/dnb-ui-lib/src/shared/tools.js @@ -6,17 +6,14 @@ export const pageFocus = (element = null) => { try { if (!element) { - element = document.querySelector('.dnb-no-focus') + element = document.querySelector('.no-focus') } if (element instanceof HTMLElement) { if (!element.hasAttribute('tabindex')) { element.setAttribute('tabindex', '-1') } - if ( - element.classList && - !element.classList.contains('dnb-no-focus') - ) { - element.classList.add('dnb-no-focus') + if (element.classList && !element.classList.contains('no-focus')) { + element.classList.add('no-focus') } element.focus() } diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss index 125f307eb48..8dafacf0870 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss @@ -19,6 +19,19 @@ body { } // Anker +@mixin hover-style() { + background-color: var(--color-mint-green-50); + border-bottom-width: 2px; +} +@mixin active-style() { + color: #fff; + background-color: var(--color-sea-green); + border-bottom: none; +} +@mixin focus-style() { + @include fakeFocus(); + border-bottom: none; +} a { // make sure we have always `display: inline;` as inline-block is breaking the border-bottom display: inline; @@ -46,21 +59,16 @@ a { &:active, &:hover { - background-color: var(--color-mint-green-50); - border-bottom-width: 2px; + @include hover-style(); // margins are not needed as long as we go for "inline" // margin-bottom: -0.1875em; } &:active { - color: #fff; - background-color: var(--color-sea-green); - border-bottom: none; + @include active-style(); } - &:focus { - @include fakeFocus(); - border-bottom: none; + @include focus-style(); } transition: background-color 0.2s ease; @@ -72,6 +80,15 @@ a { transform: translateY(-1px); } } +a.hover-style { + @include hover-style(); +} +a.active-style { + @include active-style(); +} +a.focus-style { + @include focus-style(); +} a.with-animation { position: relative; // because of z-index and underline/hover sudo classes z-index: 1; // because of focus handling @@ -122,7 +139,7 @@ a.with-animation { } } } -a.no-dnb-style { +a.no-style { padding: 0; margin: 0; white-space: normal; @@ -131,6 +148,7 @@ a.no-dnb-style { &:active, &:hover { color: inherit; + background-color: none; } &::after { @@ -149,6 +167,11 @@ a.no-underline { } } a.no-hover { + &:active, + &:hover { + color: inherit; + background-color: none; + } // bg &::before { content: none; @@ -172,13 +195,13 @@ html[data-whatinput='mouse'] .dnb-style *:focus { html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus { @include fakeFocus(); } -.dnb-no-focus { +.no-focus { outline: none; } -.dnb-fake-focus { +.fake-focus { @include fakeFocus(); } -.dnb-tab-focus { +.tab-focus { outline: none; &:focus { @include fakeFocus('keyboard');