From bf0ffef2e2ba3114c60f24461c9f2abc84afe48c Mon Sep 17 00:00:00 2001
From: Natalie Ethell <natalie.ethell@microsoft.com>
Date: Thu, 24 Jan 2019 17:26:06 -0800
Subject: [PATCH 01/13] render plain column header for selection column

---
 .../DetailsList/DetailsHeader.base.tsx        | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index ae878f535568f..9e53b94fe9501 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -15,6 +15,10 @@ import { Layer } from '../../Layer';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { CollapseAllVisibility } from '../../GroupedList';
 import { DetailsRowCheck } from './DetailsRowCheck';
+import { ICheckStyleProps, ICheckStyles } from '../Check/Check.types';
+import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
+import { getStyles as getCheckStyles } from '../Check/Check.styles';
+import { getStyles as getDetailsRowCheckStyles } from './DetailsRowCheck.styles';
 import { ITooltipHostProps } from '../../Tooltip';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
 import { IDragDropOptions, DragDropHelper } from '../../utilities/dragdrop/index';
@@ -30,6 +34,9 @@ const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.butt
 
 const NO_COLUMNS: IColumn[] = [];
 
+const getCheckClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
+const getRowCheckClassNames = classNamesFunction<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>();
+
 export interface IDetailsHeader {
   focus: () => boolean;
 }
@@ -210,6 +217,22 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
     });
 
     const classNames = this._classNames;
+
+    const checkStyles = getCheckStyles({ theme: theme! });
+
+    const checkClassNames = getCheckClassNames(checkStyles, {
+      theme: theme!
+    });
+
+    const rowCheckClassNames = getRowCheckClassNames(getDetailsRowCheckStyles, {
+      theme: theme!,
+      canSelect: true,
+      selected: false,
+      anySelected: false,
+      className: classNames.check,
+      isHeader: true
+    });
+
     const isRTL = getRTL();
     return (
       <FocusZone
@@ -240,20 +263,26 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                     id: `${this._id}-checkTooltip`,
                     setAriaDescribedBy: false,
                     content: ariaLabelForSelectAllCheckbox,
-                    children: (
+                    children: !isCheckboxHidden ? (
                       <DetailsRowCheck
                         id={`${this._id}-check`}
                         aria-label={ariaLabelForSelectionColumn}
                         aria-describedby={
                           ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
                         }
-                        data-is-focusable={!isCheckboxHidden}
+                        data-is-focusable={true}
                         isHeader={true}
                         selected={isAllSelected}
                         anySelected={false}
-                        canSelect={!isCheckboxHidden}
+                        canSelect={true}
                         className={classNames.check}
                       />
+                    ) : (
+                      <div
+                        id={`${this._id}-selection`}
+                        className={css(rowCheckClassNames.root, rowCheckClassNames.check, checkClassNames.checkHost)}
+                        aria-label={ariaLabelForSelectionColumn}
+                      />
                     )
                   },
                   this._onRenderColumnHeaderTooltip

From b388c4411fc71949585567bac3af104b99fc318b Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 24 Jan 2019 17:47:20 -0800
Subject: [PATCH 02/13] remove unnecessary styles

---
 .../src/components/DetailsList/DetailsHeader.base.tsx    | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 9e53b94fe9501..9ea9f567d22e8 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -218,12 +218,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
 
     const classNames = this._classNames;
 
-    const checkStyles = getCheckStyles({ theme: theme! });
-
-    const checkClassNames = getCheckClassNames(checkStyles, {
-      theme: theme!
-    });
-
     const rowCheckClassNames = getRowCheckClassNames(getDetailsRowCheckStyles, {
       theme: theme!,
       canSelect: true,
@@ -255,7 +249,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                 onClick={!isCheckboxHidden ? this._onSelectAllClicked : undefined}
                 aria-colindex={1}
                 role={'columnheader'}
-                aria-hidden={isCheckboxHidden ? true : undefined}
               >
                 {onRenderColumnHeaderTooltip(
                   {
@@ -280,7 +273,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                     ) : (
                       <div
                         id={`${this._id}-selection`}
-                        className={css(rowCheckClassNames.root, rowCheckClassNames.check, checkClassNames.checkHost)}
+                        className={css(rowCheckClassNames.root, rowCheckClassNames.check)}
                         aria-label={ariaLabelForSelectionColumn}
                       />
                     )

From 82feea60f13946157991bd4c5f8ec51533a76194 Mon Sep 17 00:00:00 2001
From: Natalie Ethell <natalie.ethell@microsoft.com>
Date: Thu, 24 Jan 2019 22:58:49 -0800
Subject: [PATCH 03/13] change file

---
 ...ilsListSelectionColumnHeader_2019-01-25-06-58.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json

diff --git a/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json b/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json
new file mode 100644
index 0000000000000..918d34457c2a0
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: render a simple column header for checkboxes in single selection mode",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "natalie.ethell@microsoft.com"
+}
\ No newline at end of file

From c083aec5a6303dd7ee1dcc62ea8f4eb57148332d Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 29 Jan 2019 11:12:25 -0800
Subject: [PATCH 04/13] remove more unnecessary styling

---
 .../src/components/DetailsList/DetailsHeader.base.tsx          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 9ea9f567d22e8..6bcb731d0a4f8 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -15,9 +15,7 @@ import { Layer } from '../../Layer';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { CollapseAllVisibility } from '../../GroupedList';
 import { DetailsRowCheck } from './DetailsRowCheck';
-import { ICheckStyleProps, ICheckStyles } from '../Check/Check.types';
 import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
-import { getStyles as getCheckStyles } from '../Check/Check.styles';
 import { getStyles as getDetailsRowCheckStyles } from './DetailsRowCheck.styles';
 import { ITooltipHostProps } from '../../Tooltip';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
@@ -34,7 +32,6 @@ const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.butt
 
 const NO_COLUMNS: IColumn[] = [];
 
-const getCheckClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
 const getRowCheckClassNames = classNamesFunction<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>();
 
 export interface IDetailsHeader {

From 8658371da26738a7cd48541d0d1eee831f953fb7 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 29 Jan 2019 11:43:47 -0800
Subject: [PATCH 05/13] do not render select all label if in single selection
 mode

---
 .../src/components/DetailsList/DetailsHeader.base.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 6bcb731d0a4f8..a5a46c0ead469 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -278,7 +278,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                   this._onRenderColumnHeaderTooltip
                 )}
               </div>,
-              ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
+              !isCheckboxHidden && ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
                 <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
                   {ariaLabelForSelectAllCheckbox}
                 </label>

From 7bf83a400803260170cf2dff73d79a107ac8b0ee Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 29 Jan 2019 15:40:47 -0800
Subject: [PATCH 06/13] add vr tests

---
 apps/vr-tests/src/stories/DetailsList.stories.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/vr-tests/src/stories/DetailsList.stories.tsx b/apps/vr-tests/src/stories/DetailsList.stories.tsx
index 5851066f8d261..0cbea1f5e945e 100644
--- a/apps/vr-tests/src/stories/DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsList.stories.tsx
@@ -7,7 +7,8 @@ import {
   DetailsList,
   DetailsListLayoutMode,
   IColumn,
-  CheckboxVisibility
+  CheckboxVisibility,
+  SelectionMode
 } from 'office-ui-fabric-react';
 
 const items = [
@@ -150,6 +151,16 @@ storiesOf('DetailsList', module)
       isHeaderVisible={true}
     />
   ))
+  .addStory('Single Selection Mode', () => (
+    <DetailsList
+      items={items}
+      compact={false}
+      columns={columns}
+      selectionMode={SelectionMode.single}
+      layoutMode={DetailsListLayoutMode.justified}
+      isHeaderVisible={true}
+    />
+  ))
   .addStory('Grouped', () => (
     <DetailsList
       items={items}

From beb9a3fdad31094ed55a885a1c6c94fb9f59b5f6 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Tue, 29 Jan 2019 16:02:28 -0800
Subject: [PATCH 07/13] add aria-describedby

---
 .../components/DetailsList/DetailsHeader.base.tsx   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index a5a46c0ead469..5ff06dec4e9e5 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -272,15 +272,24 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                         id={`${this._id}-selection`}
                         className={css(rowCheckClassNames.root, rowCheckClassNames.check)}
                         aria-label={ariaLabelForSelectionColumn}
+                        aria-describedby={
+                          ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
+                        }
                       />
                     )
                   },
                   this._onRenderColumnHeaderTooltip
                 )}
               </div>,
-              !isCheckboxHidden && ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
+              !this.props.onRenderColumnHeaderTooltip ? (
+                ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (
+                  <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
+                    {ariaLabelForSelectAllCheckbox}
+                  </label>
+                ) : null
+              ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
                 <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
-                  {ariaLabelForSelectAllCheckbox}
+                  {ariaLabelForSelectionColumn}
                 </label>
               ) : null
             ]

From 179f525c961e22a126c5cde124b7aadd939bf016 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 31 Jan 2019 14:16:42 -0800
Subject: [PATCH 08/13] render an empty check for single selection mode

---
 .../DetailsList/DetailsHeader.base.tsx        | 41 +++++++------------
 .../DetailsList/DetailsRowCheck.styles.ts     |  3 +-
 .../DetailsList/DetailsRowCheck.tsx           |  4 +-
 3 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 5ff06dec4e9e5..9e74d5b52dabd 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -16,7 +16,6 @@ import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { CollapseAllVisibility } from '../../GroupedList';
 import { DetailsRowCheck } from './DetailsRowCheck';
 import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
-import { getStyles as getDetailsRowCheckStyles } from './DetailsRowCheck.styles';
 import { ITooltipHostProps } from '../../Tooltip';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
 import { IDragDropOptions, DragDropHelper } from '../../utilities/dragdrop/index';
@@ -215,15 +214,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
 
     const classNames = this._classNames;
 
-    const rowCheckClassNames = getRowCheckClassNames(getDetailsRowCheckStyles, {
-      theme: theme!,
-      canSelect: true,
-      selected: false,
-      anySelected: false,
-      className: classNames.check,
-      isHeader: true
-    });
-
     const isRTL = getRTL();
     return (
       <FocusZone
@@ -253,29 +243,26 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                     id: `${this._id}-checkTooltip`,
                     setAriaDescribedBy: false,
                     content: ariaLabelForSelectAllCheckbox,
-                    children: !isCheckboxHidden ? (
+                    children: (
                       <DetailsRowCheck
                         id={`${this._id}-check`}
                         aria-label={ariaLabelForSelectionColumn}
                         aria-describedby={
-                          ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
+                          !isCheckboxHidden
+                            ? ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip
+                              ? `${this._id}-checkTooltip`
+                              : undefined
+                            : ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip
+                            ? `${this._id}-checkTooltip`
+                            : undefined
                         }
-                        data-is-focusable={true}
+                        data-is-focusable={!isCheckboxHidden ? true : undefined}
                         isHeader={true}
                         selected={isAllSelected}
                         anySelected={false}
-                        canSelect={true}
+                        canSelect={!isCheckboxHidden ? true : false}
                         className={classNames.check}
                       />
-                    ) : (
-                      <div
-                        id={`${this._id}-selection`}
-                        className={css(rowCheckClassNames.root, rowCheckClassNames.check)}
-                        aria-label={ariaLabelForSelectionColumn}
-                        aria-describedby={
-                          ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
-                        }
-                      />
                     )
                   },
                   this._onRenderColumnHeaderTooltip
@@ -286,11 +273,11 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                   <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
                     {ariaLabelForSelectAllCheckbox}
                   </label>
+                ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
+                  <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
+                    {ariaLabelForSelectionColumn}
+                  </label>
                 ) : null
-              ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
-                <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
-                  {ariaLabelForSelectionColumn}
-                </label>
               ) : null
             ]
           : null}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
index 583b8adc7da25..e2c85149b69c1 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
@@ -10,7 +10,7 @@ const GlobalClassNames = {
 };
 
 export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckStyles => {
-  const { theme, className, isHeader, selected, anySelected, canSelect, compact, isVisible } = props;
+  const { theme, className, isHeader, selected, anySelected, compact, isVisible } = props;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
   const { rowHeight, compactRowHeight } = DEFAULT_ROW_HEIGHTS;
 
@@ -22,7 +22,6 @@ export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckSt
     root: [classNames.root, className],
 
     check: [
-      !canSelect && [classNames.isDisabled, { visibility: 'hidden' }],
       isHeader && classNames.isHeader,
       getFocusStyle(theme),
       theme.fonts.small,
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 22dc1832b4826..89febd5b59042 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -46,7 +46,7 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
     compact
   });
 
-  return (
+  return canSelect ? (
     <div
       {...buttonProps}
       role="checkbox"
@@ -57,6 +57,8 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
     >
       <Check checked={isPressed} />
     </div>
+  ) : (
+    <div {...buttonProps} className={css(classNames.root, classNames.check)} />
   );
 };
 

From 59087b4456654e14d2f9a7784c8aa667125e5956 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 31 Jan 2019 14:27:26 -0800
Subject: [PATCH 09/13] cleanup old styling

---
 .../src/components/DetailsList/DetailsHeader.base.tsx          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 9e74d5b52dabd..34f8903601aec 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -15,7 +15,6 @@ import { Layer } from '../../Layer';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { CollapseAllVisibility } from '../../GroupedList';
 import { DetailsRowCheck } from './DetailsRowCheck';
-import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
 import { ITooltipHostProps } from '../../Tooltip';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
 import { IDragDropOptions, DragDropHelper } from '../../utilities/dragdrop/index';
@@ -31,8 +30,6 @@ const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.butt
 
 const NO_COLUMNS: IColumn[] = [];
 
-const getRowCheckClassNames = classNamesFunction<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>();
-
 export interface IDetailsHeader {
   focus: () => boolean;
 }

From b123b33587e956dcd8760833c934fb93a1e571e9 Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Thu, 31 Jan 2019 14:31:55 -0800
Subject: [PATCH 10/13] keep is-disabled classname

---
 .../src/components/DetailsList/DetailsRowCheck.styles.ts       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
index e2c85149b69c1..13a281411c307 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
@@ -10,7 +10,7 @@ const GlobalClassNames = {
 };
 
 export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckStyles => {
-  const { theme, className, isHeader, selected, anySelected, compact, isVisible } = props;
+  const { theme, className, isHeader, selected, anySelected, canSelect, compact, isVisible } = props;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
   const { rowHeight, compactRowHeight } = DEFAULT_ROW_HEIGHTS;
 
@@ -22,6 +22,7 @@ export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckSt
     root: [classNames.root, className],
 
     check: [
+      !canSelect && classNames.isDisabled,
       isHeader && classNames.isHeader,
       getFocusStyle(theme),
       theme.fonts.small,

From 95808a20fae79485f02816dbb3d842cc64798548 Mon Sep 17 00:00:00 2001
From: Kevin Coughlin <kevintcoughlin@gmail.com>
Date: Fri, 1 Feb 2019 16:15:58 -0800
Subject: [PATCH 11/13] Update
 packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx

Co-Authored-By: natalieethell <naethell@microsoft.com>
---
 .../src/components/DetailsList/DetailsHeader.base.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 34f8903601aec..e8e3baebf0166 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -257,7 +257,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                         isHeader={true}
                         selected={isAllSelected}
                         anySelected={false}
-                        canSelect={!isCheckboxHidden ? true : false}
+                        canSelect={!isCheckboxHidden}
                         className={classNames.check}
                       />
                     )

From 578bb0dd03f5adba6dd2f8fb5c922c4ca46e9d95 Mon Sep 17 00:00:00 2001
From: Kevin Coughlin <kevintcoughlin@gmail.com>
Date: Fri, 1 Feb 2019 16:17:12 -0800
Subject: [PATCH 12/13] Update
 packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx

Co-Authored-By: natalieethell <naethell@microsoft.com>
---
 .../src/components/DetailsList/DetailsHeader.base.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index e8e3baebf0166..637c6282e2b0a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -253,7 +253,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                             ? `${this._id}-checkTooltip`
                             : undefined
                         }
-                        data-is-focusable={!isCheckboxHidden ? true : undefined}
+                        data-is-focusable={!isCheckboxHidden || undefined}
                         isHeader={true}
                         selected={isAllSelected}
                         anySelected={false}

From da5946eed91ce9629d89652d772d5b60945183af Mon Sep 17 00:00:00 2001
From: "REDMOND\\naethell" <naethell@microsoft.com>
Date: Fri, 1 Feb 2019 16:40:26 -0800
Subject: [PATCH 13/13] add snapshot test

---
 .../DetailsList/DetailsHeader.test.tsx        |  15 +-
 .../__snapshots__/DetailsHeader.test.tsx.snap | 802 +++++++++++++++++-
 2 files changed, 800 insertions(+), 17 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
index db0a581d34fd0..347cb447c0943 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DetailsHeader } from './DetailsHeader';
-import { IDetailsHeader, IDropHintDetails } from './DetailsHeader.types';
+import { IDetailsHeader, IDropHintDetails, SelectAllVisibility } from './DetailsHeader.types';
 import { DetailsListLayoutMode, IColumn, ColumnActionsMode } from './DetailsList.types';
 import { Selection, SelectionMode } from '../../utilities/selection/index';
 import { EventGroup } from '../../Utilities';
@@ -247,6 +247,19 @@ describe('DetailsHeader', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
 
+  it('can render a hidden select all checkbox in single selection mode', () => {
+    const component = renderer.create(
+      <DetailsHeader
+        selection={_selection}
+        selectionMode={SelectionMode.single}
+        layoutMode={DetailsListLayoutMode.fixedColumns}
+        selectAllVisibility={SelectAllVisibility.hidden}
+        columns={_columns}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
   it('can resize columns', () => {
     let lastResize = { size: -1, index: -1 };
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index 1347b5f5aceb0..e362e35b5d97e 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -868,6 +868,776 @@ exports[`DetailsHeader can render 1`] = `
 </div>
 `;
 
+exports[`DetailsHeader can render a hidden select all checkbox in single selection mode 1`] = `
+<div
+  className=
+      ms-FocusZone
+      ms-DetailsHeader
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        background: #ffffff;
+        border-bottom: 1px solid #eaeaea;
+        box-sizing: content-box;
+        cursor: default;
+        display: inline-block;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 12px;
+        font-weight: 400;
+        height: 32px;
+        line-height: 32px;
+        min-width: 100%;
+        padding-bottom: 1px;
+        position: relative;
+        user-select: none;
+        vertical-align: top;
+        white-space: nowrap;
+      }
+      &:hover $check {
+        opacity: 1;
+      }
+      & ms-TooltipHost $checkTooltip {
+        display: block;
+      }
+      & $cell$cellIsCheck {
+        visibility: hidden;
+      }
+  data-automationid="DetailsHeader"
+  data-focuszone-id="FocusZone3"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+  onMouseMove={[Function]}
+  role="row"
+  style={
+    Object {
+      "minWidth": 0,
+    }
+  }
+>
+  <div
+    aria-colindex={1}
+    aria-labelledby="header2-check"
+    className=
+        ms-DetailsHeader-cell
+        ms-DetailsHeader-cellIsCheck
+        {
+          align-items: center;
+          border: none;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-flex;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          outline: transparent;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+    role="columnheader"
+  >
+    <span
+      className=
+
+
+    >
+      <div
+        className=
+            ms-DetailsRow-check
+            ms-DetailsRow-check--isDisabled
+            ms-DetailsRow-check--isHeader
+            {
+              height: 32px;
+            }
+            .ms-Fabric--isFocusVisible &:focus {
+              opacity: 1;
+            }
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background-color: transparent;
+              background: none;
+              border: none;
+              box-sizing: border-box;
+              cursor: default;
+              display: flex;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 12px;
+              font-weight: 400;
+              height: 32px;
+              justify-content: center;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              opacity: 0;
+              outline: transparent;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              vertical-align: top;
+              width: 40px;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+            &:hover {
+              opacity: 1;
+            }
+        id="header2-check"
+      />
+    </span>
+  </div>
+  <div
+    aria-colindex={2}
+    aria-sort="none"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 12px;
+          padding-right: 8px;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="a"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 220,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-haspopup={false}
+        aria-labelledby="header2-a-name "
+        className=
+            ms-DetailsHeader-cellTitle
+            {
+              align-items: stretch;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              outline: transparent;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 12px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+        data-is-focusable={true}
+        id="header2-a"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-a-name"
+        >
+          a
+        </span>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    className=
+        ms-DetailsHeader-cellSizer
+        {
+          background: transparent;
+          bottom: 0px;
+          cursor: ew-resize;
+          display: inline-block;
+          height: inherit;
+          outline: transparent;
+          overflow: hidden;
+          position: relative;
+          top: 0px;
+          width: 16px;
+          z-index: 1;
+        }
+        &::-moz-focus-inner {
+          border: 0px;
+        }
+        &:after {
+          background: #c8c8c8;
+          bottom: 0px;
+          content: "";
+          left: 50%;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          width: 1px;
+        }
+        &:focus:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &:hover:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &$cellIsResizing:after {
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        {
+          margin-bottom: 0;
+          margin-left: -8px;
+          margin-right: -8px;
+          margin-top: 0;
+        }
+    data-is-focusable={false}
+    data-sizer-index={0}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+  <div
+    aria-colindex={3}
+    aria-sort="ascending"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        is-icon-visible
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 12px;
+          padding-right: 8px;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="b"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 220,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-haspopup={false}
+        aria-labelledby="header2-b-name "
+        className=
+            ms-DetailsHeader-cellTitle
+            {
+              align-items: stretch;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              outline: transparent;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 12px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+        data-is-focusable={true}
+        id="header2-b"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-b-name"
+        >
+          b
+        </span>
+        <i
+          className=
+
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #666666;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                opacity: 1;
+                padding-left: 4px;
+                position: relative;
+                speak: none;
+                top: 1px;
+              }
+          data-icon-name="SortUp"
+          role="presentation"
+        >
+          
+        </i>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    className=
+        ms-DetailsHeader-cellSizer
+        {
+          background: transparent;
+          bottom: 0px;
+          cursor: ew-resize;
+          display: inline-block;
+          height: inherit;
+          outline: transparent;
+          overflow: hidden;
+          position: relative;
+          top: 0px;
+          width: 16px;
+          z-index: 1;
+        }
+        &::-moz-focus-inner {
+          border: 0px;
+        }
+        &:after {
+          background: #c8c8c8;
+          bottom: 0px;
+          content: "";
+          left: 50%;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          width: 1px;
+        }
+        &:focus:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &:hover:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &$cellIsResizing:after {
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        {
+          margin-bottom: 0;
+          margin-left: -8px;
+          margin-right: -8px;
+          margin-top: 0;
+        }
+    data-is-focusable={false}
+    data-sizer-index={1}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+  <div
+    aria-colindex={4}
+    aria-sort="none"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 12px;
+          padding-right: 8px;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="c"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 30,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-labelledby="header2-c-name "
+        className=
+            ms-DetailsHeader-cellTitle
+            {
+              align-items: stretch;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              outline: transparent;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 12px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
+        data-is-focusable={true}
+        id="header2-c"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-c-name"
+        >
+          c
+        </span>
+        <i
+          aria-hidden={true}
+          className=
+              ms-DetailsHeader-filterChevron
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #a6a6a6;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 4px;
+                speak: none;
+                vertical-align: middle;
+              }
+          data-icon-name="ChevronDown"
+          role="presentation"
+        >
+          
+        </i>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    className=
+        ms-DetailsHeader-cellSizer
+        {
+          background: transparent;
+          bottom: 0px;
+          cursor: ew-resize;
+          display: inline-block;
+          height: inherit;
+          outline: transparent;
+          overflow: hidden;
+          position: relative;
+          top: 0px;
+          width: 16px;
+          z-index: 1;
+        }
+        &::-moz-focus-inner {
+          border: 0px;
+        }
+        &:after {
+          background: #c8c8c8;
+          bottom: 0px;
+          content: "";
+          left: 50%;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          width: 1px;
+        }
+        &:focus:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &:hover:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &$cellIsResizing:after {
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        {
+          margin-bottom: 0px;
+          margin-left: -16px;
+          margin-right: 0px;
+          margin-top: 0px;
+        }
+    data-is-focusable={false}
+    data-sizer-index={2}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+</div>
+`;
+
 exports[`DetailsHeader renders accessible labels 1`] = `
 <div
   className=
@@ -900,7 +1670,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
         display: block;
       }
   data-automationid="DetailsHeader"
-  data-focuszone-id="FocusZone5"
+  data-focuszone-id="FocusZone7"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
@@ -914,7 +1684,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
 >
   <div
     aria-colindex={1}
-    aria-labelledby="header4-check"
+    aria-labelledby="header6-check"
     className=
         ms-DetailsHeader-cell
         ms-DetailsHeader-cellIsCheck
@@ -1024,7 +1794,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
         data-automationid="DetailsRowCheck"
         data-is-focusable={true}
         data-selection-toggle={true}
-        id="header4-check"
+        id="header6-check"
         role="checkbox"
       >
         <div
@@ -1205,7 +1975,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     >
       <span
         aria-haspopup={false}
-        aria-labelledby="header4-a-name "
+        aria-labelledby="header6-a-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1237,7 +2007,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-a"
+        id="header6-a"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1249,7 +2019,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-a-name"
+          id="header6-a-name"
         >
           a
         </span>
@@ -1393,9 +2163,9 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           }
     >
       <span
-        aria-describedby="header4-b-tooltip"
+        aria-describedby="header6-b-tooltip"
         aria-haspopup={false}
-        aria-labelledby="header4-b-name "
+        aria-labelledby="header6-b-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1427,7 +2197,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-b"
+        id="header6-b"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1439,7 +2209,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-b-name"
+          id="header6-b-name"
         >
           b
         </span>
@@ -1486,7 +2256,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           position: absolute;
           width: 1px;
         }
-    id="header4-b-tooltip"
+    id="header6-b-tooltip"
   >
     Click to sort.
     Sorted up.
@@ -1628,10 +2398,10 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           }
     >
       <span
-        aria-describedby="header4-c-tooltip"
+        aria-describedby="header6-c-tooltip"
         aria-expanded={false}
         aria-haspopup={true}
-        aria-labelledby="header4-c-name "
+        aria-labelledby="header6-c-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1663,7 +2433,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-c"
+        id="header6-c"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1675,7 +2445,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-c-name"
+          id="header6-c-name"
         >
           c
         </span>
@@ -1761,7 +2531,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           position: absolute;
           width: 1px;
         }
-    id="header4-c-tooltip"
+    id="header6-c-tooltip"
   >
     Click to sort, filter, or group.
     Filtered.