ListView - Added ability to apply header styling #1700
+39
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's in this Pull Request?
(This is my 1st open source contribution and I'm still fresh at TS/JS... bear with me.)
I added the ability to apply custom styles to the header of a ListView via optional prop headerClassName.
Something I was not able to implement was the ability to modify the font styling of the header text (size, weight, etc), so I set the header min-height to 17px which seemed small enough to scrunch everything without clipping any text - I tried testing as many scenarios as I could. Theoretically, to modify the font styling, I think you could add another styling prop to ListView, and apply that prop to '.ms-DetailsHeader-cellTitle' in ListView.tsx... I can experiment with this at another time.
For my use case, although likely unconventional, I'm using a ListView in a tight spot on a page and need all the real estate being taken up by the default padding (padding-top of 16px) and line height (42px iirc).
Let me know if I'm, at all, doing this incorrectly (lol).