Fluentui: semantic text colors do not affect Nav text

[karanbirsingh]

I'm having trouble getting a NavLink to use different text theme colors:

Environment Information

• __Package version(s)__: 6.132.0
• __Browser and OS versions__: Win10, Microsoft Edge 44.17763.1.0

Please provide a reproduction of the bug in a codepen:

codepen

Actual behavior:

The text is not white.

Expected behavior:

I'm hoping one of the semantic colors can be used to set the color to be white.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) Normal

[natalieethell]

Hey @karanbirsingh thanks for providing a CodePen! Unlike a composite link, the text in a normal Nav link doesn't get its color from a semantic color.

Here's the styling for a composite link:
https://github.com/OfficeDev/office-ui-fabric-react/blob/d388ff7cb8b3e51aa79ee2fc3010f2053f0ee94f/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts#L85-L94

As you can see, it uses semanticColors.bodyText.

Here's the styling for a normal link:
https://github.com/OfficeDev/office-ui-fabric-react/blob/d388ff7cb8b3e51aa79ee2fc3010f2053f0ee94f/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts#L76-L84

It doesn't use any semantic colors for its neutral state (it does use palette and semantic colors for focus and selection).

One way you can target this text is by passing a style object into the Nav styles prop, like in this CodePen.

styles={{linkText: {color: 'white'}}}

I do wonder, though, why we don't use a semantic color to color a normal Nav link. It seems a little inconsistent. I don't think adding it would change too much! I'll look into it.

[natalieethell]

So looking into this a little more, and I found that the link text actually gets its color from theme.palette.neutralPrimary. The defaults for theme.palette.neutralPrimary and theme.semanticColors.bodyText are actually the same (#333333). I'll speak with a designer to see if it makes sense to add color: semanticColors.bodyText to the link styling.

[karanbirsingh]

Thanks @natalieethell for the help! To summarize my understanding then, semantic slots should be used wherever possible, but should be thought of as scoped changes rather than a full replacement for the underlying palette colors - e.g. a fully-styled theme will most likely have defined palette colors as well as semantic colors where applicable. Is that a fair way to think about it?

[natalieethell]

@karanbirsingh no problem! Yes, I think you have the right idea. We're trying to move towards semantic colors wherever possible, but still do use palette colors in certain scenarios. @phkuo @mikewheaton correct me if I'm wrong.

[phkuo]

@karanbirsingh A theme from the styling package will ALWAYS have all palette and all semantic colors defined. When you call loadTheme with a IPartialTheme, it gets fleshed out into a fully defined ITheme before being exposed to everything else on the page.

But yes, we're still in the process of moving things over to use semantic slots in our components, thanks for the catch here!

[msft-github-bot]

:tada:This issue was addressed in #7902, which has now been successfully released as [email protected].:tada:

Handy links:

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