chore(): add className to root components in design system, disable t…

[quininez]

add className to root components

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project
• My change requires a change to the documentation
• My changes are less than 500 LOC
• I have updated the documentation accordingly
• I have read the README document
• I have read the CONTRIBUTING document
• I have added tests to cover my changes
• All new and existing tests passed
• My commit message follows Conventional Commit Guideline

[kenshyx]

I would keep this for better error tracing and also you don't create a new function each time the element gets rendered

[kenshyx]

also

Creating new anonymous functions (with either the function syntax or ES2015 arrow syntax) inside the render call stack works against pure component rendering. When doing an equality check between two lambdas, React will always consider them unequal values and force the component to re-render more often than necessary.

[kenshyx]

@SeverS @quininez ^

[quininez]

for passing props to a handler in a loop there is no solution that is more efficient, but only for that use case I could disable that rule on that line only, and keep it as a general rule true
discussion about it here:
palantir/tslint-react#96

[kenshyx]

yes, use disable next-line if there is no other option but keep it on as a general rule :D