From da6d084ad25cd3fa0204b189034f8f5c82bc11c8 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Tue, 12 Nov 2019 14:35:29 +0100
Subject: [PATCH 1/2] add classes for ie11 in layoutStyles

---
 .../teams/components/Layout/layoutStyles.ts      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts b/packages/react/src/themes/teams/components/Layout/layoutStyles.ts
index 7a7f30acf..9ba002042 100644
--- a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts
+++ b/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,6 +52,7 @@ const layoutStyles: ComponentSlotStylesPrepared = {
     ...(p.debug && debugArea()),
     alignItems: 'center',
     display: 'inline-flex',
+    [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: '1',
     ...p.startCSS,
   }),
 
@@ -56,6 +60,11 @@ const layoutStyles: ComponentSlotStylesPrepared = {
     ...(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,
   }),
 
@@ -63,6 +72,13 @@ const layoutStyles: ComponentSlotStylesPrepared = {
     ...(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,
   }),
 }

From d717f24048cd81f2b696fef048fa13fc1f6c3090 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Tue, 12 Nov 2019 14:37:51 +0100
Subject: [PATCH 2/2] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91574c00c..539af8c89 100644
--- a/CHANGELOG.md
+++ b/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))