Fix theme slots for DetailsList header colors (#4658)

* Fix theme slots for DetailsList header colors * Update change output
microsoft · Apr 24, 2018 · 802a2c0 · 802a2c0
1 parent 6648a74
commit 802a2c0
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json b/common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Add theme slots for DetailsList header colors",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "tmichon@microsoft.com"
+}
diff --git a/common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json b/common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix theme slots for DetailsList header colors",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "tmichon@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -50,8 +50,8 @@ $menuHeaderColor: "[theme:menuHeader, default: #0078d4]";
 /* Lists */
 $listBackgroundColor: "[theme:listBackground, default: #ffffff]";
 $listTextColor: "[theme:listText, default: #333333]";
-$listItemHeaderHoveredColor: "[theme:listItemHeaderHovered, default: #f4f4f4]";
-$listItemHeaderActivatedColor: "[theme:listItemActivatedHovered, default: #eaeaea]";
+$listHeaderBackgroundHoveredColor: "[theme:listHeaderBackgroundHovered, default: #f4f4f4]";
+$listHeaderBackgroundPressedColor: "[theme:listHeaderBackgroundPressed, default: #eaeaea]";
 $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]";
 $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]";
 $listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]";
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -64,11 +64,11 @@ $isPaddedMargin: 24px;
 
     &:hover {
       color: $bodyTextColor;
-      background: $listItemHeaderHoveredColor;
+      background: $listHeaderBackgroundHoveredColor;
     }
 
     &:active {
-      background: $listItemHeaderActivatedColor;
+      background: $listHeaderBackgroundPressedColor;
     }
   }
 

diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts
@@ -271,6 +271,16 @@ export interface ISemanticColors {
    */
   listItemBackgroundCheckedHovered: string;
 
+  /**
+   * The background color for a hovered list header.
+   */
+  listHeaderBackgroundHovered: string;
+
+  /**
+   * The background color for a pressed list header.
+   */
+  listHeaderBackgroundPressed: string;
+
   /**
    * The color of a link.
    */
@@ -286,4 +296,4 @@ export interface ISemanticColors {
 
   /** DEPRECATED use listText instead */
   listTextColor: string;
-}
+}
diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
@@ -178,6 +178,9 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom
     listItemBackgroundChecked: p.neutralLight,
     listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,
 
+    listHeaderBackgroundHovered: p.neutralLighter,
+    listHeaderBackgroundPressed: p.neutralLight,
+
     link: p.themePrimary,
     linkHovered: p.themeDarker,