feat(Table): expand checkbox click area #654

Bluepuper · 2023-05-02T10:12:34Z

Issue: #648

gravity-ui-bot · 2023-05-02T10:15:37Z

Preview is ready.

teleginzhenya · 2023-05-15T13:57:34Z

@krozhkov can you take a look on this pr?

teleginzhenya · 2023-05-26T09:49:28Z

@amje maybe you? lgtm :)

src/components/Table/Table.scss

src/components/Table/hoc/withTableSelection/withTableSelection.tsx

Bluepuper · 2023-07-31T15:29:24Z

@amje Can you check please?

amje · 2023-08-02T10:03:36Z

@Bluepuper
There are some issues when Table is overflowing

Bluepuper · 2023-09-28T09:49:33Z

@Bluepuper There are some issues when Table is overflowing

Add min-width of checkbox to cell, so it will not be shrinking

src/components/Table/Table.scss

amje · 2023-09-29T13:27:50Z

src/components/Table/hoc/withTableSelection/withTableSelection.scss


 #{variables.$block} {
    &__selection-checkbox {
-        display: inline-block;
+        @extend #{variables.$block}__cell;
+        @extend #{variables.$block}__cell_edge-padding;


What about styles when edgePadding: false?

remove duplicating styles

src/components/Table/hoc/withTableSelection/withTableSelection.scss

Bluepuper · 2023-10-09T14:15:16Z

src/components/Table/Table.tsx

@@ -152,6 +152,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
            content = id;
        }

+        if (id === '_selection') return content;


did this to remove double wrapping of checkbox so padding: inherit will work

But now selection hoc "data" leaked to the base Table. Let's find a workaround here

Does this wrapper really breaks the layout?

this is one with additional wrapper

this is one without

If I add padding: inherit to the th-content class, I can fix the existence of the extra wrapper, but then all the other cells are broken

i can add different wrapper for cell with id === '_selection', something like this:
if (id === '_selection') return <span className={b('th-content_selection')}>content</span>;

before if was just like this return <span className={b('th-content')}>{content}</span>

@Bluepuper I think we can remove this wrapper (th-content) completely, and add these styles instead:

&__head &__cell { @include mixins.text-accent; &::first-letter { text-transform: uppercase; } }

I think we can remove this wrapper (th-content) completely, and add these styles instead:

&__head &__cell { @include mixins.text-accent; &::first-letter { text-transform: uppercase; } }

like this ?

Bluepuper · 2023-10-10T15:33:35Z

Can you check it please ?) @amje

src/components/Table/Table.scss

… wrapper to selection checkbox

…class

EgorKluch · 2023-11-21T10:06:00Z

Is it ok that checkbox isn't in center of a cell anymore?

amje · 2023-11-21T11:17:45Z

Is it ok that checkbox isn't in center of a cell anymore?

@EgorKluch I assume, yes. Now it's an equal padding between all cells

EgorKluch · 2023-11-21T12:13:53Z

@EgorKluch I assume, yes. Now it's an equal padding between all cells

But then needs to move up text too.

I'm waiting for the final decision.

amje · 2023-11-21T13:13:39Z

@EgorKluch Oh, I thought you're talking about horizontal alignment. Checkbox should be centered as well when verticalAlign: center is set

Bluepuper · 2023-11-21T15:25:56Z

@amje Aligned the content to the top when there is two lines or more in cell in this PR, based on the design and on the ticket

EgorKluch · 2023-11-21T16:10:15Z

Also change column height in some cases. I send links of example in telegram.

Bluepuper · 2023-11-22T08:07:20Z

Also change column height in some cases. I send links of example in telegram.

It turns out that the row height was wrong before this pr based on the design. This pr also fixes that, now it is correct: 40px height + 1px bottom border. Before it was 40.5 px inner height + 1px border bottom

Bluepuper requested a review from krozhkov as a code owner May 2, 2023 10:12

amje requested changes Jun 7, 2023

View reviewed changes

src/components/Table/Table.scss Outdated Show resolved Hide resolved

src/components/Table/Table.scss Outdated Show resolved Hide resolved

src/components/Table/hoc/withTableSelection/withTableSelection.tsx Outdated Show resolved Hide resolved

Bluepuper force-pushed the feat/selection_table_checkbox_expand branch from 832a178 to 8e360f2 Compare September 28, 2023 08:32

amje requested changes Sep 29, 2023

View reviewed changes

Bluepuper requested review from ValeraS and korvin89 as code owners October 9, 2023 13:55

Bluepuper commented Oct 9, 2023

View reviewed changes

amje reviewed Oct 10, 2023

View reviewed changes

src/components/Table/Table.scss Outdated Show resolved Hide resolved

amje approved these changes Oct 18, 2023

View reviewed changes

amje changed the title ~~feat(SelectionTable): expand checkbox click area~~ feat(Table): expand checkbox click area Oct 18, 2023

Bluepuper added 10 commits October 19, 2023 13:37

feat(withTableSelection): expand checkbox click area to all cell, add…

e86cdd2

… wrapper to selection checkbox

fix(withTableSelection): remove wrapper and add styles to checkbox label

be685e0

refactor(withSelectionTable): remove unused comments

20ad6ff

fix(withTableSelection): implement requested changes

92f3f89

style: remove min-width

1aaf88b

fix: return min-width to prevent shrinking

5459b73

refactor: return spaces

fabb4db

feat: add classname to enhanceColumns method, separate checkbox cell …

86f852f

…class

fix: move position style to chechbox_cell class

ed41ed8

feat: remove 'th-content' styles

07e0f1c

Bluepuper force-pushed the feat/selection_table_checkbox_expand branch from af2ecc1 to 07e0f1c Compare October 19, 2023 10:37

Bluepuper merged commit 0534cf8 into main Oct 19, 2023
3 checks passed

Bluepuper deleted the feat/selection_table_checkbox_expand branch October 19, 2023 10:40

gravity-ui-bot mentioned this pull request Oct 19, 2023

chore(main): release 5.18.0 #1054

Merged

gravity-ui-bot mentioned this pull request Feb 28, 2024

chore(v5): release 5.30.1 #1381

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Table): expand checkbox click area #654

feat(Table): expand checkbox click area #654

Bluepuper commented May 2, 2023

gravity-ui-bot commented May 2, 2023

teleginzhenya commented May 15, 2023

teleginzhenya commented May 26, 2023

Bluepuper commented Jul 31, 2023

amje commented Aug 2, 2023

Bluepuper commented Sep 28, 2023

amje Sep 29, 2023

Bluepuper Oct 9, 2023

Bluepuper Oct 9, 2023

amje Oct 10, 2023

amje Oct 10, 2023

Bluepuper Oct 10, 2023

Bluepuper Oct 10, 2023

Bluepuper Oct 10, 2023 •

edited

Loading

amje Oct 16, 2023 •

edited

Loading

Bluepuper Oct 16, 2023 •

edited

Loading

Bluepuper Oct 16, 2023

Bluepuper commented Oct 10, 2023

EgorKluch commented Nov 21, 2023

amje commented Nov 21, 2023 •

edited

Loading

EgorKluch commented Nov 21, 2023 •

edited

Loading

amje commented Nov 21, 2023

Bluepuper commented Nov 21, 2023 •

edited

Loading

EgorKluch commented Nov 21, 2023

Bluepuper commented Nov 22, 2023

feat(Table): expand checkbox click area #654

feat(Table): expand checkbox click area #654

Conversation

Bluepuper commented May 2, 2023

gravity-ui-bot commented May 2, 2023

teleginzhenya commented May 15, 2023

teleginzhenya commented May 26, 2023

Bluepuper commented Jul 31, 2023

amje commented Aug 2, 2023

Bluepuper commented Sep 28, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bluepuper Oct 10, 2023 • edited Loading

Choose a reason for hiding this comment

amje Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

Bluepuper Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bluepuper commented Oct 10, 2023

EgorKluch commented Nov 21, 2023

amje commented Nov 21, 2023 • edited Loading

EgorKluch commented Nov 21, 2023 • edited Loading

amje commented Nov 21, 2023

Bluepuper commented Nov 21, 2023 • edited Loading

EgorKluch commented Nov 21, 2023

Bluepuper commented Nov 22, 2023

Bluepuper Oct 10, 2023 •

edited

Loading

amje Oct 16, 2023 •

edited

Loading

Bluepuper Oct 16, 2023 •

edited

Loading

amje commented Nov 21, 2023 •

edited

Loading

EgorKluch commented Nov 21, 2023 •

edited

Loading

Bluepuper commented Nov 21, 2023 •

edited

Loading