question

ChristopheHumbert-7879 avatar image
1 Vote"
ChristopheHumbert-7879 asked ChristopheHumbert-7879 answered

Fluent UI Northstar theme intellisense in VS Code

For a Teams app, I am trying to use theme color schemes described here:
https://fluentsite.z22.web.core.windows.net/0.51.4/color-schemes

When I type theme.siteVariables in VS Code, I don't get any intellisense for colors:
70797-image.png

What am I missing here? Do I need to install additional modules, beyond @fluentui/react-northstar? Could you point me to instructions or examples on how to get intellisense for Fluent UI Northstar?


office-teams-app-dev
image.png (11.6 KiB)
· 10
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @ChristopheHumbert-7879, You need to use the Provider.Consumer to access the theme. For more details Please look at this example.


1 Vote 1 ·

Thanks for the reply. I added a Provider.Consumer to my code, but the issue is the same: intellisense only gives me fontSizes as choice.
71190-image.png


0 Votes 0 ·
image.png (22.8 KiB)
Mamatha-MSFT avatar image Mamatha-MSFT ChristopheHumbert-7879 ·

Please look at this sample code and let me know if the issue still persists.
71472-code.png


0 Votes 0 ·
code.png (31.3 KiB)
Show more comments
ChristopheHumbert-7879 avatar image
0 Votes"
ChristopheHumbert-7879 answered

After talking with the Fluent UI Northstar team, it appears that full intellisense is not yet available. I'll need to open an enhancement request on github.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Mamatha-MSFT avatar image
1 Vote"
Mamatha-MSFT answered ChristopheHumbert-7879 commented

Hi @ChristopheHumbert-7879, I am unable to repro the issue. It is working fine for me. 77858-image.png.
Please again try installing npm i @fluentui/react-northstar and let us know if the issue still persists.




image.png (62.2 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you @Mamatha-MSFT , I really appreciate your help and your patience. That's what I am looking for but it is not doing it for me with Northstar. Also, I wonder why you are not seeing fontSizes, which is the only one showing up for me. The only difference I can see is that you are using version 0.49.0 while I am using version 0.52.0.

0 Votes 0 ·

@Mamatha-MSFT someone from the Fluent UI team looked at your screenshot and gave the explanation: you are using a js extension (Tab.js) while it should be ts or tsx. So what you are getting is not Fluent UI intellisense, but just regular JavaScript object intellisense.

0 Votes 0 ·