fix: fix vertical text alignment on windows os browsers

dnbexperience · Aug 7, 2019 · d4b8497 · d4b8497
1 parent 7f1aaf9
commit d4b8497
Show file tree

Hide file tree

Showing 32 changed files with 210 additions and 127 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
@@ -232,10 +232,6 @@ exports[`Button scss have to match default theme snapshot 1`] = `
 * Button mixins
 *
 */
-:root {
-  --button-border-width: 0px;
-  /* stylelint-disable-line */ }
-
 .dnb-button {
   border: none;
   box-shadow: none; }
@@ -570,16 +566,18 @@ exports[`Button scss have to match snapshot 1`] = `
     font-size: var(--button-font-size);
     line-height: var(--button-height); }
   .dnb-button__icon {
-    line-height: 1em;
-    transform: translateY(calc(1px - 1px - var(--button-border-width))); }
+    line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    [os='win'] .dnb-button__icon {
+      transform: translateY(-0.0625rem); }
   .dnb-button__text {
     line-height: 1em;
     color: inherit;
-    background-color: inherit;
-    transform: translateY(calc(1px - var(--button-border-width))); }
+    background-color: inherit; }
+    [os='mac'] .dnb-button__text {
+      transform: translateY(0.0625rem); }
   .dnb-button__bounding {
     position: absolute;
     background-color: transparent;
@@ -591,7 +589,7 @@ exports[`Button scss have to match snapshot 1`] = `
     width: var(--button-width--small);
     height: var(--button-height--small);
     font-size: var(--button-font-size-small);
-    line-height: var(--button-font-size-small);
+    line-height: var(--button-height--small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1rem;

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -47,18 +47,26 @@
   text-decoration: none;
 
   &__icon {
-    line-height: 1em; // for vertical alignment, we have to have no line-height
+    line-height: 1em; // vertical alignment, if we have no line-height
     &:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size);
     }
-    transform: translateY(calc(1px - 1px - var(--button-border-width)));
+
+    // vertical alignment
+    [os='win'] & {
+      transform: translateY(-0.0625rem);
+    }
   }
   &__text {
     line-height: 1em;
     color: inherit;
     background-color: inherit;
-    transform: translateY(calc(1px - var(--button-border-width)));
+
+    // vertical alignment
+    [os='mac'] & {
+      transform: translateY(0.0625rem);
+    }
   }
 
   &__bounding {
@@ -75,7 +83,7 @@
     width: var(--button-width--small);
     height: var(--button-height--small);
     font-size: var(--button-font-size-small);
-    line-height: var(--button-font-size-small);
+    line-height: var(--button-height--small);
     border-radius: var(--button-border-radius--small);
   }
   &--has-text#{&}--size-small {

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
@@ -6,11 +6,6 @@
 @import '../../../../style/themes/imports.scss';
 @import '../_button-mixins.scss';
 
-:root {
-  // we don't need a border
-  --button-border-width: 0px; /* stylelint-disable-line */
-}
-
 .dnb-button {
   border: none;
   box-shadow: none;

diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -493,8 +493,9 @@ legend.dnb-form-label {
     align-items: center;
     justify-content: center;
     width: var(--checkbox-height);
-    height: var(--checkbox-height);
-    transform: translateY(-0.0625rem); }
+    height: var(--checkbox-height); }
+    [os='mac'] .dnb-checkbox__shell {
+      transform: translateY(-0.0625rem); }
   .dnb-checkbox__focus, .dnb-checkbox__button {
     position: relative;
     z-index: 4;

diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
@@ -36,9 +36,9 @@
     height: var(--checkbox-height);
 
     // vertical alignment
-    transform: translateY(
-      -0.0625rem
-    ); // ajust (for 1px) the shell because of line-height of fedra font
+    [os='mac'] & {
+      transform: translateY(-0.0625rem);
+    }
   }
 
   &__focus,

diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -1098,16 +1098,18 @@ exports[`DatePicker scss have to match snapshot 1`] = `
     font-size: var(--button-font-size);
     line-height: var(--button-height); }
   .dnb-button__icon {
-    line-height: 1em;
-    transform: translateY(calc(1px - 1px - var(--button-border-width))); }
+    line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    [os='win'] .dnb-button__icon {
+      transform: translateY(-0.0625rem); }
   .dnb-button__text {
     line-height: 1em;
     color: inherit;
-    background-color: inherit;
-    transform: translateY(calc(1px - var(--button-border-width))); }
+    background-color: inherit; }
+    [os='mac'] .dnb-button__text {
+      transform: translateY(0.0625rem); }
   .dnb-button__bounding {
     position: absolute;
     background-color: transparent;
@@ -1119,7 +1121,7 @@ exports[`DatePicker scss have to match snapshot 1`] = `
     width: var(--button-width--small);
     height: var(--button-height--small);
     font-size: var(--button-font-size-small);
-    line-height: var(--button-font-size-small);
+    line-height: var(--button-height--small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1rem;
@@ -1459,7 +1461,6 @@ legend.dnb-form-label {
     color: inherit;
     font-size: inherit;
     background-color: transparent;
-    transform: translateY(var(--input-border-width));
     font-variant-numeric: lining-nums;
     font-feature-settings: \\"lnum\\"; }
   .dnb-input__placeholder {
@@ -1476,6 +1477,9 @@ legend.dnb-form-label {
     display: none; }
   .dnb-input__input::-ms-clear {
     display: none; }
+  [os='mac'] .dnb-input__placeholder,
+  [os='mac'] .dnb-input__input {
+    transform: translateY(0.0625rem); }
   .dnb-core-style .dnb-input__input {
     line-height: 1em; }
   .dnb-input--has-submit-button .dnb-input__placeholder,
@@ -1529,6 +1533,8 @@ legend.dnb-form-label {
     .dnb-input--large .dnb-input__submit-button__button {
       width: var(--input-height--large);
       height: var(--input-height--large); }
+      .dnb-input--large .dnb-input__submit-button__button .dnb-button__icon {
+        transform: scale(1.33333); }
   .dnb-input--large.dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--large.dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding--large) * 2.5); }

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -31,22 +31,18 @@
 @keyframes datePickerSlideDown {
   from {
     opacity: 0;
-    // transform: translateY(calc(1px - var(--date-picker-input-height)));
   }
   to {
     opacity: 1;
-    // transform: translateY(0);
   }
 }
 
 @keyframes datePickerSlideUp {
   from {
     opacity: 1;
-    // transform: translateY(0);
   }
   to {
     opacity: 0;
-    // transform: translateY(calc(1px - var(--date-picker-input-height)));
   }
 }
 

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -886,7 +886,7 @@ export default class Dropdown extends PureComponent {
                 <span
                   className={classnames(
                     'dnb-dropdown__icon',
-                    `icon-${icon}`,
+                    // icon && `icon-${icon}`,// not used anymore for now
                     parseFloat(selected_item) === 0 &&
                       'dnb-dropdown__icon--first'
                   )}

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.screenshot.test.js b/packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.screenshot.test.js
@@ -40,7 +40,7 @@ describe('Dropdown screenshot', () => {
       simulateSelector:
         '[data-dnb-test="dropdown-closed"] .dnb-dropdown__trigger',
       simulate: 'click',
-      waitFor: 10 // to make sure we make the screenshot afte the animation is show
+      waitFor: 100 // to make sure we make the screenshot afte the animation is show
     })
     expect(screenshot).toMatchImageSnapshot()
   })
@@ -54,7 +54,7 @@ describe('Dropdown screenshot', () => {
       simulateSelector:
         '[data-dnb-test="dropdown-popup"] .dnb-dropdown__trigger',
       simulate: 'click',
-      waitFor: 10 // to make sure we make the screenshot afte the animation is show
+      waitFor: 100 // to make sure we make the screenshot afte the animation is show
     })
     expect(screenshot).toMatchImageSnapshot()
   })

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
@@ -144,7 +144,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
             </span>
           </span>
           <span
-            className="dnb-dropdown__icon icon-icon"
+            className="dnb-dropdown__icon"
           >
             <IconPrimary
               alt={null}
@@ -384,6 +384,10 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
       .dnb-dropdown__trigger:not(:disabled):focus .dnb-dropdown__icon .dnb-icon, .dnb-dropdown__trigger:not(:disabled):hover .dnb-dropdown__text,
       .dnb-dropdown__trigger:not(:disabled):hover .dnb-dropdown__icon .dnb-icon {
         color: var(--dropdown-text-color); }
+    .dnb-dropdown__trigger:not(:disabled):active {
+      background-color: var(--color-mint-green-50);
+      border-color: transparent;
+      box-shadow: none; }
   .dnb-dropdown--opened .dnb-dropdown__trigger {
     box-shadow: 0 0 0 0.0625rem var(--dropdown-border-color--selected);
     /* IE11 fix */
@@ -868,14 +872,15 @@ legend.dnb-form-label {
   .dnb-dropdown__popup--small .dnb-dropdown__trigger {
     width: calc(var(--dropdown-height) / 1.333);
     height: calc(var(--dropdown-height) / 1.333);
-    line-height: calc(var(--dropdown-height) / 1.333);
     padding: 0; }
+  .dnb-dropdown__popup--small .dnb-dropdown__trigger {
+    line-height: calc(var(--dropdown-height) / 1.333 - 0.0625rem); }
   .dnb-dropdown__popup--small .dnb-dropdown__list {
     top: calc(var(--dropdown-height) / 1.333);
     left: calc(1px - 2px - var(--dropdown-padding-horizontal) / 1.333); }
   .dnb-dropdown__popup--small.dnb-dropdown--direction-top .dnb-dropdown__list {
     top: auto;
-    bottom: var(--dropdown-height); }
+    bottom: calc(var(--dropdown-height) / 1.333); }
   .dnb-dropdown__text {
     order: 1;
     position: relative;
@@ -885,7 +890,9 @@ legend.dnb-form-label {
     overflow: hidden;
     color: inherit;
     text-align: left;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    font-variant-numeric: lining-nums;
+    font-feature-settings: \\"lnum\\"; }
     .dnb-dropdown__text__inner {
       display: inline-block;
       width: calc( var(--dropdown-width) - calc(var(--dropdown-padding-horizontal) * 3 + 10px));
@@ -896,8 +903,9 @@ legend.dnb-form-label {
       color: inherit;
       text-decoration: none;
       text-overflow: inherit;
-      text-align: inherit;
-      transform: translateY(var(--dropdown-border-width)); }
+      text-align: inherit; }
+      [os='mac'] .dnb-dropdown__text__inner {
+        transform: translateY(0.0625rem); }
   .dnb-dropdown--opened .dnb-dropdown__list {
     z-index: 9;
     display: flex; }
@@ -912,8 +920,7 @@ legend.dnb-form-label {
   .dnb-dropdown:not(.dnb-dropdown--opened) .dnb-dropdown__list--no-animation {
     animation: dropdownSlideUp 1ms ease-out 1 forwards; }
   .dnb-dropdown--icon-position-left .dnb-dropdown__icon {
-    order: 1;
-    transform: translateY(calc(1px - 1px - var(--dropdown-border-width))); }
+    order: 1; }
   .dnb-dropdown--icon-position-left .dnb-dropdown__text {
     order: 2;
     padding-right: 0;
@@ -929,8 +936,6 @@ legend.dnb-form-label {
       top: -0.375rem; }
   .dnb-dropdown__inner > .dnb-form-status {
     margin-top: 0.5rem; }
-  .dnb-dropdown .icon-chevron-left .dnb-icon svg {
-    transform: rotate(-90deg); }
   .dnb-dropdown--vertical {
     display: flex;
     align-items: flex-start;

diff --git a/...down-screenshot-have-to-match-the-dropdown-as-small-popup-menu-1-19cfe.snap.png b/...down-screenshot-have-to-match-the-dropdown-as-small-popup-menu-1-19cfe.snap.png