SPFx 1.14 BETA - Feedback Collected

[StfBauer]

Confusing template / Framework selection

From a generator developer experience this makes sense - but not from a developer experience.

• No Framework
• React

Are two variants of the web part.

Minimal would assume this is another Framework!?! A better option would be to ask for Sample content via Yes / No afterwards.
Also, what should I choose if I like to have Minimal and HTML or Minimal and ReactJS?

Is Minimal using ReactJS on NoFramework.

[StfBauer]

Deprecated extension

Please remove the deprecated Chrome Extension configuration from the generated project. It is deprecated.

[andrewconnell]

Agreed... see #7558

[StfBauer]

SASS upgrade needed

SASS issue in web part currently it still used: @import from SASS should not be used anymore looking in the future.

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

What is should be for the future the link should go like this:

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

With use it creates the following error message:

The error message is because the package is not made to be used in newer versions of SASS. It is also based on the very very old Office UI Fabric Core implementation.

In order to make this work in future Offfice UI Fabric Core needs updated:

I guess this is unlikely so it means that also sp-office-ui-fabric-core is dead and needs an upgrade.

[StfBauer]

There is no Dark Theme in SharePoint or Fluent UI

There is technically no dark theme in SharePoint just an inverted one.

This is a defined dark theme in the theme generator, which also means that it is not inverted but defined as a dark theme.

The only thing that matters for inverted is that the primary colour and background colour will be swapped.

I can define a light theme and make it dark by setting it isInverted to true - Which gives a dark theme
In the same way, I can define a dark theme and setting it to isInverted to true - Which gives a light theme

isInverted is correct - isDarkTheme is wrong.

[StfBauer]

Semantic color slots only:

There are more useful than semantic color slots because these might change in future and there is also the possibility that the meaning and naming of these slots change. A safer approach is to use color palettes. These are more reliant even for updates in the future.

These remain stable:

These might change in future:

For the future, it would also be good to have a comment in there like for 'all semantic colour slots look at the theme generator'.

Other import color slots:

[StfBauer]

Why selective CSS Variable and only onThemeChanged?

No that the theme support got abstracted away, I do not understand why onThemeChanged is still there? It is good to maybe react to theme changes but why do I have to reset selectively some CSS Variables.

Developer assumption

SPFx change changed the give CSS Variables on their own and in 90% of the cases, I don't have to do anything. Setting just partially some variable Do not make sense in this case.

What happens if the theme changes on a Full Canvas Page?
Is this already fixed and returns the proper theme now?
As I checked this onThemeChanged sets the CSS Variables on the web part event without changing the theme.

🧞‍♀️Wish

There should be the complete Office UI Fabric theme slots available, not just a view, Register all CSS properties is no performance impact and also do not matter if they are registered before the web part is rendered or after.

CSS Variables will be automatically applied to the code inside the web part.

In future, the CSS Variables should be available in the section of the page or on the body. Since CSS Variables are scoped to the HTML Element only they can be flexible overwritten.

Happy to help on that. ;)

[andrewconnell]

Can't figure out how to reply to the initial feedback for the template picker above...

Confusing template / Framework selection

100% agree with @StfBauer ... the three selection options are confusing. Seems there are 4 possible permutations of project templates:

1. no JS - no theme & no default content
2. no JS - default theme & default content
3. React - no theme & no default content
4. React - default theme & default content

But from the above list, the provided options don't support option 3 above.

My recommendation... change what's currently presented:

• Minimal 👉 {no change}
  • minimal means I don't want anything... no theme, no web framework, etc... just a working component
• No JavaScript framework 👉 No web framework (with theme support)
• ReactJS 👉 ReactJS (with theme support)

Ideally, there's one more template added:

• ReactJS 👉 ReactJS (without theme support)

Furthermore, the above reflects the following: we should move away from "JavaScript Framework" in the terminology. That's not what we're talking about (proof). React != JavaScript framework... it's a JavaScript library for building UI OR it's a web framework... it's not a JavaScript Framework. If we're changing things, then why not take advantage of the opportunity to get it right this time.

[sparkitect]

I'd be ok with two separate questions:

1. Web Framework: None | ReactJS
2. Theme support? Yes | No