feat: remove support for internet explorer (#1807)

* feat: remove support for internet explorer

* Remove IE patch code

* Remove IE11 word from Babel preset comment

* Remove IE11 support completely in postcssConfig

* Remove IE11 comment on internal NumberFormat function (formatToParts)

* Remove CSS grid IE11 fallbacks

* Rewrite postbuild tests to match new browser list builds

* Update snapshots

* Rewrite test for SCSS to CSS transformation

* Add browsersl.ist link in supported browsers doc

Co-authored-by: Tobias Høegh <tobias@tujo.no>

package.json

@@ -38,8 +38,7 @@
     "node-gyp": "8.4.0"
   },
   "resolutions": {
-    "svg2vectordrawable/svgo": "2.3.0",
-    "@storybook/preset-ie11@0.0.1": "patch:@storybook/preset-ie11@npm:0.0.1#.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898"
+    "svg2vectordrawable/svgo": "2.3.0"
   },
   "engines": {
     "node": "14.17.0",

packages/dnb-design-system-portal/.browserslistrc

@@ -1,6 +1,7 @@
 # Should reflect: https://eufemia.dnb.no/uilib/usage#supported-browsers-and-platforms
-ie 11
 edge >= 14
 firefox >= 52
 chrome >= 49
-safari >= 10
+safari >= 10
+not ie > 0
+not ie_mob > 0

packages/dnb-design-system-portal/babel.config.js

@@ -11,8 +11,4 @@ module.exports = {
       },
     ],
   ],
-  ignore: [
-    // Needed in order to run on IE11
-    '.*node_modules/(?!rewrite-pattern|ansi-regex|strip-ansi|regexpu-core|buble|react-live).*',
-  ],
 }

packages/dnb-design-system-portal/src/docs/icons/details.md

@@ -57,7 +57,7 @@ The reason why there are two sizes, is mainly due to the SVG artifact, that the
 
 ### Scalability in web
 
-To ensure that the relative size of the SVG icons is scalable by the inherited CSS font size, do not explicitly specify the SVG, unless for older browsers like Internet Explorer.
+To ensure that the relative size of the SVG icons is scalable by the inherited CSS font size, do not explicitly specify the SVG.
 
 **Example size definition by CSS**
 

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md

@@ -67,12 +67,17 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 
 1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction).
 
+### [Stopped supporting Internet Explorer (IE)](/uilib/usage/#supported-browsers-and-platforms)
+
+Stopped supporting Internet Explorer (IE), as Microsoft formally ended support for IE in June, 2022.
+
 ### Deprecations
 
 - `use_scrollwheel` and `on_init` properties, as well as the `raw_value` event value from [Slider](/uilib/components/slider) was removed in order to support multiple buttons.
 - Helper class `.dnb-sr-only--inline` and SCSS mixin `srOnlyInline` was removed.
 - Helper class `.dnb-not-sr-only` and SCSS mixin `notSrOnly` was removed.
 - `import { SpacingHelper } from '@dnb/eufemia/shared'` was removed due to low usage. Use one of the [other exported helpers](/uilib/usage/layout/spacing).
+- `isIE11` and `IS_IE11` is deprecated as we have stopped supporting Internet Explorer (IE).
 
 ## Install
 

packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.md

@@ -11,7 +11,7 @@ redirect_from:
 | `value` or `children`                       | _(required)_ a number.                                                                                                                                                                                                                                                                                                                                                                                |
 | `srLabel`                                   | _(optional)_ Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents.                                                                                                                                                                                                                                                        |
 | `locale`                                    | _(optional)_ Use a [2 Letter Language Codes](https://www.sitepoint.com/iso-2-letter-language-codes/) or an extended code such as `nb-NO`. Use `auto` to detect the locale from the browser (`navigator.language`). Defaults to the Norwegian locale: `nb-NO`.                                                                                                                                         |
-| `compact`                                   | _(optional)_ Shortens any number or currency including an abbreviation (no IE11 support). You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given.                                                                                                                                       |
+| `compact`                                   | _(optional)_ Shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given.                                                                                                                                                         |
 | `clean`                                     | _(optional)_ if set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`).                                                                                                                                                                                                                                                     |
 | `currency`                                  | _(optional)_ Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.                                                                                                                                                                                                                                                                                               |
 | `currency_display`                          | _(optional)_ Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`.                                                                                                                                                 |

packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md

@@ -108,11 +108,3 @@ const { InfinityMarker, endInfinity, resetInfinity } =
 
 render(<InfinityMarker>ReactComponent</InfinityMarker>)
 ```
-
-### Legacy browser support (Internet Explorer 11)
-
-The **infinity scroller** is using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This API is supported by all nowadays browsers. But if your applications need support for outdated browser, you can install e.g. [this IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer) and import it:
-
-```js
-import 'intersection-observer'
-```

packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md

@@ -178,7 +178,7 @@ If you only want to change the colors, you can swap out `fill='%23007272'` with
 }
 ```
 
-To ensure compatibility for Internet Explorer and older Edge versions, you may still use **base64**. Use e.g. [this base64 converter](https://www.base64encode.org)
+To ensure compatibility for older Edge versions, you may still use **base64**. Use e.g. [this base64 converter](https://www.base64encode.org)
 
 ```css
 .dnb-anchor::after {

packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md

@@ -216,8 +216,6 @@ You can import Eufemia _mixins_ directly into your SCSS styles:
 } // .dnb-sr-only--inline
 
 /** Browser Checks */
-@include IS_IE {
-}
 @include IS_EDGE {
 }
 @include IS_FF {

packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.md

@@ -278,7 +278,6 @@ copyToClipboard(string) // returns success: String|Boolean|Error
 
 | Function   | Description                                        | Parameters | Return    |
 | ---------- | -------------------------------------------------- | ---------- | --------- |
-| `isIE11`   | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isEdge`   | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isSafari` | Returns true or false, depending on the detection. | none       | `Boolean` |
 | `isiOS`    | Returns true or false, depending on the detection. | none       | `Boolean` |
@@ -290,7 +289,6 @@ copyToClipboard(string) // returns success: String|Boolean|Error
 
 | Constant    | Description                                                         | Value     |
 | ----------- | ------------------------------------------------------------------- | --------- |
-| `IS_IE11`   | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_EDGE`   | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_SAFARI` | Gives you true or false, depending on the detection during startup. | `Boolean` |
 | `IS_IOS`    | Gives you true or false, depending on the detection during startup. | `Boolean` |

packages/dnb-design-system-portal/src/docs/uilib/usage.md

@@ -38,6 +38,10 @@ Read more in the [First Steps](/uilib/usage/first-steps/) section.
 
 ## Supported Browsers and Platforms
 
-| IE                   | Edge                 | Firefox              | Chrome               | Safari               | Node                 |
-| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | -------------------- |
-| <small>==</small> 11 | <small>>=</small> 14 | <small>>=</small> 45 | <small>>=</small> 49 | <small>>=</small> 10 | <small>>=</small> 10 |
+We use the following config in our browserlists(.browserslistrc): `edge >= 14, firefox >= 52, chrome >= 49, safari >= 10, not ie > 0, not ie_mob > 0`.
+
+To see exactly which browsers this config supports, take a look [here](https://browsersl.ist/#q=edge+%3E%3D+14%2C+firefox+%3E%3D+52%2C+chrome+%3E%3D+49%2C+safari+%3E%3D+10%2C+not+ie+%3E+0%2C+not+ie_mob+%3E+0).
+
+| Edge                 | Firefox              | Chrome               | Safari               | Node                 |
+| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- |
+| <small>>=</small> 14 | <small>>=</small> 45 | <small>>=</small> 49 | <small>>=</small> 10 | <small>>=</small> 10 |

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md

@@ -7,8 +7,6 @@ title: 'Polyfill'
 
 By using Eufemia properties, like [color names](/uilib/usage/customisation/colors) and [typography properties](/uilib/typography), instead of defining colors and typography directly as hard coded values, you make your code much more readable and future proof in terms of refactoring and new enhancements. [Maintainability](/uilib/getting-started/maintainability) is important. But it fits also better in thinking of the [Living system](/uilib/getting-started/living-system) terms.
 
-But as long as we have to support legacy browsers like [Internet Explorer](!/uilib/usage#supported-browsers-and-platforms) we have to deal with a fallback or polyfill.
-
 ## Post CSS
 
 Use [postcss-preset-env](https://github.com/csstools/postcss-preset-env). Example [webpack](https://webpack.js.org) loader config:
@@ -22,7 +20,7 @@ Use [postcss-preset-env](https://github.com/csstools/postcss-preset-env). Exampl
       postcssPresetEnv({
         stage: 0,
         preserve: true,
-        browsers: ['last 2 versions', 'explorer >= 11'],
+        browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'],
         importFrom: [require.resolve('@dnb/eufemia/style/dnb-ui-properties.css')]
       })
     ]

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md

@@ -195,4 +195,4 @@ If your applications only need new colors or other CSS properties, you could sim
 
 ### Using CSS (vars) Custom Properties
 
-This is for sure a very nice and powerful solution, but lacks Internet Explorer support.
+This is a very nice and powerful solution.

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md

@@ -109,7 +109,6 @@ import Button from '@dnb/eufemia/es/components/Button'
 Make sure your environment has a production build with:
 
 - Tree Shaking
-- Compile to ES5 for IE support
 - Minify and mangle the Output
 
 By default, [webpack v4](https://webpack.js.org) does this fine.

packages/dnb-design-system-portal/src/shared/menu/Card.js

@@ -7,7 +7,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import { Button } from '@dnb/eufemia/src'
-import { IS_IE11 } from '@dnb/eufemia/src/shared/helpers'
 import classnames from 'classnames'
 import { P, Span } from '@dnb/eufemia/src/elements'
 import {
@@ -36,33 +35,14 @@ export default class Card extends React.PureComponent {
   render() {
     const { url, title, about, icon: Svg } = this.props
 
-    // size is else defined in css
-    const svgParams = IS_IE11 ? { width: '48', height: '48' } : null
-
-    const Anchor = IS_IE11
-      ? ({ children, to, ...rest }) =>
-          to && (
-            <a
-              {...rest}
-              href={url}
-              onClick={(event) => {
-                event.preventDefault()
-                window.location.assign(url)
-              }}
-            >
-              {children}
-            </a>
-          )
-      : Link
-
     return (
       <li
         className={classnames(
           liItemStyle,
           this.isSelected() && 'is-selected'
         )}
       >
-        <Anchor
+        <Link
           className={classnames(
             linkStyle,
             'dnb-anchor--no-style',
@@ -73,7 +53,7 @@ export default class Card extends React.PureComponent {
         >
           <Span className={linkInnerStyle}>
             <Span className={boxStyle}>
-              {Svg && <Svg {...svgParams} />}
+              {Svg && <Svg />}
               <P style_type="lead">{title}</P>
               <P top="x-small">{about}</P>
             </Span>
@@ -88,7 +68,7 @@ export default class Card extends React.PureComponent {
               />
             </Span>
           </Span>
-        </Anchor>
+        </Link>
       </li>
     )
   }

packages/dnb-design-system-portal/src/shared/menu/Card.module.scss

@@ -58,18 +58,6 @@
       transform: scale3d(0.9, 0.9, 1) translate3d(0, -8%, 0);
     }
   }
-
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    &.show-cards {
-      opacity: 1;
-    }
-    overflow: hidden;
-    background-color: #fff;
-    p {
-      width: 20rem;
-    }
-  }
 }
 
 .linkStyle {

packages/dnb-design-system-portal/src/shared/menu/MainMenu.module.scss

@@ -12,11 +12,6 @@
 
   background-color: transparent;
   transition: background-color ease-out 0.8s;
-
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    background-color: var(--color-emerald-green);
-  }
 }
 
 .listStyle {
@@ -42,12 +37,6 @@
   justify-content: center;
   align-items: center;
 
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: none) {
-    width: auto;
-    color: #fff;
-  }
-
   @include allBelow(small) {
     .dnb-drawer-list__list {
       width: 90vw;

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss

@@ -3,10 +3,6 @@
 :global {
   :root {
     --aside-width: calc(25vw + 5rem);
-
-    @include IS_IE {
-      --aside-width: 30vw;
-    }
   }
 
   .dnb-sidebar-menu {

packages/dnb-eufemia/.browserslistrc

@@ -1,5 +1,6 @@
-ie 11
 edge >= 14
 firefox >= 52
 chrome >= 49
 safari >= 10
+not ie > 0
+not ie_mob > 0

packages/dnb-eufemia/.storybook/main.js

@@ -3,5 +3,5 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: ['../src/**/*.stories.{js,tsx}'],
-  addons: ['@storybook/preset-ie11', '@storybook/preset-scss'],
+  addons: ['@storybook/preset-scss'],
 }

packages/dnb-eufemia/babel.config.js

@@ -25,7 +25,7 @@ const presetsGeneral =
         ...basisPresets,
       ]
 
-// Used for legacy, IE11 builds
+// Used for legacy builds
 const legacyPresets =
   process.env.BABEL_ENV === 'es'
     ? []
@@ -99,7 +99,6 @@ const config = {
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-transform-object-assign', // for IE support
   ],
   sourceMaps: true,
   comments: false,

packages/dnb-eufemia/package.json

@@ -123,7 +123,6 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-typescript": "7.16.0",
     "@babel/plugin-transform-modules-commonjs": "7.16.0",
-    "@babel/plugin-transform-object-assign": "7.16.0",
     "@babel/plugin-transform-react-constant-elements": "7.16.0",
     "@babel/plugin-transform-runtime": "7.16.0",
     "@babel/preset-env": "7.16.0",
@@ -146,7 +145,6 @@
     "@storybook/addons": "6.5.12",
     "@storybook/builder-webpack5": "^6.5.12",
     "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/preset-ie11": "patch:@storybook/preset-ie11@0.0.1#../../.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "6.5.12",
     "@storybook/theming": "6.5.12",

packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js

@@ -145,7 +145,7 @@ describe('babel build', () => {
               ),
               'utf-8'
             )
-            expect(content).toContain('var Input = function')
+            expect(content).toContain('class Input extends')
             expect(content).toMatch(/^"use strict";/g)
           }
 
@@ -183,7 +183,7 @@ describe('babel build', () => {
               ),
               'utf-8'
             )
-            expect(content).toContain('export { Input as default };')
+            expect(content).toContain('export default class Input extends')
             expect(content).toContain('core-js/modules/es')
             expect(content).toContain(
               'import _extends from "@babel/runtime/helpers/esm/extends";'