Adding background hover css class displays default theme

[PowerHauer]

Bug Report

• Package version(s): office-ui-fabric-react@2.31.0
• Browser and OS versions: All browsers (Tested on Edge, Chrome 59 and Firefox 54)

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: SPFx

Describe the issue:

I am developing a SPFx WebPart with theming in mind. I added an icon and gave it fabric ui classes for theming:

<i className="ms-Icon ms-Icon--ChevronRightSmall ms-fontColor-themePrimary ms-fontColor-white--hover ms-bgColor-themePrimary--hover" aria-hidden="true"></i>

The icon is displayed in the theme color. When the mouse hovers over the element, the icon is white and the background is colored blue (from the default theme).

Actual behavior:

The icon is displayed in the theme color. When the mouse hovers over the element, the icon is white and the background is colored blue (from the default theme).

Expected behavior:

The icon is displayed in the theme color. When the mouse hovers over the element, the icon is white and the background should be pink (from the current theme).

[micahgodbolt]

@mikewheaton this is a core issue, correct?

[mikewheaton]

While the colors Fabric Core are named theme, the CSS classes aren't tied into the theming system in Fabric React. When it comes to Fabric Core you can consider themePrimary to be bluePrimary. There's work underway for the components to be styled with Glamor, which would allow you to pass in an object to set the <Icon> component's text color to the primary theme color. I'm not sure when this will be available.

[PowerHauer]

I just tried to go along the descriptions on the website to Fabric UI. https://dev.office.com/fabric#/styles/colors

There it is described to achieve a different color (foreground, background or text) while hovering to use the classes with the suffix "--hover". My assumption was that this works with the native office 365 theming settings, since all non "--hover" classes work like in the example above. If the theme is pink, everything with "themePrimary" is pink and so on. This works even for all other theme dependent classes: "themePrimary", "themeDarker", "themeDark", ... Except for elements with the "--hover" classes, such as "ms-bgColor-themeXXX--hover".

So basically theming is supported, except for "--hover" classes, which use the default blue theme?

[mikewheaton]

Theming is supported in Fabric React through the Styling package (see documentation) but is not supported by the Fabric Core classes.

[erichdev]

Closing. Please reopen if you have additional questions