From 7a55bd717918852312a7e711023ca44171fbc81c Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Mon, 25 Sep 2017 10:28:46 -0700
Subject: [PATCH 1/9] Added property to IDetailsListProps to support vertically
 centering cells

---
 .../src/components/DetailsList/DetailsList.Props.ts      | 7 ++++++-
 .../src/components/DetailsList/DetailsList.tsx           | 6 ++++--
 .../src/components/DetailsList/DetailsRow.scss           | 9 ++++++++-
 .../src/components/DetailsList/DetailsRow.tsx            | 6 +++++-
 .../src/components/DetailsList/DetailsRowFields.tsx      | 4 +++-
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
index 4169ecc777f923..9d6398764c0086 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
@@ -201,6 +201,11 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    * The default implementation will virtualize when this callback is not provided.
    */
   onShouldVirtualize?: (props: IListProps) => boolean;
+
+  /**
+   * Boolean value to indicate if the cells should be vertically centered rather than top-aligned
+   */
+  verticallyCenterCells?: boolean;
 }
 
 export interface IColumn {
@@ -400,4 +405,4 @@ export enum CheckboxVisibility {
    * Hide checkboxes.
    */
   hidden = 2
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index a2b967a09f0e9d..7fd1d228cc93c3 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -396,7 +396,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      groupProps
+      groupProps,
+      verticallyCenterCells
     } = this.props;
     let collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
     let selection = this._selection;
@@ -431,7 +432,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility: checkboxVisibility,
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
-      checkButtonAriaLabel: checkButtonAriaLabel
+      checkButtonAriaLabel: checkButtonAriaLabel,
+      verticallyCenterCells: verticallyCenterCells
     }, this._onRenderRow);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
index 22f44bd1d8b8bd..759dae2f11d4bb 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
@@ -202,11 +202,18 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
     font-size: $ms-font-size-m;
   }
 
+  &.isVerticallyCentered {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   [data-is-focusable=true] {
     @include focus-border(0, $ms-color-neutralSecondary);
   }
 }
 
+
 .isPadded {
   @include ms-padding-right($isPaddedMargin + $rowHorizontalPadding);
 
@@ -230,4 +237,4 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
 .cellMeasurer .cell {
   overflow: visible;
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 0d4f65053c959a..673b137e0fdb89 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -49,6 +49,7 @@ export interface IDetailsRowProps extends React.Props<DetailsRow> {
   collapseAllVisibility?: CollapseAllVisibility;
   getRowAriaLabel?: (item: any) => string;
   checkButtonAriaLabel?: string;
+  verticallyCenterCells?: boolean;
 }
 
 export interface IDetailsRowSelectionState {
@@ -184,7 +185,8 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      selection
+      selection,
+      verticallyCenterCells
     } = this.props;
     const { columnMeasureInfo, isDropping, groupNestingDepth } = this.state;
     const { isSelected, anySelected } = this.state.selectionState as IDetailsRowSelectionState;
@@ -250,6 +252,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             itemIndex={ itemIndex }
             columnStartIndex={ showCheckbox ? 1 : 0 }
             onRenderItemColumn={ onRenderItemColumn }
+            verticallyCenterCells={ verticallyCenterCells }
           />
         ) }
 
@@ -265,6 +268,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
               itemIndex={ itemIndex }
               columnStartIndex={ (showCheckbox ? 1 : 0) + columns.length }
               onRenderItemColumn={ onRenderItemColumn }
+              verticallyCenterCells={ verticallyCenterCells }
             />
           </span>
         ) }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index 0cbf9176df31d0..c9f994334e8c15 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -15,6 +15,7 @@ export interface IDetailsRowFieldsProps {
   columns: IColumn[];
   compact?: boolean;
   onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;
+  verticallyCenterCells?: boolean;
 }
 
 export interface IDetailsRowFieldsState {
@@ -33,7 +34,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
   }
 
   public render() {
-    let { columns, columnStartIndex } = this.props;
+    let { columns, columnStartIndex, verticallyCenterCells } = this.props;
     let { cellContent } = this.state;
 
     return (
@@ -52,6 +53,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
               column.isRowHeader && styles.isRowHeader,
               column.isPadded && styles.isPadded,
               column.isMultiline && styles.isMultiline,
+              verticallyCenterCells && styles.isVerticallyCentered,
             ) }
             style={ { width: column.calculatedWidth! + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) } }
             data-automationid='DetailsRowCell'

From 598c3f690de34e495b3a27b4cf64397bf7580b42 Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Mon, 25 Sep 2017 11:39:49 -0700
Subject: [PATCH 2/9] Fixed vertical centering issue with checkbox

---
 .../src/components/DetailsList/DetailsRow.tsx                   | 2 +-
 .../src/components/DetailsList/DetailsRowCheck.scss             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 673b137e0fdb89..482bf15efa2def 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -232,7 +232,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             role='gridcell'
             aria-colindex={ 0 }
             data-selection-toggle={ true }
-            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell) }
+            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, verticallyCenterCells && styles.isVerticallyCentered) }
           >
             { onRenderCheck({
               isSelected,
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss
index e19f3fe646dd4d..a00a3769eddf7c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.scss
@@ -18,7 +18,7 @@
 }
 
 button.check {
-  height: 100%;
+  height: 40px;
   width: 40px;
   padding: 0;
   margin: 0;

From 7acf9217f992105bf994b73dd1f4b5c6b1e0093a Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Mon, 25 Sep 2017 15:07:54 -0700
Subject: [PATCH 3/9] Added change file

---
 ...maxlus-verticallyCenterCells_2017-09-25-22-02.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json

diff --git a/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json
new file mode 100644
index 00000000000000..254c4f1e3da370
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add option for vertically centering cells in a details list",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "maxlus@microsoft.com"
+}
\ No newline at end of file

From b4484b403cd8ebf633dc887974c1ee40dda5bc1c Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Tue, 26 Sep 2017 13:21:34 -0700
Subject: [PATCH 4/9] Removed verticallyCenterCells

---
 .../src/components/DetailsList/DetailsList.Props.ts       | 5 -----
 .../src/components/DetailsList/DetailsList.tsx            | 6 ++----
 .../src/components/DetailsList/DetailsRow.scss            | 6 ------
 .../src/components/DetailsList/DetailsRow.tsx             | 8 ++------
 .../src/components/DetailsList/DetailsRowFields.tsx       | 4 +---
 5 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
index 9d6398764c0086..678b0edfb925d2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
@@ -201,11 +201,6 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    * The default implementation will virtualize when this callback is not provided.
    */
   onShouldVirtualize?: (props: IListProps) => boolean;
-
-  /**
-   * Boolean value to indicate if the cells should be vertically centered rather than top-aligned
-   */
-  verticallyCenterCells?: boolean;
 }
 
 export interface IColumn {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 7fd1d228cc93c3..a2b967a09f0e9d 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -396,8 +396,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      groupProps,
-      verticallyCenterCells
+      groupProps
     } = this.props;
     let collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
     let selection = this._selection;
@@ -432,8 +431,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility: checkboxVisibility,
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
-      checkButtonAriaLabel: checkButtonAriaLabel,
-      verticallyCenterCells: verticallyCenterCells
+      checkButtonAriaLabel: checkButtonAriaLabel
     }, this._onRenderRow);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
index 759dae2f11d4bb..9c4f0798e23f37 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
@@ -202,12 +202,6 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
     font-size: $ms-font-size-m;
   }
 
-  &.isVerticallyCentered {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
   [data-is-focusable=true] {
     @include focus-border(0, $ms-color-neutralSecondary);
   }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 482bf15efa2def..0d4f65053c959a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -49,7 +49,6 @@ export interface IDetailsRowProps extends React.Props<DetailsRow> {
   collapseAllVisibility?: CollapseAllVisibility;
   getRowAriaLabel?: (item: any) => string;
   checkButtonAriaLabel?: string;
-  verticallyCenterCells?: boolean;
 }
 
 export interface IDetailsRowSelectionState {
@@ -185,8 +184,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      selection,
-      verticallyCenterCells
+      selection
     } = this.props;
     const { columnMeasureInfo, isDropping, groupNestingDepth } = this.state;
     const { isSelected, anySelected } = this.state.selectionState as IDetailsRowSelectionState;
@@ -232,7 +230,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             role='gridcell'
             aria-colindex={ 0 }
             data-selection-toggle={ true }
-            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, verticallyCenterCells && styles.isVerticallyCentered) }
+            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell) }
           >
             { onRenderCheck({
               isSelected,
@@ -252,7 +250,6 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             itemIndex={ itemIndex }
             columnStartIndex={ showCheckbox ? 1 : 0 }
             onRenderItemColumn={ onRenderItemColumn }
-            verticallyCenterCells={ verticallyCenterCells }
           />
         ) }
 
@@ -268,7 +265,6 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
               itemIndex={ itemIndex }
               columnStartIndex={ (showCheckbox ? 1 : 0) + columns.length }
               onRenderItemColumn={ onRenderItemColumn }
-              verticallyCenterCells={ verticallyCenterCells }
             />
           </span>
         ) }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index c9f994334e8c15..0cbf9176df31d0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -15,7 +15,6 @@ export interface IDetailsRowFieldsProps {
   columns: IColumn[];
   compact?: boolean;
   onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;
-  verticallyCenterCells?: boolean;
 }
 
 export interface IDetailsRowFieldsState {
@@ -34,7 +33,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
   }
 
   public render() {
-    let { columns, columnStartIndex, verticallyCenterCells } = this.props;
+    let { columns, columnStartIndex } = this.props;
     let { cellContent } = this.state;
 
     return (
@@ -53,7 +52,6 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
               column.isRowHeader && styles.isRowHeader,
               column.isPadded && styles.isPadded,
               column.isMultiline && styles.isMultiline,
-              verticallyCenterCells && styles.isVerticallyCentered,
             ) }
             style={ { width: column.calculatedWidth! + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) } }
             data-automationid='DetailsRowCell'

From 6faa8b1a971f621319ec3ba00e98154793467168 Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Tue, 26 Sep 2017 13:40:17 -0700
Subject: [PATCH 5/9] Added ability to add css class to checkbox cell

---
 .../src/components/DetailsList/DetailsList.Props.ts          | 5 +++++
 .../src/components/DetailsList/DetailsList.tsx               | 4 +++-
 .../src/components/DetailsList/DetailsRow.tsx                | 4 +++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
index 678b0edfb925d2..c8db53785515cd 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
@@ -201,6 +201,11 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    * The default implementation will virtualize when this callback is not provided.
    */
   onShouldVirtualize?: (props: IListProps) => boolean;
+
+  /**
+   * Optional class name to add to the cell of a checkbox
+   */
+  checkboxClassName?: string;
 }
 
 export interface IColumn {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index a2b967a09f0e9d..11f48293cbdb5a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -396,6 +396,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
+      checkboxClassName,
       groupProps
     } = this.props;
     let collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
@@ -431,7 +432,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility: checkboxVisibility,
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
-      checkButtonAriaLabel: checkButtonAriaLabel
+      checkButtonAriaLabel: checkButtonAriaLabel,
+      checkboxClassName
     }, this._onRenderRow);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 0d4f65053c959a..5b2fa9e088efbd 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -49,6 +49,7 @@ export interface IDetailsRowProps extends React.Props<DetailsRow> {
   collapseAllVisibility?: CollapseAllVisibility;
   getRowAriaLabel?: (item: any) => string;
   checkButtonAriaLabel?: string;
+  checkboxClassName?: string;
 }
 
 export interface IDetailsRowSelectionState {
@@ -184,6 +185,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
+      checkboxClassName,
       selection
     } = this.props;
     const { columnMeasureInfo, isDropping, groupNestingDepth } = this.state;
@@ -230,7 +232,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             role='gridcell'
             aria-colindex={ 0 }
             data-selection-toggle={ true }
-            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell) }
+            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, checkboxClassName) }
           >
             { onRenderCheck({
               isSelected,

From 63f1a52dbabdb1386cfac9e86fe73c9eeca65ccb Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Tue, 26 Sep 2017 14:09:49 -0700
Subject: [PATCH 6/9] Fixed issue with DetailsRowProps declaration

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

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 11f48293cbdb5a..86f242ed4bb250 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -433,7 +433,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
       checkButtonAriaLabel: checkButtonAriaLabel,
-      checkboxClassName
+      checkboxClassName: checkboxClassName,
     }, this._onRenderRow);
   }
 

From d2eb45ddd32c587c353af7318a2ddc0a4709c0f0 Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Tue, 26 Sep 2017 14:11:25 -0700
Subject: [PATCH 7/9] Changed change file

---
 ....json => maxlus-verticallyCenterCells_2017-09-26-21-11.json} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename common/changes/office-ui-fabric-react/{maxlus-verticallyCenterCells_2017-09-25-22-02.json => maxlus-verticallyCenterCells_2017-09-26-21-11.json} (69%)

diff --git a/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
similarity index 69%
rename from common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json
rename to common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
index 254c4f1e3da370..d700477b29d2aa 100644
--- a/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-25-22-02.json
+++ b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Add option for vertically centering cells in a details list",
+      "comment": "Added ability to add css class to checkbox cell",
       "type": "minor"
     }
   ],

From bd2218eb9d2dadf80c20876c26849a127a6549aa Mon Sep 17 00:00:00 2001
From: Max Lustig <maxlus@microsoft.com>
Date: Wed, 27 Sep 2017 10:47:57 -0700
Subject: [PATCH 8/9] Changed name to checkboxCellClassName

---
 .../src/components/DetailsList/DetailsList.Props.ts         | 2 +-
 .../src/components/DetailsList/DetailsList.tsx              | 4 ++--
 .../src/components/DetailsList/DetailsRow.tsx               | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
index c8db53785515cd..878e99b19bd12f 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts
@@ -205,7 +205,7 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
   /**
    * Optional class name to add to the cell of a checkbox
    */
-  checkboxClassName?: string;
+  checkboxCellClassName?: string;
 }
 
 export interface IColumn {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 86f242ed4bb250..10df3fef736f34 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -396,7 +396,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      checkboxClassName,
+      checkboxCellClassName,
       groupProps
     } = this.props;
     let collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
@@ -433,7 +433,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
       checkButtonAriaLabel: checkButtonAriaLabel,
-      checkboxClassName: checkboxClassName,
+      checkboxCellClassName: checkboxCellClassName,
     }, this._onRenderRow);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 5b2fa9e088efbd..e863f240ffceec 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -49,7 +49,7 @@ export interface IDetailsRowProps extends React.Props<DetailsRow> {
   collapseAllVisibility?: CollapseAllVisibility;
   getRowAriaLabel?: (item: any) => string;
   checkButtonAriaLabel?: string;
-  checkboxClassName?: string;
+  checkboxCellClassName?: string;
 }
 
 export interface IDetailsRowSelectionState {
@@ -185,7 +185,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       checkboxVisibility,
       getRowAriaLabel,
       checkButtonAriaLabel,
-      checkboxClassName,
+      checkboxCellClassName,
       selection
     } = this.props;
     const { columnMeasureInfo, isDropping, groupNestingDepth } = this.state;
@@ -232,7 +232,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             role='gridcell'
             aria-colindex={ 0 }
             data-selection-toggle={ true }
-            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, checkboxClassName) }
+            className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, checkboxCellClassName) }
           >
             { onRenderCheck({
               isSelected,

From 2f46aea1ec84853f2c3406c8d435013101dfba7a Mon Sep 17 00:00:00 2001
From: Christopher Schleiden <cschleiden@live.de>
Date: Wed, 27 Sep 2017 14:05:49 -0700
Subject: [PATCH 9/9] Update maxlus-verticallyCenterCells_2017-09-26-21-11.json

---
 .../maxlus-verticallyCenterCells_2017-09-26-21-11.json        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
index d700477b29d2aa..c93035933bb1ca 100644
--- a/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
+++ b/common/changes/office-ui-fabric-react/maxlus-verticallyCenterCells_2017-09-26-21-11.json
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Added ability to add css class to checkbox cell",
+      "comment": "DetailsList: Added ability to add css class to checkbox cell",
       "type": "minor"
     }
   ],
   "packageName": "office-ui-fabric-react",
   "email": "maxlus@microsoft.com"
-}
\ No newline at end of file
+}