Add disable state for the links in Nav component

[winperec]

Pull request checklist

• Addresses an existing issue: Fixes Disable items in <Nav /> component  #7835
• Include a change request file using $ npm run change

Description of changes

I've added disable state for the Nav links. Design is done using within existing concepts. This is how it looks like:

Also please review how it work in action:

Here we have example how disable works with

• Links that have children links 'Home' link is disabled but expandable
• Simple text links ('MSN' link)
• Links with Icon

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

[msftclas]

All CLA requirements met.

[size-auditor]

Bundle test	Size (minified)	Diff from master
Nav	187.051 kB	153 bytes

  Exceeds Tolerance       Exceeds Baseline       Below Baseline     1 kB = 1000 bytes

[natalieethell]

This is awesome @winperec! Thanks so much for tackling this work. :) Just one request, would you mind adding a visual regression test in Nav.stories.tsx?

It might look something like this:

.addStory(
    'Disabled',
    () => (
      <div style={{ width: '208px' }}>
        <Nav
          groups={[{ links: disabledLinks }]}
          expandedStateText={'expanded'}
          collapsedStateText={'collapsed'}
          selectedKey={'key3'}
        />
      </div>
    ),
    { rtl: true }
);

where disabledLinks is similar to what exists in the stories file already, with the appropriate disabled states.

@betrue-final-final FYI

[natalieethell]

Looks great! I left comments on some minor things.

[natalieethell]

Can we make this IconNames.News?

[natalieethell]

You're right about the deprecation of IconNames, good catch. We can change this back to 'News' like you had before.

Suggested change

	icon: IconNames.News,
	icon: 'News',

[winperec]

The following solution can work for OTB constant icons
https://gist.github.com/winperec/052cba5e7fcb563ab92ccc8ae2f0b1bb
but I think Office UI Fabric supports registering custom icons and in this case it will not work :)

[winperec]

@natalieethell Thanks for review! Looking forward to see it in next minor release and remove our local workarounds

[msft-github-bot]

🎉[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site