fix(Layout): Add necessary -ms-grid- styles for IE11

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Updating the `attachment` component styles to match Teams theme @notandrew ([#2012](https://github.com/stardust-ui/react/pull/2012))
 - Honor `disableAnimations` prop in `Provider` @miroslavstastny ([#2087](https://github.com/microsoft/fluent-ui-react/pull/2087))
 - Apply unhandled props of `Ref` to the children if used @jurokapsiar ([#2105](https://github.com/microsoft/fluent-ui-react/pull/2105))
+- Add necessary `-ms-grid-` styles to `Layout` for IE11 @jurokapsiar ([#2106](https://github.com/microsoft/fluent-ui-react/pull/2106))
 
 ### Features
 - Add `Table` component base implementation @pompomon ([#2099](https://github.com/microsoft/fluent-ui-react/pull/2099))

packages/react/src/themes/teams/components/Layout/layoutStyles.ts

@@ -1,6 +1,8 @@
 import { debugRoot, debugArea, debugGap } from '../../../../styles/debugStyles'
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types'
 
+const countTrue = items => items.filter(Boolean).length
+
 const layoutStyles: ComponentSlotStylesPrepared = {
   root: ({ props }): ICSSInJSStyle => {
     const {
@@ -36,6 +38,7 @@ const layoutStyles: ComponentSlotStylesPrepared = {
         .join(' '),
       ...(vertical && {
         gridAutoFlow: 'row',
+        '-ms-grid-columns': '1fr',
       }),
       ...rootCSS,
     }
@@ -49,20 +52,33 @@ const layoutStyles: ComponentSlotStylesPrepared = {
     ...(p.debug && debugArea()),
     alignItems: 'center',
     display: 'inline-flex',
+    [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: '1',
     ...p.startCSS,
   }),
 
   main: ({ props: p }): ICSSInJSStyle => ({
     ...(p.debug && debugArea()),
     alignItems: 'center',
     display: 'grid',
+    [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: countTrue([
+      p.start,
+      p.start && p.gap,
+      p.main,
+    ]),
     ...p.mainCSS,
   }),
 
   end: ({ props: p }): ICSSInJSStyle => ({
     ...(p.debug && debugArea()),
     alignItems: 'center',
     display: 'inline-flex',
+    [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: countTrue([
+      p.start,
+      p.start && p.gap,
+      p.main,
+      p.main && p.gap,
+      p.end,
+    ]),
     ...p.endCSS,
   }),
 }