Add disable state for the links in Nav component (#8120)

* Add disable state for links in Nav component * Add disable state for links in Nav component * Nav Links Disable State: Add story to Nav.stories * Make changes after review * Remove IconNames due to depracation
microsoft · Feb 28, 2019 · 7ddc1ee · 7ddc1ee
1 parent ecc7f0d
commit 7ddc1ee
Show file tree

Hide file tree

Showing 12 changed files with 1,245 additions and 20 deletions.
diff --git a/apps/vr-tests/src/stories/Nav.stories.tsx b/apps/vr-tests/src/stories/Nav.stories.tsx
@@ -4,7 +4,6 @@ import Screener from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Nav, INavLink } from 'office-ui-fabric-react/lib/Nav';
-import { IconNames } from 'office-ui-fabric-react/lib/Icons';
 
 const links: INavLink[] = [
   {
@@ -13,7 +12,7 @@ const links: INavLink[] = [
     links: [
       {
         name: 'Activity',
-        icon: IconNames.Upload,
+        icon: 'Upload',
         url: 'http://msn.com',
         key: 'key1'
       },
@@ -27,7 +26,7 @@ const links: INavLink[] = [
   },
   {
     name: 'Documents',
-    icon: IconNames.Accept,
+    icon: 'Accept',
     url: 'http://example.com',
     key: 'key3'
   },
@@ -49,11 +48,45 @@ const links: INavLink[] = [
   {
     name: 'Edit',
     url: 'http://cnn.com',
-    icon: IconNames.Edit,
+    icon: 'Edit',
     key: 'key8'
   }
 ];
 
+const disabledLinks: INavLink[] = [
+  {
+    name: 'Home',
+    url: 'http://example.com',
+    disabled: true,
+    links: [
+      {
+        name: 'Activity',
+        url: 'http://msn.com',
+        key: 'key1'
+      },
+      {
+        name: 'MSN',
+        url: 'http://msn.com',
+        key: 'key2',
+        disabled: true
+      }
+    ],
+    isExpanded: true
+  },
+  {
+    name: 'Documents',
+    url: 'http://example.com',
+    key: 'key3'
+  },
+  {
+    name: 'Unavailable Item',
+    url: 'http://cnn.com',
+    icon: 'News',
+    disabled: true,
+    key: 'key4'
+  }
+]
+
 storiesOf('Nav', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
@@ -83,4 +116,18 @@ storiesOf('Nav', module)
       </div>
     ),
     { rtl: true }
+  )
+  .addStory(
+    'Disabled',
+    () => (
+      <div style={{ width: '208px' }}>
+        <Nav
+          groups={[{ links: disabledLinks }]}
+          expandedStateText={'expanded'}
+          collapsedStateText={'collapsed'}
+          selectedKey={'key3'}
+        />
+      </div>
+    ),
+    { rtl: true }
   );
diff --git a/...on/changes/office-ui-fabric-react/issue-7835_Nav_Link_Disable_State_2019-02-26-15-16.json b/...on/changes/office-ui-fabric-react/issue-7835_Nav_Link_Disable_State_2019-02-26-15-16.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Nav: Add disable state for navigation links",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
@@ -8887,6 +8887,7 @@ interface INavLink {
   altText?: string;
   ariaLabel?: string;
   automationId?: string;
+  disabled?: boolean;
   // @deprecated
   engagementName?: string;
   forceAnchor?: boolean;
@@ -8956,6 +8957,7 @@ interface INavStyleProps {
   groups: INavLinkGroup[] | null;
   // (undocumented)
   isButtonEntry?: boolean;
+  isDisabled?: boolean;
   isExpanded?: boolean;
   isGroup?: boolean;
   isLink?: boolean;

diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
@@ -109,6 +109,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
     const classNames = getClassNames(styles!, {
       theme: theme!,
       isSelected: this._isLinkSelected(link),
+      isDisabled: link.disabled,
       isButtonEntry: link.onClick && !link.forceAnchor,
       leftPadding: _indentationSize * nestingLevel + _baseIndent,
       groups
@@ -127,6 +128,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
         title={link.title || link.name}
         target={link.target}
         rel={rel}
+        disabled={link.disabled}
         aria-label={link.ariaLabel}
       >
         {onRenderLink(link, this._onRenderLink)}
@@ -142,6 +144,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
       isExpanded: !!link.isExpanded,
       isSelected: this._isLinkSelected(link),
       isLink: true,
+      isDisabled: link.disabled,
       position: _indentationSize * nestingLevel + 1,
       groups
     });

diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.doc.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.doc.tsx
@@ -7,13 +7,16 @@ import { NavNestedExample } from './examples/Nav.Nested.Example';
 import { NavByKeysExample } from './examples/Nav.ByKeys.Example';
 import { NavStatus } from './Nav.checklist';
 import { NavCustomGroupHeadersExample } from 'office-ui-fabric-react/lib/components/Nav/examples/Nav.CustomGroupHeaders.Example';
+import { NavDisabledItemsExample } from './examples/Nav.DisabledItems.Example';
 
 const NavBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx') as string;
 const NavFabricDemoAppExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx') as string;
 const NavNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx') as string;
 const NavByKeysExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx') as string;
 const NavCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.CustomGroupHeaders.Example.tsx') as string;
 
+const NavDisabledItemsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.DisabledItems.Example.tsx') as string;
+
 export const NavPageProps: IDocPageProps = {
   title: 'Nav',
   componentName: 'Nav',
@@ -40,6 +43,11 @@ export const NavPageProps: IDocPageProps = {
       code: NavCustomGroupHeadersExampleCode,
       view: <NavCustomGroupHeadersExample />
     },
+    {
+      title: 'Nav bar with disabled items',
+      code: NavDisabledItemsExampleCode,
+      view: <NavDisabledItemsExample />
+    },
     {
       title: 'Nav bar of links each with unique keys and empty urls',
       code: NavByKeysExampleCode,

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
@@ -44,6 +44,7 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
     isGroup,
     isLink,
     isSelected,
+    isDisabled,
     isButtonEntry,
     navHeight = 36,
     position,
@@ -92,7 +93,11 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
         backgroundColor: semanticColors.bodyBackground
       },
       isExpanded && 'is-expanded',
-      isSelected && 'is-selected'
+      isSelected && 'is-selected',
+      isDisabled && 'is-disabled',
+      isDisabled && {
+        color: semanticColors.disabledText
+      }
     ],
     link: [
       classNames.link,
@@ -111,12 +116,14 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
         paddingLeft: leftPadding,
         paddingRight: rightPadding,
         color: semanticColors.bodyText,
-        selectors: {
-          '.ms-Nav-compositeLink:hover &': {
-            backgroundColor: palette.neutralLighterAlt,
-            color: semanticColors.bodyText
-          }
-        }
+        selectors: !isDisabled
+          ? {
+              '.ms-Nav-compositeLink:hover &': {
+                backgroundColor: palette.neutralLighterAlt,
+                color: semanticColors.bodyText
+              }
+            }
+          : {}
       },
       isSelected && {
         color: palette.themePrimary,
@@ -134,6 +141,9 @@ export const getStyles = (props: INavStyleProps): INavStyles => {
           }
         }
       },
+      isDisabled && {
+        color: semanticColors.disabledText
+      },
       isButtonEntry && {
         color: palette.themePrimary
       }

diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx
@@ -49,6 +49,30 @@ describe('Nav', () => {
     expect(handler.mock.calls.length).toBe(1);
   });
 
+  it('do not call onClick() on disabled link', () => {
+    const handler = jest.fn();
+    const nav = mount<NavBase>(
+      <NavBase
+        groups={[
+          {
+            links: [
+              {
+                name: 'foo',
+                url: 'http://example.com',
+                onClick: handler,
+                disabled: true
+              }
+            ]
+          }
+        ]}
+      />
+    );
+
+    const link = nav.find('button.ms-Button');
+    link.simulate('click');
+    expect(handler.mock.calls.length).toBe(0);
+  });
+
   it('sets ARIA label on the nav element', () => {
     const label = 'The navigation label';
     const nav = mount<NavBase>(<Nav ariaLabel={label} groups={[]} />);

diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
@@ -216,6 +216,11 @@ export interface INavLink {
    */
   target?: string;
 
+  /**
+   * Whether or not the link is disabled.
+   */
+  disabled?: boolean;
+
   /**
    * @deprecated Not used in the Nav control or anywhere else in office-ui-fabric-react.
    */
@@ -255,6 +260,11 @@ export interface INavStyleProps {
    */
   isLink?: boolean;
 
+  /**
+   * is element disabled
+   */
+  isDisabled?: boolean;
+
   /**
    * is element a group boolean
    */

diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx
@@ -33,15 +33,32 @@ export class NavBasicExample extends React.Component<any, any> {
                   ],
                   isExpanded: true
                 },
-                { name: 'Documents', url: 'http://example.com', key: 'key3', isExpanded: true },
-                { name: 'Pages', url: 'http://msn.com', key: 'key4' },
-                { name: 'Notebook', url: 'http://msn.com', key: 'key5' },
-                { name: 'Communication and Media', url: 'http://msn.com', key: 'key6' },
+                {
+                  name: 'Documents',
+                  url: 'http://example.com',
+                  key: 'key3',
+                  isExpanded: true
+                },
+                {
+                  name: 'Pages',
+                  url: 'http://msn.com',
+                  key: 'key4'
+                },
+                {
+                  name: 'Notebook',
+                  url: 'http://msn.com',
+                  key: 'key5'
+                },
+                {
+                  name: 'Communication and Media',
+                  url: 'http://msn.com',
+                  key: 'key6'
+                },
                 {
                   name: 'News',
                   url: 'http://cnn.com',
                   icon: 'News',
-                  key: 'key8'
+                  key: 'key7'
                 }
               ]
             }

diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.DisabledItems.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.DisabledItems.Example.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Nav, INavLink } from 'office-ui-fabric-react/lib/Nav';
+import './Nav.Basic.Example.scss';
+
+export class NavDisabledItemsExample extends React.Component<any, any> {
+  public onLinkClick = (ev: React.MouseEvent<HTMLElement>, item?: INavLink) => {
+    if (item && item.name === 'News') {
+      alert('News link clicked');
+    }
+  };
+
+  public render(): JSX.Element {
+    return (
+      <div className="ms-NavExample-LeftPane">
+        <Nav
+          groups={[
+            {
+              links: [
+                {
+                  name: 'Home',
+                  url: 'http://example.com',
+                  disabled: true,
+                  links: [
+                    {
+                      name: 'Activity',
+                      url: 'http://msn.com',
+                      key: 'key1'
+                    },
+                    {
+                      name: 'MSN',
+                      url: 'http://msn.com',
+                      key: 'key2',
+                      disabled: true,
+                      altText: 'The link is temporary disabled'
+                    }
+                  ],
+                  isExpanded: true
+                },
+                {
+                  name: 'Documents',
+                  url: 'http://example.com',
+                  key: 'key3'
+                },
+                {
+                  name: 'Unavailable Item',
+                  url: 'http://cnn.com',
+                  icon: 'News',
+                  disabled: true,
+                  key: 'key4'
+                }
+              ]
+            }
+          ]}
+          onLinkClick={this.onLinkClick}
+          expandedStateText={'expanded'}
+          collapsedStateText={'collapsed'}
+          selectedKey={'key3'}
+          expandButtonAriaLabel={'Expand or collapse'}
+        />
+      </div>
+    );
+  }
+}