Port #14933 (Port #10008 to update Nav to latest redlines) from offic…

…e-ui-fabric-react_v5.79.1 to hotfix/5.135.6 (#22162) * Port #14933 (Port #10008 to update Nav to latest redlines) from office-ui-fabric-react_v5.79.1 to hotfix/5.135.6 * add commit log
microsoft · Mar 21, 2022 · bc4a96c · bc4a96c
1 parent a3ecff0
commit bc4a96c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 8 deletions.
diff --git a/common/changes/@uifabric/styling/hotfix_01-hotfix-5.135.6_2022-03-19-05-46.json b/common/changes/@uifabric/styling/hotfix_01-hotfix-5.135.6_2022-03-19-05-46.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Semantic slots: add bodyBackgroundHovered and bodyBackgroundSelected",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "[email protected]"
+}
diff --git a/common/changes/office-ui-fabric-react/hotfix_01-hotfix-5.135.6_2022-03-19-05-46.json b/common/changes/office-ui-fabric-react/hotfix_01-hotfix-5.135.6_2022-03-19-05-46.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Nav: update to latest redlines",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
@@ -88,8 +88,7 @@ export const getStyles = (
       {
         display: 'block',
         position: 'relative',
-        color: semanticColors.bodyText,
-        backgroundColor: semanticColors.bodyBackground,
+        color: semanticColors.bodyText
       },
       isExpanded && 'is-expanded',
       isSelected && 'is-selected'
@@ -112,14 +111,14 @@ export const getStyles = (
         paddingRight: rightPadding,
         selectors: {
           '.ms-Nav-compositeLink:hover &': {
-            backgroundColor: palette.neutralLighterAlt,
+            backgroundColor: semanticColors.bodyBackgroundHovered,
             color: semanticColors.bodyText
           },
         },
       },
       isSelected && {
         color: palette.themePrimary,
-        backgroundColor: palette.neutralLighter,
+        backgroundColor: semanticColors.bodyBackgroundChecked,
         selectors: {
           '&:after': {
             borderLeft: `2px solid ${palette.themePrimary}`,
@@ -160,11 +159,11 @@ export const getStyles = (
           },
           '&:hover': {
             color: semanticColors.bodyText,
-            backgroundColor: palette.neutralLighterAlt
+            backgroundColor: semanticColors.bodyBackgroundHovered
           },
           '$compositeLink:hover &': {
             color: semanticColors.bodyText,
-            backgroundColor: palette.neutralLighterAlt
+            backgroundColor: semanticColors.bodyBackgroundHovered
           },
         }
       },

diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -67,7 +67,6 @@ exports[`Nav renders Nav correctly 1`] = `
               className=
                   ms-Nav-compositeLink
                   {
-                    background-color: #ffffff;
                     color: #333333;
                     display: block;
                     position: relative;
@@ -137,7 +136,7 @@ exports[`Nav renders Nav correctly 1`] = `
                       top: -2px;
                     }
                     .ms-Nav-compositeLink:hover & {
-                      background-color: #f8f8f8;
+                      background-color: #f4f4f4;
                       color: #333333;
                     }
                     &:hover {

diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts
@@ -60,6 +60,18 @@ export interface ISemanticColors extends ISemanticTextColors {
    */
   bodyBackground: string;
 
+  /**
+   * The default hover color for the backgrounds of interactable elements that don't have their own backgrounds.
+   * e.g. if links had hover backgrounds, they'd use this
+   */
+  bodyBackgroundHovered: string;
+
+  /**
+   * The default background color of selected interactable elements that don't have their own backgrounds.
+   * e.g. indicates in the nav which page you're currently on
+   */
+  bodyBackgroundChecked: string;
+
   /**
    * The standout color for highlighted content backgrounds.
    * For highlighted content when there is no emphasis, use the neutral variant instead.

diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
@@ -150,6 +150,8 @@ function _makeSemanticColorsFromPalette(
 ): ISemanticColors {
   let toReturn: ISemanticColors = {
     bodyBackground: p.white,
+    bodyBackgroundHovered: p.neutralLighter,
+    bodyBackgroundChecked: p.neutralLight,
     bodyStandoutBackground: p.neutralLighterAlt,
     bodyFrameBackground: p.white,
     bodyFrameDivider: p.neutralLight,