Skip to content

batches: refactor `DiffStat` API to support independent composition of stats + squares

Warren Gifford requested to merge kr/composable-diff-stat into main

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. 🙂 While we don't technically own this component, we're almost the sole users of it.

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) and DiffStatSquares (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 combining separateLines: true with expandedCounts: false into a form that wasn't technically supported
  • Adds DiffStatStack as a specific, commonly-used composition of DiffStat and DiffStatSquares that produces the two-line stack we're most familiar with in the batch changes area: Screen Shot 2021-07-08 at 3 11 44 PM
  • Improves the stories for this set of components, including adding knobs!

This work inadvertently fixed two minor visual problems, as well. 😅

Before After
image (squares kinda low) image (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.

Merge request reports

Loading