From 8e1b7cdb276efd545c2a50202ea0da1cbf69908c Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Thu, 24 Jan 2019 15:09:09 -0800
Subject: [PATCH 1/6] Fixed a11y issue on generic panel.

---
 src/DetailsView/components/generic-panel.tsx                   | 3 ++-
 .../unit/tests/DetailsView/components/generic-panel.test.tsx   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/DetailsView/components/generic-panel.tsx b/src/DetailsView/components/generic-panel.tsx
index 67c1d91b0d3..53dfe60aa5f 100644
--- a/src/DetailsView/components/generic-panel.tsx
+++ b/src/DetailsView/components/generic-panel.tsx
@@ -12,6 +12,7 @@ export interface GenericPanelProps {
     className?: string;
     closeButtonAriaLabel: string;
     hasCloseButton: boolean;
+
 }
 
 export class GenericPanel extends React.Component<GenericPanelProps> {
@@ -37,7 +38,7 @@ export class GenericPanel extends React.Component<GenericPanelProps> {
     @autobind
     protected renderHeader(): JSX.Element {
         return <div>
-            <h1 className="header-text">{this.props.title}</h1>
+            <h1 className="header-text" aria-label={this.props.title}>{this.props.title}</h1>
         </div>;
     }
 }
diff --git a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
index 44955b8a493..3c36ce777bb 100644
--- a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
@@ -68,7 +68,7 @@ describe('DetailsViewPanelTest', () => {
 
         const expected = (
             <div>
-                <h1 className={'header-text'}>{panelTitle}</h1>
+                <h1 className={'header-text'} aria-label={panelTitle}>{panelTitle}</h1>
             </div>
         );
 

From 952b081e6687c21ae3a850607f1ccdda353aec2e Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Thu, 24 Jan 2019 15:10:44 -0800
Subject: [PATCH 2/6] Rmoved extra empty line.

---
 src/DetailsView/components/generic-panel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/DetailsView/components/generic-panel.tsx b/src/DetailsView/components/generic-panel.tsx
index 53dfe60aa5f..2659d864742 100644
--- a/src/DetailsView/components/generic-panel.tsx
+++ b/src/DetailsView/components/generic-panel.tsx
@@ -12,7 +12,6 @@ export interface GenericPanelProps {
     className?: string;
     closeButtonAriaLabel: string;
     hasCloseButton: boolean;
-
 }
 
 export class GenericPanel extends React.Component<GenericPanelProps> {

From 3751dc067f28957084095d3948da7db9f7b8e42c Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Thu, 24 Jan 2019 16:46:09 -0800
Subject: [PATCH 3/6] Instead of using customized render function, we use
 headerText props to render Panel header.

---
 src/DetailsView/Styles/detailsview.scss       | 15 +++++----
 src/DetailsView/components/generic-panel.tsx  |  9 +----
 .../components/generic-panel.test.tsx         | 33 ++-----------------
 3 files changed, 11 insertions(+), 46 deletions(-)

diff --git a/src/DetailsView/Styles/detailsview.scss b/src/DetailsView/Styles/detailsview.scss
index 3599cdcca6b..651e891d09d 100644
--- a/src/DetailsView/Styles/detailsview.scss
+++ b/src/DetailsView/Styles/detailsview.scss
@@ -96,14 +96,19 @@ div.insights-dialog-main-override {
     margin-right: auto;
     color: $neutral-100;
 
-    .header-text {
+    .ms-Panel-header {
         padding-left: 16px;
         padding-right: 16px;
     }
 
+    .ms-Panel-headerText {
+        color: $neutral-100;
+        font-size: 2em;
+    }
+
     @media (min-width: 768px) {
 
-        .header-text {
+        .ms-Panel-header {
             padding-left: 32px;
             padding-right: 32px;
         }
@@ -111,16 +116,12 @@ div.insights-dialog-main-override {
 
     @media (min-width: 1366px) {
 
-        .header-text {
+        .ms-Panel-header {
             padding-left: 40px;
             padding-right: 40px;
         }
     }
 
-    .header-text {
-        font-weight: lighter;
-    }
-
     /*
         Office Fabric (v5.x) panel breaks in certain scenarios when the viewport is decreased to a certain size (e.g. when splitting in half on a 1080p screen)
     */
diff --git a/src/DetailsView/components/generic-panel.tsx b/src/DetailsView/components/generic-panel.tsx
index 2659d864742..ef88642d2a6 100644
--- a/src/DetailsView/components/generic-panel.tsx
+++ b/src/DetailsView/components/generic-panel.tsx
@@ -25,19 +25,12 @@ export class GenericPanel extends React.Component<GenericPanelProps> {
                 className={css('generic-panel', this.props.className)}
                 isLightDismiss={true}
                 onDismiss={this.props.onDismiss}
-                onRenderHeader={this.renderHeader}
                 closeButtonAriaLabel={this.props.closeButtonAriaLabel}
                 hasCloseButton={this.props.hasCloseButton}
+                headerText={this.props.title}
             >
                 {this.props.children}
             </Panel>
         );
     }
-
-    @autobind
-    protected renderHeader(): JSX.Element {
-        return <div>
-            <h1 className="header-text" aria-label={this.props.title}>{this.props.title}</h1>
-        </div>;
-    }
 }
diff --git a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
index 3c36ce777bb..15ec006bac9 100644
--- a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
@@ -5,12 +5,6 @@ import * as React from 'react';
 
 import { GenericPanel, GenericPanelProps } from '../../../../../DetailsView/components/generic-panel';
 
-class TestableDetailsViewPanel extends GenericPanel {
-    public getRenderHeader() {
-        return this.renderHeader;
-    }
-}
-
 describe('DetailsViewPanelTest', () => {
     test('constructor', () => {
         const testSubject = new GenericPanel({} as GenericPanelProps);
@@ -32,7 +26,7 @@ describe('DetailsViewPanelTest', () => {
             hasCloseButton: true,
         };
 
-        const testSubject = new TestableDetailsViewPanel(testProps);
+        const testSubject = new GenericPanel(testProps);
 
         const expected = (
             <Panel isLightDismiss={true}
@@ -41,9 +35,9 @@ describe('DetailsViewPanelTest', () => {
                 customWidth={'550px'}
                 className={'generic-panel panel-custom-class'}
                 onDismiss={testProps.onDismiss}
-                onRenderHeader={testSubject.getRenderHeader()}
                 closeButtonAriaLabel={testProps.closeButtonAriaLabel}
                 hasCloseButton={true}
+                headerText={testProps.title}
             >
                 {childContent}
             </Panel>
@@ -51,27 +45,4 @@ describe('DetailsViewPanelTest', () => {
 
         expect(testSubject.render()).toEqual(expected);
     });
-
-    test('renderHeader', () => {
-        const panelTitle = 'panel title';
-        const testProps: GenericPanelProps = {
-            isOpen: true,
-            onDismiss: () => { },
-            title: panelTitle,
-            className: 'panel-custom-class',
-            closeButtonAriaLabel: 'close button label',
-            hasCloseButton: true,
-        };
-
-        const testSubject = new TestableDetailsViewPanel(testProps);
-        const renderHeader = testSubject.getRenderHeader();
-
-        const expected = (
-            <div>
-                <h1 className={'header-text'} aria-label={panelTitle}>{panelTitle}</h1>
-            </div>
-        );
-
-        expect(renderHeader()).toEqual(expected);
-    });
 });

From ce2cc9a0b592bc6977204c3204fb8e4d905fc425 Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Fri, 25 Jan 2019 10:23:33 -0800
Subject: [PATCH 4/6] Updated snapshot.

---
 .../__snapshots__/preview-features.test.ts.snap     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap b/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
index b99831b4f7c..7553908adea 100644
--- a/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
+++ b/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
@@ -44,12 +44,17 @@ exports[`Preview Features Panel should match content in snapshot 1`] = `
       <div
         class="ms-Panel-contentInner contentInner-000"
       >
-        <div>
-          <h1
-            class="header-text"
+        <div
+          class="ms-Panel-header header-000"
+        >
+          <p
+            aria-level="2"
+            class="ms-Panel-headerText headerText-000"
+            id="Panel11-headerText"
+            role="heading"
           >
             Preview features
-          </h1>
+          </p>
         </div>
         <div
           class="ms-Panel-scrollableContent scrollableContent-000"

From 05f6061c9199ba30e547ae889abd6e7956781089 Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Fri, 25 Jan 2019 14:11:42 -0800
Subject: [PATCH 5/6] Applied header class on panel header dom element.

---
 src/DetailsView/Styles/detailsview.scss                         | 2 +-
 src/DetailsView/components/generic-panel.tsx                    | 1 +
 .../details-view/__snapshots__/preview-features.test.ts.snap    | 2 +-
 .../unit/tests/DetailsView/components/generic-panel.test.tsx    | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/DetailsView/Styles/detailsview.scss b/src/DetailsView/Styles/detailsview.scss
index c03577548b4..620af540869 100644
--- a/src/DetailsView/Styles/detailsview.scss
+++ b/src/DetailsView/Styles/detailsview.scss
@@ -101,7 +101,7 @@ div.insights-dialog-main-override {
         padding-right: 16px;
     }
 
-    .ms-Panel-headerText {
+    .header-text {
         color: $neutral-100;
         font-size: 2em;
     }
diff --git a/src/DetailsView/components/generic-panel.tsx b/src/DetailsView/components/generic-panel.tsx
index ef88642d2a6..1ccb84d9d5d 100644
--- a/src/DetailsView/components/generic-panel.tsx
+++ b/src/DetailsView/components/generic-panel.tsx
@@ -28,6 +28,7 @@ export class GenericPanel extends React.Component<GenericPanelProps> {
                 closeButtonAriaLabel={this.props.closeButtonAriaLabel}
                 hasCloseButton={this.props.hasCloseButton}
                 headerText={this.props.title}
+                headerClassName="header-text"
             >
                 {this.props.children}
             </Panel>
diff --git a/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap b/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
index 7553908adea..7daef3834f4 100644
--- a/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
+++ b/src/tests/end-to-end/tests/details-view/__snapshots__/preview-features.test.ts.snap
@@ -49,7 +49,7 @@ exports[`Preview Features Panel should match content in snapshot 1`] = `
         >
           <p
             aria-level="2"
-            class="ms-Panel-headerText headerText-000"
+            class="ms-Panel-headerText header-text headerText-000"
             id="Panel11-headerText"
             role="heading"
           >
diff --git a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
index 15ec006bac9..740e1fd8e30 100644
--- a/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/generic-panel.test.tsx
@@ -38,6 +38,7 @@ describe('DetailsViewPanelTest', () => {
                 closeButtonAriaLabel={testProps.closeButtonAriaLabel}
                 hasCloseButton={true}
                 headerText={testProps.title}
+                headerClassName="header-text"
             >
                 {childContent}
             </Panel>

From c76018d04936d51b65f2712f1a5db61855f1bea4 Mon Sep 17 00:00:00 2001
From: Longhan Li <lonli@microsoft.com>
Date: Fri, 25 Jan 2019 14:29:39 -0800
Subject: [PATCH 6/6] Because of office-fabirc's bug fixings, we removed our
 old work arounds.

---
 src/DetailsView/Styles/detailsview.scss | 33 -------------------------
 1 file changed, 33 deletions(-)

diff --git a/src/DetailsView/Styles/detailsview.scss b/src/DetailsView/Styles/detailsview.scss
index 620af540869..7911cf7fab8 100644
--- a/src/DetailsView/Styles/detailsview.scss
+++ b/src/DetailsView/Styles/detailsview.scss
@@ -96,38 +96,10 @@ div.insights-dialog-main-override {
     margin-right: auto;
     color: $neutral-100;
 
-    .ms-Panel-header {
-        padding-left: 16px;
-        padding-right: 16px;
-    }
-
     .header-text {
         color: $neutral-100;
         font-size: 2em;
     }
-
-    @media (min-width: 768px) {
-
-        .ms-Panel-header {
-            padding-left: 32px;
-            padding-right: 32px;
-        }
-    }
-
-    @media (min-width: 1366px) {
-
-        .ms-Panel-header {
-            padding-left: 40px;
-            padding-right: 40px;
-        }
-    }
-
-    /*
-        Office Fabric (v5.x) panel breaks in certain scenarios when the viewport is decreased to a certain size (e.g. when splitting in half on a 1080p screen)
-    */
-    .ms-Panel-main {
-        left: auto !important;
-    }
 }
 
 .settings-panel {
@@ -228,11 +200,6 @@ div.insights-dialog-main-override {
         margin-top: 30px;
         font-size: 21px;
     }
-    .ms-Panel-main {
-        .ms-TextField {
-            margin-bottom: 12px;
-        }
-    }
 }
 
 .preview-features-panel {