Applying an undo of the recent Nav changes until we sort out the correct fix

.pullapprove.yml

@@ -13,5 +13,6 @@ reviewers:
   - cliffkoh
   - aditima
   - yiminwu
+  - antonlabunets
   name: pullapprove
   required: 1

src/components/Nav/Nav.Props.ts

@@ -21,16 +21,6 @@ export interface INavProps {
    * Indicates whether the navigation component renders on top of other content in the UI
    */
   isOnTop?: boolean;
-
-  /**
-   * (Optional) The alt text for the expanded state
-   **/
-  expandedStateText?: string;
-
-  /**
-   * (Optional) The alt text for the collapsed state text
-   **/
-  collapsedStateText?: string;
 }
 
 export interface INavLinkGroup {

src/components/Nav/Nav.scss

@@ -39,52 +39,25 @@
   transition: transform .1s linear;
 }
 
-.ms-Nav-links {
-  display: block;
-  position: relative;
-
-  .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
-    display: block;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    top: 0;
-    @include left(0);
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-
-    .ms-Nav-chevron {
-      position: relative;
-    }
-
-    &:hover {
-      background: transparent;
-      color: $ms-color-themePrimary;
-    }
-  }
-
-  &.is-expanded {
-    .ms-Nav-chevron {
-      transform: rotate(-180deg);
-    }
-  }
+.ms-Nav-IconLink {
+  @include margin-right(4px);
 }
 
-.ms-Nav-chevronButton {
+.ms-Nav-groupButton {
   display: block;
+  width: 100%;
+  height: 40px;
+
   font-family: $ms-font-family-regular;
   font-size: $ms-font-size-s;
 
   @include text-align(left);
   line-height: 40px;
   margin: 5px 0;
-  padding-top: 0px;
-  @include padding-right(40px);
-  padding-bottom: 0px;
-  @include padding-left(40px);
+  padding: 0 40px;
   background: none;
   border: none;
+  border-bottom: 1px solid $dividerColor;
   text-transform: uppercase;
   cursor: pointer;
 
@@ -99,15 +72,9 @@
     color: $unselectedHoverForegroundColor;
     background: $unselectedHoverBackgroundColor;
   }
-
-  &.ms-Nav-chevronButton--group {
-    width: 100%;
-    height: 40px;
-    border-bottom: 1px solid $dividerColor;
-  }
 }
 
-.ms-Nav-chevron.ms-Icon {
+.ms-Nav-groupChevron.ms-Icon {
   position: absolute;
   @include left(15px);
   height: 40px;
@@ -116,25 +83,22 @@
   transition: transform .1s linear;
 }
 
-.ms-Nav-group.is-expanded .ms-Nav-chevronButton--group .ms-Nav-chevron {
+.ms-Nav-group.is-expanded .ms-Nav-groupChevron {
   transform: rotate(-180deg);
 }
 
-.ms-Nav-linkText {
-  vertical-align: middle;
-}
-
 .ms-Nav-link {
   display: block;
   position: relative;
-  padding-top: 10px;
-  @include padding-right(10px);
-  padding-bottom: 10px;
-  @include padding-left(40px);
+  height: 40px;
+  line-height: 40px;
+  text-decoration: none;
+  padding: 0 40px;
   cursor: pointer;
-  overflow: hidden;
-  word-wrap: break-word;
+  text-overflow: ellipsis;
   text-decoration: none;
+  white-space: nowrap;
+  overflow-x: hidden;
 
   color: $unselectedForegroundColor;
   background: $unselectedBackgroundColor;
@@ -160,17 +124,13 @@
       content: '';
       position: absolute;
       top: 0;
-      @include right(0);
+      right: 0;
       bottom: 0;
-      @include left(0);
+      left: 0;
     }
   }
 }
 
-.ms-Nav-chevronButton,
-.ms-Nav-chevronButton--group,
-.ms-Nav-chevronButton--link,
-.ms-Nav-link {
+.ms-Nav-groupButton, .ms-Nav-link {
   @include focus-border();
 }
-

src/components/Nav/Nav.tsx

@@ -43,49 +43,31 @@ export class Nav extends React.Component<INavProps, INavState> {
     );
   }
 
-  private _renderAnchorLink(link: INavLink): React.ReactElement<{}> {
-    return (<a className={'ms-Nav-link' + (_isLinkSelected(link) ? ' is-selected' : '')}
-              href={ link.url || 'javascript:' }
-              onClick={ this.props.onLinkClick }
-              title={ link.name }
-            >
-              { this.props.onRenderLink(link) }
-          </a>);
-  }
-
-  private _renderCompositeLink(link: INavLink, linkIndex: number): React.ReactElement<{}> {
-    return (
-      <div key={ linkIndex } className={ 'ms-Nav-links' + (link.isExpanded ? ' is-expanded' : ' is-collapsed') }>
-          <button
-              className='ms-Nav-chevronButton ms-Nav-chevronButton--link'
-              onClick={ this._onLinkExpandClicked.bind(this, link) }
-              title={ (link.isExpanded ? this.props.expandedStateText : this.props.collapsedStateText) }
-          >
-            <i className='ms-Nav-chevron ms-Icon ms-Icon--chevronDown'></i>
-          </button>
-          { this._renderAnchorLink(link) }
-      </div>
-     );
-  }
-
-  private _renderLink(link: INavLink, linkIndex: number, level: number): React.ReactElement<{}> {
+  private _renderLink(link: INavLink, linkIndex: number): React.ReactElement<{}> {
     return (
       <li key={ linkIndex }>
-         {(level === 0 && link.links && link.links.length > 0 ?
-            this._renderCompositeLink(link, linkIndex)  :  this._renderAnchorLink(link)
-         )}
-          { (link.isExpanded ? this._renderLinks(link.links, ++level) : null) }
-      </li>
+        <a
+          className={'ms-Nav-link' + (_isLinkSelected(link) ? ' is-selected' : '')}
+          href={ link.url || 'javascript:' }
+          onClick={ this.props.onLinkClick }
+          title={ link.name }
+        >
+          { (link.iconClassName ?
+          <i className={'ms-Icon ms-Nav-IconLink ' + link.iconClassName}></i>
+          : '') }
+         { this.props.onRenderLink(link)}
+        </a> { this._renderLinks(link.links) }
+    </li>
     );
   }
 
-  private _renderLinks(links: INavLink[], level: number): React.ReactElement<{}> {
+  private _renderLinks(links: INavLink[]): React.ReactElement<{}> {
     if (!links || !links.length) {
       return null;
     }
 
     const linkElements: React.ReactElement<{}>[] = links.map(
-      (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex, level));
+      (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex));
 
     return (
       <ul>
@@ -98,19 +80,19 @@ export class Nav extends React.Component<INavProps, INavState> {
     const isGroupExpanded: boolean = this.state.isGroupExpanded[groupIndex] !== false;
 
     return (
-      <div key={ groupIndex } className={ 'ms-Nav-group' + (isGroupExpanded ? ' is-expanded' : ' is-collapsed') }>
+      <div key={ groupIndex } className={ 'ms-Nav-group' + (isGroupExpanded ? ' is-expanded' : '') }>
         { (group.name ?
         <button
-          className='ms-Nav-chevronButton ms-Nav-chevronButton--group'
+          className='ms-Nav-groupButton'
           onClick={ this._onGroupHeaderClicked.bind(this, groupIndex) }
         >
-          <i className='ms-Nav-chevron ms-Icon ms-Icon--chevronDown'></i>
+          <i className='ms-Nav-groupChevron ms-Icon ms-Icon--chevronDown'></i>
           { group.name }
         </button> : null)
         }
 
         <div className='ms-Nav-groupContent ms-u-slideDownIn20'>
-        { this._renderLinks(group.links, 0) }
+        { this._renderLinks(group.links) }
         </div>
       </div>
     );
@@ -125,14 +107,6 @@ export class Nav extends React.Component<INavProps, INavState> {
     ev.preventDefault();
     ev.stopPropagation();
   }
-
-  private _onLinkExpandClicked(link: INavLink, ev: React.MouseEvent): void {
-    link.isExpanded = !link.isExpanded;
-    this.forceUpdate();
-
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
 }
 
 // A tag used for resolving links.

src/demo/pages/NavPage/examples/Nav.Basic.Example.tsx

@@ -2,18 +2,13 @@ import * as React from 'react';
 import {
   Nav
 } from '../../../../index';
-import './Nav.Basic.Example.scss';
 
 export class NavBasicExample extends React.Component<any, any> {
   public render() {
     return (
-      <div className='ms-NavExample-LeftPane'>
-        <Nav
-          groups={ [ { name: 'LINK GROUP', links: [{ name: 'A link', url: 'http://example.com', links: [{name: 'A Child Link is a very long name', url: 'http://msn.com'} ], isExpanded: true}, { name: 'B link', url: 'http://example.com', links: [{name: 'B Child Link is a very long name', url: 'http://msn.com'} ], isExpanded: true}, {name: 'C Link no chid', url: 'http://msn.com'} ]}]}
-          expandedStateText={ 'expanded' }
-          collapsedStateText={ 'collapsed' }
-          />
-       </div>
+      <Nav
+        groups={ [ { name: 'LINK GROUP', links: [ { name: 'A link', url: 'http://example.com',iconClassName:'' }, {name: 'Edit', url: 'http://msn.com', iconClassName: 'ms-Icon--pencil'} ]}]}
+        />
     );
   }