Sp-dev-docs: SPFx 1.91, office-ui-fabric-react and sp-property-pane

[PooLP]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Hi,
I initialized a new webpart with the SPFx 1.91, and i remarked two problem in package.json :

Presence of "office-ui-fabric-react". Normaly just "sp-office-ui-fabric-core" is used on others version of SPFx, it's normal?

"sp-property-pane" isn't initialised and not used instead of "sp-webpart-base" obsolete property pane's controls.

Thanks.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[bcameron1231]

afaik, starting in v1.8.2, the SPFx solution uses rush-stack-compile-2.9 and Office UI Fabric React V6, which is why you see the office-ui-fabric-react in your package.json.

Also, the changes to the property pane also occurred during the 1.8 release. Property pane control code was moved to a new package and sp-webpart-base is deprecated in 1.8 and removed from 1.9. See release notes

[PooLP]

Thanks.

I thinks the SPFx 1.9.1 have a little error on the Hello World initialised by Yo, the import of the sass file is 'office-ui-fabric-react/dist/sass/References.scss', not 'sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'.

With 'office-ui-fabric-react/dist/sass/References.scss' the tokens for SP theme don't work. (ex : for $ms-color-themePrimary, it's always the default blue)

[bcameron1231]

Ah, now I see what you mean. I have confirmed the tokens aren't working.

This isn't an area of expertise for me, but it looks like the References sass file doesn't include the imports for the tokens. I have confirmed that the themes work if you do it without the tokens.

background-color: "[theme: themePrimary, default: #0078d7]";

I'm not sure whether you need the fabric core package for the theme... but again, not an expert here.

@StfBauer do you have any thoughts on this? Looks like a bug to me (unless there is something I don't know!), but figured I'd ask someone more knowledgeable :)

[PooLP]

Yes that's right. background-color: "[theme: themePrimary, default: #0078d7]" work, but References.scss don't include this SP token and others. I thinks it's not a bug just a forget. ^^

[andrewconnell]

Unclear... what's the repro?

[bcameron1231]

1. Create a new 1.9.1 Hello World Project
2. Use the hosted workbench in SharePoint
3. Change the theme in your SharePoint site, the web part background will not change even though it's using the defaulted css
   background-color: $ms-color-themePrimary;

This token worked previously when sp-office-ui-fabric-core was the default import, instead of ~office-ui-fabric-react/dist/sass/References.scss

Notes

1. Using themes without tokens like [theme: themePrimary, default: #0078d7] works
2. Including @import '~office-ui-fabric-react/dist/sass/themeOverrides.scss'; into HelloWorld.module.scss works (Seems to not be included in the default OUIFR scss module)

Expected Behavior
Given the default scss file with a SPFx project includes theme tokens such as $ms-color-themePrimary... the themes should work.

Should References.scss include the themeOverrides.scss or are we required to import it to use the token themes? If the latter, the default scss module with SPFx shouldn't include token themes such as $ms-color-themePrimary

[andrewconnell]

Confirmed... looks like problem is what you say, References.scss doesn't contain the theme override... but when you change your SCSS from this:

@import '~office-ui-fabric-react/dist/sass/References.scss';

to this...

@import '~office-ui-fabric-react/dist/sass/References.scss';
@import '~office-ui-fabric-react/dist/sass/themeOverrides.scss';

It works as expected...

[bcameron1231]

Great!

It would be nice if that import was included in the default scaffolding. As from a documentation perspective, we wouldn't have to update a lot of the docs around theming.

However, if that's not the route to be taken, I'd be willing to do a PR for the docs affected to include this guidance.

Thanks for all the help!

[andrewconnell]

Agreed... I've raised it internally... will see if they think it's something that should be (1) guidance & doc issue, (2) in the default project scaffolding or (3) in the references.scss file which I think would mean it would be the responsibility of the OUIFR folks since those are their packages.

I'm inclined to think it should be the last option, as it's not really SharePoint specific...

[StfBauer]

The correct file to make the theme override is:

@import '~office-ui-fabric-react/dist/sass/ThemingSass';

_reference.scss is just a partial file and shouldn't be used in your code. With this Reference, the theming worked for me.

Interesting this file contains the legacy palette of OUIF 5.0 and the new one that came with OUIF 6.0

[bcameron1231]

@StfBauer So based on that, would you say the default scaffolding is wrong as it's including the reference.scss by default?

[StfBauer]

@bcameron1231 Well, it seems to be wrong in case of Scaffolding of SPO projects. You have to keep in mind that for the old projects still, the previous version (built by the SPFx team) still needs to be included.

I did a quick check in the PnP/SPFx generator:

Onprem-SPFx/SPO (not React Projects) includes still the following link:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

SPO/React now includes the following which is wrong cause like mentioned before it should be ThemingSass - Which only contains the theme slots, animations and text styles.

@import '~office-ui-fabric-react/dist/sass/References.scss';

So for SPFx projects on SPO should only use 'ThemingSass' link and not the old one for all projects. Theme slot on Office 365 are universal in SASS even if the come directly out of the 'office-ui-fabric-react' package for React.

Hope this makes sense to you.

[PooLP]

@StfBauer : @import '~ office-ui-fabric-react / dist / sass / Theming Sass'; is not enough, it lacks variables for fonts or variables for responsive (ex: $ms-font-size-m / $ms-screen-max-md).

In this case, you must also add @import '~ office-ui-fabric-react / dist / sass / Fabric.scss'; but it is not a good method, this sends back full of warnings.

[StfBauer]

@PooLP You are right. I haven't checked for font styles and media queries. Last I don't use the media queries because the do not work for web parts but is a complete other story.

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/ThemingSass';

When you include the 'Fabric.scss' you end up on compile 254KB ‼️ Into each of your web part.

I think it is a multi-level issue. One is that we do not have any SASS / Theming variable version only anymore, similar to what we had in the 'sp-office-ui-fabric-core' package that you still get when you create an on-premises web part. This issue can be solved by just using an old version of that package.

Second, font-sizes has changed according to the Office UI Fabric 6 documentation nowadays. So the variables you mentioned are in there for legacy support reasons as it seems.

The third issue IMO we do not know when there is any change to the theming in SPO.

We currently don't have an index of all theme slots and theming variables available. (I created one in my SPFx-uifabric-themes package documentation.

[PooLP]

Yes, for now I'm using @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; while waiting for the problem to be solved.

The example I gave comes from a webpart that I'm updating, I still have old references for fonts.

I use UI Fabric Media Queries when I create an APP Pages or Teams Tab.

Thanks for your time and I hope that the problem will be solved in the next versions ;).

[PooLP]

For information, the problem appear always on 1.10. (For not close issue automatically. ^^)