Merge pull request #489 from 3YOURMIND/drop-internet-explorer-support

chore(kotti): Drop IE Support
3YOURMIND · Sep 3, 2021 · 1df82b7 · 1df82b7
2 parents 8b1e1aa + fb36dda
commit 1df82b7
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 34 deletions.
diff --git a/packages/documentation/layouts/default.vue b/packages/documentation/layouts/default.vue
@@ -11,8 +11,6 @@
 </template>
 
 <script>
-import cssVars from 'css-vars-ponyfill'
-
 import ActionBar from '~/components/ActionBar.vue'
 import LayoutContainer from '~/components/LayoutContainer.vue'
 import NavBar from '~/components/NavBar.vue'
@@ -24,13 +22,6 @@ export default {
 		NavBar,
 		LayoutContainer,
 	},
-	mounted() {
-		// loading IE11 polyfill
-		const isIE = !!window.MSInputMethodContext && !!document.documentMode
-		if (isIE) {
-			cssVars({ watch: true, shadowDOM: true, onlyLegacy: true })
-		}
-	},
 }
 </script>
 

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -27,7 +27,6 @@
 		"@types/marked": "^1.1.0",
 		"@types/natural-sort": "^0.0.20",
 		"case-sensitive-paths-webpack-plugin": "^2.3.0",
-		"css-vars-ponyfill": "^2.2.0",
 		"nuxt": "^2.13.3"
 	},
 	"homepage": "https://github.com/3YOURMIND/kotti#readme",

diff --git a/packages/documentation/pages/foundations/colors/introduction.vue b/packages/documentation/pages/foundations/colors/introduction.vue
@@ -8,10 +8,9 @@ It also open us to a lot of theming features.
 ## Usage
 
 We store the tokens in JSON files. We can then easily export these to SCSS, CSS custom properties
-and even figma styles for colors!
-We enforce CSS custom properties over SCSS variables.
-The `ie11-custom-properties` package ensure IE11 support.
-Here is how weuse CSS custom properties:
+and even figma styles for colors.
+We prefer CSS custom properties over SCSS variables.
+Here is how we use CSS custom properties:
 
 ```css
   /* set a css custom property */

diff --git a/packages/documentation/pages/foundations/colors/theming.vue b/packages/documentation/pages/foundations/colors/theming.vue
@@ -4,15 +4,21 @@
 You can apply your own theme to the kotti design system.
 Since we are defining design tokens with CSS custom properties, you can override any of them easily, on the fly.
 
-> We are defining every custom props on `:root` because only root variables are supported by [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill), the ponyfill we are using.
-> If you don't care about IE11 support, you can overwrite custom props on any element.
-
 ## Method 1: CSS file
 
 One easy way of theming kotti component is to overwrite custom props using CSS diretcly. You will need to load this file after loading kotti CSS tho.
 
 Example:
 
+```css
+.kt-navbar {
+	--navbar-background: red;
+	--navbar-color: blue;
+}
+```
+
+or
+
 ```css
 :root {
 	--navbar-background: red;

diff --git a/packages/documentation/pages/usage/components/accordion.vue b/packages/documentation/pages/usage/components/accordion.vue
@@ -1,8 +1,7 @@
 <template lang="md">
 <ComponentInfo v-bind="{ component }" />
 
-An accordion for hiding content on click.
-It is animated but the animation doesn't work with IE11.
+An animated accordion for hiding content on click.
 
 ```html
 <KtAccordion title="Accordion">

diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
@@ -1,8 +1,7 @@
 {
 	"author": "3YOURMIND GmbH",
 	"browserslist": [
-		"defaults",
-		"IE 11"
+		"defaults"
 	],
 	"bugs": {
 		"url": "https://github.com/3YOURMIND/kotti/issues"

diff --git a/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue b/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
@@ -78,9 +78,6 @@ export default defineComponent({
 		border: 1px solid var(--ui-02);
 		border-radius: var(--field-border-radius);
 
-		// remove scrollbar from IE entirely
-		-ms-overflow-style: none;
-
 		&::-webkit-scrollbar {
 			opacity: 0;
 		}

diff --git a/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue b/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue
@@ -114,9 +114,6 @@ export default defineComponent<KottiNavbar.PropsInternal>({
 $mobile-navbar-height: 2.4rem;
 $narrow-navbar-width: 3.4rem;
 
-// We declare it twice because IE11
-// It needs it in the :root for old and locally for modern
-:root,
 .kt-navbar {
 	--navbar-background: var(--primary-70);
 	--navbar-border: var(--primary-60);
@@ -128,9 +125,7 @@ $narrow-navbar-width: 3.4rem;
 	--user-menu-background-active: var(--primary-70);
 	--user-menu-background: var(--primary-60);
 	--user-menu-color: var(--primary-10);
-}
 
-.kt-navbar {
 	position: relative;
 	top: 0;
 	bottom: 0;

diff --git a/yarn.lock b/yarn.lock
@@ -7472,11 +7472,6 @@ css-tree@^1.0.0:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-vars-ponyfill@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.3.2.tgz#688c990d33d7d4651a2a8dd3a99d8e7458f6e20e"
-  integrity sha512-XkZfj0ROhem0Zdv44+LF15COsYmxnqL7Wd/gvwuWAauYoALbt2x94b6dIKF9fB6SIyOMYEQngA82t9RnC6b/aw==
-
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"