Align calculated column widths with cell padding in DetailsList

[ThomasMichon]

Overview

This change fixes a regression in the alignment of cell padding in DetailsList with the calculated column widths. Specifically, the calculation was not providing enough room for the larger cell padding values, resulting in icon columns experiencing overflow and the whole row being miscalculated.

Details

Added a rowHorizontalWidth and isPaddedMargin to the props and style props of DetailsRow, DetailsHeader, and DetailsRow fields, optional, but provided overall by DetailsList. These are fed into the getStyles calculations, ensuring that everything aligns, and that the values may be overridden if desired.

Changed the paddingLeft styles of cells to be rowHorizontalPadding instead of 12px. This means the left-padding goes from 12px to 8px, bu now there are no more visual bugs.

Microsoft Reviewers: Open in CodeFlow

[cliffkoh]

Given that Aditi is out, assigning @dzearing and @kenotron to review this change.

[kenotron]

npm run update-snapshots

[kenotron]

Not too familiar with this bit here, but since we now pass these in as props, should we then use props.rowHorizontalPadding here?

[Vitalius1]

@kenotron In DetailsList.base.tsx they are coming from simply importing them from the DetailsRow.styles and not passed by props)))

[Vitalius1]

@ThomasMichon FYI: the 12px padding left you are changing originated from this PR 4857. Make sure you are not causing any visual bugs in that area instead.

[ThomasMichon]

@Vitalius1 It would appear that PR #4857 likely caused the visual bugs, by creating this misalignment in the first place. We can have the padding be 12px or 8px, but not both at once!

[Vitalius1]

@ThomasMichon Even though you've consolidated the source of this 2 constants it still feels like we have other ones scattered across all files. In the future would be a good idea to have a file called something like StyleConstants.ts at the root of the DetailsList folder exporting all of them from one place.

[kenotron]

LGTM

[ThomasMichon]

I updated the left padding to 12px to be consistent with intent, while leaving the right padding as 8px. I consolidated into a cellStyleProps with a default value set right now in DetailsRow.styles. I don't want to add a new bundle file for the moment to avoid causing rattle as we propagate the fix.

[kenotron]

The screener's detailslist change seemed to have made it wider... not sure why...

[ThomasMichon]

Hm. The column headers being wider is intended, but the GroupedList misalignment is bad. Investigating.

[ThomasMichon]

Hey @aditima, I need your sign-off for this, I guess! Also, who approves Screener updates? You'll notice the current versions look better!

[cliffkoh]

@betrue-final-final approves screener updates :)
@aditima is OOF and you're normally her backup but since you created the PR, it would need to be @dzearing and @kenotron.