fix(DataTable): expand + select padding #8656
Conversation
|
Deploy preview for carbon-elements ready! Built with commit 0211ab4 |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 0211ab4 https://deploy-preview-8656--carbon-components-react.netlify.app |
There was a problem hiding this comment.
The spacing looks perfect now!
Just wondering if can we update the focus box height for the expansion chevron to be 32px tall for size small and up? It feels weird to tab through the tall chevron focus to the small checkbox focus. I know checkbox focus is coming from the component probably but it would be nice for visual consistency in tabbing if those focuses were the same. Also let me know if i should just open a new issue for this.
|
@aagonzales updated 👍🏽 |
There was a problem hiding this comment.
Does the checkbox need more padding-right, or the text more padding-left? The checkbox doesn't look centered between the expansion chevron and the text like it does in the spec from the issue
|
Oh yeah good catch @tay1orjones looks like its 4px off. I think just add those 4px to padding-right of checkbox? Checkbox padding is alway hard because the checkbox asset we use in code is different than the asset (svg) we use in design files. Top row code, bottom row design spec
|
|
@tw15egan @tay1orjones @aagonzales updated! I added a knob to the Development > example story so you can test the expansion + select spacing/focus in different sizes. |
tw15egan
added
status: ready to merge 🎉
and removed
status: one more review 👀
status: ready for review 👀
status: visual review 🔍
labels
Closes #8472
Testing / Reviewing
Make sure the expandable + select example has updated padding:
- expand button should be 32px wide now (with an additional 8px left padding in the parent cell)
- selectable cell should also be 32px wide
- the table cell following the select should have 8px left padding now
- select and expand button focus should now match sizes