fix: align checkbox when there is more than 1 line of text #1149
Conversation
|
Playwright Test Component is ready. |
|
Preview is ready. |
|
Please, add to storybook example of rows with multiline text. |
|
|
Ended up aligning the content to the top of the cell |
src/components/Table/Table.scss
Outdated
| @@ -55,6 +55,7 @@ | |||
| border-bottom: 1px solid var(--g-color-line-generic); | |||
|
|
|||
| line-height: variables.$tableLineHeight; | |||
| vertical-align: top; | |||
There was a problem hiding this comment.
That is a breaking change. We use default alignment for column (which is center). This behaviour can be changed via verticalAlign prop
| return ( | ||
| <div> | ||
| {item.name} <br /> | ||
| Lorem |
There was a problem hiding this comment.
Better to split name by space instead of adding word
| @@ -7,13 +7,19 @@ | |||
| } | |||
|
|
|||
| &__selection-checkbox { | |||
| display: flex; | |||
| align-items: center; | |||
There was a problem hiding this comment.
Let's add an extra container for Checkbox and not put layout properties to the Checkbox itself, we can move positioning properties there as well
There was a problem hiding this comment.
But we have to expand the checkbox label tag over the entire cell to have an ability clicking in any cell place to toggle selection. So it seems like if i will wrap that Checkbox component and center it using this wrapper - this label tag(that we need to being extended) will not take all cell place because of "padding" that centers that checkbox component
| padding: inherit; | ||
| border-bottom: none; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
|
|
||
| &_verticalAlign_top { |
No description provided.