Fluentui: Text and Stack components don't apply theme when calling Customizations.applySettings

[up2pixy]

Environment Information

• Package version(s): 7.48.1 (but I believe the issue is valid on the latest version too)
• Browser and OS versions: N/A

Please provide a reproduction of the bug in a codepen:

https://codepen.io/up2pixy/pen/QWbvpax?editors=0010

Actual behavior:

When calling Customizations.applySettings, the Stack and Text don't change their styles like other components such as Link and Button. Seems like they are not wrapped with styled() HOC

Expected behavior:

When calling Customizations.applySettings, the Stack and Text component will listen to the event to update the styles with the updated theme.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes if we want them to be styled

Requested priority: Low

Products/sites affected: (if applicable) N/A

[aneeshack4]

Hi @up2pixy thanks for reaching out to us! I believe this is because the Text component's styles seem to be using slots through fonts and not directly as you can see in https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Text/Text.styles.ts.

If you go on our theme designer (aka.ms/themedesigner), you can see that it's possible to still apply theme to the text component - if you drag around the text colorpicker on the left, you can see that the text in the samples changes color. The way we achieved that is by setting it on styles of the Text component: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/apps/theming-designer/src/components/Samples/index.tsx#L174. Though I do see that this doesn't fit nicely with the Customizations.applySetting call - let me investigate further and get back to you.

[up2pixy]

I understand, but that means I need to trigger re-rendering of the component to have its style updated. If it's wrapped by the styled HOC, it will re-render automatically when calling Customizations.applySettings

[aneeshack4]

@up2pixy I think we found a fix in the PR above^^ - please check it out and feel free to give us feedback. As far as Stack goes, I spoke with the component owner - it's a container component so it's not really meant to be themed.

[up2pixy]

Super! Thank you for the fast turnaround. Look forward to checking this change in the new release.

[aneeshack4]

@up2pixy This will actually require a larger discussion about how the fonts (which are half baked into the theme) might need a major change to them - will get back to you

[up2pixy]

Ok... thank you @aneeshack4

[jacksonv1lle]

Hi there. Is there any update on this issue? I would like to be able to alter the font sizes/weights using a custom theme and Customizer.

[Ghosts]

Hi there. Is there any update on this issue? I would like to be able to alter the font sizes/weights using a custom theme and Customizer.

Also interested to see if this is something planned for implementation or if we should begin something custom to address font colors in <Text> elements with theme switching.

[jacksonv1lle]

I withdraw my comment above.. I see now that the functionality that I expect is possible
CodePen