From 3df336fc88874fa5da6ce38cb74ee87fc9c6de83 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sat, 5 Jan 2019 14:19:53 +0100
Subject: [PATCH 1/7] use elvis operator

---
 src/components/Popup/OfficePopup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Popup/OfficePopup.vue b/src/components/Popup/OfficePopup.vue
index 4aacd32..8b163de 100644
--- a/src/components/Popup/OfficePopup.vue
+++ b/src/components/Popup/OfficePopup.vue
@@ -67,7 +67,7 @@
 
         private getScrollBar() {
             const root = this.$refs.self as HTMLElement;
-            if (root && root.style && root.style.overflowY) {
+            if (root?.style?.overflowY) {
                 return;
             }
             let needsVerticalScrollBar = false;

From d09e94ca49dbb2e8f3bf63daf967a0fe3f5298b5 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sat, 12 Jan 2019 21:36:16 +0100
Subject: [PATCH 2/7] add "OfficeModal"

and

Merge branch 'feature/component/popup' into feature/component/modal

# Conflicts:
#	packages/documentation/Overview.vue
#	src/components/index.ts

TODO: remove v-if must have for working OfficeModal and Popup
---
 packages/documentation/Overview.vue           | 69 +++++++++++++------
 .../components/Modal/OfficeModal.vue          |  9 +--
 .../components/Popup/OfficePopup.vue          |  4 +-
 3 files changed, 54 insertions(+), 28 deletions(-)
 rename packages/{ => office-ui-fabric-vue}/components/Popup/OfficePopup.vue (96%)

diff --git a/packages/documentation/Overview.vue b/packages/documentation/Overview.vue
index da127ce..bf2cec0 100644
--- a/packages/documentation/Overview.vue
+++ b/packages/documentation/Overview.vue
@@ -91,7 +91,8 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             <OfficeOverlay :visible="showOverlay" @click.native="showOverlay = false">
                 I am content within the overlay.
             </OfficeOverlay>
-            <OfficeToggle onText="Hide Dark Overlay" offText="Show Dark Overlay" v-model="showDarkOverlay">Test</OfficeToggle>
+            <OfficeToggle onText="Hide Dark Overlay" offText="Show Dark Overlay" v-model="showDarkOverlay">Test
+            </OfficeToggle>
             <OfficeOverlay :visible="showDarkOverlay" @click.native="showDarkOverlay = false" isDarkThemed>
                 I am content within the dark overlay.
             </OfficeOverlay>
@@ -107,7 +108,8 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
                 <OfficeLabel>Test Layer!</OfficeLabel>
             </OfficeLayer>
 
-            <OfficeLayerHost v-show="showLayerBox" hostId="testContainer" style="border: 1px solid red; height: 100px; margin: 10px 0">
+            <OfficeLayerHost v-show="showLayerBox" hostId="testContainer"
+                             style="border: 1px solid red; height: 100px; margin: 10px 0">
             </OfficeLayerHost>
 
             <OfficeLayer v-if="showLayerInBox" @click="alert('test')" filterEvents hostId="testContainer">
@@ -136,6 +138,17 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             </OfficeProgressIndicator>
         </OverviewItem>
 
+        <OverviewItem title="Modal">
+            <OfficeButton @click="openModal" label="Open Modal"></OfficeButton>
+            <!-- TODO: sry for v-if i'll fix this soon-->
+            <OfficeModal v-if="modalActive" :isOpen="modalActive" >
+                <div style="background-color: white; width: 60%; height: 40%;">
+                    <h1>Sample Modal</h1>
+                    <OfficeButton @click="closeModal" label="Close Modal"></OfficeButton>
+                </div>
+            </OfficeModal>
+        </OverviewItem>
+
         <OfficeLabel style="margin-top: 30px">This is the demo page for
             <OfficeLink href="https://github.com/s-bauer/office-ui-fabric-vue">office-ui-fabric-vue</OfficeLink>
         </OfficeLabel>
@@ -143,30 +156,31 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
 </template>
 
 <script lang="ts">
-    import FocusTrapZoneExample from "@/showcase/FocusTrapZoneExample.vue";
-    import {ItemTypes} from "@/showcase/ItemTypes";
-    import {IItemOptions} from "@/showcase/OverviewItem.vue";
-    import OfficeChoiceGroupOption from "../components/ChoiceGroup/ChoiceGroupOption/OfficeChoiceGroupOption.vue";
-    import OfficeChoiceGroup from "../components/ChoiceGroup/OfficeChoiceGroup.vue";
-    import OfficeIcon from "../components/Icon/OfficeIcon.vue";
-    import {ImageFit} from "../components/Image/OfficeImage.types";
-    import OfficeImage from "../components/Image/OfficeImage.vue";
-    import OfficeLabel from "../components/Label/OfficeLabel.vue";
-    import OfficeLink from "../components/Link/OfficeLink.vue";
-    import OfficeSlider from "../components/Slider/OfficeSlider.vue";
-    import OfficeToggle from "../components/Toggle/OfficeToggle.vue";
-
     import {Component, Prop, Vue} from "vue-property-decorator";
-    import OfficeButton from "../components/Button/OfficeButton.vue";
-    import OfficeCheckbox from "../components/Checkbox/OfficeCheckbox.vue";
-    import OfficeTextField from "../components/TextField/OfficeTextField.vue";
-    import OverviewItem from "./OverviewItem.vue";
-    import OfficeOverlay from "@/components/Overlay/OfficeOverlay.vue";
-    import OfficeSpinner from "../office-ui-fabric-vue/components/Spinner/OfficeSpinner.vue";
+    import OfficeButton from "../office-ui-fabric-vue/components/Button/OfficeButton.vue";
+    import OfficeCheckbox from "../office-ui-fabric-vue/components/Checkbox/OfficeCheckbox.vue";
+    import OfficeChoiceGroup from "../office-ui-fabric-vue/components/ChoiceGroup/OfficeChoiceGroup.vue";
+    import OfficeIcon from "../office-ui-fabric-vue/components/Icon/OfficeIcon.vue";
+    import {ImageFit} from "../office-ui-fabric-vue/components/Image/OfficeImage.types";
+    import OfficeImage from "../office-ui-fabric-vue/components/Image/OfficeImage.vue";
+    import OfficeLabel from "../office-ui-fabric-vue/components/Label/OfficeLabel.vue";
     import OfficeLayer from "../office-ui-fabric-vue/components/Layer/OfficeLayer.vue";
     import OfficeLayerHost from "../office-ui-fabric-vue/components/Layer/OfficeLayerHost.vue";
+    import OfficeLink from "../office-ui-fabric-vue/components/Link/OfficeLink.vue";
+    import OfficeOverlay from "../office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue";
     import OfficeProgressIndicator
         from "../office-ui-fabric-vue/components/ProgressIndicator/OfficeProgressIndicator.vue";
+    import OfficeSlider from "../office-ui-fabric-vue/components/Slider/OfficeSlider.vue";
+    import {SpinnerLabelPosition, SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpinner.types";
+    import OfficeSpinner from "../office-ui-fabric-vue/components/Spinner/OfficeSpinner.vue";
+    import OfficeTextField from "../office-ui-fabric-vue/components/TextField/OfficeTextField.vue";
+    import OfficeToggle from "../office-ui-fabric-vue/components/Toggle/OfficeToggle.vue";
+    import FocusTrapZoneExample from "./FocusTrapZoneExample.vue";
+    import {ItemTypes} from "./ItemTypes";
+    import OverviewItem, {IItemOptions} from "./OverviewItem.vue";
+    import OfficeChoiceGroupOption
+        from "../office-ui-fabric-vue/components/ChoiceGroup/ChoiceGroupOption/OfficeChoiceGroupOption.vue";
+    import OfficeModal from "../office-ui-fabric-vue/components/Modal/OfficeModal.vue";
 
     @Component({
         components: {
@@ -188,6 +202,7 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             OfficeOverlay,
             OfficeLayerHost,
             OfficeProgressIndicator,
+            OfficeModal
         },
     })
     export default class Overview extends Vue {
@@ -225,9 +240,19 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             window.alert("clicked!");
         }
 
+        private modalActive = false;
+
+        private openModal() {
+            this.modalActive = true;
+        }
+
+        private closeModal() {
+            this.modalActive = false;
+        }
+
         private mounted() {
             this.interval = window.setInterval(() => {
-                if(this.progressValue > 1)
+                if (this.progressValue > 1)
                     return this.progressValue = 0;
 
                 this.progressValue += 0.01;
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
index da9d982..11464e6 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <OfficeLayer v-bind="layerProps">
-            <div>
-                <!--  Todo: make OfficePopup with: :role="isBlocking ? 'alertdialog' : 'dialog'" :onDismiss="onDismiss"-->
+            <OfficePopup :onDismiss="onDismiss">
+                <!--  Todo: make OfficePopup with: -->
                 <div :class="classNames.root">
                     <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
                     <FocusTrapZone
@@ -17,7 +17,7 @@
                         </div>
                     </FocusTrapZone>
                 </div>
-            </div>
+            </OfficePopup>
         </OfficeLayer>
     </div>
 </template>
@@ -34,6 +34,7 @@
     import OfficeOverlay from "@components/Overlay/OfficeOverlay.vue";
     import FocusTrapZone from "@components/FocusTrapZone/FocusTrapZone.vue";
     import OfficeLayer from "@components/Layer/OfficeLayer.vue";
+    import OfficePopup from "@components/Popup/OfficePopup.vue";
 
     export interface IOfficeModalState {
         isOpen?: boolean;
@@ -45,7 +46,7 @@
     }
 
     @Component({
-        components: {OfficeLayer, OfficeOverlay, FocusTrapZone}
+        components: {OfficePopup, OfficeLayer, OfficeOverlay, FocusTrapZone}
     })
     export default class OfficeModal extends Vue {
         @Prop({type: Boolean, default: false}) private isOpen!: boolean;
diff --git a/packages/components/Popup/OfficePopup.vue b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
similarity index 96%
rename from packages/components/Popup/OfficePopup.vue
rename to packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
index 8b163de..c1a4f77 100644
--- a/packages/components/Popup/OfficePopup.vue
+++ b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
@@ -11,7 +11,7 @@
 <script lang="ts">
     import {Component, Vue, Prop} from "vue-property-decorator";
     import {mergeStyleSets} from "@uifabric/merge-styles";
-    import {getDocument} from "@/utility/dom";
+    import {getDocument} from "@utilities/dom";
 
     @Component
     export default class OfficePopup extends Vue {
@@ -67,7 +67,7 @@
 
         private getScrollBar() {
             const root = this.$refs.self as HTMLElement;
-            if (root?.style?.overflowY) {
+            if (root && root.style && root.style.overflowY) {
                 return;
             }
             let needsVerticalScrollBar = false;

From 02dcc65c3b30e32973e336f2838409da23badefb Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sun, 13 Jan 2019 15:03:34 +0100
Subject: [PATCH 3/7] add v-show support to OfficeModal and OfficePopup

TODO: Fix Layer
---
 packages/documentation/Overview.vue           |  2 +-
 .../components/Modal/OfficeModal.vue          | 26 ++++++++++---------
 .../components/Popup/OfficePopup.vue          |  3 +--
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/documentation/Overview.vue b/packages/documentation/Overview.vue
index bf2cec0..5e9f7ea 100644
--- a/packages/documentation/Overview.vue
+++ b/packages/documentation/Overview.vue
@@ -141,7 +141,7 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
         <OverviewItem title="Modal">
             <OfficeButton @click="openModal" label="Open Modal"></OfficeButton>
             <!-- TODO: sry for v-if i'll fix this soon-->
-            <OfficeModal v-if="modalActive" :isOpen="modalActive" >
+            <OfficeModal :isOpen="modalActive" >
                 <div style="background-color: white; width: 60%; height: 40%;">
                     <h1>Sample Modal</h1>
                     <OfficeButton @click="closeModal" label="Close Modal"></OfficeButton>
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
index 11464e6..b858491 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
@@ -1,10 +1,10 @@
 <template>
-    <div>
+    <div ref="self">
         <OfficeLayer v-bind="layerProps">
             <OfficePopup :onDismiss="onDismiss">
                 <!--  Todo: make OfficePopup with: -->
                 <div :class="classNames.root">
-                    <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
+                    <OfficeOverlay v-if="state.isOpen && state.isVisible" :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
                     <FocusTrapZone
                             :elementToFocusOnDismiss="elementToFocusOnDismiss"
                             :isClickableOutsideFocusTrap="isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking"
@@ -43,6 +43,7 @@
         id?: string;
         hasBeenOpened?: boolean;
         modalRectangleTop?: number;
+        topOffsetFixed?: boolean;
     }
 
     @Component({
@@ -64,29 +65,30 @@
 
 
         private get state(): IOfficeModalState {
-            let modalRectangle: number | undefined;
+            let modalRectangleTop: number | undefined;
             if (this.topOffsetFixed) {
                 const dialogMain = document.getElementsByClassName("ms-Dialog-main");
                 if (dialogMain.length > 0) {
-                    modalRectangle = dialogMain[0].getBoundingClientRect().top;
+                    modalRectangleTop = dialogMain[0].getBoundingClientRect().top;
                 }
             }
-            return ({
+            const root = this.$refs.self as HTMLDivElement;
+            return {
                 id: getId("OfficeModal"),
                 isOpen: this.isOpen,
-                isVisible: this.isOpen,
+                isVisible: root && root.style && root.style.display === "none" ? false : this.isOpen,
                 hasBeenOpened: this.isOpen,
-                modalRectangleTop: modalRectangle
-            });
+                modalRectangleTop,
+                topOffsetFixed: this.topOffsetFixed
+            };
         }
-
-        public get classNames() {
+        private get classNames() {
             return mergeStyleSets(getStyles({
                 isVisible: this.state.isVisible,
-                isOpen: this.isOpen,
+                isOpen: this.state.isOpen,
                 hasBeenOpened: this.state.hasBeenOpened,
                 modalRectangleTop: this.state.modalRectangleTop,
-                topOffsetFixed: this.topOffsetFixed,
+                topOffsetFixed: this.state.topOffsetFixed,
                 theme: createTheme({}),
             }));
         }
diff --git a/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
index c1a4f77..228c019 100644
--- a/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
+++ b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
@@ -67,11 +67,10 @@
 
         private getScrollBar() {
             const root = this.$refs.self as HTMLElement;
-            if (root && root.style && root.style.overflowY) {
+            if (root && root.style && root.style.display !== "none" && root.style.overflowY) {
                 return;
             }
             let needsVerticalScrollBar = false;
-
             if (root.firstElementChild) {
                 // ClientHeight returns the client height of an element rounded to an
                 // integer. On some browsers at different zoom levels this rounding

From 58ec5648764a88fc77536d653c63d342b620d477 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sun, 13 Jan 2019 15:08:33 +0100
Subject: [PATCH 4/7] Fixed layer with v-if.

Is this required on purpose?
---
 .../office-ui-fabric-vue/components/Modal/OfficeModal.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
index b858491..4132a1f 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
@@ -1,10 +1,10 @@
 <template>
     <div ref="self">
-        <OfficeLayer v-bind="layerProps">
+        <OfficeLayer v-if="state.isOpen && state.isVisible" v-bind="layerProps">
             <OfficePopup :onDismiss="onDismiss">
                 <!--  Todo: make OfficePopup with: -->
                 <div :class="classNames.root">
-                    <OfficeOverlay v-if="state.isOpen && state.isVisible" :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
+                    <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
                     <FocusTrapZone
                             :elementToFocusOnDismiss="elementToFocusOnDismiss"
                             :isClickableOutsideFocusTrap="isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking"

From 1f3328e26bc5df9dcf318b8614bd43663aa86d13 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sun, 13 Jan 2019 16:54:39 +0100
Subject: [PATCH 5/7] integrated flex styling flags for positioning modal

---
 packages/documentation/Overview.vue           | 72 ++++++++++++++++---
 .../components/Modal/OfficeModal.vue          | 60 ++++++++++------
 2 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/packages/documentation/Overview.vue b/packages/documentation/Overview.vue
index 5e9f7ea..bac8bd2 100644
--- a/packages/documentation/Overview.vue
+++ b/packages/documentation/Overview.vue
@@ -138,15 +138,56 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             </OfficeProgressIndicator>
         </OverviewItem>
 
-        <OverviewItem title="Modal">
-            <OfficeButton @click="openModal" label="Open Modal"></OfficeButton>
-            <!-- TODO: sry for v-if i'll fix this soon-->
-            <OfficeModal :isOpen="modalActive" >
-                <div style="background-color: white; width: 60%; height: 40%;">
-                    <h1>Sample Modal</h1>
-                    <OfficeButton @click="closeModal" label="Close Modal"></OfficeButton>
-                </div>
-            </OfficeModal>
+        <OverviewItem title="Modal" :options="modalOptions">
+            <template slot-scope="props">
+                <OfficeButton @click="openModal" label="Open Modal"></OfficeButton>
+                <OfficeModal v-bind="props" :isBlocking="false" :isOpen="modalActive">
+                    <div style="background-color: white; width: 80%; height: 80%;">
+                        <h1>Lorem Ipsum</h1>
+                        <OfficeButton @click="closeModal" label="Close Modal"></OfficeButton>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum
+                            ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel
+                            eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et
+                            ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra
+                            eleifend efficitur.{' '}
+                        </p>
+                        <p>
+                            Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus
+                            faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a
+                            magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia,
+                            nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est
+                            ornare, rhoncus odio eu, pharetra tellus. Nunc sed velit mi.{' '}
+                        </p>
+                        <p>
+                            Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel
+                            consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis
+                            et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor
+                            finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend
+                            mollis. Curabitur ultricies leo ac metus venenatis elementum.{' '}
+                        </p>
+                        <p>
+                            Aenean egestas quam ut erat commodo blandit. Mauris ante nisl, pellentesque sed venenatis nec, aliquet sit
+                            amet enim. Praesent vitae diam non diam aliquet tristique non ut arcu. Pellentesque et ultrices eros.
+                            Fusce diam metus, mattis eu luctus nec, facilisis vel erat. Nam a lacus quis tellus gravida euismod. Nulla
+                            sed sem eget tortor cursus interdum. Sed vehicula tristique ultricies. Aenean libero purus, mollis quis
+                            massa quis, eleifend dictum massa. Fusce eu sapien sit amet odio lacinia placerat. Mauris varius risus sed
+                            aliquet cursus. Aenean lectus magna, tincidunt sit amet sodales a, volutpat ac leo. Morbi nisl sapien,
+                            tincidunt sit amet mauris quis, sollicitudin auctor est.{' '}
+                        </p>
+                        <p>
+                            Nam id mi justo. Nam vehicula vulputate augue, ac pretium enim rutrum ultricies. Sed aliquet accumsan
+                            varius. Quisque ac auctor ligula. Fusce fringilla, odio et dignissim iaculis, est lacus ultrices risus,
+                            vitae condimentum enim urna eu nunc. In risus est, mattis non suscipit at, mattis ut ante. Maecenas
+                            consectetur urna vel erat maximus, non molestie massa consequat. Duis a feugiat nibh. Sed a hendrerit
+                            diam, a mattis est. In augue dolor, faucibus vel metus at, convallis rhoncus dui.
+                        </p>
+                    </div>
+                </OfficeModal>
+            </template>
         </OverviewItem>
 
         <OfficeLabel style="margin-top: 30px">This is the demo page for
@@ -281,6 +322,19 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
             };
         }
 
+        get modalOptions(): IItemOptions {
+            return {
+                isDarkOverlay: {type: ItemTypes.BooleanToggle},
+                isBlocking: {type: ItemTypes.BooleanToggle},
+                topOffsetFixed: {type: ItemTypes.BooleanToggle},
+                flex: {type: ItemTypes.BooleanToggle, value: true},
+                center: {type: ItemTypes.BooleanToggle, value: true},
+                forceFocusInsideTrap: {type: ItemTypes.BooleanToggle, value: true},
+                ignoreExternalFocusing: {type: ItemTypes.BooleanToggle},
+                isClickableOutsideFocusTrap: {type: ItemTypes.BooleanToggle}
+            };
+        }
+
         get choiceGroupOptions(): IItemOptions {
             return {
                 disabled: {type: ItemTypes.BooleanToggle},
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
index 4132a1f..02c568c 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
@@ -1,31 +1,28 @@
 <template>
-    <div ref="self">
-        <OfficeLayer v-if="state.isOpen && state.isVisible" v-bind="layerProps">
-            <OfficePopup :onDismiss="onDismiss">
-                <!--  Todo: make OfficePopup with: -->
-                <div :class="classNames.root">
-                    <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
-                    <FocusTrapZone
-                            :elementToFocusOnDismiss="elementToFocusOnDismiss"
-                            :isClickableOutsideFocusTrap="isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking"
-                            :ignoreExternalFocusing="ignoreExternalFocusing"
-                            :forceFocusInsideTrap="forceFocusInsideTrap"
-                            :firstFocusableSelector="firstFocusableSelector"
-                    >
-                        <div :class="classNames.scrollableContent">
-                            <slot/>
-                        </div>
-                    </FocusTrapZone>
-                </div>
-            </OfficePopup>
-        </OfficeLayer>
-    </div>
+    <OfficeLayer ref="self" v-if="state.isOpen && state.isVisible" v-bind="layerProps">
+        <OfficePopup :onDismiss="onDismiss">
+            <div :class="classNames.root">
+                <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
+                <FocusTrapZone
+                        :elementToFocusOnDismiss="elementToFocusOnDismiss"
+                        :isClickableOutsideFocusTrap="isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking"
+                        :ignoreExternalFocusing="ignoreExternalFocusing"
+                        :forceFocusInsideTrap="forceFocusInsideTrap"
+                        :firstFocusableSelector="firstFocusableSelector"
+                        style="height: 100%; width: 100%; margin: 0;"
+                >
+                    <div :class="classNames.scrollableContent"
+                         :style="flexState">
+                        <slot/>
+                    </div>
+                </FocusTrapZone>
+            </div>
+        </OfficePopup>
+    </OfficeLayer>
 </template>
 
 <script lang="ts">
     import {Component, Vue, Prop} from "vue-property-decorator";
-    import OfficeLabel from "@components/Label/OfficeLabel.vue";
-    import OfficeIcon from "@components/Icon/OfficeIcon.vue";
     import {mergeStyleSets} from "@uifabric/merge-styles";
     import {getStyles} from "./OfficeModal.style";
     import {createTheme} from "@styling/styles";
@@ -57,6 +54,10 @@
         @Prop({type: Function}) private onDismiss?: () => any;
         @Prop({type: Object, default: null}) private layerProps!: IOfficeLayerProps;
 
+        @Prop({type: Boolean, default: false}) private flex!: boolean;
+        @Prop({type: Boolean, default: false}) private center!: boolean;
+
+
         @Prop({type: Object}) private elementToFocusOnDismiss?: HTMLElement;
         @Prop({type: [String, Function]}) private firstFocusableSelector?: string | (() => string);
         @Prop({type: Boolean, default: true}) private forceFocusInsideTrap!: boolean;
@@ -82,6 +83,19 @@
                 topOffsetFixed: this.topOffsetFixed
             };
         }
+
+        private get flexState() {
+            let style = {};
+            if (this.flex) {
+                style = {...style, display: "flex"};
+                if (this.center) {
+                    style = {...style, alignItems: "center", justifyContent: "center", height: "100%"};
+                }
+            }
+            return style;
+
+        }
+
         private get classNames() {
             return mergeStyleSets(getStyles({
                 isVisible: this.state.isVisible,

From fcc24f776bd09de6e0ba36c43cb2a8a403849759 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sun, 13 Jan 2019 20:28:19 +0100
Subject: [PATCH 6/7] remove isBlocking redundancy fix isBlocking logic
 (onDismiss emit on click outside) added classnames props for all configurable
 not root elements in FocusTrapZone added missing :class="classNames.main"
 OfficeOverlay now with visable prop.(fixed on destroy enable scroll)

---
 packages/documentation/Overview.vue           |  9 +--
 .../components/Modal/OfficeModal.style.ts     | 25 +++++++--
 .../components/Modal/OfficeModal.types.ts     | 21 +++++++
 .../components/Modal/OfficeModal.vue          | 56 +++++++------------
 .../components/Overlay/OfficeOverlay.vue      |  3 +
 .../components/Popup/OfficePopup.vue          |  2 +-
 6 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/packages/documentation/Overview.vue b/packages/documentation/Overview.vue
index 0477c78..9a332e0 100644
--- a/packages/documentation/Overview.vue
+++ b/packages/documentation/Overview.vue
@@ -143,8 +143,7 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
         <OverviewItem title="Modal" :options="modalOptions">
             <template slot-scope="props">
                 <OfficeButton @click="openModal" label="Open Modal"></OfficeButton>
-                <OfficeModal v-bind="props" :isBlocking="false" :isOpen="modalActive">
-                    <div style="background-color: white; width: 80%; height: 80%;">
+                <OfficeModal v-bind="props" :isOpen="modalActive" @onDismiss="closeModal">
                         <h1>Lorem Ipsum</h1>
                         <OfficeButton @click="closeModal" label="Close Modal"></OfficeButton>
                         <p>
@@ -187,7 +186,6 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
                             consectetur urna vel erat maximus, non molestie massa consequat. Duis a feugiat nibh. Sed a hendrerit
                             diam, a mattis est. In augue dolor, faucibus vel metus at, convallis rhoncus dui.
                         </p>
-                    </div>
                 </OfficeModal>
             </template>
         </OverviewItem>
@@ -327,13 +325,10 @@ import {SpinnerSize} from "../office-ui-fabric-vue/components/Spinner/OfficeSpin
         get modalOptions(): IItemOptions {
             return {
                 isDarkOverlay: {type: ItemTypes.BooleanToggle},
-                isBlocking: {type: ItemTypes.BooleanToggle},
+                isBlocking: {type: ItemTypes.BooleanToggle, value: true},
                 topOffsetFixed: {type: ItemTypes.BooleanToggle},
-                flex: {type: ItemTypes.BooleanToggle, value: true},
-                center: {type: ItemTypes.BooleanToggle, value: true},
                 forceFocusInsideTrap: {type: ItemTypes.BooleanToggle, value: true},
                 ignoreExternalFocusing: {type: ItemTypes.BooleanToggle},
-                isClickableOutsideFocusTrap: {type: ItemTypes.BooleanToggle}
             };
         }
 
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.style.ts b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.style.ts
index 48ff31a..e131c34 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.style.ts
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.style.ts
@@ -26,12 +26,23 @@ const globalClassNames = {
 };
 
 export const getStyles = (props: IOfficeModalStyleProps): IOfficeModalStyles => {
-    const {topOffsetFixed, hasBeenOpened, isOpen, isVisible, modalRectangleTop, theme} = props;
+    const {
+        topOffsetFixed,
+        hasBeenOpened,
+        isOpen,
+        isVisible,
+        modalRectangleTop,
+        scrollableContentClassName,
+        containerClassName,
+        className,
+        theme
+    } = props;
 
     const {palette} = theme;
 
     const classNames = getGlobalClassNames(globalClassNames, theme);
 
+
     return {
         root: [
             classNames.root,
@@ -56,8 +67,12 @@ export const getStyles = (props: IOfficeModalStyleProps): IOfficeModalStyles =>
             isVisible && {
                 opacity: 1,
                 pointerEvents: "auto"
-            }
+            },
+            className
         ],
+        /**
+         *
+         */
         main: [
             classNames.main,
             {
@@ -73,14 +88,16 @@ export const getStyles = (props: IOfficeModalStyleProps): IOfficeModalStyles =>
             topOffsetFixed &&
             hasBeenOpened && {
                 top: modalRectangleTop
-            }
+            },
+            containerClassName
         ],
         scrollableContent: [
             classNames.scrollableContent,
             {
                 overflowY: "auto",
                 flexGrow: 1
-            }
+            },
+            scrollableContentClassName
         ]
     };
 };
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.types.ts b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.types.ts
index f80a409..8bd2bd7 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.types.ts
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.types.ts
@@ -33,6 +33,19 @@ export interface IOfficeModalProps {
      * @defaultvalue true
      */
     isDarkOverlay?: boolean;
+    /**
+     * Optional override for root class
+     */
+    className?: string;
+    /**
+     * Optional override for container class
+     */
+    containerClassName?: string;
+
+    /**
+     * Optional override for scrollable content class
+     */
+    scrollableContentClassName?: string;
 
     /**
      * A callback function for when the Modal is dismissed light dismiss, before the animation completes.
@@ -63,12 +76,20 @@ export interface IOfficeModalStyleProps {
      */
     theme: ITheme;
     topOffsetFixed?: boolean;
+    containerClassName?: string;
+    className?: string;
+
+    /**
+     * Optional override for scrollable content class
+     */
+    scrollableContentClassName?: string;
     /** Modal open state. */
     isOpen?: boolean;
     /** Modal visible state. */
     isVisible?: boolean;
     /** Modal has been opened state. */
     hasBeenOpened?: boolean;
+
     /** Positioning of modal on first render */
     modalRectangleTop?: number;
 }
diff --git a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
index 02c568c..25612ba 100644
--- a/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
+++ b/packages/office-ui-fabric-vue/components/Modal/OfficeModal.vue
@@ -1,18 +1,17 @@
 <template>
     <OfficeLayer ref="self" v-if="state.isOpen && state.isVisible" v-bind="layerProps">
-        <OfficePopup :onDismiss="onDismiss">
+        <OfficePopup>
             <div :class="classNames.root">
-                <OfficeOverlay :isDarkThemed="isDarkOverlay" @click="isBlocking ? undefined : onDismiss"/>
+                <OfficeOverlay @click.native="emitDismiss()" :visible="state.isOpen" :isDarkThemed="isDarkOverlay"/>
                 <FocusTrapZone
+                        :class="classNames.main"
                         :elementToFocusOnDismiss="elementToFocusOnDismiss"
-                        :isClickableOutsideFocusTrap="isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking"
+                        :isClickableOutsideFocusTrap="!isBlocking"
                         :ignoreExternalFocusing="ignoreExternalFocusing"
                         :forceFocusInsideTrap="forceFocusInsideTrap"
                         :firstFocusableSelector="firstFocusableSelector"
-                        style="height: 100%; width: 100%; margin: 0;"
                 >
-                    <div :class="classNames.scrollableContent"
-                         :style="flexState">
+                    <div :class="classNames.scrollableContent">
                         <slot/>
                     </div>
                 </FocusTrapZone>
@@ -22,7 +21,7 @@
 </template>
 
 <script lang="ts">
-    import {Component, Vue, Prop} from "vue-property-decorator";
+    import {Component, Vue, Prop, Emit} from "vue-property-decorator";
     import {mergeStyleSets} from "@uifabric/merge-styles";
     import {getStyles} from "./OfficeModal.style";
     import {createTheme} from "@styling/styles";
@@ -33,31 +32,19 @@
     import OfficeLayer from "@components/Layer/OfficeLayer.vue";
     import OfficePopup from "@components/Popup/OfficePopup.vue";
 
-    export interface IOfficeModalState {
-        isOpen?: boolean;
-        isVisible?: boolean;
-        isVisibleClose?: boolean;
-        id?: string;
-        hasBeenOpened?: boolean;
-        modalRectangleTop?: number;
-        topOffsetFixed?: boolean;
-    }
-
     @Component({
         components: {OfficePopup, OfficeLayer, OfficeOverlay, FocusTrapZone}
     })
     export default class OfficeModal extends Vue {
         @Prop({type: Boolean, default: false}) private isOpen!: boolean;
         @Prop({type: Boolean, default: true}) private isDarkOverlay!: boolean;
-        @Prop({type: Boolean, default: false}) private isBlocking!: boolean;
+        @Prop({type: Boolean, default: true}) private isBlocking!: boolean;
+        @Prop({type: String, default: ""}) private containerClassName!: string;
+        @Prop({type: String, default: ""}) private scrollableContentClassName!: string;
+        @Prop({type: String, default: ""}) private className!: string;
         @Prop({type: Boolean, default: false}) private topOffsetFixed!: boolean;
-        @Prop({type: Function}) private onDismiss?: () => any;
         @Prop({type: Object, default: null}) private layerProps!: IOfficeLayerProps;
 
-        @Prop({type: Boolean, default: false}) private flex!: boolean;
-        @Prop({type: Boolean, default: false}) private center!: boolean;
-
-
         @Prop({type: Object}) private elementToFocusOnDismiss?: HTMLElement;
         @Prop({type: [String, Function]}) private firstFocusableSelector?: string | (() => string);
         @Prop({type: Boolean, default: true}) private forceFocusInsideTrap!: boolean;
@@ -65,7 +52,13 @@
         @Prop({type: Boolean, default: false}) private isClickableOutsideFocusTrap!: boolean;
 
 
-        private get state(): IOfficeModalState {
+        public emitDismiss() {
+            if (!this.isBlocking) {
+                this.$emit("onDismiss");
+            }
+        }
+
+        private get state() {
             let modalRectangleTop: number | undefined;
             if (this.topOffsetFixed) {
                 const dialogMain = document.getElementsByClassName("ms-Dialog-main");
@@ -84,18 +77,6 @@
             };
         }
 
-        private get flexState() {
-            let style = {};
-            if (this.flex) {
-                style = {...style, display: "flex"};
-                if (this.center) {
-                    style = {...style, alignItems: "center", justifyContent: "center", height: "100%"};
-                }
-            }
-            return style;
-
-        }
-
         private get classNames() {
             return mergeStyleSets(getStyles({
                 isVisible: this.state.isVisible,
@@ -104,6 +85,9 @@
                 modalRectangleTop: this.state.modalRectangleTop,
                 topOffsetFixed: this.state.topOffsetFixed,
                 theme: createTheme({}),
+                containerClassName: this.containerClassName,
+                scrollableContentClassName: this.scrollableContentClassName,
+                className: this.className
             }));
         }
 
diff --git a/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue b/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
index 3f8d910..c1a5d85 100644
--- a/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
+++ b/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
@@ -58,5 +58,8 @@
                 doc.body.removeEventListener("touchmove", this.disableIosBodyScroll);
             }
         }
+        public destroyed(){
+            this.enableBodyScroll();
+        }
     }
 </script>
diff --git a/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
index 319da82..d711045 100644
--- a/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
+++ b/packages/office-ui-fabric-vue/components/Popup/OfficePopup.vue
@@ -76,7 +76,7 @@
                 return;
             }
             let needsVerticalScrollBar = false;
-            if (root.firstElementChild) {
+            if (root && root.firstElementChild) {
                 // ClientHeight returns the client height of an element rounded to an
                 // integer. On some browsers at different zoom levels this rounding
                 // can generate different results for the root container and child even

From efda5b667b5dad5de108e3aa80f5dbfad2ee1b4d Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Sun, 13 Jan 2019 20:29:11 +0100
Subject: [PATCH 7/7] refactor

---
 .../components/Overlay/OfficeOverlay.vue                 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue b/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
index c1a5d85..3e4e398 100644
--- a/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
+++ b/packages/office-ui-fabric-vue/components/Overlay/OfficeOverlay.vue
@@ -24,6 +24,10 @@
             overflow: "hidden !important" as "hidden"
         });
 
+        public destroyed() {
+            this.enableBodyScroll();
+        }
+
         public get classNames() {
             return mergeStyleSets(getStyles({
                 isDark: this.isDarkThemed,
@@ -58,8 +62,7 @@
                 doc.body.removeEventListener("touchmove", this.disableIosBodyScroll);
             }
         }
-        public destroyed(){
-            this.enableBodyScroll();
-        }
+
+
     }
 </script>