From 771f69fbec351095cf0a644f84d377a00ae7d80c Mon Sep 17 00:00:00 2001 From: Anders Date: Mon, 19 Dec 2022 14:38:18 +0100 Subject: [PATCH] feat: remove support for internet explorer (#1807) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- ...storybook-preset-ie11-npm-0.0.1-f80c765898 | 25 ---- package.json | 3 +- .../dnb-design-system-portal/.browserslistrc | 5 +- .../dnb-design-system-portal/babel.config.js | 4 - .../src/docs/icons/details.md | 2 +- .../releases/eufemia/v10-info.md | 5 + .../components/number-format/properties.md | 2 +- .../pagination/infinity-scroller/info.md | 8 -- .../src/docs/uilib/elements/anchor.md | 2 +- .../src/docs/uilib/helpers/classes.md | 2 - .../src/docs/uilib/helpers/functions.md | 2 - .../src/docs/uilib/usage.md | 10 +- .../usage/customisation/styling/polyfill.md | 4 +- .../docs/uilib/usage/customisation/theming.md | 2 +- .../uilib/usage/first-steps/module-formats.md | 1 - .../src/shared/menu/Card.js | 26 +---- .../src/shared/menu/Card.module.scss | 12 -- .../src/shared/menu/MainMenu.module.scss | 11 -- .../src/shared/menu/SidebarMenu.module.scss | 4 - packages/dnb-eufemia/.browserslistrc | 3 +- packages/dnb-eufemia/.storybook/main.js | 2 +- packages/dnb-eufemia/babel.config.js | 3 +- packages/dnb-eufemia/package.json | 2 - .../postbuild/__tests__/postbuild.test.js | 4 +- .../scripts/prebuild/config/postcssConfig.js | 68 +---------- .../tasks/__tests__/makeLibStyles.test.js | 7 +- .../scripts/prebuild/tasks/makeLibStyles.js | 7 +- .../scripts/prebuild/tasks/makeMainStyle.js | 7 +- .../__snapshots__/Accordion.test.js.snap | 32 ----- .../accordion/style/_accordion.scss | 4 - .../style/themes/dnb-accordion-theme-ui.scss | 2 +- .../components/autocomplete/Autocomplete.js | 3 +- .../__snapshots__/Autocomplete.test.js.snap | 54 --------- .../autocomplete/style/_autocomplete.scss | 16 +-- .../__snapshots__/Avatar.test.tsx.snap | 3 - .../__snapshots__/Breadcrumb.test.tsx.snap | 14 --- .../__snapshots__/Button.test.js.snap | 101 ---------------- .../src/components/button/style/_button.scss | 8 -- .../button/style/themes/_button-mixins.scss | 10 -- .../style/themes/dnb-button-theme-ui.scss | 13 +-- .../__snapshots__/Checkbox.test.js.snap | 25 ---- .../components/checkbox/style/_checkbox.scss | 19 --- .../__snapshots__/DatePicker.test.js.snap | 109 ------------------ .../date-picker/style/_date-picker.scss | 43 ------- .../__snapshots__/Dialog.test.tsx.snap | 20 ---- .../__snapshots__/Drawer.test.tsx.snap | 20 ---- .../__snapshots__/Dropdown.test.js.snap | 34 ------ .../components/dropdown/style/_dropdown.scss | 13 --- .../__snapshots__/FormLabel.test.js.snap | 3 - .../form-label/style/_form-label.scss | 4 - .../__snapshots__/FormRow.test.js.snap | 94 +++++++-------- .../components/form-row/style/_form-row.scss | 48 +++----- .../__snapshots__/FormStatus.test.js.snap | 15 --- .../form-status/style/_form-status.scss | 6 - .../__snapshots__/GlobalError.test.js.snap | 14 --- .../global-error/style/_global-error.scss | 2 +- .../components/global-status/GlobalStatus.js | 12 +- .../__snapshots__/GlobalStatus.test.js.snap | 18 --- .../global-status/style/_global-status.scss | 6 - .../__snapshots__/HelpButton.test.tsx.snap | 14 --- .../__tests__/__snapshots__/Icon.test.js.snap | 3 - .../src/components/icon/style/_icon.scss | 4 - .../icon/style/themes/dnb-icon-theme-ui.scss | 3 +- .../input-masked/InputMaskedUtils.js | 7 +- .../__snapshots__/InputMasked.test.js.snap | 26 ----- .../__snapshots__/Input.test.js.snap | 47 -------- .../src/components/input/style/_input.scss | 18 --- .../style/themes/dnb-input-theme-ui.scss | 6 +- .../__snapshots__/Modal.test.tsx.snap | 20 ---- .../src/components/modal/style/_modal.scss | 10 -- .../components/number-format/NumberUtils.js | 16 +-- .../__tests__/NumberFormat.test.js | 19 --- .../__tests__/NumberUtils.test.ts | 34 ------ .../__snapshots__/Pagination.test.js.snap | 17 --- .../ProgressIndicatorCircular.js | 4 +- .../__snapshots__/Radio.test.js.snap | 27 ----- .../src/components/radio/style/_radio.scss | 26 ----- .../__snapshots__/Section.test.tsx.snap | 10 -- .../src/components/skeleton/SkeletonHelper.js | 5 +- .../__snapshots__/Slider.test.tsx.snap | 23 ---- .../src/components/slider/style/_slider.scss | 6 - .../__snapshots__/Space.test.tsx.snap | 3 - .../src/components/space/style/_space.scss | 4 - .../StepIndicator-v1.test.js.snap | 27 ----- .../__snapshots__/StepIndicator.test.js.snap | 27 ----- .../themes/dnb-step-indicator-theme-ui.scss | 11 +- .../__snapshots__/Switch.test.js.snap | 33 ------ .../src/components/switch/style/_switch.scss | 22 +--- .../style/themes/dnb-switch-theme-ui.scss | 4 - .../__snapshots__/Table.test.tsx.snap | 14 --- .../__tests__/__snapshots__/Tabs.test.js.snap | 9 -- .../__tests__/__snapshots__/Tag.test.tsx.snap | 53 --------- .../src/components/tag/style/_tag.scss | 11 +- .../__snapshots__/Textarea.test.js.snap | 24 ---- .../components/textarea/style/_textarea.scss | 11 -- .../__snapshots__/Timeline.test.tsx.snap | 12 -- .../style/themes/dnb-timeline-theme-ui.scss | 4 +- .../__snapshots__/ToggleButton.test.js.snap | 94 --------------- .../toggle-button/style/_toggle-button.scss | 34 ------ .../themes/dnb-toggle-button-theme-ui.scss | 23 +--- .../__snapshots__/Upload.test.tsx.snap | 14 --- .../__snapshots__/DrawerList.test.js.snap | 53 ++------- .../drawer-list/style/_drawer-list.scss | 32 +---- .../themes/dnb-drawer-list-theme-ui.scss | 18 +-- .../dnb-eufemia/src/shared/MediaQueryUtils.ts | 6 +- .../src/shared/__tests__/helpers.test.js | 5 - packages/dnb-eufemia/src/shared/helpers.js | 8 -- .../shared/helpers/InteractionInvalidation.ts | 6 +- .../core/helper-classes/helper-classes.scss | 8 +- .../dnb-eufemia/src/style/core/utilities.scss | 25 +--- .../__snapshots__/Elements.test.js.snap | 16 --- packages/dnb-eufemia/src/style/stylis.js | 3 +- .../README.md | 2 +- tools/storybook-utils/GridStyle.js | 6 - yarn.lock | 62 +--------- 115 files changed, 153 insertions(+), 1874 deletions(-) delete mode 100644 .yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898 diff --git a/.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898 b/.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898 deleted file mode 100644 index 1b61e34125e..00000000000 --- a/.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898 +++ /dev/null @@ -1,25 +0,0 @@ -diff --git a/dist/index.js b/dist/index.js -index 0c601e050fb6ee4d556631935dae4cdc2ff51e5e..67073e7b5010c249b40e8da894775e29fd168d26 100644 ---- a/dist/index.js -+++ b/dist/index.js -@@ -50,7 +50,7 @@ exports.managerBabel = function (config) { - var _a = config.presets, presets = _a === void 0 ? [] : _a; - return __assign(__assign({}, config), { presets: __spread(presets, [ie11Preset]) }); - }; --var include = /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/; -+var include = /[\\/]node_modules[\\/](@storybook\/node-logger|ansi-regex|strip-ansi|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/; - var es6Loader = { - test: /\.js$/, - use: [ -diff --git a/package.json b/package.json -index 83cf706c98951981e274504fea6b589453e7553a..c890f47080d96a9f370d7b5082b380e653e06402 100644 ---- a/package.json -+++ b/package.json -@@ -1,6 +1,6 @@ - { - "name": "@storybook/preset-ie11", -- "version": "0.0.1", -+ "version": "0.0.2", - "description": "IE11 preset for Storybook", - "license": "MIT", - "main": "dist", diff --git a/package.json b/package.json index e3df939f002..1dfd3a1b750 100644 --- a/package.json +++ b/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", diff --git a/packages/dnb-design-system-portal/.browserslistrc b/packages/dnb-design-system-portal/.browserslistrc index 66d341dae69..ecbf738f285 100644 --- a/packages/dnb-design-system-portal/.browserslistrc +++ b/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 \ No newline at end of file +safari >= 10 +not ie > 0 +not ie_mob > 0 diff --git a/packages/dnb-design-system-portal/babel.config.js b/packages/dnb-design-system-portal/babel.config.js index 14e103436eb..4843a8caf9b 100644 --- a/packages/dnb-design-system-portal/babel.config.js +++ b/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).*', - ], } diff --git a/packages/dnb-design-system-portal/src/docs/icons/details.md b/packages/dnb-design-system-portal/src/docs/icons/details.md index ed7d5025177..341fcd69fb7 100644 --- a/packages/dnb-design-system-portal/src/docs/icons/details.md +++ b/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** diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md index 1412f8596d4..bdd695380aa 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md +++ b/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 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.md index def56d2209a..c9b5022ba87 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.md +++ b/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`. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md index 7f82cb0848f..6d3be08419a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md @@ -108,11 +108,3 @@ const { InfinityMarker, endInfinity, resetInfinity } = render(ReactComponent) ``` - -### 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' -``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md b/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md index a2a999fefea..116c474f36a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md +++ b/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 { diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md index 170655a4fff..8458804dd48 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md +++ b/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 { diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.md b/packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.md index 6c8d0f724c9..8240332e5e8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.md +++ b/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` | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage.md b/packages/dnb-design-system-portal/src/docs/uilib/usage.md index c640aea97a1..2a53e46e69d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage.md +++ b/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 | -| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | -| == 11 | >= 14 | >= 45 | >= 49 | >= 10 | >= 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 | +| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | +| >= 14 | >= 45 | >= 49 | >= 10 | >= 10 | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md index 21d10123136..d0128e38455 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md +++ b/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')] }) ] diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md index 882c22a7da4..d56d3b80f92 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.md +++ b/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. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md index 04c82b1caf2..97ccb135d4d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md +++ b/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. 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 55e112eb6b8..38f77c1b056 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/Card.js +++ b/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,25 +35,6 @@ 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 && ( - { - event.preventDefault() - window.location.assign(url) - }} - > - {children} - - ) - : Link - return (
  • - - {Svg && } + {Svg && }

    {title}

    {about}

     @@ -88,7 +68,7 @@ export default class Card extends React.PureComponent { />     -     +
    • ) } diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss b/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss index bcfc7e3ffb6..b9f90e3637e 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss +++ b/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 { diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.module.scss b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.module.scss index 530c8399ca2..a46ff4d532a 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.module.scss +++ b/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; diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss index 42f752a8099..0fd2d103c8f 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss +++ b/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 { diff --git a/packages/dnb-eufemia/.browserslistrc b/packages/dnb-eufemia/.browserslistrc index fad242c7e54..4a73ed803e4 100644 --- a/packages/dnb-eufemia/.browserslistrc +++ b/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 diff --git a/packages/dnb-eufemia/.storybook/main.js b/packages/dnb-eufemia/.storybook/main.js index 8afc492d90f..93cfc396019 100644 --- a/packages/dnb-eufemia/.storybook/main.js +++ b/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'], } diff --git a/packages/dnb-eufemia/babel.config.js b/packages/dnb-eufemia/babel.config.js index 4b1252a73a8..898707facb3 100644 --- a/packages/dnb-eufemia/babel.config.js +++ b/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, diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index f3a3b9abdcf..c779c827901 100644 --- a/packages/dnb-eufemia/package.json +++ b/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", diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js index c8aced323cc..513abfcf3de 100644 --- a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js +++ b/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";' diff --git a/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js b/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js index 3dfc2dea277..57c1fa87a9d 100644 --- a/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js +++ b/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js @@ -4,75 +4,15 @@ * */ -const fs = require('fs') -const sassBin = require('sass') -const os = require('os') -const path = require('path') - -module.exports = ({ IE11 = false, sass = sassBin, ...options } = {}) => { +module.exports = (options) => { return [ // preset-env processes the most of our old legacy browsers require('postcss-preset-env')({ - stage: IE11 ? 0 : 2, - preserve: true, // so we get the calc from vars, to process for IE11 later with "postcss-calc" - browsers: ['last 2 versions', IE11 ? 'explorer >= 11' : null].filter( + stage: 2, + browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'].filter( (i) => i ), - importFrom: [ - extractCSSProperties( - require.resolve('@dnb/eufemia/src/style/index.scss'), - null, - sass - ), - ], ...options, }), - - // but for IE11, we also calculate all left over calc, and remove the originals - IE11 - ? require('postcss-calc')({ - // "preserve: true" will keep both the calculation version, the calc() and the variable (if available) - // but as we only use postcss-calc on IE11, it is kind of not needed, so we remove then the calc() - /* - border-radius: 1.25rem; - border-radius: calc(2.5rem / 2); - border-radius: var(--button-border-radius); - */ - preserve: true, - warnWhenCannotResolve: false, - }) - : null, - - // In case we want to have all the plugins by their self - // IE11 - // ? require('postcss-custom-properties')({ - // preserve: true, - // // importFrom: ['path/to/file.css'], - // ...options - // }) - // : null, - // require('autoprefixer')({ - // browsers: ['last 2 versions', IE11 ? 'explorer >= 11' : null].filter( - // i => i - // ) - // }) - ].filter((i) => i) -} - -function extractCSSProperties(file, opts = {}, sass = sassBin) { - try { - const sassResult = sass.renderSync({ - file, - ...opts, - }) - const tmpDir = String(os.tmpdir) - const tmpFile = path.resolve( - tmpDir, - path.basename(file.replace('.scss', '.css')) - ) - fs.writeFileSync(tmpFile, String(sassResult.css)) - return tmpFile - } catch (e) { - console.error('Error in postcssConfig (extractCSSProperties):', e) - } + ].filter((i) => i) // remove the first } diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js index 59b9e6a97fb..387e06e9253 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js @@ -43,10 +43,9 @@ if (isCI) { expect(global.css[0]).toMatch(new RegExp('.dnb-icon\\s?{')) }) - it('has to contain a polyfill for font-family', () => { - // because else we have font-family:var(--font-family-default) - expect(global.css[0]).toMatch( - new RegExp('font-family:\\s?.*,\\s?sans-serif;') + it('should not contain a polyfill for font-family', () => { + expect(global.css[0]).toContain( + 'font-family: var(--font-family-default);' ) }) diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js b/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js index 283de18ef24..7d86e3fd912 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/makeLibStyles.js @@ -70,12 +70,7 @@ export const runFactory = ( transformPaths('../../../../assets/', '../../../assets/') ) ) - .pipe( - transform( - 'utf8', - transformPostcss(postcssConfig({ IE11: true, sass })) - ) - ) + .pipe(transform('utf8', transformPostcss(postcssConfig({ sass })))) .pipe(cloneSink) .pipe(transform('utf8', transformCssnano({ reduceIdents: false }))) .pipe(rename({ suffix: '.min' })) diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js b/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js index 4f5df4650b4..204928e3646 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/makeMainStyle.js @@ -81,12 +81,7 @@ export const runFactory = ( extname: '.css', }) ) - .pipe( - transform( - 'utf8', - transformPostcss(postcssConfig({ IE11: true, sass })) - ) - ) + .pipe(transform('utf8', transformPostcss(postcssConfig({ sass })))) .pipe(cloneSink) .pipe(transform('utf8', transformCssnano({ reduceIdents: false }))) .pipe(rename({ suffix: '.min' })) diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap index 97485fcedf8..36f452cb37f 100644 --- a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap +++ b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap @@ -203,9 +203,6 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-accordion__variant--outlined > .dnb-accordion__header { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined > .dnb-accordion__header { - box-shadow: inset 0 0 0 1px var(--color-black-8); } } .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] { cursor: not-allowed; } @@ -231,10 +228,6 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { @@ -243,12 +236,6 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { - opacity: 1; } } .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] { cursor: not-allowed; } @@ -259,19 +246,12 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem var(--color-emerald-green); } } .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] { background-color: var(--color-white); --border-color: var(--color-sea-green-30); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } } .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * { color: var(--color-sea-green-30); } @@ -281,9 +261,6 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] { background-color: var(--color-sea-green-30); } @@ -311,9 +288,6 @@ html[data-whatinput='keyboard'] @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * { color: var(--color-white); } @@ -327,9 +301,6 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } } .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * { color: var(--color-white); } @@ -420,9 +391,6 @@ exports[`Accordion scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } .dnb-accordion { font-family: var(--font-family-default); diff --git a/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss index fb92ecec40c..d554236a5ea 100644 --- a/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss +++ b/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss @@ -212,8 +212,4 @@ html[data-visual-test] & &__header &__header__icon { transition: none; } - - // IE fix - // @media screen and (-ms-high-contrast: none) { - // } } diff --git a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss index ebac87486c6..144b12aeb95 100644 --- a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss @@ -31,7 +31,7 @@ color: var(--color-black-80); background-color: var(--color-white); - @include fakeBorder(var(--color-black-8), 0.0625rem, inset, true); + @include fakeBorder(var(--color-black-8), 0.0625rem, inset); @include buttonFocus(var(--color-emerald-green), var(--color-white)); @include buttonHover(var(--color-emerald-green), var(--color-white)); diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js index 3aa17a3ec33..e279221fb2d 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js @@ -25,7 +25,6 @@ import { import { IS_MAC, IS_WIN, - IS_IE11, IS_EDGE, debounce, hasSelectedText, @@ -1828,7 +1827,7 @@ class AutocompleteInstance extends React.PureComponent { if (!(parseFloat(selected_item) > -1)) { inputParams.placeholder = placeholder || title - if (!(IS_WIN && (IS_IE11 || IS_EDGE))) { + if (!(IS_WIN && IS_EDGE)) { inputParams['aria-placeholder'] = undefined } } diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index 2f5b4e16f60..63c2fed1ab9 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -1525,11 +1525,6 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = ` --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, - .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover -~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-sea-green); } } .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover @@ -1550,10 +1545,6 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover -~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) { font-weight: var(--font-weight-basis); } @@ -1666,9 +1657,6 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1919,9 +1907,6 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -2132,9 +2117,6 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -2153,11 +2135,6 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2235,9 +2212,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -2567,15 +2541,6 @@ legend.dnb-form-label { align-items: flex-start; } .dnb-responsive-component .dnb-input > .dnb-form-label { margin-bottom: 0.5rem; } } - @media screen and (-ms-high-contrast: none) { - .dnb-input { - vertical-align: baseline; } - .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) { - flex: none; } - .dnb-input__inner { - width: 100%; } - .dnb-input__input, .dnb-input__placeholder { - transform: translateY(-0.0625rem); } } /* * DNB Dropdown @@ -2826,14 +2791,6 @@ legend.dnb-form-label { margin-bottom: 0.5rem; } .dnb-responsive-component .dnb-dropdown__helper { display: none; } } - @media screen and (-ms-high-contrast: none) { - .dnb-dropdown { - flex: none; - vertical-align: baseline; } - .dnb-dropdown__shell { - top: 0; } - .dnb-dropdown__options { - display: block; } } /* * DNB ProgressIndicator @@ -3159,9 +3116,6 @@ legend.dnb-form-label { @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) { - box-shadow: inset 0 0 0 1px var(--color-black-55); } } .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { transition: transform 400ms ease-out; } html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { @@ -3268,13 +3222,5 @@ legend.dnb-form-label { display: none; } } .dnb-autocomplete__list .dnb-drawer-list__option__item > span { padding-right: 0.125em; } - @media screen and (-ms-high-contrast: none) { - .dnb-autocomplete { - flex: none; - vertical-align: baseline; } - .dnb-autocomplete__shell { - top: 0; } - .dnb-autocomplete__options { - display: block; } } " `; diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss index ee6b3368efd..44736b07a04 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss +++ b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss @@ -112,8 +112,7 @@ @include fakeBorder( var(--color-black-55), var(--input-border-width), - inset, - true + inset ); } .dnb-input__submit-button__button .dnb-icon { @@ -293,17 +292,4 @@ &__list .dnb-drawer-list__option__item > span { padding-right: 0.125em; // add one space because of the word split } - - @include IS_IE { - flex: none; - vertical-align: baseline; - - &__shell { - top: 0; - } - &__options { - // IE has bug where the height can't be calculated propery - display: block; - } - } } diff --git a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 833573a7c2d..8b6b2eaff7c 100644 --- a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -162,9 +162,6 @@ exports[`Avatar scss have to match snapshot 1`] = ` --border-color: var(--color-black-3); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-avatar__group .dnb-avatar { - box-shadow: 0 0 0 0.125rem var(--color-black-3); } } .dnb-avatar__group .dnb-avatar--size-small { margin-left: -0.5rem; } .dnb-avatar__group .dnb-avatar--size-medium { diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index 2138449ffb6..25fd61ad621 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -88,9 +88,6 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -341,9 +338,6 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -554,9 +548,6 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -575,11 +566,6 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap index ee22aa4cdbf..cc7b895b363 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -916,12 +916,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) { - opacity: 1; } } .dnb-button--primary:focus[disabled], html:not([data-whatintent='touch']) .dnb-button--primary:focus[disabled] { cursor: not-allowed; } @@ -947,10 +941,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--primary:active[disabled], html:not([data-whatintent='touch']) .dnb-button--primary:active[disabled] { cursor: not-allowed; } @@ -961,10 +951,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--primary:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--primary:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-button--primary[disabled] { color: var(--color-white); background-color: var(--color-sea-green-30); } @@ -985,9 +971,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-button--secondary { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-button--secondary { - box-shadow: inset 0 0 0 1px var(--color-sea-green); } } html:not([data-whatintent='touch']) .dnb-button--secondary:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) { @@ -996,12 +979,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) { - opacity: 1; } } .dnb-button--secondary:focus[disabled], html:not([data-whatintent='touch']) .dnb-button--secondary:focus[disabled] { cursor: not-allowed; } @@ -1027,10 +1004,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--secondary:active[disabled], html:not([data-whatintent='touch']) .dnb-button--secondary:active[disabled] { cursor: not-allowed; } @@ -1041,10 +1014,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--secondary:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { color: var(--color-sea-green-30); background-color: var(--color-white); @@ -1059,9 +1028,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus { - box-shadow: inset 0 0 0 1px var(--color-sea-green-30); } } .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { color: var(--color-fire-red); --border-color: var(--color-fire-red); @@ -1075,9 +1041,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error { - box-shadow: inset 0 0 0 1px var(--color-fire-red); } } .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon { color: inherit; } html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] { @@ -1088,12 +1051,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) { - opacity: 1; } } .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] { cursor: not-allowed; } @@ -1119,10 +1076,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--secondary:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] { cursor: not-allowed; } @@ -1133,17 +1086,10 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-button--active { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--tertiary { position: relative; color: var(--color-sea-green); @@ -1165,10 +1111,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` bottom: -0.0625rem; color: transparent; transition: color 250ms ease-in-out; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--tertiary .dnb-button__text::after { - height: 1px; - border-radius: 0.5px; } } [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after { transition: none; } .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after { @@ -1205,10 +1147,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled])::before { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after { visibility: hidden; } @@ -1308,9 +1246,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } } .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled] { cursor: not-allowed; } @@ -1319,10 +1254,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-sea-green-30); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } } html[data-whatinput='keyboard'] .dnb-button--tertiary:hover:focus .dnb-button__text::after { visibility: hidden; } @@ -1339,12 +1270,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-ocean-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) { - opacity: 1; } } html[data-whatintent='touch'] .dnb-button--signal:active[disabled], html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active[disabled] { cursor: not-allowed; } @@ -1355,10 +1280,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: var(--color-ocean-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]), - html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } } .dnb-button--signal:focus[disabled], html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] { cursor: not-allowed; } @@ -1384,10 +1305,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-button--signal:active[disabled], html:not([data-whatintent='touch']) .dnb-button--signal:active[disabled] { cursor: not-allowed; } @@ -1398,10 +1315,6 @@ exports[`Button scss have to match default theme snapshot 1`] = ` --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-button--signal:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-button--signal:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-button--signal[disabled] { color: var(--color-black-20); background-color: var(--color-accent-yellow-30); } @@ -1529,9 +1442,6 @@ exports[`Button scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1782,9 +1692,6 @@ exports[`Button scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1995,9 +1902,6 @@ exports[`Button scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -2016,11 +1920,6 @@ exports[`Button scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/components/button/style/_button.scss b/packages/dnb-eufemia/src/components/button/style/_button.scss index 3c88f4fdc0b..72d4b440f30 100644 --- a/packages/dnb-eufemia/src/components/button/style/_button.scss +++ b/packages/dnb-eufemia/src/components/button/style/_button.scss @@ -284,14 +284,6 @@ & + .dnb-form-status { margin-top: 0.5rem; } - - @include IS_IE { - flex: none; - &__icon, - &__text { - transform: translateY(-0.0625rem); - } - } } /* Firefox includes a hidden border which messes up button dimensions */ diff --git a/packages/dnb-eufemia/src/components/button/style/themes/_button-mixins.scss b/packages/dnb-eufemia/src/components/button/style/themes/_button-mixins.scss index 3131bb98770..129969ee6f1 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/_button-mixins.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/_button-mixins.scss @@ -23,11 +23,6 @@ @include hover() { @include buttonHoverStyle($color, $background-color, $border-color); - @include IS_IE { - // by setting opacity to 1, we make sure we don't get the artifact of a cutted border on top and bottom - opacity: 1; - } - @content; } @@ -111,11 +106,6 @@ // but not for the transition to opacity // box-shadow: 0 0 0 calc(0.0625rem / 2) currentColor; - @include IS_IE { - height: 1px; - border-radius: 0.5px; - } - @content; } diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss index 0ae1bfed0ae..865b52855aa 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss @@ -36,7 +36,7 @@ color: var(--color-white); background-color: var(--color-fire-red); - // @include fakeBorder(var(--color-fire-red), 0.0625rem, inset, true); + // @include fakeBorder(var(--color-fire-red), 0.0625rem, inset); // .dnb-button__icon { // color: inherit; // } @@ -47,7 +47,7 @@ color: var(--color-sea-green); background-color: var(--color-white); - @include fakeBorder(var(--color-sea-green), 0.0625rem, inset, true); + @include fakeBorder(var(--color-sea-green), 0.0625rem, inset); @include buttonHover(var(--color-sea-green), var(--color-white)); @include buttonFocus(var(--color-sea-green), var(--color-white)); @@ -63,19 +63,14 @@ background-color: var(--color-white); // only because of href/anchor button - @include fakeBorder( - var(--color-sea-green-30), - 0.0625rem, - inset, - true - ); + @include fakeBorder(var(--color-sea-green-30), 0.0625rem, inset); } } &:not([disabled])#{&}--secondary#{&}__status { &--error { color: var(--color-fire-red); - @include fakeBorder(var(--color-fire-red), 0.0625rem, inset, true); + @include fakeBorder(var(--color-fire-red), 0.0625rem, inset); .dnb-button__icon { color: inherit; } diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 11603351a23..9e0b4d3590c 100644 --- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -253,9 +253,6 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button { background-color: var(--color-fire-red-8); } .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked='true'] { @@ -365,9 +362,6 @@ exports[`Checkbox scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -482,9 +476,6 @@ legend.dnb-form-label { .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-checkbox { font-family: var(--font-family-default); @@ -571,9 +562,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-checkbox__focus, .dnb-checkbox__button { position: relative; z-index: 4; @@ -643,18 +631,5 @@ legend.dnb-form-label { border-color: var(--skeleton-color); } .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { border-radius: 0; } - @media screen and (-ms-high-contrast: none) { - .dnb-checkbox { - vertical-align: text-bottom; } - .dnb-checkbox__order { - align-items: flex-start; } - .dnb-checkbox__gfx, .dnb-checkbox__input { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-checkbox__shell { - transform: translateY(0); } } " `; diff --git a/packages/dnb-eufemia/src/components/checkbox/style/_checkbox.scss b/packages/dnb-eufemia/src/components/checkbox/style/_checkbox.scss index 1439eb26705..eab6606647e 100644 --- a/packages/dnb-eufemia/src/components/checkbox/style/_checkbox.scss +++ b/packages/dnb-eufemia/src/components/checkbox/style/_checkbox.scss @@ -169,23 +169,4 @@ } border-color: var(--skeleton-color); } - - @include IS_IE { - vertical-align: text-bottom; - - &__order { - align-items: flex-start; - } - &__gfx, - &__input { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - &__shell { - transform: translateY(0); - } - } } diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 21b9479449a..e00391815c7 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -1816,11 +1816,6 @@ html:not([data-whatintent='touch']) .dnb-date-picker__day--inactive .dnb-button[ --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-date-picker--opened .dnb-input .dnb-input__shell, - .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-sea-green); } } .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover @@ -1842,10 +1837,6 @@ html:not([data-whatintent='touch']) .dnb-date-picker__day--inactive .dnb-button[ --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover -~ .dnb-date-picker__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } " `; @@ -1941,9 +1932,6 @@ exports[`DatePicker scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -2194,9 +2182,6 @@ exports[`DatePicker scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -2407,9 +2392,6 @@ exports[`DatePicker scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -2428,11 +2410,6 @@ exports[`DatePicker scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2510,9 +2487,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -2842,15 +2816,6 @@ legend.dnb-form-label { align-items: flex-start; } .dnb-responsive-component .dnb-input > .dnb-form-label { margin-bottom: 0.5rem; } } - @media screen and (-ms-high-contrast: none) { - .dnb-input { - vertical-align: baseline; } - .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) { - flex: none; } - .dnb-input__inner { - width: 100%; } - .dnb-input__input, .dnb-input__placeholder { - transform: translateY(-0.0625rem); } } /* * DNB ToggleButton @@ -2945,9 +2910,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-checkbox__focus, .dnb-checkbox__button { position: relative; z-index: 4; @@ -3017,19 +2979,6 @@ legend.dnb-form-label { border-color: var(--skeleton-color); } .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { border-radius: 0; } - @media screen and (-ms-high-contrast: none) { - .dnb-checkbox { - vertical-align: text-bottom; } - .dnb-checkbox__order { - align-items: flex-start; } - .dnb-checkbox__gfx, .dnb-checkbox__input { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-checkbox__shell { - transform: translateY(0); } } /* * DNB Radio @@ -3122,9 +3071,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-radio__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-radio__focus, .dnb-radio__button { width: calc(var(--radio-width--medium) - 0.25rem); height: calc(var(--radio-height--medium) - 0.25rem); @@ -3228,21 +3174,6 @@ legend.dnb-form-label { font-size: var(--font-size-basis); } .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { border-color: var(--skeleton-color); } - @media screen and (-ms-high-contrast: none) { - .dnb-radio { - vertical-align: text-bottom; } - .dnb-radio__input, .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-radio__order { - align-items: center; } - .dnb-radio, .dnb-radio-group { - flex: none; } - .dnb-radio-group { - vertical-align: middle; } } .dnb-toggle-button { font-family: var(--font-family-default); @@ -3389,23 +3320,6 @@ legend.dnb-form-label { @media screen and (min-width: 40em) { .dnb-form-label + .dnb-toggle-button { transform: translateY(-0.5rem); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button { - flex: none; } - .dnb-toggle-button:not(.dnb-toggle-button--vertical) { - align-items: center; } - .dnb-toggle-button__shell { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-toggle-button-group { - flex: none; } - .dnb-toggle-button-group, .dnb-toggle-button-group__shell { - width: 100%; } - .dnb-form-row__indent--default .dnb-toggle-button-group { - flex: 1; } } .dnb-dropdown { font-family: var(--font-family-default); @@ -3669,9 +3583,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-date-picker table.dnb-no-focus:focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-date-picker__day, .dnb-date-picker__labels__day { display: flex; flex-basis: calc(1 / 7 * 100%); @@ -3789,26 +3700,6 @@ legend.dnb-form-label { margin: 0; padding: 0; border: none; } - @media screen and (-ms-high-contrast: none) { - .dnb-date-picker { - flex: none; } - .dnb-date-picker__day, .dnb-date-picker__labels__day { - flex-basis: 13.48571%; } - .dnb-date-picker__day .dnb-button, - .dnb-core-style .dnb-date-picker__day .dnb-button, .dnb-date-picker__day .dnb-button__bounding { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-date-picker__day .dnb-button__text { - transform: translateX(-50%) !important; } - .dnb-date-picker__header__nav:nth-of-type(2) { - order: 2; } - .dnb-date-picker__header__title { - width: 100%; } - .dnb-date-picker__header::after { - left: 0; } } @keyframes date-picker-slide-down { from { diff --git a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss index d0cc54ed5f5..965a26563ae 100644 --- a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss +++ b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss @@ -504,49 +504,6 @@ padding: 0; border: none; } - - @include IS_IE { - flex: none; - - &__day, - &__labels__day { - // math.div works only in dart sass - // flex-basis: math.div(1, 7) * 100% - 0.8; - flex-basis: 13.48571%; - } - - &__day { - .dnb-button { - &, - .dnb-core-style &, - &__bounding { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - &__text { - transform: translateX(-50%) !important; - } - } - } - - &__header { - &__nav:nth-of-type(2) { - order: 2; - } - - &__title { - width: 100%; - } - - // border - &::after { - left: 0; - } - } - } } @keyframes date-picker-slide-down { diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index bc672441287..e57c6ae6d6a 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -1458,9 +1458,6 @@ exports[`Dialog scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1711,9 +1708,6 @@ exports[`Dialog scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1924,9 +1918,6 @@ exports[`Dialog scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1945,11 +1936,6 @@ exports[`Dialog scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2552,12 +2538,6 @@ html[data-dnb-modal-active] { display: flex; flex-direction: row; justify-content: space-between; } - @media screen and (-ms-high-contrast: none) { - .dnb-modal__header__bar.dnb-section { - align-items: center; } } - @media screen and (-ms-high-contrast: none) { - .dnb-core-style .dnb-modal__header__bar__close { - margin-left: auto; } } [data-visual-test].hide-page-content #___gatsby { opacity: 0; } diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index c27995b1848..46f3bba6f7c 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -1474,9 +1474,6 @@ exports[`Drawer scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1727,9 +1724,6 @@ exports[`Drawer scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1940,9 +1934,6 @@ exports[`Drawer scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1961,11 +1952,6 @@ exports[`Drawer scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2568,12 +2554,6 @@ html[data-dnb-modal-active] { display: flex; flex-direction: row; justify-content: space-between; } - @media screen and (-ms-high-contrast: none) { - .dnb-modal__header__bar.dnb-section { - align-items: center; } } - @media screen and (-ms-high-contrast: none) { - .dnb-core-style .dnb-modal__header__bar__close { - margin-left: auto; } } [data-visual-test].hide-page-content #___gatsby { opacity: 0; } diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 4843a562588..3eb9c990911 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -1369,17 +1369,11 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled]) --border-color: var(--color-black-55); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-dropdown__trigger[disabled]:not(.dnb-button--tertiary) { - box-shadow: 0 0 0 0.0625rem var(--color-black-55); } } .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger { - box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } } html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) { @@ -1387,9 +1381,6 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled]) --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } html:not([data-whatintent='touch']) .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon { color: var(--color-fire-red); } .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], @@ -1493,9 +1484,6 @@ exports[`Dropdown scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Button @@ -1750,9 +1738,6 @@ exports[`Dropdown scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1963,9 +1948,6 @@ exports[`Dropdown scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1984,11 +1966,6 @@ exports[`Dropdown scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2066,9 +2043,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -2318,13 +2292,5 @@ legend.dnb-form-label { margin-bottom: 0.5rem; } .dnb-responsive-component .dnb-dropdown__helper { display: none; } } - @media screen and (-ms-high-contrast: none) { - .dnb-dropdown { - flex: none; - vertical-align: baseline; } - .dnb-dropdown__shell { - top: 0; } - .dnb-dropdown__options { - display: block; } } " `; diff --git a/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss index c0ec5ca8dcc..d4848c87f1c 100644 --- a/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss +++ b/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss @@ -323,17 +323,4 @@ } } } - - @include IS_IE { - flex: none; - vertical-align: baseline; - - &__shell { - top: 0; - } - &__options { - // IE has bug where the height can't be calculated propery - display: block; - } - } } diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap index c1dcc446d88..7babe2f621f 100644 --- a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap @@ -131,9 +131,6 @@ exports[`FormLabel scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } diff --git a/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss b/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss index cbedcff15a2..fb22aabfc78 100644 --- a/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss +++ b/packages/dnb-eufemia/src/components/form-label/style/_form-label.scss @@ -37,10 +37,6 @@ &[disabled] { cursor: not-allowed; } - - @include IS_IE { - max-width: 60vw; - } } legend.dnb-form-label { display: inline-block; diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap index ad0abdfa81e..e632cca68d0 100644 --- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap @@ -195,9 +195,6 @@ exports[`FormRow scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -270,52 +267,45 @@ legend.dnb-form-label { white-space: nowrap; } .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap { display: block; } - @supports (display: grid) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { - display: grid; - grid-template-columns: [column1-start] var(--form-row-column1-start) [column1-end column2-start] var(--form-row-column2-start) [column2-end]; - grid-template-rows: [row1-start] var(--form-row-row1-start) [row1-end row2-start] var(--form-row-row2-start) [row2-end]; } } - @supports (display: grid) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { + display: grid; + grid-template-columns: [column1-start] var(--form-row-column1-start) [column1-end column2-start] var(--form-row-column2-start) [column2-end]; + grid-template-rows: [row1-start] var(--form-row-row1-start) [row1-end row2-start] var(--form-row-row2-start) [row2-end]; } .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { grid-column: column2-start / column2-end; - grid-row: row2-start / row2-end; } } - @media screen and (min-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--default { - margin-top: -1.5rem; } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-small { - margin-top: calc(-0.5rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--small { - margin-top: calc(-1rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--medium { - margin-top: calc(-1.5rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--large { - margin-top: calc(-2rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--m-large { - margin-top: calc(-2.5rem + 0.625rem); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-large { - margin-top: calc(-3rem + var(--form-bounding-height)); } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--xx-large { - margin-top: calc(-3.5rem + var(--form-bounding-height)); } } - @media screen and (-ms-high-contrast: none) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { - margin-top: 0; } } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { - margin-top: 0.5rem !important; } } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { - margin-right: 1rem; } - @supports (display: grid) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { - grid-column: column1-start / column1-end; - grid-row: row1-start / row1-end; } } - @media screen and (min-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { - text-align: right; } } - @media screen and (max-width: 40em) { - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { - display: block; } } - .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] .dnb-form-row__label-dummy { - margin-top: 0; } + grid-row: row2-start / row2-end; } + @media screen and (min-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--default { + margin-top: -1.5rem; } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-small { + margin-top: calc(-0.5rem + var(--form-bounding-height)); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--small { + margin-top: calc(-1rem + var(--form-bounding-height)); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--medium { + margin-top: calc(-1.5rem + var(--form-bounding-height)); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--large { + margin-top: calc(-2rem + var(--form-bounding-height)); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--m-large { + margin-top: calc(-2.5rem + 0.625rem); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--x-large { + margin-top: calc(-3rem + var(--form-bounding-height)); } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content--xx-large { + margin-top: calc(-3.5rem + var(--form-bounding-height)); } } + @media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-row__content { + margin-top: 0.5rem !important; } } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { + grid-column: column1-start / column1-end; + grid-row: row1-start / row1-end; + margin-right: 1rem; } + @media screen and (min-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] > .dnb-form-label { + text-align: right; } } + @media screen and (max-width: 40em) { + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] { + display: block; } } + .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] .dnb-form-row__label-dummy { + margin-top: 0; } @media screen and (max-width: 40em) { .dnb-form-row:not(.dnb-form-row--vertical) { flex-direction: column; @@ -341,9 +331,8 @@ legend.dnb-form-label { display: flex; flex-direction: column; align-items: flex-start; } - @supports (display: grid) { - .dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content { - grid-column: column1-start / column1-end; } } + .dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content { + grid-column: column1-start / column1-end; } .dnb-form-row__label-dummy { margin: 0; } .dnb-form-row__fieldset, @@ -352,10 +341,5 @@ legend.dnb-form-label { padding: 0; border: none; width: 100%; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-row { - align-items: flex-start; } - .dnb-form-row__content { - flex: auto; } } " `; diff --git a/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss index a26c296c105..f883d71811f 100644 --- a/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss +++ b/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss @@ -47,23 +47,19 @@ } &[class*='__indent'] { - @supports (display: grid) { - display: grid; - grid-template-columns: - [column1-start] var(--form-row-column1-start) - [column1-end column2-start] var(--form-row-column2-start) - [column2-end]; - grid-template-rows: - [row1-start] var(--form-row-row1-start) - [row1-end row2-start] var(--form-row-row2-start) - [row2-end]; - } + display: grid; + grid-template-columns: + [column1-start] var(--form-row-column1-start) + [column1-end column2-start] var(--form-row-column2-start) + [column2-end]; + grid-template-rows: + [row1-start] var(--form-row-row1-start) + [row1-end row2-start] var(--form-row-row2-start) + [row2-end]; & > .dnb-form-row__content { - @supports (display: grid) { - grid-column: column2-start / column2-end; - grid-row: row2-start / row2-end; - } + grid-column: column2-start / column2-end; + grid-row: row2-start / row2-end; // if not mobile @media screen and (min-width: 40em) { @@ -93,10 +89,6 @@ } } - @include IS_IE { - margin-top: 0; - } - // if mobile @media screen and (max-width: 40em) { // use important, sice we want to overwrite the inline style "marginTop" set by "setLabelOffset" @@ -106,10 +98,8 @@ & > .dnb-form-label { // put the label in the first column - @supports (display: grid) { - grid-column: column1-start / column1-end; - grid-row: row1-start / row1-end; - } + grid-column: column1-start / column1-end; + grid-row: row1-start / row1-end; margin-right: 1rem; @@ -186,9 +176,7 @@ align-items: flex-start; } &--vertical ~ .dnb-form-row__content { - @supports (display: grid) { - grid-column: column1-start / column1-end; - } + grid-column: column1-start / column1-end; } } @@ -203,14 +191,6 @@ padding: 0; border: none; - // to make sure things are wraping in IE width: 100%; } - - @include IS_IE { - align-items: flex-start; - &__content { - flex: auto; - } - } } diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap index 34a7babdaa0..ca15f33ff2a 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap @@ -201,33 +201,21 @@ exports[`FormStatus scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__variant--outlined.dnb-form-status--error .dnb-form-status__shell { - box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } } .dnb-form-status__variant--outlined.dnb-form-status--warn .dnb-form-status__shell { --border-color: var(--color-accent-yellow); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__variant--outlined.dnb-form-status--warn .dnb-form-status__shell { - box-shadow: 0 0 0 0.0625rem var(--color-accent-yellow); } } .dnb-form-status__variant--outlined.dnb-form-status--info .dnb-form-status__shell { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__variant--outlined.dnb-form-status--info .dnb-form-status__shell { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } } .dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell { --border-color: var(--color-black-55); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell { - box-shadow: 0 0 0 0.0625rem var(--color-black-55); } } .dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell, .dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell { @@ -377,8 +365,5 @@ exports[`FormStatus scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } " `; diff --git a/packages/dnb-eufemia/src/components/form-status/style/_form-status.scss b/packages/dnb-eufemia/src/components/form-status/style/_form-status.scss index 6df1c1f1353..e7fee70b874 100644 --- a/packages/dnb-eufemia/src/components/form-status/style/_form-status.scss +++ b/packages/dnb-eufemia/src/components/form-status/style/_form-status.scss @@ -128,10 +128,4 @@ // max-height: 0; // animation: form-status-fade-in 2s ease-out 400ms forwards; // } - - @include IS_IE { - &__shell > .dnb-icon { - border-width: 1px; - } - } } diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap index 78fb4a3a17f..a415d0020b7 100644 --- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap @@ -96,9 +96,6 @@ exports[`GlobalError scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -349,9 +346,6 @@ exports[`GlobalError scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -562,9 +556,6 @@ exports[`GlobalError scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -583,11 +574,6 @@ exports[`GlobalError scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/components/global-error/style/_global-error.scss b/packages/dnb-eufemia/src/components/global-error/style/_global-error.scss index f6f89e2082f..4bd5cf40dca 100644 --- a/packages/dnb-eufemia/src/components/global-error/style/_global-error.scss +++ b/packages/dnb-eufemia/src/components/global-error/style/_global-error.scss @@ -45,7 +45,7 @@ } &__gfx { - margin-top: 9rem; // IE fallback + margin-top: 9rem; @media screen and (max-width: 90em) { margin-top: 8vw; margin-top: calc(4vw + 4vh); diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js index 325a7e997fb..6f21ee840c4 100644 --- a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js +++ b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js @@ -35,7 +35,6 @@ import GlobalStatusProvider from './GlobalStatusProvider' import Icon from '../icon/Icon' import { InfoIcon, ErrorIcon } from '../form-status/FormStatus' import Section from '../section/Section' -import { IS_IE11 } from '../../shared/helpers' import Button from '../button/Button' export default class GlobalStatus extends React.PureComponent { @@ -501,11 +500,7 @@ export default class GlobalStatus extends React.PureComponent { try { const element = this._wrapperRef.current this._scrollToStatusTimeout = isElementVisible(element, isDone) - if ( - element && - !IS_IE11 && - typeof element.scrollIntoView === 'function' - ) { + if (element && typeof element.scrollIntoView === 'function') { element.scrollIntoView({ block: 'center', behavior: 'smooth', @@ -569,10 +564,7 @@ export default class GlobalStatus extends React.PureComponent { } }) - // block: 'center' is not supported on IE - now we se the element above - if (IS_IE11) { - window.scrollTop = element.offsetTop - } else if (typeof element.scrollIntoView === 'function') { + if (typeof element.scrollIntoView === 'function') { // then go there element.scrollIntoView({ block: 'center', // center of page diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap index 5ac99a01250..f0cb49bd322 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap @@ -121,9 +121,6 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -374,9 +371,6 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -587,9 +581,6 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -608,11 +599,6 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -850,10 +836,6 @@ html[data-visual-test] .dnb-global-status__shell { .dnb-spacing .dnb-global-status__content .dnb-hr, .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*='dnb-space']) { margin: 0; } - -@media screen and (-ms-high-contrast: none) { - .dnb-global-status__icon > .dnb-icon { - border-width: 1px; } } " `; diff --git a/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss b/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss index 8c1e4ae572d..531931d6dec 100644 --- a/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss +++ b/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss @@ -123,10 +123,4 @@ margin: 0; } } - - @include IS_IE { - &__icon > .dnb-icon { - border-width: 1px; - } - } } diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap index 1a042a1b8ac..f49ca5057df 100644 --- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap @@ -96,9 +96,6 @@ exports[`HelpButton scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -349,9 +346,6 @@ exports[`HelpButton scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -562,9 +556,6 @@ exports[`HelpButton scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -583,11 +574,6 @@ exports[`HelpButton scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap index 9830ee32c72..eb713b802a5 100644 --- a/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap +++ b/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap @@ -139,8 +139,5 @@ exports[`Icon scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } " `; diff --git a/packages/dnb-eufemia/src/components/icon/style/_icon.scss b/packages/dnb-eufemia/src/components/icon/style/_icon.scss index 517a2cf12ce..02c35a1e336 100644 --- a/packages/dnb-eufemia/src/components/icon/style/_icon.scss +++ b/packages/dnb-eufemia/src/components/icon/style/_icon.scss @@ -92,8 +92,4 @@ } color: var(--skeleton-color) !important; } - - @include IS_IE { - flex: none; - } } diff --git a/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss b/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss index 7e3ed53e00c..ede094d9ec5 100644 --- a/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss @@ -20,8 +20,7 @@ // width: 150%; // height: 150%; - margin: auto; // for IE centering - + margin: auto; border-radius: 50%; border: 0.0875rem solid; // use 1.4px instead of 1.5 so webkit is rounding down border-color: currentColor; diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js index 86369fa62bb..c771c36890d 100644 --- a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js +++ b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js @@ -9,7 +9,7 @@ import { getThousandsSeparator, } from '../number-format/NumberUtils' import { warn } from '../../shared/component-helper' -import { IS_IE11, IS_ANDROID, IS_IOS } from '../../shared/helpers' +import { IS_ANDROID, IS_IOS } from '../../shared/helpers' import { safeSetSelection } from './text-mask/createTextMaskInputElement' const enableLocaleSupportWhen = ['as_number', 'as_percent', 'as_currency'] @@ -372,11 +372,6 @@ export function handleThousandsSeparator(locale) { export function handleDecimalSeparator(locale) { let decimalSymbol = getDecimalSeparator(locale) - // To make the separator IE11 compatible - if (IS_IE11 && decimalSymbol === ',' && locale && !/no/i.test(locale)) { - decimalSymbol = '.' - } - return decimalSymbol } diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 1db6f17d552..7fefc26bd17 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -332,9 +332,6 @@ exports[`InputMasked scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -585,9 +582,6 @@ exports[`InputMasked scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -798,9 +792,6 @@ exports[`InputMasked scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -819,11 +810,6 @@ exports[`InputMasked scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -901,9 +887,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -1233,15 +1216,6 @@ legend.dnb-form-label { align-items: flex-start; } .dnb-responsive-component .dnb-input > .dnb-form-label { margin-bottom: 0.5rem; } } - @media screen and (-ms-high-contrast: none) { - .dnb-input { - vertical-align: baseline; } - .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) { - flex: none; } - .dnb-input__inner { - width: 100%; } - .dnb-input__input, .dnb-input__placeholder { - transform: translateY(-0.0625rem); } } .dnb-input-masked { font-family: var(--font-family-default); diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap index d0ea550754a..b8687ef11e4 100644 --- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -752,9 +752,6 @@ exports[`Input scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-input__shell { box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-input__shell { - box-shadow: inset 0 0 0 1px var(--color-sea-green); } } .dnb-input__icon { color: var(--color-sea-green); } .dnb-input[data-input-state='disabled'] .dnb-input__shell { @@ -774,45 +771,27 @@ exports[`Input scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-input[data-input-state='disabled'] .dnb-input__shell { box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-input[data-input-state='disabled'] .dnb-input__shell { - box-shadow: inset 0 0 0 1px var(--color-black-55); } } .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, - .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-sea-green); } } .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-input__status--error.dnb-input:not([data-input-state='focus']) .dnb-input__shell { color: var(--color-fire-red); } .dnb-input__status--error.dnb-input:not([data-input-state='focus']):not(:hover) .dnb-input__shell { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-input__status--error.dnb-input:not([data-input-state='focus']):not(:hover) .dnb-input__shell { - box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } } .dnb-input__status--error.dnb-input[data-input-state='focus'] .dnb-input__shell, .dnb-input__status--error.dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, .dnb-input__status--error.dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-input__status--error.dnb-input[data-input-state='focus'] .dnb-input__shell, - .dnb-input__status--error.dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover, - .dnb-input__status--error.dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } html:not([data-whatintent='touch']) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):hover, html:not([data-whatintent='touch']) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):hover::after, @@ -930,9 +909,6 @@ exports[`Input scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1183,9 +1159,6 @@ exports[`Input scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1396,9 +1369,6 @@ exports[`Input scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1417,11 +1387,6 @@ exports[`Input scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -1499,9 +1464,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -1831,14 +1793,5 @@ legend.dnb-form-label { align-items: flex-start; } .dnb-responsive-component .dnb-input > .dnb-form-label { margin-bottom: 0.5rem; } } - @media screen and (-ms-high-contrast: none) { - .dnb-input { - vertical-align: baseline; } - .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) { - flex: none; } - .dnb-input__inner { - width: 100%; } - .dnb-input__input, .dnb-input__placeholder { - transform: translateY(-0.0625rem); } } " `; diff --git a/packages/dnb-eufemia/src/components/input/style/_input.scss b/packages/dnb-eufemia/src/components/input/style/_input.scss index 425046b4d76..84a5e8a3424 100644 --- a/packages/dnb-eufemia/src/components/input/style/_input.scss +++ b/packages/dnb-eufemia/src/components/input/style/_input.scss @@ -397,7 +397,6 @@ left: 1rem; right: auto; - // IE fix top: 0; bottom: 0; margin: auto; @@ -448,21 +447,4 @@ } } } - - @include IS_IE { - vertical-align: baseline; - .dnb-form-row--horizontal &, - &:not(#{&}--stretch) { - flex: none; - } - &__inner { - width: 100%; // fix overflow on parent - } - - &__input, - &__placeholder { - // vertical alignment - transform: translateY(-0.0625rem); - } - } } diff --git a/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss index 455bbf779b0..25ef26873e8 100644 --- a/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss @@ -20,8 +20,7 @@ @include fakeBorder( var(--color-sea-green), var(--input-border-width), - inset, - true + inset ); } @@ -39,8 +38,7 @@ @include fakeBorder( var(--color-black-55), var(--input-border-width), - inset, - true + inset ); background-color: var(--color-black-3); } diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap index 525198c9bf7..9a99129fb07 100644 --- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap @@ -1445,9 +1445,6 @@ exports[`Modal scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1698,9 +1695,6 @@ exports[`Modal scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1911,9 +1905,6 @@ exports[`Modal scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1932,11 +1923,6 @@ exports[`Modal scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2539,12 +2525,6 @@ html[data-dnb-modal-active] { display: flex; flex-direction: row; justify-content: space-between; } - @media screen and (-ms-high-contrast: none) { - .dnb-modal__header__bar.dnb-section { - align-items: center; } } - @media screen and (-ms-high-contrast: none) { - .dnb-core-style .dnb-modal__header__bar__close { - margin-left: auto; } } [data-visual-test].hide-page-content #___gatsby { opacity: 0; } diff --git a/packages/dnb-eufemia/src/components/modal/style/_modal.scss b/packages/dnb-eufemia/src/components/modal/style/_modal.scss index e6457f3dd5b..565d2edaa2c 100644 --- a/packages/dnb-eufemia/src/components/modal/style/_modal.scss +++ b/packages/dnb-eufemia/src/components/modal/style/_modal.scss @@ -122,16 +122,6 @@ html[data-dnb-modal-active] { display: flex; flex-direction: row; justify-content: space-between; - - @include IS_IE() { - align-items: center; // IE11 uses top as default - } - } - - @include IS_IE() { - .dnb-core-style &__close { - margin-left: auto; // place the button to the right side - } } } } diff --git a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js b/packages/dnb-eufemia/src/components/number-format/NumberUtils.js index 54735ae054d..0df1d8cb886 100644 --- a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js +++ b/packages/dnb-eufemia/src/components/number-format/NumberUtils.js @@ -20,7 +20,6 @@ import { copyToClipboard, IS_MAC, IS_WIN, - IS_IE11, IS_SAFARI, } from '../../shared/helpers' @@ -235,14 +234,6 @@ export const format = ( }) aria = enhanceSR(cleanedNumber, aria, locale) // also calls prepareMinus - // IE has a bug, where negative numbers has a parenthesis around the number - if (IS_IE11) { - display = String(display).replace(/^\((.*)\)$/, '-$1') - aria = String(aria).replace(/^\((.*)\)$/, '-$1') - display = prepareMinus(display, locale) - aria = prepareMinus(aria, locale) - } - // get only the currency name // const num = aria.replace(/([^0-9])+$/g, '') // const name = aria.replace(num, '') @@ -981,7 +972,6 @@ export function getFallbackCurrencyDisplay( !currency_display && // Safari does not support `narrowSymbol` for now, so `symbol` will be used then. !IS_SAFARI && - !IS_IE11 && (!locale || /(no|nb|nn)$/i.test(locale)) ) { currency_display = 'narrowSymbol' @@ -1088,7 +1078,7 @@ function getGroupFormatter( } /** - * For internal usage Not supported by IE11 + * For internal usage * * @type {object} * @property {string} number - a number @@ -1218,10 +1208,6 @@ function handleCompactBeforeAria({ value, compact, opts }) { * @property {string|boolean} compact "short" or "long" if true is given, "short" is used */ function canHandleCompact({ value, compact }) { - if (IS_IE11) { - return false - } - if (compact && Math.abs(value) >= 1000) { return true } diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.js b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.js index 756cf4184f8..b57d337e244 100644 --- a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.js +++ b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.js @@ -16,7 +16,6 @@ import { isMac } from '../../../shared/helpers' import Provider from '../../../shared/Provider' import NumberFormat from '../NumberFormat' import { format } from '../NumberUtils' -import * as helpers from '../../../shared/helpers' const Component = (props) => { return @@ -515,24 +514,6 @@ describe('NumberFormat compact', () => { expect(Comp.find(ariaSelector).first().text()).toBe(aria) } ) - - it('should omit IE11', () => { - // eslint-disable-next-line - Object.defineProperty(helpers, 'IS_IE11', { - value: true, - writable: true, - }) - - const Comp = mount() - expect(Comp.find(displaySelector).first().text()).toBe('-12 345 679,0') - expect(Comp.find(ariaSelector).first().text()).toBe('-12 345 679,0') - - // eslint-disable-next-line - Object.defineProperty(helpers, 'IS_IE11', { - value: false, - writable: true, - }) - }) }) describe('NumberFormat component with provider', () => { diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts index 0cccb6efb4c..cba756d9370 100644 --- a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts +++ b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts @@ -16,7 +16,6 @@ import { getCurrencySymbol, countDecimals, } from '../NumberUtils' -import type { formatReturnValue } from '../NumberUtils' const locale = LOCALE const value = 12345678.9876 @@ -190,39 +189,6 @@ describe('Decimals format', () => { }) ).toBe('-12,345.68') }) - - it('should handle wired IE11 issue', () => { - Object.defineProperty(helpers, 'IS_IE11', { - value: true, - writable: true, - }) - - // Mock the IE parenthesis issue - jest - .spyOn(Number.prototype, 'toLocaleString') - .mockImplementationOnce(() => { - return `(12345,67 norske kroner)` - }) - - const resultNegative = format(-12345.67, { - currency: true, - returnAria: true, - locale: 'nb-NO', - }) as formatReturnValue - const resultPositive = format(12345.67, { - currency: true, - returnAria: true, - locale: 'nb-NO', - }) as formatReturnValue - - Object.defineProperty(helpers, 'IS_IE11', { - value: false, - writable: true, - }) - - expect(resultNegative.aria).toBe('-12345,67 norske kroner') - expect(resultPositive.aria).toBe('12345,67 norske kroner') - }) }) describe('Currency format with dirty number', () => { diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap index 9770babc0c5..4994ec3f9a8 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap @@ -1634,9 +1634,6 @@ exports[`Pagination scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-pagination__dots { color: var(--color-black-55); } @@ -1739,9 +1736,6 @@ exports[`Pagination scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1992,9 +1986,6 @@ exports[`Pagination scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -2205,9 +2196,6 @@ exports[`Pagination scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -2226,11 +2214,6 @@ exports[`Pagination scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.js b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.js index 3256a016c96..f7e4782b044 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.js +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.js @@ -7,7 +7,7 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { validateDOMAttributes } from '../../shared/component-helper' -import { IS_IE11, IS_EDGE } from '../../shared/helpers' +import { IS_EDGE } from '../../shared/helpers' export default class ProgressIndicatorCircular extends React.PureComponent { static propTypes = { @@ -39,7 +39,7 @@ export default class ProgressIndicatorCircular extends React.PureComponent { constructor(props) { super(props) this.useAnimationFrame = - typeof props.onComplete === 'function' || IS_IE11 || IS_EDGE + typeof props.onComplete === 'function' || IS_EDGE this._refDark = React.createRef() this._refLight = React.createRef() this.state = { animate: false } diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap index 00252820d89..d27d2a6a0e9 100644 --- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap +++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap @@ -695,9 +695,6 @@ exports[`Radio scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked='true']):hover ~ .dnb-radio__button { background-color: var(--color-fire-red-8); } .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, @@ -805,9 +802,6 @@ exports[`Radio scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -922,9 +916,6 @@ legend.dnb-form-label { .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-radio { font-family: var(--font-family-default); @@ -1013,9 +1004,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-radio__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-radio__focus, .dnb-radio__button { width: calc(var(--radio-width--medium) - 0.25rem); height: calc(var(--radio-height--medium) - 0.25rem); @@ -1119,20 +1107,5 @@ legend.dnb-form-label { font-size: var(--font-size-basis); } .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { border-color: var(--skeleton-color); } - @media screen and (-ms-high-contrast: none) { - .dnb-radio { - vertical-align: text-bottom; } - .dnb-radio__input, .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-radio__order { - align-items: center; } - .dnb-radio, .dnb-radio-group { - flex: none; } - .dnb-radio-group { - vertical-align: middle; } } " `; diff --git a/packages/dnb-eufemia/src/components/radio/style/_radio.scss b/packages/dnb-eufemia/src/components/radio/style/_radio.scss index 46ca7099ffb..84fbb6b56ff 100644 --- a/packages/dnb-eufemia/src/components/radio/style/_radio.scss +++ b/packages/dnb-eufemia/src/components/radio/style/_radio.scss @@ -234,30 +234,4 @@ .dnb-skeleton &__input[disabled] ~ &__button { border-color: var(--skeleton-color); } - - @include IS_IE { - vertical-align: text-bottom; - - &__input, - &__focus, - &__button, - &__dot { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - &__order { - align-items: center; - } - - &, - &-group { - flex: none; - } - &-group { - vertical-align: middle; - } - } } diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap index 399bbf069db..832cb373a92 100644 --- a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap @@ -124,11 +124,6 @@ exports[`Section scss have to match default theme snapshot 1`] = ` --border-color: var(--color-white); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-section--sea-green .dnb-anchor:not(:disabled):focus { - box-shadow: 0 0 0 0.125rem var(--color-white); } } .dnb-section--fire-red .dnb-button--tertiary, .dnb-section--emerald-green .dnb-button--tertiary, @@ -156,11 +151,6 @@ exports[`Section scss have to match default theme snapshot 1`] = ` --border-color: var(--color-white); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard'] - .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard'] - .dnb-section--sea-green .dnb-button--tertiary:focus::before { - box-shadow: 0 0 0 0.125rem var(--color-white); } } .dnb-section--signal-orange { color: var(--color-ocean-green); } diff --git a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.js b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.js index 235a94e7b46..2a245eaebf4 100644 --- a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.js +++ b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.js @@ -7,7 +7,6 @@ import React from 'react' import PropTypes from 'prop-types' import { convertJsxToString, isTrue } from '../../shared/component-helper' import classnames from 'classnames' -import { IS_IE11 } from '../../shared/helpers' export const skeletonDOMAttributes = ( params, @@ -85,9 +84,7 @@ export class AutoSize extends React.PureComponent { 'data-skeleton-chars': String(countChars), style: { ...(style || {}), - [IS_IE11 - ? 'maxWidth' - : '--skeleton-chars']: `${countChars}ch`, + '--skeleton-chars': `${countChars}ch`, }, ...props, }, diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap index 3e4da98bc30..5f7d5b4ac91 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -88,9 +88,6 @@ exports[`Slider scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -341,9 +338,6 @@ exports[`Slider scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -554,9 +548,6 @@ exports[`Slider scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -575,11 +566,6 @@ exports[`Slider scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -657,9 +643,6 @@ button.dnb-button::-moz-focus-inner { cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -842,9 +825,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-slider > .dnb-form-label { align-self: flex-start; margin-right: 1rem; @@ -881,8 +861,5 @@ legend.dnb-form-label { .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after { background-color: var(--skeleton-color); } - @media screen and (-ms-high-contrast: none) { - .dnb-slider__wrapper { - flex: none; } } " `; diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss index 11512806b44..5e7404b6164 100644 --- a/packages/dnb-eufemia/src/components/slider/style/_slider.scss +++ b/packages/dnb-eufemia/src/components/slider/style/_slider.scss @@ -269,10 +269,4 @@ background-color: var(--skeleton-color); } } - - @include IS_IE { - &__wrapper { - flex: none; - } - } } diff --git a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap index 018a98c40b8..3aad55cbe23 100644 --- a/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/space/__tests__/__snapshots__/Space.test.tsx.snap @@ -379,9 +379,6 @@ exports[`Space scss have to match snapshot 1`] = ` /* stylelint-disable */ .dnb-space--no-collapse { display: flow-root; } - @media screen and (-ms-high-contrast: none) { - .dnb-space--no-collapse { - overflow: auto; } } .dnb-space--stretch { width: 100%; } diff --git a/packages/dnb-eufemia/src/components/space/style/_space.scss b/packages/dnb-eufemia/src/components/space/style/_space.scss index c092b9db8c9..4d7976627da 100644 --- a/packages/dnb-eufemia/src/components/space/style/_space.scss +++ b/packages/dnb-eufemia/src/components/space/style/_space.scss @@ -152,10 +152,6 @@ .dnb-space { &--no-collapse { display: flow-root; - - @include IS_IE { - overflow: auto; - } } &--stretch { width: 100%; diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap index 54abccfdd53..9b90327ddf2 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap @@ -647,9 +647,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { - box-shadow: inset 0 0 0 1px var(--color-sea-green); } } .dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button { background-color: var(--color-pistachio); } @@ -672,9 +669,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: inset 0 0 0 1px var(--color-black-20); } } .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { --border-color: var(--color-black-80); @@ -688,9 +682,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - box-shadow: inset 0 0 0 1px var(--color-black-80); } } html[data-whatinput='keyboard'] .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus { @@ -814,9 +805,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -1067,9 +1055,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -1280,9 +1265,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -1301,11 +1283,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -1406,10 +1383,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after, html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after { content: none; } diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index 87db0c52df1..16ca4be5f6d 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -8239,9 +8239,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button { - box-shadow: inset 0 0 0 1px var(--color-sea-green); } } .dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button { background-color: var(--color-pistachio); } @@ -8264,9 +8261,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active { - box-shadow: inset 0 0 0 1px var(--color-black-20); } } .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { --border-color: var(--color-black-80); @@ -8280,9 +8274,6 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active { - box-shadow: inset 0 0 0 1px var(--color-black-80); } } html[data-whatinput='keyboard'] .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus { @@ -8406,9 +8397,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -8659,9 +8647,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -8872,9 +8857,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -8893,11 +8875,6 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -8998,10 +8975,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after, html:not([data-whatintent='touch']) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled])::after { content: none; } diff --git a/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss b/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss index 1c752f16ba1..711e00dd2ec 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss @@ -10,7 +10,7 @@ &__item { &--current .dnb-button { font-weight: var(--font-weight-medium); - @include fakeBorder(var(--color-sea-green), 0.125rem, inset, true); + @include fakeBorder(var(--color-sea-green), 0.125rem, inset); } &--visited .dnb-button { background-color: var(--color-pistachio); @@ -26,7 +26,7 @@ &.dnb-button--secondary:active { color: var(--color-black-80); background-color: var(--color-white); - @include fakeBorder(var(--color-black-20), 0.0625rem, inset, true); + @include fakeBorder(var(--color-black-20), 0.0625rem, inset); } } &--inactive.dnb-step-indicator__item--current { @@ -35,12 +35,7 @@ &.dnb-button--secondary:hover, &.dnb-button--secondary:focus, &.dnb-button--secondary:active { - @include fakeBorder( - var(--color-black-80), - 0.125rem, - inset, - true - ); + @include fakeBorder(var(--color-black-80), 0.125rem, inset); } } } diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index 0538b6249c6..2f67a6c6763 100644 --- a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -245,9 +245,6 @@ exports[`Switch scss have to match default theme snapshot 1`] = ` content: ''; position: absolute; transition: transform 0.3s ease-out, position 0.3s ease-out; } - @media screen and (-ms-high-contrast: none) { - .dnb-switch__background::after { - top: 0.25rem; } } .dnb-switch__input:not(:checked) ~ .dnb-switch__button { background-color: var(--color-white); border-color: var(--color-sea-green); } @@ -296,10 +293,6 @@ exports[`Switch scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard'] - .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus { display: block; } @@ -323,9 +316,6 @@ exports[`Switch scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after { background-color: var(--color-fire-red); } .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after { @@ -335,9 +325,6 @@ exports[`Switch scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus { transform: rotate(180deg); } .dnb-switch > .dnb-form-status { @@ -438,9 +425,6 @@ exports[`Switch scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -555,9 +539,6 @@ legend.dnb-form-label { .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-switch { font-family: var(--font-family-default); @@ -675,9 +656,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-switch__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-switch__input:not(:checked) ~ .dnb-switch__button { transform: translateX(0); transform: translateX(calc(1px - 1px - var(--switch-border-width--medium))); } @@ -747,17 +725,6 @@ legend.dnb-form-label { background-color: var(--skeleton-color); } .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after { border-color: var(--skeleton-color--contrast); } - @media screen and (-ms-high-contrast: none) { - .dnb-switch { - vertical-align: text-bottom; } - .dnb-switch__order { - align-items: flex-start; } - .dnb-switch__shell { - transform: translateY(0); } - .dnb-switch__input, .dnb-switch__focus, .dnb-switch__button { - top: 0; - bottom: 0; - margin: auto 0; } } @supports (-ms-ime-align: auto) { .dnb-switch__input:not(:checked) ~ .dnb-switch__button { transform: translateX(0); } diff --git a/packages/dnb-eufemia/src/components/switch/style/_switch.scss b/packages/dnb-eufemia/src/components/switch/style/_switch.scss index f35cb3a2ec6..abb5394c290 100644 --- a/packages/dnb-eufemia/src/components/switch/style/_switch.scss +++ b/packages/dnb-eufemia/src/components/switch/style/_switch.scss @@ -107,7 +107,7 @@ * aka when the switch is not :checked */ &__input:not(:checked) ~ &__button { - transform: translateX(0); // IE fix + transform: translateX(0); transform: translateX( calc(1px - 1px - var(--switch-border-width--medium)) ); @@ -118,7 +118,7 @@ * aka when the switch is :checked */ &__input:checked ~ &__button { - transform: translateX(1rem); // IE fix + transform: translateX(1rem); transform: translateX( calc( var(--switch-width--medium) - 1.5rem + @@ -244,24 +244,6 @@ border-color: var(--skeleton-color--contrast); } - @include IS_IE { - vertical-align: text-bottom; - - &__order { - align-items: flex-start; - } - &__shell { - transform: translateY(0); - } - &__input, - &__focus, - &__button { - top: 0; - bottom: 0; - margin: auto 0; - } - } - // Edge fix @include IS_EDGE { // fix are a problem with transition and complex transforms diff --git a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss index 19f022d1c8c..29d9549e4d8 100644 --- a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss @@ -21,10 +21,6 @@ content: ''; position: absolute; transition: transform 0.3s ease-out, position 0.3s ease-out; - - @include IS_IE { - top: 0.25rem; // because IE is not using flex to center here - } } } diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 4f28a4788b4..6963b21ff3f 100644 --- a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -330,13 +330,6 @@ exports[`Table scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse'] - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, @@ -360,13 +353,6 @@ exports[`Table scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch'] - html:not([data-whatintent='touch']) - .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap index fdf49ca3ee8..e61bd04a2f8 100644 --- a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap +++ b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap @@ -1320,9 +1320,6 @@ exports[`Tabs scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-tabs__button__title { font-weight: var(--font-weight-regular); @@ -1359,9 +1356,6 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-tabs__button:focus::before { top: 0.5rem; left: -0.375rem; @@ -1488,9 +1482,6 @@ exports[`Tabs scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } @supports not (scrollbar-color: auto) { .dnb-tabs__tabs__tablist::-webkit-scrollbar { background-color: var(--color-black-8); } diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap index fb2f2069540..a21adb2b16a 100644 --- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -88,9 +88,6 @@ exports[`Tag scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -341,9 +338,6 @@ exports[`Tag scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -554,9 +548,6 @@ exports[`Tag scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -575,11 +566,6 @@ exports[`Tag scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -671,9 +657,6 @@ button.dnb-button::-moz-focus-inner { @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-tag--interactive.dnb-button { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-tag--interactive.dnb-button { - box-shadow: inset 0 0 0 1px var(--color-sea-green); } } html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) { @@ -682,12 +665,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) { - opacity: 1; } } .dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus[disabled] { cursor: not-allowed; } @@ -713,10 +690,6 @@ button.dnb-button::-moz-focus-inner { html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active[disabled] { cursor: not-allowed; } @@ -727,19 +700,12 @@ button.dnb-button::-moz-focus-inner { --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-tag--interactive.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-tag--interactive.dnb-button[disabled] { color: var(--color-sea-green-30); background-color: var(--color-white); --border-color: var(--color-sea-green-30); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-tag--interactive.dnb-button[disabled] { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } } .dnb-tag--removable.dnb-button { color: var(--color-white); @@ -773,10 +739,6 @@ button.dnb-button::-moz-focus-inner { html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path { fill: var(--color-sea-green); } @@ -791,12 +753,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } - @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) { - opacity: 1; } } html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path { fill: var(--color-sea-green); } html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path { @@ -811,10 +767,6 @@ button.dnb-button::-moz-focus-inner { --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-tag--removable.dnb-button:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) { - box-shadow: 0 0 0 0.0625rem transparent; } } .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path { fill: var(--color-sea-green); } @@ -835,10 +787,5 @@ button.dnb-button::-moz-focus-inner { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-tag__group .dnb-button:not([class*='dnb-space']) { - margin-bottom: 0.5rem; } - .dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) { - margin-right: 0.5rem; } } " `; diff --git a/packages/dnb-eufemia/src/components/tag/style/_tag.scss b/packages/dnb-eufemia/src/components/tag/style/_tag.scss index 58a12053fc2..5c57c74ea48 100644 --- a/packages/dnb-eufemia/src/components/tag/style/_tag.scss +++ b/packages/dnb-eufemia/src/components/tag/style/_tag.scss @@ -38,7 +38,7 @@ &.dnb-button { color: var(--color-sea-green); - @include fakeBorder(var(--color-sea-green), 0.0625rem, inset, true); + @include fakeBorder(var(--color-sea-green), 0.0625rem, inset); @include buttonHover(var(--color-sea-green), var(--color-black-8)); @include buttonFocus(var(--color-sea-green), var(--color-black-8)); @include buttonActive( @@ -93,14 +93,5 @@ display: inline-flex; flex-wrap: wrap; gap: 0.5rem; - - @include IS_IE { - .dnb-button:not([class*='dnb-space']) { - margin-bottom: 0.5rem; - &:not(:last-of-type) { - margin-right: 0.5rem; - } - } - } } } diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap index da93497dece..d32ecb57026 100644 --- a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap +++ b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap @@ -224,17 +224,11 @@ exports[`Textarea scss have to match default theme snapshot 1`] = ` --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state { - box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } } .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder { @@ -335,9 +329,6 @@ exports[`Textarea scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -452,9 +443,6 @@ legend.dnb-form-label { .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-textarea { font-family: var(--font-family-default); @@ -576,17 +564,11 @@ legend.dnb-form-label { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state { - box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } } .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { --border-color: var(--color-fire-red); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state { - box-shadow: 0 0 0 0.125rem var(--color-fire-red); } } .dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder { @@ -707,11 +689,5 @@ legend.dnb-form-label { .dnb-textarea.dnb-skeleton .dnb-textarea__state, .dnb-textarea.dnb-skeleton .dnb-textarea__textarea { visibility: hidden; } - @media screen and (-ms-high-contrast: none) { - .dnb-textarea__inner { - margin: 0; } - .dnb-form-row--horizontal .dnb-textarea, - .dnb-textarea--vertical .dnb-textarea__inner, .dnb-textarea:not(.dnb-textarea--stretch) { - flex: none; } } " `; diff --git a/packages/dnb-eufemia/src/components/textarea/style/_textarea.scss b/packages/dnb-eufemia/src/components/textarea/style/_textarea.scss index 02039ed4a81..ed01f02edf8 100644 --- a/packages/dnb-eufemia/src/components/textarea/style/_textarea.scss +++ b/packages/dnb-eufemia/src/components/textarea/style/_textarea.scss @@ -183,15 +183,4 @@ &.dnb-skeleton &__textarea { visibility: hidden; } - - @include IS_IE { - &__inner { - margin: 0; - } - .dnb-form-row--horizontal &, - &--vertical &__inner, - &:not(#{&}--stretch) { - flex: none; - } - } } diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap index e9f231a3f9d..024aae7291a 100644 --- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap @@ -58,9 +58,6 @@ exports[`Timeline scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-timeline__item__label__icon { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-timeline__item__label__icon { - box-shadow: inset 0 0 0 1px var(--color-black-80); } } .dnb-timeline__item__label__title { margin-left: var(--timeline-border-spacing--icon-adjusted); font-size: var(--font-size-small); @@ -104,9 +101,6 @@ exports[`Timeline scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { - box-shadow: inset 0 0 0 1px var(--color-black-3); } } .dnb-timeline__item:only-child { margin-left: 0; } .dnb-timeline__item:last-child .dnb-timeline__item__content { @@ -236,9 +230,6 @@ exports[`Timeline scss have to match snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-timeline__item__label__icon { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-timeline__item__label__icon { - box-shadow: inset 0 0 0 1px var(--color-black-80); } } .dnb-timeline__item__label__title { margin-left: var(--timeline-border-spacing--icon-adjusted); font-size: var(--font-size-small); @@ -282,9 +273,6 @@ exports[`Timeline scss have to match snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon { - box-shadow: inset 0 0 0 1px var(--color-black-3); } } .dnb-timeline__item:only-child { margin-left: 0; } .dnb-timeline__item:last-child .dnb-timeline__item__content { diff --git a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss index 1e5124f0845..2457edfdb07 100644 --- a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss @@ -47,7 +47,7 @@ border-radius: var(--timeline-icon-border-radius--small); color: var(--color-black-80); background-color: var(--color-white); - @include fakeBorder(var(--color-black-80), 0.0625rem, inset, true); + @include fakeBorder(var(--color-black-80), 0.0625rem, inset); } &__title { margin-left: var(--timeline-border-spacing--icon-adjusted); @@ -93,7 +93,7 @@ &--upcoming:not(.dnb-skeleton) &__label__icon { color: var(--color-black-55); background-color: var(--color-black-3); - @include fakeBorder(var(--color-black-3), 0.0625rem, inset, true); + @include fakeBorder(var(--color-black-3), 0.0625rem, inset); } &:only-child { margin-left: 0; diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap index 56c7dabeee2..ba23ae7332b 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap @@ -1487,11 +1487,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button { - box-shadow: inset 0 0 0 1px var(--color-emerald-green); } } html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot, html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover) ~ .dnb-radio__dot { @@ -1553,12 +1548,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput='keyboard'] html[data-whatinput='keyboard'] - .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button { background-color: transparent; @@ -1589,9 +1578,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: inset 0 0 0 1px var(--color-fire-red); } } .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { --border-color: var(--color-fire-red); box-shadow: inset 0 0 0 0.09375rem var(--border-color); @@ -1604,9 +1590,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: inset 0 0 0 1px var(--color-fire-red); } } .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus { box-shadow: none; } .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__dot { @@ -1624,9 +1607,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button { - box-shadow: inset 0 0 0 1px var(--color-fire-red); } } .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus { box-shadow: none; } .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { @@ -1643,9 +1623,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { box-shadow: 0 0 0 0.0625rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) { - box-shadow: inset 0 0 0 1px var(--color-fire-red); } } .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { --border-color: var(--color-white); box-shadow: inset 0 0 0 0.09375rem var(--border-color); @@ -1658,9 +1635,6 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) { .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { box-shadow: 0 0 0 0.09375rem var(--border-color); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { - box-shadow: inset 0 0 0 1px var(--color-white); } } .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover) ~ .dnb-radio__dot { background-color: var(--color-white); } .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { @@ -1767,9 +1741,6 @@ exports[`ToggleButton scss have to match snapshot 1`] = ` cursor: pointer; } .dnb-form-label[disabled] { cursor: not-allowed; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-label { - max-width: 60vw; } } legend.dnb-form-label { display: inline-block; } @@ -1841,9 +1812,6 @@ legend.dnb-form-label { color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Tooltip @@ -2094,9 +2062,6 @@ legend.dnb-form-label { .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -2307,9 +2272,6 @@ legend.dnb-form-label { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -2328,11 +2290,6 @@ legend.dnb-form-label { white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { @@ -2427,9 +2384,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-checkbox__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-checkbox__focus, .dnb-checkbox__button { position: relative; z-index: 4; @@ -2499,19 +2453,6 @@ button.dnb-button::-moz-focus-inner { border-color: var(--skeleton-color); } .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before { border-radius: 0; } - @media screen and (-ms-high-contrast: none) { - .dnb-checkbox { - vertical-align: text-bottom; } - .dnb-checkbox__order { - align-items: flex-start; } - .dnb-checkbox__gfx, .dnb-checkbox__input { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-checkbox__shell { - transform: translateY(0); } } /* * DNB Radio @@ -2604,9 +2545,6 @@ button.dnb-button::-moz-focus-inner { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-radio__focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-radio__focus, .dnb-radio__button { width: calc(var(--radio-width--medium) - 0.25rem); height: calc(var(--radio-height--medium) - 0.25rem); @@ -2710,21 +2648,6 @@ button.dnb-button::-moz-focus-inner { font-size: var(--font-size-basis); } .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button { border-color: var(--skeleton-color); } - @media screen and (-ms-high-contrast: none) { - .dnb-radio { - vertical-align: text-bottom; } - .dnb-radio__input, .dnb-radio__focus, .dnb-radio__button, .dnb-radio__dot { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-radio__order { - align-items: center; } - .dnb-radio, .dnb-radio-group { - flex: none; } - .dnb-radio-group { - vertical-align: middle; } } .dnb-toggle-button { font-family: var(--font-family-default); @@ -2871,22 +2794,5 @@ button.dnb-button::-moz-focus-inner { @media screen and (min-width: 40em) { .dnb-form-label + .dnb-toggle-button { transform: translateY(-0.5rem); } } - @media screen and (-ms-high-contrast: none) { - .dnb-toggle-button { - flex: none; } - .dnb-toggle-button:not(.dnb-toggle-button--vertical) { - align-items: center; } - .dnb-toggle-button__shell { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; } - .dnb-toggle-button-group { - flex: none; } - .dnb-toggle-button-group, .dnb-toggle-button-group__shell { - width: 100%; } - .dnb-form-row__indent--default .dnb-toggle-button-group { - flex: 1; } } " `; diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss b/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss index c023ce16500..5425114101c 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss @@ -190,38 +190,4 @@ transform: translateY(-0.5rem); } } - - @include IS_IE { - &:not(#{&}--vertical) { - align-items: center; - } - - &__shell { - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - - flex: none; - - &-group { - &, - &__shell { - width: 100%; - } - flex: none; - .dnb-form-row__indent--default & { - flex: 1; - } - } - - // .dnb-form-row--vertical &-group { - // width: 100%; - // &__shell { - // width: 100%; - // } - // } - } } diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss index ad6d9cb2e15..15265fb1979 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss @@ -53,8 +53,7 @@ @include fakeBorder( var(--color-emerald-green), 0.09375rem, - inset, - true + inset ); } @@ -149,18 +148,13 @@ &:not(:hover):not(:focus):not(:active) { background-color: var(--color-white); color: var(--color-fire-red); - @include fakeBorder(var(--color-fire-red), 0.0625rem, inset, true); + @include fakeBorder(var(--color-fire-red), 0.0625rem, inset); } .dnb-radio { &__input:not([disabled]) { & ~ .dnb-radio__button { - @include fakeBorder( - var(--color-fire-red), - 0.09375rem, - inset, - true - ); + @include fakeBorder(var(--color-fire-red), 0.09375rem, inset); } & ~ .dnb-radio__focus { box-shadow: none; @@ -175,12 +169,7 @@ &__input { & ~ .dnb-checkbox__button { border: none; - @include fakeBorder( - var(--color-fire-red), - 0.09375rem, - inset, - true - ); + @include fakeBorder(var(--color-fire-red), 0.09375rem, inset); } &:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus { box-shadow: none; @@ -193,14 +182,14 @@ &__button:not([disabled]):not(:hover):not(:focus):not(:active) { color: var(--color-white); background-color: var(--color-fire-red); - @include fakeBorder(var(--color-fire-red), 0.0625rem, inset, true); + @include fakeBorder(var(--color-fire-red), 0.0625rem, inset); } &__status--error#{&}--checked &__button:not([disabled]) { &:not(:active):not(:focus) .dnb-radio { &__input:not([disabled]) { & ~ .dnb-radio__button { - @include fakeBorder(var(--color-white), 0.09375rem, inset, true); + @include fakeBorder(var(--color-white), 0.09375rem, inset); } &:not(:hover) ~ .dnb-radio__dot { background-color: var(--color-white); diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap index e413d1dae39..18cd49639a3 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap @@ -122,9 +122,6 @@ exports[`Upload scss have to match snapshot 1`] = ` color: var(--skeleton-color) !important; } .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after { content: none !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-icon { - flex: none; } } /* * DNB Button @@ -379,9 +376,6 @@ exports[`Upload scss have to match snapshot 1`] = ` .dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status { transition-duration: 1ms !important; } - @media screen and (-ms-high-contrast: none) { - .dnb-form-status__shell > .dnb-icon { - border-width: 1px; } } .dnb-button { font-family: var(--font-family-default); @@ -592,9 +586,6 @@ exports[`Upload scss have to match snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active { box-shadow: none; @@ -613,11 +604,6 @@ exports[`Upload scss have to match snapshot 1`] = ` white-space: nowrap; } .dnb-button + .dnb-form-status { margin-top: 0.5rem; } - @media screen and (-ms-high-contrast: none) { - .dnb-button { - flex: none; } - .dnb-button__icon, .dnb-button__text { - transform: translateY(-0.0625rem); } } /* Firefox includes a hidden border which messes up button dimensions */ button.dnb-button::-moz-focus-inner { diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap index bdd049160d5..0986e33bbdd 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap @@ -845,18 +845,12 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-drawer-list__options:focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-drawer-list__options--focusring { outline: none; } html[data-whatinput='mouse'] .dnb-drawer-list__options--focusring { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='mouse'] .dnb-drawer-list__options--focusring { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } @media screen and (max-width: 40em) { .dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__options { border-radius: 0; } } @@ -905,9 +899,6 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` --border-color: var(--color-emerald-green); box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { - box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-emerald-green); } } .dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner { color: var(--color-black-80); background-color: var(--color-white); } @@ -927,22 +918,14 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` background-color: inherit; } .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after { content: ''; + grid-column: 2; + grid-row: 1 / -1; + justify-self: end; + align-self: center; width: 1rem; height: 1rem; background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); } - @supports not (display: grid) { - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after { - position: absolute; - z-index: 1; - top: calc(50% - 0.5rem); - right: 1rem; } } - @supports (display: grid) { - .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after { - grid-column: 2; - grid-row: 1 / -1; - justify-self: end; - align-self: center; } } .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before { visibility: hidden; } @media screen and (min-width: 40em) { @@ -957,10 +940,6 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` --border-color: var(--color-mint-green); box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] -.dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before { - box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-mint-green); } } .dnb-drawer-list__option--focus:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__inner { color: var(--color-sea-green); background-color: var(--color-mint-green-12); } @@ -979,9 +958,6 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = ` --border-color: var(--color-white); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { - box-shadow: 0 0 0 0.125rem var(--color-white); } } .dnb-drawer-list--scroll .dnb-drawer-list__option:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { left: 0.5rem; right: 0.5rem; } @@ -1193,21 +1169,14 @@ exports[`DrawerList scss have to match snapshot 1`] = ` .dnb-drawer-list__option__inner { position: relative; z-index: 1; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: repeat(10, min-content); outline: none; margin: 0; padding: 1rem; color: inherit; background-color: var(--color-white); } - @supports not (display: grid) { - .dnb-drawer-list__option__inner { - display: flex; - flex-direction: column; - justify-content: center; } } - @supports (display: grid) { - .dnb-drawer-list__option__inner { - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: repeat(10, min-content); } } .dnb-drawer-list__option__inner > * { align-self: self-start; } .dnb-drawer-list__option__item { @@ -1379,14 +1348,6 @@ exports[`DrawerList scss have to match snapshot 1`] = ` height: auto !important; width: 100vw !important; box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.16); } } - @media screen and (-ms-high-contrast: none) { - .dnb-drawer-list { - flex: none; - vertical-align: baseline; } - .dnb-drawer-list__shell { - top: 0; } - .dnb-drawer-list__options { - display: block; } } @keyframes drawer-list-scale-in { from { diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss index 39b545fd1c0..6287d7e9526 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss @@ -175,22 +175,13 @@ position: relative; z-index: 1; // only to go over &__triangle - // IE11 support - @supports not (display: grid) { - display: flex; - flex-direction: column; - justify-content: center; - } - - @supports (display: grid) { - display: grid; + display: grid; - // Use two columns - grid-template-columns: 1fr auto; + // Use two columns + grid-template-columns: 1fr auto; - // Use a high number in order to be able to vertically center the check icon (among others) and suffix with "grid-row: 1 / -1;" - grid-template-rows: repeat(10, min-content); - } + // Use a high number in order to be able to vertically center the check icon (among others) and suffix with "grid-row: 1 / -1;" + grid-template-rows: repeat(10, min-content); outline: none; @@ -470,19 +461,6 @@ box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.16); } } - - @include IS_IE { - flex: none; - vertical-align: baseline; - - &__shell { - top: 0; - } - &__options { - // IE has bug where the height can't be calculated property - display: block; - } - } } @keyframes drawer-list-scale-in { diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss index 097db1580c2..e829035602f 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss @@ -141,21 +141,11 @@ &::after { content: ''; - // IE11 support - @supports not (display: grid) { - position: absolute; - z-index: 1; - top: calc(50% - 0.5rem); - right: 1rem; - } - - @supports (display: grid) { - grid-column: 2; - grid-row: 1 / -1; + grid-column: 2; + grid-row: 1 / -1; - justify-self: end; - align-self: center; - } + justify-self: end; + align-self: center; width: 1rem; height: 1rem; diff --git a/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts b/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts index 0202591eafe..3024b71a083 100644 --- a/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts +++ b/packages/dnb-eufemia/src/shared/MediaQueryUtils.ts @@ -1,5 +1,5 @@ import { isTrue, toKebabCase } from './component-helper' -import { IS_IE11, warn } from './helpers' +import { warn } from './helpers' export type MediaQuerySizes = | 'small' @@ -182,7 +182,7 @@ export function createMediaQueryListener( callback(event?.matches, event) } } - if (IS_IE11 || !mediaQueryList?.addEventListener) { + if (!mediaQueryList?.addEventListener) { // Deprecated mediaQueryList.addListener(listener) } else { @@ -190,7 +190,7 @@ export function createMediaQueryListener( } return () => { - if (IS_IE11 || !mediaQueryList?.removeEventListener) { + if (!mediaQueryList?.removeEventListener) { // Deprecated mediaQueryList.removeListener(listener) } else { diff --git a/packages/dnb-eufemia/src/shared/__tests__/helpers.test.js b/packages/dnb-eufemia/src/shared/__tests__/helpers.test.js index e7ae36c6028..f4680a1dde2 100644 --- a/packages/dnb-eufemia/src/shared/__tests__/helpers.test.js +++ b/packages/dnb-eufemia/src/shared/__tests__/helpers.test.js @@ -16,7 +16,6 @@ import { getSelectedText, insertElementBeforeSelection, debounce, - isIE11, isEdge, isiOS, isSafari, @@ -185,10 +184,6 @@ describe('platform', () => { }) describe('user agent', () => { - it('"isIE11" should result in false (no function)', () => { - navigator.maxTouchPoints = 2 - expect(isIE11()).toBe(false) - }) it('"isEdge" should result in true', () => { userAgentGetter.mockReturnValue('Edge') expect(isEdge()).toBe(true) diff --git a/packages/dnb-eufemia/src/shared/helpers.js b/packages/dnb-eufemia/src/shared/helpers.js index 54fd20e7e91..72457e3cb01 100644 --- a/packages/dnb-eufemia/src/shared/helpers.js +++ b/packages/dnb-eufemia/src/shared/helpers.js @@ -11,7 +11,6 @@ export const PLATFORM_ANDROID = 'Android' export const PLATFORM_LINUX = 'Linux' export const PLATFORM_IOS = 'iOS|iPhone|iPad|iPod' -export let IS_IE11 = false export let IS_EDGE = false export let IS_IOS = false export let IS_SAFARI = false @@ -51,17 +50,10 @@ export const isSafari = () => /safari/i.test(navigator?.userAgent) && !/chrome/i.test(navigator?.userAgent)) -export const isIE11 = () => - (IS_IE11 = - typeof window !== 'undefined' && typeof document !== 'undefined' - ? !!window.MSInputMethodContext && !!document.documentMode - : false) - export const isEdge = () => (IS_EDGE = typeof navigator !== 'undefined' && /edge/i.test(navigator?.userAgent)) -isIE11() isEdge() isiOS() isSafari() diff --git a/packages/dnb-eufemia/src/shared/helpers/InteractionInvalidation.ts b/packages/dnb-eufemia/src/shared/helpers/InteractionInvalidation.ts index 09105b99a45..0477e5192aa 100644 --- a/packages/dnb-eufemia/src/shared/helpers/InteractionInvalidation.ts +++ b/packages/dnb-eufemia/src/shared/helpers/InteractionInvalidation.ts @@ -1,5 +1,3 @@ -import { IS_IE11 } from '../helpers' - export type TargetElement = HTMLElement export type TargetSelector = string export type HTMLElementNode = TargetElement & { @@ -149,10 +147,10 @@ export class InteractionInvalidation { const selector = `${rootSelector} ${elementSelector}:not(script):not(style):not(path):not(head *)` - // JSDOM and IE11 has issues with the selector :not(x *), so we used it only in the browser, + // JSDOM has issues with the selector :not(x *), so we used it only in the browser, // so we remove the asterisk from the selector, but add it to the exclude selectors list and make another querySelectorAll call // - so we query all bypass selectors with "asterisk" manually - if (IS_IE11 || process.env.NODE_ENV === 'test') { + if (process.env.NODE_ENV === 'test') { const excludeSelectors = [] const testSelector = selector diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss index a280e491888..abeae44157e 100644 --- a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss +++ b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss @@ -20,13 +20,7 @@ } } .dnb-focus-ring { - @include fakeBorder( - $focusRingColor, - $focusRingWidth, - null, - null, - !important - ); + @include fakeBorder($focusRingColor, $focusRingWidth, null, !important); } .dnb-scrollbar-appearance { @include scrollbarAppearance(); diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss index e6d63bb74b9..bb8192fba00 100644 --- a/packages/dnb-eufemia/src/style/core/utilities.scss +++ b/packages/dnb-eufemia/src/style/core/utilities.scss @@ -86,7 +86,6 @@ $focusRingColor: var(--color-emerald-green); $color: null, $width: null /* 1px */, $inset: null, - $is1px: false /* IE11 fix */, $important: null ) { @if $color == null { @@ -121,17 +120,6 @@ $focusRingColor: var(--color-emerald-green); } } - @include IS_IE() { - @if $is1px { - // Since 0.0625rem gets not rendered correctly - // and gives an artifact, we do use px instead - box-shadow: $inset 0 0 0 1px $color $important; - } @else { - // IE color fallback - box-shadow: $inset 0 0 0 $width $color $important; - } - } - @if $color != null { border-color: transparent; } @@ -144,10 +132,6 @@ $focusRingColor: var(--color-emerald-green); ) { $second: 0 0 0 ($focusRingWidth + $width) $second-color; box-shadow: 0 0 0 $width $first-color, $second; - - @include IS_IE() { - border: 0 solid transparent; // only to trigger the renderering correctly in IE11 - } } @mixin dummySpacing() { @@ -168,7 +152,7 @@ $focusRingColor: var(--color-emerald-green); // older iOS safari -webkit-overflow-scrolling: touch; - // show scrollbar on IE + // show scrollbar in IE & Edge -ms-overflow-style: auto; scrollbar-color: var(--color-sea-green) transparent; @@ -236,13 +220,6 @@ $focusRingColor: var(--color-emerald-green); scrollbar-width: none; /* Firefox */ } -// IE fix -@mixin IS_IE() { - @media screen and (-ms-high-contrast: none) { - @content; - } -} - // Edge fix @mixin IS_EDGE() { @supports (-ms-ime-align: auto) { diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index dd75b0aa4d6..53fb3a380ae 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -69,9 +69,6 @@ button.dnb-anchor { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-anchor:focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-anchor:hover, .dnb-anchor:active { color: var(--color-sea-green); background-color: var(--color-mint-green-50); @@ -144,9 +141,6 @@ button.dnb-anchor { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='mouse'] .dnb-anchor--focus { - box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } .dnb-anchor--no-style { color: inherit; @@ -189,9 +183,6 @@ button.dnb-anchor { --border-color: var(--color-white); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-anchor--contrast:not(:disabled):focus { - box-shadow: 0 0 0 0.125rem var(--color-white); } } a.dnb-button { transition: none; } @@ -571,10 +562,6 @@ sub { --border-color: var(--color-white); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard'] - .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus { - box-shadow: 0 0 0 0.125rem var(--color-white); } } .dnb-blockquote:not(.dnb-blockquote--no-background) h1, .dnb-blockquote:not(.dnb-blockquote--no-background) h2, .dnb-blockquote:not(.dnb-blockquote--no-background) h3, @@ -879,9 +866,6 @@ sub { --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.25rem var(--border-color); border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-pre.dnb-pre--focus { - box-shadow: 0 0 0 0.25rem var(--color-sea-green); } } .dnb-spacing .dnb-pre:not([class*='dnb-space__top']) { margin-top: 0; } diff --git a/packages/dnb-eufemia/src/style/stylis.js b/packages/dnb-eufemia/src/style/stylis.js index cd2ddf7073b..56600e19c9c 100644 --- a/packages/dnb-eufemia/src/style/stylis.js +++ b/packages/dnb-eufemia/src/style/stylis.js @@ -6,13 +6,12 @@ import { matchAll } from '../shared/component-helper' import properties from './properties' -import { IS_IE11 } from '../shared/helpers' const findRegExp = /var\(([^)]*)\)/g const stylisPlugin = (context, content, props = null) => { // Only use the property context - if (context !== 1 || (props === null && !IS_IE11)) { + if (context !== 1 || props === null) { return false } diff --git a/packages/gatsby-plugin-eufemia-theme-handler/README.md b/packages/gatsby-plugin-eufemia-theme-handler/README.md index 3c534a9abdb..0f2658a96ca 100644 --- a/packages/gatsby-plugin-eufemia-theme-handler/README.md +++ b/packages/gatsby-plugin-eufemia-theme-handler/README.md @@ -5,7 +5,7 @@ This plugin is a easy to use drop-in solution to load different DNB Eufemia Them ## Features - The current theme used is stored in the Browsers localStorage under the key `dnb-theme` -- You can define a theme in the URL (not IE11 supported): `https://eufemia.dnb.no/?dnb-theme=ui` +- You can define a theme in the URL: `https://eufemia.dnb.no/?dnb-theme=ui` - Automatically splits theme styles into separate Webpack chunks, not matter if you have imported them already in your app or not - Supports both build an dev mode with fast refresh and hot module replacement - Loads only one theme package at a time. When the user switches to another theme, a new CSS theme file will be downloaded. diff --git a/tools/storybook-utils/GridStyle.js b/tools/storybook-utils/GridStyle.js index 37184cca3d5..3bb4633ccdf 100644 --- a/tools/storybook-utils/GridStyle.js +++ b/tools/storybook-utils/GridStyle.js @@ -3,7 +3,6 @@ * */ -import { IS_IE11 } from '@dnb/eufemia/src/shared/helpers' import { css } from '@emotion/react' export const gridStyle = ({ @@ -12,11 +11,6 @@ export const gridStyle = ({ a = 0.8, returnOnlyVars = false, } = {}) => { - // sorry IE user, here is nothing funn to get - if (IS_IE11) { - return '' - } - const color = (c) => rgb ? `rgba(${rgb}, ${a - c})` : `hsla(${hsl}, ${a - c})` diff --git a/yarn.lock b/yarn.lock index ac9302fc121..532a16623c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2372,17 +2372,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-object-assign@npm:7.16.0": - version: 7.16.0 - resolution: "@babel/plugin-transform-object-assign@npm:7.16.0" - dependencies: - "@babel/helper-plugin-utils": ^7.14.5 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 7e997adfb7d05a5666a67d9280ffc4d594f1dc0f0cea7e1aaa4173d227eaa151b5cbde7d15f9bff5e00846a6201befdd00bd944bc44ccfd384e3a0fb1400243e - languageName: node - linkType: hard - "@babel/plugin-transform-object-super@npm:^7.0.0": version: 7.16.7 resolution: "@babel/plugin-transform-object-super@npm:7.16.7" @@ -2729,7 +2718,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:7.16.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.12.7, @babel/preset-env@npm:^7.15.4": +"@babel/preset-env@npm:7.16.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.15.4": version: 7.16.0 resolution: "@babel/preset-env@npm:7.16.0" dependencies: @@ -3224,7 +3213,6 @@ __metadata: "@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 @@ -3248,7 +3236,6 @@ __metadata: "@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 @@ -6492,19 +6479,6 @@ __metadata: languageName: node linkType: hard -"@storybook/node-logger@npm:*": - version: 6.3.12 - resolution: "@storybook/node-logger@npm:6.3.12" - dependencies: - "@types/npmlog": ^4.1.2 - chalk: ^4.1.0 - core-js: ^3.8.2 - npmlog: ^4.1.2 - pretty-hrtime: ^1.0.3 - checksum: 1cac2cef9450e87c46fd7da0240f43c3d00ca5543db4a97834a07837c289d20f0defb8819ea58deff0c7ba534ab70cec73e95e9729a346d0754c333754f73477 - languageName: node - linkType: hard - "@storybook/node-logger@npm:6.5.12": version: 6.5.12 resolution: "@storybook/node-logger@npm:6.5.12" @@ -6518,34 +6492,6 @@ __metadata: languageName: node linkType: hard -"@storybook/preset-ie11@npm:0.0.1": - version: 0.0.1 - resolution: "@storybook/preset-ie11@npm:0.0.1" - dependencies: - "@babel/plugin-transform-classes": ^7.12.1 - "@babel/preset-env": ^7.12.7 - "@storybook/node-logger": "*" - "@types/babel__core": ^7.1.6 - "@types/webpack": ^4.41.13 - babel-loader: ^8.2.1 - checksum: 50e95d50e5f2235570c89bdbfcf6b22ce8bbe199bd6b6428a75bf936ce9c11d985ddc4ba396b58a2c1495757e04847a49cc04b558e92feabb317774241c1f15e - languageName: node - linkType: hard - -"@storybook/preset-ie11@patch:@storybook/preset-ie11@0.0.1#../../.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898::locator=%40dnb%2Feufemia%40workspace%3Apackages%2Fdnb-eufemia": - version: 0.0.1 - resolution: "@storybook/preset-ie11@patch:@storybook/preset-ie11@npm%3A0.0.1#../../.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898::version=0.0.1&hash=3a7f56&locator=%40dnb%2Feufemia%40workspace%3Apackages%2Fdnb-eufemia" - dependencies: - "@babel/plugin-transform-classes": ^7.12.1 - "@babel/preset-env": ^7.12.7 - "@storybook/node-logger": "*" - "@types/babel__core": ^7.1.6 - "@types/webpack": ^4.41.13 - babel-loader: ^8.2.1 - checksum: 9eee97ef4c66e6cc2925b2b5654cfad7701a4027260811532717e9b2bd60dc4575d84fcad214f39641dc57cd9bab5ef96f7e776f52a78956c7f9fbca063641d1 - languageName: node - linkType: hard - "@storybook/preset-scss@npm:1.0.3": version: 1.0.3 resolution: "@storybook/preset-scss@npm:1.0.3" @@ -7120,7 +7066,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.6": +"@types/babel__core@npm:^7.1.14": version: 7.1.16 resolution: "@types/babel__core@npm:7.1.16" dependencies: @@ -7861,7 +7807,7 @@ __metadata: languageName: node linkType: hard -"@types/webpack@npm:^4.41.13, @types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8": +"@types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8": version: 4.41.31 resolution: "@types/webpack@npm:4.41.31" dependencies: @@ -9956,7 +9902,7 @@ __metadata: languageName: node linkType: hard -"babel-loader@npm:^8.0.0, babel-loader@npm:^8.2.1, babel-loader@npm:^8.2.3": +"babel-loader@npm:^8.0.0, babel-loader@npm:^8.2.3": version: 8.2.3 resolution: "babel-loader@npm:8.2.3" dependencies: