fix(DataTable): address spacing and alignment issues

[emyarod]

Closes #6184

This PR addresses several spacing and alignment issues in the data table:

• Expansion column style rules should be consistent in all table variants
• selection (checkbox) cells are now correctly aligned and spaced
• Changing the size no longer breaks cell height for expansion cells and selection (checkbox) cells
• radio button selection cells are now aligned and sized according to spec
• some documentation-only changes to correct the appearance of expanded row content

Testing / Reviewing

Confirm all table sizes and variants appear correct

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 0763bab

https://deploy-preview-6197--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 0763bab

https://deploy-preview-6197--carbon-components-react.netlify.app

[laurenmrice]

with boolean column and with overlfow menu stories:
The column header needs to be the same size as the rows per size prop change.
Tall: 64px/4rem
Default: 48px/3rem
Short: 32px/2rem
Compact: 24px/1.5rem

Example of what is happening:

Expandable row stories:
-Can you bring the chevron icons down a pixel for stories that have expansion? They seem too high.
-When expanded, there is a line that is flashing next to the expansion rule divider. This is only happening in Firefox but I don’t know if it is possible to get it to stop doing that.

Radio button story:
The radio buttons in each row need to come down a pixel. They look too high.

[laurenmrice]

Here is a data table spec for all sizes with padding specified:

[emyarod]

the row height issues for those 2 examples in particular are because of the sizes of the checkbox and overflow menu trigger button. unless it's alright to scale those down in size, the rows need to expand a bit to allow those elements to fit

[laurenmrice]

@emyarod Why do the icons require extra space which would make the rows larger? Is it the states applied to those icons that is causing the issue?

This is an example of our original spec of the compact and short data table when states are applied. The icons are smaller than the rows.

Compact:

Short:

[emyarod]

for the overflow menu, it looks like it's taken directly from the OverflowMenu component which has a 32x32 trigger button, but if it's fine to reduce the height then I'll add rules for that

for the checkbox, the component is 24px tall but the padding on every table cell expands the row height. I do have a solution in mind but it might be a little hacky

but since neither of these are regressions I can tackle them separately (my original ticket was for text alignment) but if you think it should be rolled together I can do that too

[laurenmrice]

• “with batch actions”, “with overflow menu” and “with selection” stories:
  -The first checkbox in the column header is too low for the default size.
  

---

• “with batch expansion”, “with dynamic content” and “with expansion” stories:
  -The chevrons are too high for all sizes. Need to come down 1px.
  

---

• “with radio button selection” story:
  -The radio button is too high in each row for the tall size.
  

[laurenmrice]

Approving because the last changes about icon control alignments have been fixed. We will tackle row and header heights for the overflow icon and checkbox in another pr. 👍🏻