Merge pull request #96 from moneyadviceservice/patch-4153-IE11-flex-b…

…asis-css-fix Patch 4153 ie11 flex basis css fix
moneyadviceservice · Mar 16, 2022 · 0f2b385 · 0f2b385
2 parents cbf234a + 6ed4218
commit 0f2b385
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@moneypensionservice/directories",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Directories React Component Library",
   "homepage": "https://moneyadviceservice.github.io/react_library/",
   "repository": {

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -26,5 +26,3 @@ export const SPACING_SIZES = [
   'xlarge',
 ]
 
-// detect IE11 only browsers
-export const isBrowserIE11 = !!window.MSInputMethodContext && !!document.documentMode;
diff --git a/src/utils/helpers/flexbox.js b/src/utils/helpers/flexbox.js
@@ -1,5 +1,5 @@
 import { css } from 'styled-components'
-import { breakpoints, dimensions, isBrowserIE11 } from '../constants'
+import { breakpoints, dimensions } from '../constants'
 import { breakpointStyle } from './responsive'
 
 /**
@@ -10,15 +10,15 @@ import { breakpointStyle } from './responsive'
  */
 export const flexStyle = sizeProp => {
   if (typeof sizeProp === 'number') {
-    // IE11 fix
-    if(isBrowserIE11) {
-        return css`
-        flex-basis: auto;
-        width: ${(sizeProp / 12) * 100}%;
-      `
-    }
+    // IE11 media query - flex-basis fix: auto and width
+    // @supports targets modern browsers (ignored by IE11)
     return css`
-      flex-basis: ${(sizeProp / 12) * 100}%;
+      flex-basis: auto;
+      width: ${(sizeProp / 12) * 100}%;
+      @supports (display: grid) {
+        flex-basis: ${(sizeProp / 12) * 100}%;
+        width: unset;
+      }
     `
   } else if (sizeProp === 'auto') {
     return css`
@@ -28,19 +28,17 @@ export const flexStyle = sizeProp => {
   } else {
     return dimensions.map(d => {
       if (breakpoints[d] && sizeProp[d] && sizeProp[d] !== 'auto') {
-        // IE11 fix
-        if(isBrowserIE11) {
-          return css`
-            ${breakpointStyle(
-              breakpoints[d],
-              `flex-basis: auto; width: ${(sizeProp[d] / 12) * 100}%;`
-            )}
-          `
-        }
+        // IE11 media query - flex-basis fix: auto and width
+        // @supports targets modern browsers (ignored by IE11)
         return css`
           ${breakpointStyle(
             breakpoints[d],
-            `flex-basis: ${(sizeProp[d] / 12) * 100}%;`
+            `flex-basis: auto; width: ${(sizeProp[d] / 12) * 100}%;
+            @supports (display: grid) {
+              flex-basis: ${(sizeProp[d] / 12) * 100}%;
+              width: unset;
+            }
+            `
           )}
         `
       } else if (breakpoints[d] && sizeProp[d] === 'auto') {