fix: set IE11 support for all css outputs

dnbexperience · Jan 15, 2019 · 3e870bd · 3e870bd
1 parent 3fabaaf
commit 3e870bd
Show file tree

Hide file tree

Showing 23 changed files with 79 additions and 111 deletions.
diff --git a/packages/dnb-design-system-portal/gatsby-browser.js b/packages/dnb-design-system-portal/gatsby-browser.js
@@ -10,7 +10,9 @@ if (process.env.NODE_ENV === 'development') {
 } else {
   // As the gatsby-plugin-postcss plugin dont processes the scss file in the package "dnb-ui-lib" - we have to use the preprocessed version
   // import both all components, patterns and the default theme
-  require('dnb-ui-lib/style/lib-IE11')
+  // require('dnb-ui-lib/style/lib-IE11')
+  require('dnb-ui-lib/style/patterns') // import ony patterns
+  require('dnb-ui-lib/style') // import both all components and the default theme
 }
 
 exports.disableCorePrefetching = () => false
diff --git a/packages/dnb-design-system-portal/gatsby-config.js b/packages/dnb-design-system-portal/gatsby-config.js
@@ -75,7 +75,6 @@ module.exports = {
     },
     'gatsby-plugin-sass',
     'gatsby-plugin-emotion',
-    // 'gatsby-plugin-postcss',
     {
       resolve: 'gatsby-plugin-postcss',
       options: {

diff --git a/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js b/packages/dnb-ui-lib/scripts/prepub/config/postcssConfig.js
@@ -27,7 +27,7 @@ module.exports = ({ IE11 = false, ...options } = {}) => {
             border-radius: calc(2.5rem / 2);
             border-radius: var(--button-border-radius);
            */
-          preserve: false,
+          preserve: true,
           warnWhenCannotResolve: false
         })
       : null

diff --git a/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js b/packages/dnb-ui-lib/scripts/prepub/tasks/makeMainStyle.js
@@ -24,9 +24,6 @@ export default async () => {
   await runFactory('./src/style/**/dnb-ui-components.scss')
   await runFactory('./src/style/**/dnb-ui-patterns.scss')
   await runFactory('./src/style/**/dnb-ui-lib.scss')
-  await runFactory('./src/style/**/dnb-ui-lib-IE11.scss', {
-    IE11: true
-  })
   log.succeed(
     '> PrePublish: "makeMainStyle" transforming style modules done'
   )
@@ -67,7 +64,7 @@ const transformStyleModules = () =>
 
 export const runFactory = (
   src,
-  { IE11 = false, returnResult = false, importOnce = true } = {}
+  { returnResult = false, importOnce = true } = {}
 ) =>
   new Promise((resolve, reject) => {
     log.start('> PrePublish: transforming main style')
@@ -84,7 +81,7 @@ export const runFactory = (
         })
         .pipe(stream)
         .pipe(transform('utf8', transformMainStyleContent))
-        .pipe(postcss(postcssConfig({ IE11 })))
+        .pipe(postcss(postcssConfig({ IE11: true })))
         .pipe(cloneSink)
         .pipe(cssnano())
         .pipe(rename({ suffix: '.min' }))

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
@@ -331,15 +331,15 @@ exports[`Button scss have to match snapshot 1`] = `
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -370,16 +370,16 @@ exports[`Button scss have to match snapshot 1`] = `
     color: inherit;
     background-color: inherit;
     transform: translateY(var(--button-border-width)); }
-  .dnb-button--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium); }
-  .dnb-button--has-text.dnb-button--size-medium {
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small); }
+  .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
     padding-right: 1em; }
-  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
     padding-left: 0.5em; }
-  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);

diff --git a/packages/dnb-ui-lib/src/components/button/details.md b/packages/dnb-ui-lib/src/components/button/details.md
@@ -4,7 +4,7 @@
 | `text`          | _(optional)_ the content of the button.                                                                                                |
 | `title`         | _(optional)_ title of the button. Optional, but should always be included because of accessibility.                                    |
 | `variant`       | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.                          |
-| `size`          | _(optional)_ the size of the button. For now there is **medium** and **large** beside **default**.                                     |
+| `size`          | _(optional)_ the size of the button. For now there is **small**, **default** and **large**.                                            |
 | `icon`          | _(optional)_ name of icon to be included in the button.                                                                                |
 | `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Defaults to `right` if not set.                             |
 | `icon_size`     | _(optional)_ define icon width and height. Defaults to 16px                                                                            |

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
@@ -12,12 +12,6 @@
     background-color: $background-color;
     border-color: $background-color;
 
-    // @if $border-color {
-    //   border-color: $border-color;
-    // } @else {
-    //   border-color: $background-color;
-    // }
-
     @include fakeBorder(
       null,
       0 0 0 var(--button-border-width--hover) $background-color

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -10,15 +10,15 @@
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
 }
 
@@ -60,20 +60,20 @@
     transform: translateY(var(--button-border-width));
   }
 
-  // size medium
-  &--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium);
+  // size small
+  &--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small);
   }
-  &--has-text#{&}--size-medium {
+  &--has-text#{&}--size-small {
     padding-left: 1em;
     padding-right: 1em;
   }
-  &--has-text#{&}--icon-position-left#{&}--size-medium {
+  &--has-text#{&}--icon-position-left#{&}--size-small {
     padding-left: 0.5em;
   }
-  &--has-text#{&}--icon-position-right#{&}--size-medium {
+  &--has-text#{&}--icon-position-right#{&}--size-small {
     padding-right: 0.5em;
   }
 

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
@@ -361,15 +361,15 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -400,16 +400,16 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     color: inherit;
     background-color: inherit;
     transform: translateY(var(--button-border-width)); }
-  .dnb-button--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium); }
-  .dnb-button--has-text.dnb-button--size-medium {
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small); }
+  .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
     padding-right: 1em; }
-  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
     padding-left: 0.5em; }
-  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -218,15 +218,15 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -257,16 +257,16 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     color: inherit;
     background-color: inherit;
     transform: translateY(var(--button-border-width)); }
-  .dnb-button--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium); }
-  .dnb-button--has-text.dnb-button--size-medium {
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small); }
+  .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
     padding-right: 1em; }
-  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
     padding-left: 0.5em; }
-  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);

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
@@ -290,15 +290,15 @@ exports[`Input scss have to match snapshot 1`] = `
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -329,16 +329,16 @@ exports[`Input scss have to match snapshot 1`] = `
     color: inherit;
     background-color: inherit;
     transform: translateY(var(--button-border-width)); }
-  .dnb-button--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium); }
-  .dnb-button--has-text.dnb-button--size-medium {
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small); }
+  .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
     padding-right: 1em; }
-  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
     padding-left: 0.5em; }
-  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);

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
@@ -587,15 +587,15 @@ exports[`Modal scss have to match snapshot 1`] = `
   --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--medium: 2rem;
-  --button-height--medium: 2rem;
+  --button-width--small: 2rem;
+  --button-height--small: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
+  --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -626,16 +626,16 @@ exports[`Modal scss have to match snapshot 1`] = `
     color: inherit;
     background-color: inherit;
     transform: translateY(var(--button-border-width)); }
-  .dnb-button--size-medium {
-    width: var(--button-width--medium);
-    height: var(--button-height--medium);
-    border-radius: var(--button-border-radius--medium); }
-  .dnb-button--has-text.dnb-button--size-medium {
+  .dnb-button--size-small {
+    width: var(--button-width--small);
+    height: var(--button-height--small);
+    border-radius: var(--button-border-radius--small); }
+  .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
     padding-right: 1em; }
-  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
     padding-left: 0.5em; }
-  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);

diff --git a/packages/dnb-ui-lib/src/style/components.js b/packages/dnb-ui-lib/src/style/components.js
@@ -1,5 +1,5 @@
 /**
- * Web Style Import
+ * Imports only components, but no theme
  *
  */
 

diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-lib-IE11.scss b/packages/dnb-ui-lib/src/style/dnb-ui-lib-IE11.scss
diff --git a/packages/dnb-ui-lib/src/style/index.js b/packages/dnb-ui-lib/src/style/index.js
@@ -1,19 +1,7 @@
 /**
- * Web Style Import
+ * Imports both the components and the default theme
  *
  */
 
 import './dnb-ui-components.scss'
 import './themes/dnb-theme-ui.scss'
-
-// TODO: Remove this as soon as there is no need for it
-// just for testing porposes
-// import './themes/dnb-theme-open-banking.scss'
-
-/**
- * Only for testing porposes
- * This style should make perfectly buttons
- *
- */
-// import '../components/button/style/dnb-button.scss'
-// import './themes/dnb-theme-ui.scss'
diff --git a/packages/dnb-ui-lib/src/style/lib-IE11.js b/packages/dnb-ui-lib/src/style/lib-IE11.js
diff --git a/packages/dnb-ui-lib/src/style/lib.js b/packages/dnb-ui-lib/src/style/lib.js
@@ -1,5 +1,5 @@
 /**
- * Web Style Import
+ * Imports both components and patterns, but no theme
  *
  */
 

diff --git a/packages/dnb-ui-lib/src/style/patterns.js b/packages/dnb-ui-lib/src/style/patterns.js
@@ -1,5 +1,5 @@
 /**
- * Web Style Import
+ * Imports only the patterns
  *
  */