batches: refactor `DiffStat` API to support independent composition of stats + squares
Created by: courier-new
Pulled out a minor refactor from #22372 of the DiffStat
component API that made it easier to leverage this component on the new repo batch changes page, in order to make it easier for reviewing.
This component has proven very versatile in a bunch of different places, so this PR attempts to elevate it to the NEXT LEVEL™.
This PR:
- Separates
DiffStat
into two pieces:DiffStat
(the actual stats numbers) andDiffStatSquares
(the visual representation of the stats) - Removes CSS controlling the container's layout, padding, and margin from the
DiffStat
components themselves, leaving them up to the implementers - Removes the
separateLines
prop for the same reason, and to prevent combiningseparateLines: true
withexpandedCounts: false
into a form that wasn't technically supported - Adds
DiffStatStack
as a specific, commonly-used composition ofDiffStat
andDiffStatSquares
that produces the two-line stack we're most familiar with in the batch changes area: - Improves the stories for this set of components, including adding knobs!
This work inadvertently fixed two minor visual problems, as well.
Before | After |
---|---|
(squares kinda low) | (squares juuuussst right) |
At some point I saw the expanded counts diff stat wrap onto a second line when it was too long, which also was no good. I can't remember where I was when I saw that, and I can't seem to repro it now that I am trying to, but this PR prevents that from happening, now, too.
I don't know if we still use snapshot tests around here (I seem to remember some discussion of getting rid of them), but I updated those just in case.