---
title: Developer Pain points and questions
author: joschemd
date: 2/2/2021
---
# Developer Pain points and questions
## Add other comments / findings here.

This is just rough form as it is just a scratchpad for discussion and findings.

---
- Central location to documents that are specific around the engineering of the Converged Components. Clearly labeled so when investingating other documents with older or northstar Fabric/Fluent files, you can easily differentiate if the information is relevant or possibly outdated vs current.

- Default property/token values from Fluent, Colors (as pertain to usage i.e. default color, size etc.). This is in regards to intended use vs the more generic definition (Default font color/size/lineHeight vs PrimaryNeutral etc.)

- Best practices / examples for complex component layouts implementations where multiple props can jointly effect overall structure.
If one has multiple properties that can affect how a component renders, where/how is the best practice to implement? Multiple sub components, logic to turn on/off different styling.
There are many ways to solve this so some clearer guidance, places in code, examples from simple to complex will help pick the right method.

- Explanation on slots, how to implement/utilize. There is some but limited documentation on this and it is not a "common" web engineering nomenclature. This mechanic seems to be able to be better utilized with more background and understanding how someone can approach it.

- Examples/documentation on best practices using variants on styling, more clear explanation in regards of the association and relation between props / tokens / variants / state

- Best practices on applying/initializing variant states (where/how). This is guidance on how / when / where to invoke(set) a specific variant before rendering code.

- More in depth documentation regarding building using MakeVariantClasses.
What is the object model, properties / selectors supported / what functions and their parameters

What features are available with the style objects
What features are available with the variant objects

eg:

styles: {
    root: ({ terms, tokens }) => { }
    variants: (theme: Theme): DividerVariants => { }

Are there other function properties available? what do these parameter's structures look like?

- More documentation on supported features, object depth, naming conventions (example property_value). Focus on what is supported / allowed and how to use.

 GlobalClassNames.root,
        {
            
        },
        _variant:{
        
        },
        _variant/property_withvalue:{
        
        }
        ...Other?

- Best practices on when to/not useState, I have seen this being used to manipulate the variants, not just hold values or "pure" data state.

- A lifecycle flow diagram for the component creation process, this reference is valuable for debugging. Would be nice to see the flow diagram even display the main libraries *hooks* (ie mergeProps / mergeStyles / makeVariantClasses etc ). Quick documentation (or link) around what it's doing and specific points.

- A debug setting for launching a component in VSCode. Maybe we can add something to invoke debugging straight from VSCode to put breakpoints instead of diving/searching into Dev Tools react-tools copius amounts of files *OR* have some documentation to show where/how to find what you are working on quickly within Dev Tools.

- Documentation/Refences on creating tests for components, best practices, even a list of required tests(?), Examples regarding making component tests / running them for a component.

- Found that certain default CSS properties have to be duplicated in definition under Token ... some are already defined with ColorTokens/FontTokens. What/Where to find the total list of Tokens already defined?

- Best practices on how/where to inject logic within the component code to manipulate private properties/styling variants etc. There maybe multiple, so guidance would be great.

- ShortHandpros .. Deeper explanation .. It appears to be a pure javascript object describing a JSX component
- getslots.

- makeStyles --- use this implementation.