Nav: update to latest redlines (#10008)

* first * add nav style reversion to MDL2 theme package * Change files * update snapshots and API * code review feedback * update * more snapshots * more changes * update snapshots * more fixes * changes * fix tslint error * Fixes
microsoft · Aug 19, 2019 · f0097f8 · f0097f8
1 parent d317923
commit f0097f8
Show file tree

Hide file tree

Showing 16 changed files with 260 additions and 99 deletions.
diff --git a/change/@uifabric-fluent-theme-2019-07-31-14-05-43-phkuo-leftNavRedlines.json b/change/@uifabric-fluent-theme-2019-07-31-14-05-43-phkuo-leftNavRedlines.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Nav: update to latest redlines",
+  "packageName": "@uifabric/fluent-theme",
+  "email": "[email protected]",
+  "commit": "7779a3437650dff286de759c3474e6fe8c4294e7",
+  "date": "2019-07-31T21:05:19.873Z"
+}
diff --git a/change/@uifabric-mdl2-theme-2019-07-31-14-05-43-phkuo-leftNavRedlines.json b/change/@uifabric-mdl2-theme-2019-07-31-14-05-43-phkuo-leftNavRedlines.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Nav: add backwards compat for update to latest redlines",
+  "packageName": "@uifabric/mdl2-theme",
+  "email": "[email protected]",
+  "commit": "7779a3437650dff286de759c3474e6fe8c4294e7",
+  "date": "2019-07-31T21:05:31.597Z"
+}
diff --git a/change/@uifabric-styling-2019-07-31-14-05-43-phkuo-leftNavRedlines.json b/change/@uifabric-styling-2019-07-31-14-05-43-phkuo-leftNavRedlines.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Semantic slots: add bodyBackgroundHovered and bodyBackgroundSelected",
+  "packageName": "@uifabric/styling",
+  "email": "[email protected]",
+  "commit": "7779a3437650dff286de759c3474e6fe8c4294e7",
+  "date": "2019-07-31T21:05:43.090Z"
+}
diff --git a/change/office-ui-fabric-react-2019-07-31-14-05-43-phkuo-leftNavRedlines.json b/change/office-ui-fabric-react-2019-07-31-14-05-43-phkuo-leftNavRedlines.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Nav: update to latest redlines",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "commit": "7779a3437650dff286de759c3474e6fe8c4294e7",
+  "date": "2019-07-31T21:05:37.306Z"
+}
diff --git a/packages/fluent-theme/src/fluent/FluentStyles.ts b/packages/fluent-theme/src/fluent/FluentStyles.ts
@@ -22,6 +22,7 @@ import { IconButtonStyles } from './styles/IconButton.styles';
 import { LabelStyles } from './styles/Label.styles';
 import { LinkStyles } from './styles/Link.styles';
 import { ModalStyles } from './styles/Modal.styles';
+import { NavStyles } from './styles/Nav.styles';
 import { PanelStyles } from './styles/Panel.styles';
 import { PeoplePickerItemStyles } from './styles/PeoplePicker.styles';
 import { PersonaStyles } from './styles/Persona.styles';
@@ -130,6 +131,9 @@ export const FluentStyles: any = {
   Modal: {
     styles: ModalStyles
   },
+  Nav: {
+    styles: NavStyles
+  },
   Panel: {
     styles: PanelStyles
   },

diff --git a/packages/fluent-theme/src/fluent/styles/Nav.styles.ts b/packages/fluent-theme/src/fluent/styles/Nav.styles.ts
@@ -0,0 +1,48 @@
+import { INavStyleProps, INavStyles } from 'office-ui-fabric-react/lib/Nav';
+
+export const NavStyles = (props: INavStyleProps): Partial<INavStyles> => {
+  const { theme, isDisabled, isSelected, isGroup, isLink, navHeight = 44 } = props;
+  const { semanticColors } = theme;
+
+  return {
+    link: [
+      {
+        height: navHeight,
+        lineHeight: `${navHeight}px`
+      },
+      !isDisabled && {
+        selectors: {
+          '.${classNames.compositeLink}:hover &': {
+            backgroundColor: semanticColors.bodyBackgroundHovered
+          }
+        }
+      },
+      isSelected && {
+        backgroundColor: semanticColors.bodyBackgroundChecked
+      }
+    ],
+    chevronButton: [
+      {
+        lineHeight: `${navHeight}px`,
+        selectors: {
+          '&:hover': {
+            backgroundColor: semanticColors.bodyBackgroundHovered
+          },
+          '.${classNames.compositeLink}:hover &': {
+            backgroundColor: semanticColors.bodyBackgroundHovered
+          }
+        }
+      },
+      isGroup && {
+        height: navHeight
+      },
+      isLink && {
+        height: navHeight - 2
+      }
+    ],
+    chevronIcon: {
+      height: navHeight,
+      lineHeight: `${navHeight}px`
+    }
+  };
+};
diff --git a/packages/mdl2-theme/src/mdl2/MDL2Styles.ts b/packages/mdl2-theme/src/mdl2/MDL2Styles.ts
@@ -21,6 +21,7 @@ import { LabelStyles } from './styles/Label.styles';
 import { LinkStyles } from './styles/Link.styles';
 import { MessageBarStyles } from './styles/MessageBar.styles';
 import { MessageBarButtonStyles } from './styles/MessageBarButton.styles';
+import { NavStyles } from './styles/Nav.styles';
 import { PanelStyles } from './styles/Panel.styles';
 import { PersonaStyles, PersonaCoinStyles } from './styles/Persona.styles';
 import { PivotStyles } from './styles/Pivot.styles';
@@ -121,6 +122,9 @@ export const MDL2Styles = {
   MessageBarButton: {
     styles: MessageBarButtonStyles
   },
+  Nav: {
+    styles: NavStyles
+  },
   Panel: {
     styles: PanelStyles
   },

diff --git a/packages/mdl2-theme/src/mdl2/styles/Nav.styles.ts b/packages/mdl2-theme/src/mdl2/styles/Nav.styles.ts
@@ -0,0 +1,48 @@
+import { INavStyleProps, INavStyles } from 'office-ui-fabric-react/lib/Nav';
+
+export const NavStyles = (props: INavStyleProps): Partial<INavStyles> => {
+  const { theme, isDisabled, isSelected, isGroup, isLink, navHeight = 36 } = props;
+  const { palette } = theme;
+
+  return {
+    link: [
+      {
+        height: navHeight,
+        lineHeight: `${navHeight}px`
+      },
+      !isDisabled && {
+        selectors: {
+          '.ms-Nav-compositeLink:hover &': {
+            backgroundColor: palette.neutralLighterAlt
+          }
+        }
+      },
+      isSelected && {
+        backgroundColor: palette.neutralLighter
+      }
+    ],
+    chevronButton: [
+      {
+        lineHeight: `${navHeight}px`,
+        selectors: {
+          '&:hover': {
+            backgroundColor: palette.neutralLighterAlt
+          },
+          '$compositeLink:hover &': {
+            backgroundColor: palette.neutralLighterAlt
+          }
+        }
+      },
+      isGroup && {
+        height: navHeight
+      },
+      isLink && {
+        height: navHeight - 2
+      }
+    ],
+    chevronIcon: {
+      height: navHeight,
+      lineHeight: `${navHeight}px`
+    }
+  };
+};
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
@@ -1,6 +1,6 @@
 import { INavStyleProps, INavStyles } from './Nav.types';
 import { IButtonStyles } from '../../Button';
-import { AnimationClassNames, getFocusStyle, ZIndexes, getGlobalClassNames, HighContrastSelector } from '../../Styling';
+import { AnimationClassNames, getFocusStyle, ZIndexes, getGlobalClassNames, HighContrastSelector, FontWeights } from '../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-Nav',
@@ -22,8 +22,7 @@ export const buttonStyles: IButtonStyles = {
   label: {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    lineHeight: '36px'
+    overflow: 'hidden'
   }
 };
 
@@ -38,7 +37,7 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
     isSelected,
     isDisabled,
     isButtonEntry,
-    navHeight = 36,
+    navHeight = 44,
     position,
     leftPadding = 20,
     leftPaddingExpanded = 28,
@@ -81,8 +80,7 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
       {
         display: 'block',
         position: 'relative',
-        color: semanticColors.bodyText,
-        backgroundColor: semanticColors.bodyBackground
+        color: semanticColors.bodyText
       },
       isExpanded && 'is-expanded',
       isSelected && 'is-selected',
@@ -97,7 +95,7 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
       {
         display: 'block',
         position: 'relative',
-        height: `${navHeight}px`,
+        height: navHeight,
         width: '100%',
         lineHeight: `${navHeight}px`,
         textDecoration: 'none',
@@ -122,14 +120,15 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
       !isDisabled && {
         selectors: {
           '.ms-Nav-compositeLink:hover &': {
-            backgroundColor: palette.neutralLighterAlt,
+            backgroundColor: semanticColors.bodyBackgroundHovered,
             color: semanticColors.bodyText
           }
         }
       },
       isSelected && {
-        color: palette.themePrimary,
-        backgroundColor: palette.neutralLighter,
+        color: semanticColors.bodyTextChecked,
+        fontWeight: FontWeights.semibold, // todo: get from theme
+        backgroundColor: semanticColors.bodyBackgroundChecked,
         selectors: {
           '&:after': {
             borderLeft: `2px solid ${palette.themePrimary}`,
@@ -173,24 +172,24 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
           },
           '&:hover': {
             color: semanticColors.bodyText,
-            backgroundColor: palette.neutralLighterAlt
+            backgroundColor: semanticColors.bodyBackgroundHovered
           },
           [`.${classNames.compositeLink}:hover &`]: {
             color: semanticColors.bodyText,
-            backgroundColor: palette.neutralLighterAlt
+            backgroundColor: semanticColors.bodyBackgroundHovered
           }
         }
       },
       isGroup && {
         fontSize: fonts.large.fontSize,
         width: '100%',
-        height: `${navHeight}px`,
+        height: navHeight,
         borderBottom: `1px solid ${semanticColors.bodyDivider}`
       },
       isLink && {
         display: 'block',
-        width: `${leftPaddingExpanded - 2}px`,
-        height: `${navHeight - 2}px`,
+        width: leftPaddingExpanded - 2,
+        height: navHeight - 2,
         position: 'absolute',
         top: '1px',
         left: `${position}px`,
@@ -220,7 +219,7 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
       {
         position: 'absolute',
         left: '8px',
-        height: `${navHeight}px`,
+        height: navHeight,
         lineHeight: `${navHeight}px`,
         fontSize: fonts.small.fontSize,
         transition: 'transform .1s linear'
@@ -242,7 +241,8 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
       classNames.navItems,
       {
         listStyleType: 'none',
-        padding: 0
+        padding: 0,
+        margin: 0 // remove default <UL> styles
       }
     ],
     group: [classNames.group, isExpanded && 'is-expanded'],

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
@@ -50,6 +50,10 @@ exports[`Nav renders Nav correctly 1`] = `
               ms-Nav-navItems
               {
                 list-style-type: none;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
                 padding-bottom: 0px;
                 padding-left: 0px;
                 padding-right: 0px;
@@ -72,7 +76,6 @@ exports[`Nav renders Nav correctly 1`] = `
               className=
                   ms-Nav-compositeLink
                   {
-                    background-color: #ffffff;
                     color: #323130;
                     display: block;
                     position: relative;
@@ -98,8 +101,8 @@ exports[`Nav renders Nav correctly 1`] = `
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 14px;
                       font-weight: 400;
-                      height: 36px;
-                      line-height: 36px;
+                      height: 44px;
+                      line-height: 44px;
                       outline: transparent;
                       overflow: hidden;
                       padding-bottom: 0;
@@ -165,7 +168,7 @@ exports[`Nav renders Nav correctly 1`] = `
                       border-color: WindowText;
                     }
                     .ms-Nav-compositeLink:hover & {
-                      background-color: #faf9f8;
+                      background-color: #f3f2f1;
                       color: #323130;
                     }
                 data-is-focusable={true}