From be5bc3b1fc9d7235ad4c4a424a0b7b46ede2139d Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 15 Apr 2019 21:46:32 +0200 Subject: [PATCH] fix: html element spacing correction --- .../__snapshots__/Button.test.js.snap | 37 ++++--- .../src/components/button/style/_button.scss | 4 +- .../__snapshots__/Dropdown.test.js.snap | 6 +- .../style/themes/dnb-dropdown-theme-ui.scss | 5 +- .../__snapshots__/InputMasked.test.js.snap | 37 ++++--- .../__snapshots__/Input.test.js.snap | 37 ++++--- .../__snapshots__/Modal.test.js.snap | 37 ++++--- packages/dnb-ui-lib/src/style/core/reset.scss | 8 -- ...ditional-heading-examples-1-dfc56.snap.png | Bin 16905 -> 16891 bytes .../src/style/elements/typography.scss | 99 ++++++++++-------- .../dnb-ui-lib/stories/componentsStories.js | 54 +++++----- .../dnb-ui-lib/stories/elementsStories.js | 70 +++++++------ packages/dnb-ui-lib/stories/helpers.js | 20 +++- packages/dnb-ui-lib/stories/index.js | 8 +- .../dnb-ui-lib/stories/typographyStories.js | 78 +++++++------- 15 files changed, 287 insertions(+), 213 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 d266d693371..5c26362fc4b 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 @@ -661,21 +661,28 @@ exports[`Button scss have to match snapshot 1`] = ` button.dnb-button::-moz-focus-inner .dnb-button { border: none; } -a.dnb-button { +a.dnb-button[type='button'] { -webkit-appearance: none; } - a.dnb-button .dnb-button__icon { - transform: translateY(0); } - a.dnb-button .dnb-button__text { - transform: translateY(1px); } - a.dnb-button:hover { - border-radius: var(--button-border-radius); } - a.dnb-button--size-small, a.dnb-button--size-small:hover { - border-radius: var(--button-border-radius--small); } - a.dnb-button--size-medium, a.dnb-button--size-medium:hover { - border-radius: var(--button-border-radius--medium); } - a.dnb-button--size-large, a.dnb-button--size-large:hover { - border-radius: var(--button-border-radius--large); } - a.dnb-button:active, a.dnb-button:focus { - border-radius: var(--button-border-radius); } + +a.dnb-button .dnb-button__icon { + transform: translateY(0); } + +a.dnb-button .dnb-button__text { + transform: translateY(1px); } + +a.dnb-button:hover { + border-radius: var(--button-border-radius); } + +a.dnb-button--size-small, a.dnb-button--size-small:hover { + border-radius: var(--button-border-radius--small); } + +a.dnb-button--size-medium, a.dnb-button--size-medium:hover { + border-radius: var(--button-border-radius--medium); } + +a.dnb-button--size-large, a.dnb-button--size-large:hover { + border-radius: var(--button-border-radius--large); } + +a.dnb-button:active, a.dnb-button:focus { + border-radius: var(--button-border-radius); } " `; 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 c86ec7cafa6..2cff78dad8f 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button.scss +++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss @@ -211,7 +211,9 @@ // make sure we style an Anchor like a button a.dnb-button { - -webkit-appearance: none; // because we have "appearance: button" in reset.scss + &[type='button'] { + -webkit-appearance: none; // because we have "appearance: button" in reset.scss + } // some correction .dnb-button__icon { 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 a4702c3c3ef..c2de8eb81cf 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 @@ -265,8 +265,7 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = ` border-color: transparent; } .dnb-dropdown__option--selected { color: var(--dropdown-option-color--selected); - background-color: var(--dropdown-option-background-color--selected); - display: flex; } + background-color: var(--dropdown-option-background-color--selected); } .dnb-dropdown__option--selected .dnb-dropdown__option__inner { color: inherit; background-color: inherit; } @@ -282,9 +281,8 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = ` content: ''; position: absolute; z-index: 1; + top: calc(50% - 0.5rem); right: 1rem; - align-self: center; - justify-content: flex-end; width: 1rem; height: 1rem; background-size: cover; diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss b/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss index 83b93aa064d..52ef3453ccd 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss @@ -95,16 +95,13 @@ } } - display: flex; &::after { content: ''; position: absolute; z-index: 1; + top: calc(50% - 0.5rem); right: 1rem; - align-self: center; - justify-content: flex-end; - width: 1rem; height: 1rem; 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 2bf7f6b2266..5a5d9d65495 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 @@ -378,22 +378,29 @@ exports[`InputMasked scss have to match snapshot 1`] = ` button.dnb-button::-moz-focus-inner .dnb-button { border: none; } -a.dnb-button { +a.dnb-button[type='button'] { -webkit-appearance: none; } - a.dnb-button .dnb-button__icon { - transform: translateY(0); } - a.dnb-button .dnb-button__text { - transform: translateY(1px); } - a.dnb-button:hover { - border-radius: var(--button-border-radius); } - a.dnb-button--size-small, a.dnb-button--size-small:hover { - border-radius: var(--button-border-radius--small); } - a.dnb-button--size-medium, a.dnb-button--size-medium:hover { - border-radius: var(--button-border-radius--medium); } - a.dnb-button--size-large, a.dnb-button--size-large:hover { - border-radius: var(--button-border-radius--large); } - a.dnb-button:active, a.dnb-button:focus { - border-radius: var(--button-border-radius); } + +a.dnb-button .dnb-button__icon { + transform: translateY(0); } + +a.dnb-button .dnb-button__text { + transform: translateY(1px); } + +a.dnb-button:hover { + border-radius: var(--button-border-radius); } + +a.dnb-button--size-small, a.dnb-button--size-small:hover { + border-radius: var(--button-border-radius--small); } + +a.dnb-button--size-medium, a.dnb-button--size-medium:hover { + border-radius: var(--button-border-radius--medium); } + +a.dnb-button--size-large, a.dnb-button--size-large:hover { + border-radius: var(--button-border-radius--large); } + +a.dnb-button:active, a.dnb-button:focus { + border-radius: var(--button-border-radius); } /* * 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 77807bcd5f3..77653bbacdb 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 @@ -703,22 +703,29 @@ exports[`Input scss have to match snapshot 1`] = ` button.dnb-button::-moz-focus-inner .dnb-button { border: none; } -a.dnb-button { +a.dnb-button[type='button'] { -webkit-appearance: none; } - a.dnb-button .dnb-button__icon { - transform: translateY(0); } - a.dnb-button .dnb-button__text { - transform: translateY(1px); } - a.dnb-button:hover { - border-radius: var(--button-border-radius); } - a.dnb-button--size-small, a.dnb-button--size-small:hover { - border-radius: var(--button-border-radius--small); } - a.dnb-button--size-medium, a.dnb-button--size-medium:hover { - border-radius: var(--button-border-radius--medium); } - a.dnb-button--size-large, a.dnb-button--size-large:hover { - border-radius: var(--button-border-radius--large); } - a.dnb-button:active, a.dnb-button:focus { - border-radius: var(--button-border-radius); } + +a.dnb-button .dnb-button__icon { + transform: translateY(0); } + +a.dnb-button .dnb-button__text { + transform: translateY(1px); } + +a.dnb-button:hover { + border-radius: var(--button-border-radius); } + +a.dnb-button--size-small, a.dnb-button--size-small:hover { + border-radius: var(--button-border-radius--small); } + +a.dnb-button--size-medium, a.dnb-button--size-medium:hover { + border-radius: var(--button-border-radius--medium); } + +a.dnb-button--size-large, a.dnb-button--size-large:hover { + border-radius: var(--button-border-radius--large); } + +a.dnb-button:active, a.dnb-button:focus { + border-radius: var(--button-border-radius); } /* * DNB FormLabel 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 4e46d6c3be9..fcd081ebbce 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 @@ -754,22 +754,29 @@ exports[`Modal scss have to match snapshot 1`] = ` button.dnb-button::-moz-focus-inner .dnb-button { border: none; } -a.dnb-button { +a.dnb-button[type='button'] { -webkit-appearance: none; } - a.dnb-button .dnb-button__icon { - transform: translateY(0); } - a.dnb-button .dnb-button__text { - transform: translateY(1px); } - a.dnb-button:hover { - border-radius: var(--button-border-radius); } - a.dnb-button--size-small, a.dnb-button--size-small:hover { - border-radius: var(--button-border-radius--small); } - a.dnb-button--size-medium, a.dnb-button--size-medium:hover { - border-radius: var(--button-border-radius--medium); } - a.dnb-button--size-large, a.dnb-button--size-large:hover { - border-radius: var(--button-border-radius--large); } - a.dnb-button:active, a.dnb-button:focus { - border-radius: var(--button-border-radius); } + +a.dnb-button .dnb-button__icon { + transform: translateY(0); } + +a.dnb-button .dnb-button__text { + transform: translateY(1px); } + +a.dnb-button:hover { + border-radius: var(--button-border-radius); } + +a.dnb-button--size-small, a.dnb-button--size-small:hover { + border-radius: var(--button-border-radius--small); } + +a.dnb-button--size-medium, a.dnb-button--size-medium:hover { + border-radius: var(--button-border-radius--medium); } + +a.dnb-button--size-large, a.dnb-button--size-large:hover { + border-radius: var(--button-border-radius--large); } + +a.dnb-button:active, a.dnb-button:focus { + border-radius: var(--button-border-radius); } .dnb-modal { font-family: var(--font-family-default); diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss index bebc3668686..dac90b61207 100644 --- a/packages/dnb-ui-lib/src/style/core/reset.scss +++ b/packages/dnb-ui-lib/src/style/core/reset.scss @@ -123,14 +123,6 @@ /* Text-level semantics */ - /** - * Remove the gray background on active links in IE 10. - */ - - a { - background-color: transparent; - } - /** * Add the correct text decoration in Edge, IE, Opera, and Safari. */ diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/typography-screenshot-test-js-heading-screenshot-have-to-match-the-additional-heading-examples-1-dfc56.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/typography-screenshot-test-js-heading-screenshot-have-to-match-the-additional-heading-examples-1-dfc56.snap.png index cd932c9368bf15a2b423a37d2f25411b2931a591..605751ea249fabddccc42bf0918610b72c739977 100644 GIT binary patch delta 54 zcmeBdVf@|9I6<7Nf`g5Lf#K#F?gbkar5zYoZMJn-&M1E1Kcinp)#2GHBC$YO22WQ% Jmvv4FO#tZg5s?4@ delta 57 zcmey}%-Gq&I6<7NnuCpjfg#?al5eA;v;*Ug&9)B987B)c@{9ejU$m?0q|#%pZ$JeM Mp00i_>zopr0R2M}S^xk5 diff --git a/packages/dnb-ui-lib/src/style/elements/typography.scss b/packages/dnb-ui-lib/src/style/elements/typography.scss index c3a873640e8..83bfc4bb174 100644 --- a/packages/dnb-ui-lib/src/style/elements/typography.scss +++ b/packages/dnb-ui-lib/src/style/elements/typography.scss @@ -32,6 +32,9 @@ & > small { font-size: var(--font-size-x-default); // 20px } + & > small { + line-height: 1.875rem; // 30px + } } @mixin h3Style() { font-family: var(--font-family-demi); @@ -43,16 +46,28 @@ & > small { font-size: var(--font-size-default); // 16px } + & > small { + line-height: 1.75rem; // 28px + } } @mixin h4Style() { font-size: var(--font-size-default); // 16px + & > small { + line-height: 1.375rem; // 22px + } } @mixin h5Style() { font-size: var(--font-size-small); // 14px + & > small { + line-height: 1.25rem; // 20px + } } @mixin h6Style() { font-size: var(--font-size-small); // 14px font-weight: var(--font-weight-book); + & > small { + line-height: 1.25rem; // 20px + } } @mixin paragraphStyle() { // if we not reset margin, the browser is using: margin-block-end: 1rem; @@ -129,63 +144,35 @@ line-height: 1em; // for vertical alignment, we have to have no line-height } .dnb-spacing { - h1, - .dnb-core-style h1 { + .dnb-h1, + .dnb-core-style .dnb-h1 { @include h1Spacing(); } - h2, - .dnb-core-style h2 { + .dnb-h2, + .dnb-core-style .dnb-h2 { @include h2Spacing(); } - h3, - h4, - h5, - h6, - .dnb-core-style h3, - .dnb-core-style h4, - .dnb-core-style h5, - .dnb-core-style h6 { + .dnb-h3, + .dnb-h4, + .dnb-h5, + .dnb-h6, + .dnb-core-style .dnb-h3, + .dnb-core-style .dnb-h4, + .dnb-core-style .dnb-h5, + .dnb-core-style .dnb-h6 { @include headingSpacing(); } - p, - .dnb-core-style p { + .dnb-p, + .dnb-core-style .dnb-p { @include defaultSpacing(); } } } -.dnb-h1, -.dnb-h2, -.dnb-h3, -.dnb-lead, -.dnb-h4, -.dnb-h5, -.dnb-h6, -// make exception on headings wtich are inside of dnb-core-style -.dnb-core-style h1, -.dnb-core-style h2, -.dnb-core-style h3, -.dnb-core-style h4, -.dnb-core-style h5, -.dnb-core-style h6 { - @include headingsStyle(); -} - .dnb-small { font-size: var(--font-size-small); // 14px } -// do not set this for h1, like ".dnb-h1 > .dnb-small" -.dnb-p > small, -.dnb-p > .dnb-small, -.dnb-h2 > .dnb-small, -.dnb-h3 > .dnb-small, -.dnb-h4 > .dnb-small, -.dnb-h5 > .dnb-small, -.dnb-h6 > .dnb-small { - line-height: 1em; // for vertical alignment, we have to have no line-height -} - .dnb-h1 { @include h1Style(); } @@ -211,6 +198,34 @@ @include h6Style(); } +.dnb-h1, +.dnb-h2, +.dnb-h3, +.dnb-lead, +.dnb-h4, +.dnb-h5, +.dnb-h6, +// make exception on headings wtich are inside of dnb-core-style +.dnb-core-style .dnb-h1, +.dnb-core-style .dnb-h2, +.dnb-core-style .dnb-h3, +.dnb-core-style .dnb-h4, +.dnb-core-style .dnb-h5, +.dnb-core-style .dnb-h6 { + @include headingsStyle(); +} + +// do not set this for h1, like ".dnb-h1 > .dnb-small" +.dnb-p > small, +.dnb-p > .dnb-small, +.dnb-h2 > .dnb-small, +.dnb-h3 > .dnb-small, +.dnb-h4 > .dnb-small, +.dnb-h5 > .dnb-small, +.dnb-h6 > .dnb-small { + line-height: 1em; // for vertical alignment, we have to have no line-height +} + .dnb-p { @include paragraphStyle(); b, diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js index 135ab2735a2..5ab73e6d26b 100644 --- a/packages/dnb-ui-lib/stories/componentsStories.js +++ b/packages/dnb-ui-lib/stories/componentsStories.js @@ -82,7 +82,7 @@ stories.push([

H1 with the DNB Logo

-

+

Text with the DNB Logo

@@ -289,16 +289,18 @@ class ModalCloseExample extends React.PureComponent { setTimeout(close, 3e3) }} > -
- -

Some content

- Focus me with Tab key - - -

- -

- + +
+ +

Some content

+ Focus me with Tab key + + +

+ +

+ + ) } @@ -310,16 +312,18 @@ stories.push([ -
- -

Some content

- Focus me with Tab key - - -

- -

- + +
+ +

Some content

+ Focus me with Tab key + + +

+ +

+ + @@ -402,7 +406,7 @@ stories.push([ disabled show_value_outside /> -

+

Eros semper blandit tellus mollis primis quisque platea sollicitudin ipsum

@@ -415,7 +419,7 @@ stories.push([ selected_item={4} status="Message to the user" /> -

+

Eros semper blandit tellus mollis primis quisque platea sollicitudin ipsum

@@ -428,7 +432,7 @@ stories.push([ icon_position="left" selected_item={2} /> -

+

Eros semper blandit tellus mollis primis quisque platea sollicitudin ipsum

@@ -517,7 +521,7 @@ const exampleTabsContent = { first: () =>

First

, second: () => Focus me with next Tab key, third: () => ( -

+

Eros semper blandit tellus mollis primis quisque platea sollicitudin ipsum

diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js index b872a24dd1b..9d623810038 100644 --- a/packages/dnb-ui-lib/stories/elementsStories.js +++ b/packages/dnb-ui-lib/stories/elementsStories.js @@ -105,7 +105,7 @@ stories.push([ Only text - {/* + {/* Sortable */} @@ -116,7 +116,7 @@ stories.push([ /> - {/* + {/* Active */} @@ -131,7 +131,7 @@ stories.push([ -

+

Column 1 width p

@@ -158,7 +158,7 @@ stories.push([ -

+

Lorem in morbi euismod id lectus varius imperdiet proin dui

@@ -173,8 +173,8 @@ stories.push([ -

Paragraph

-
    +

    Paragraph

    +
    • Item 1
    • Item 2
    • @@ -191,7 +191,7 @@ stories.push([
    • Item 1
    • Item 2
    • - Item 3 with

      Paragraph

      + Item 3 with

      Paragraph

    • Item 4
    @@ -201,10 +201,10 @@ stories.push([
  • Item 4
-

+

Lorem in morbi euismod id lectus varius imperdiet proin dui

-

+

Lorem in morbi euismod id lectus varius imperdiet proin dui

@@ -219,19 +219,19 @@ stories.push([ -
+
Scaevola dissentias ne nec, praesent pertinacia te vim, velit laboramus assentior ne ius. Choro vivendum tractatos ei quo. Te vim enim meis conclusionemque, per ut dolorem copiosae, ea veri sanctus deterruisset per
Footer Referance
-

+

Next line with a Cite

-
+
Scaevola dissentias ne nec, praesent pertinacia te vim, velit laboramus assentior ne ius. Choro vivendum tractatos ei quo. Te vim enim meis conclusionemque, per ut dolorem copiosae, ea veri @@ -251,7 +251,7 @@ stories.push([ -
    +
    1. Item 1
    2. Item 2
    3. Item 3
      4. @@ -277,7 +277,7 @@ stories.push([ -
      +
      Item Title 1
      Item Description 1
      Item Title 1
      @@ -298,6 +298,7 @@ stories.push([