search

OfficeDev / microsoft-teams-ui-component-library

Component library enhanced experiences styled for use in Microsoft Teams custom applications.
MIT License
127 stars 30 forks source link

Dashboard #1

Closed akatrukhin closed 3 years ago

akatrukhin commented 3 years ago

Dashboard component: image

akatrukhin commented 3 years ago

Styling things in Fluent UI can be pretty difficult since there are at least 3 ways of doing it: using styles props, using variables props, and using global & local themes. My understanding of the best practices are these:

  • Where all instances of a Fluent UI component should change in an HVC, we should use local themes, e.g. buttons in the Toolbar need a font-weight of 400.
  • Where there are a few key components whose styles should change to different design system tokens, variables makes a lot of sense since Fluent UI provides access to siteVaribles there.
  • Where there are a few key components whose styles should change to specific values (usually spacing, position, display, pointer-events, etc), the styles prop usually makes the most sense.

It's probably worth double-checking at least the styles applied in the nested local theme here since that could accumulate technical debt.

I completely agree, I have the same point of view. Please correct me, if something I implemented not in an appropriate way.