fix: table widget design #8426

eco-monk · 2021-10-11T15:39:13Z

Fixes #8344

Fixes #8560

Widget design audit: Table Widget

Description

Update selected row color
Update checkbox style (multi-row select)
- changed svg to use the ones provided in design file
- changed hover style for the checkbox
Update search text box style

Type of change

Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Created a table, added data
Selected rows on a table, to see that the new colour is applied on the table row
Enabled multi-select
- selected multiple rows
  - Verified that the checkboxes are updated with the latest svg and colours
  - Checkbox hover styles are also verified
- selected all rows and verified that the header checkbox changes icon appropriately
- unselected all rows and verified the header checkbox is automatically unchecked
Validate search text box style

Checklist:

My code follows the style guidelines of this project (checked with prettier)
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation (not necessary)
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works (only css changes)
New and existing unit tests pass locally with my changes (no new errors generated)

Test coverage results 🧪

🟢 Total coverage has increased

// Code coverage diff between base branch:release and head branch: design-audit/table-widget

Status	File	% Stmts	% Branch	% Funcs	% Lines
🟢	total	54.81 (0.01)	36.53 (0.03)	33.47 (0.01)	55.34 (0.01)
🟢	app/client/src/components/ads/Dropdown.tsx	52.87 (0.31)	37.5 (0.56)	25 (0)	51.05 (0.35)
🔴	app/client/src/components/designSystems/appsmith/SearchComponent.tsx	75.86 (-1.41)	75 (8.33)	50 (-10)	75 (-1.19)
🟢	app/client/src/widgets/TableWidget/component/TableHeader.tsx	50 (1.28)	53.06 (2)	30 (0)	47.37 (1.42)
🟢	app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx	70.24 (0.83)	21.43 (0.16)	52.83 (0.98)	70.24 (0.83)
🟢	app/client/src/widgets/TableWidget/component/TableUtilities.tsx	37.72 (1.19)	22.43 (0)	15.38 (0.75)	35.95 (1.31)

somangshu · 2021-10-12T06:00:50Z

app/client/src/constants/Colors.tsx

@@ -44,6 +44,8 @@ export const Colors = {
  GREEN: "#03B365",
  JUNGLE_GREEN: "#24BA91",
  JUNGLE_GREEN_DARKER: "#30A481",
+  FERN_GREEN: "#50AF6C",


We already have similar color used for select, @momcilo-appsmith why are we not using the same?

somangshu

Change LGTM, @momcilo-appsmith can check the DP once

app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx

momcilo-appsmith · 2021-10-12T08:28:09Z

@somangshu is right, we should have the hover for the whole row (including the checkbox div).
One additional thing is to change the cursor to the pointer on hover over the checkbox as well.

eco-monk · 2021-10-12T11:05:52Z

@somangshu is right, we should have the hover for the whole row (including the checkbox div). One additional thing is to change the cursor to the pointer on hover over the checkbox as well.

@momcilo-appsmith

Will change the cursor on checkbox.
Yes, changing the colour for whole row (on hover) would be a better way to handle this.
Could you specify, which colour should be used for this. (Having it in the design would be good as well, for future references)

momcilo-appsmith · 2021-10-12T11:10:26Z

@eco-monk
Here you can find the selected color change: https://www.figma.com/file/w9CaXHF5iYcrLtiEbAHcFu/Original-Theme-Widgets-Library?node-id=622%3A6141
The hover color will be the same

somangshu

LGTM

Needs manual testing to check more

somangshu · 2021-10-18T11:13:53Z

/ok-to-test sha=74a0ae7

eco-monk · 2021-10-25T07:29:47Z

/ok-to-test sha=bffb3a0
https://github.com/appsmithorg/appsmith/runs/3993941915?check_suite_focus=true

eco-monk · 2021-10-25T07:49:36Z

/ok-to-test sha=df30a2d
https://github.com/appsmithorg/appsmith/actions/runs/1380080477

eco-monk · 2021-10-25T08:54:15Z

/ok-to-test sha=df30a2d
https://github.com/appsmithorg/appsmith/runs/3994733337?check_suite_focus=true

somangshu · 2021-10-25T10:17:32Z

@eco-monk please move this to the QA pipeline if all reported issue are fixed

eco-monk · 2021-10-25T10:20:59Z

@eco-monk please move this to the QA pipeline if all reported issue are fixed

@somangshu
The pipeline has some failures for some reason
https://github.com/appsmithorg/appsmith/runs/3994733337?check_suite_focus=true

The deploy preview works as expected though, Is this good enough to proceed?

somangshu · 2021-10-25T10:23:34Z

Seems like a CI failure, You can go ahead and try re-running the test. Regardless this is not a blocker for the QA continue testing

eco-monk · 2021-10-25T10:28:13Z

@YogeshJayaseelan, the search text box is updated with the latest design now
I have updated my comments regarding your observations too.

We can proceed with testing this now.

eco-monk · 2021-10-25T10:28:51Z

/ok-to-test sha=df30a2d
https://github.com/appsmithorg/appsmith/runs/3995694126?check_suite_focus=true

app/client/src/widgets/TableWidget/component/TableUtilities.tsx

eco-monk · 2021-10-25T16:36:41Z

/ok-to-test sha=28ae5e7

https://github.com/appsmithorg/appsmith/runs/3999738855?check_suite_focus=true
https://github.com/appsmithorg/appsmith/actions/runs/1382036009

YogeshJayaseelan · 2021-10-26T08:17:38Z

@eco-monk Tested this PR and selected and hover state matches figma design

eco-monk added 4 commits October 11, 2021 11:30

Table - multi-select checkbox and selected row color update

d8b30ef

table: change hoverstyle on multi-select checkbox

6a9c1d2

re-order conditions

f3e7886

Merge branch 'release' into design-audit/table-widget

53c3835

eco-monk changed the title ~~Design audit/table widget~~ fix: table widget design Oct 11, 2021

github-actions bot added the Bug Something isn't working label Oct 11, 2021

table widget: use px for positioning checkbox

c6cad8f

eco-monk marked this pull request as ready for review October 11, 2021 16:41

eco-monk requested a review from somangshu October 11, 2021 16:41

eco-monk self-assigned this Oct 11, 2021

eco-monk added UI Building Pod Table Widget UI Improvement labels Oct 11, 2021

appsmithorg deleted a comment from welcome bot Oct 12, 2021

somangshu reviewed Oct 12, 2021

View reviewed changes

somangshu previously approved these changes Oct 12, 2021

View reviewed changes

app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx Show resolved Hide resolved

Merge branch 'release' into design-audit/table-widget

3915df3

eco-monk added 2 commits October 12, 2021 16:42

Merge branch 'release' into design-audit/table-widget

f30d1f5

change hover style for unselected row

46f708f

eco-monk dismissed somangshu’s stale review via 46f708f October 12, 2021 11:42

check box remains white on hover

bc19866

eco-monk enabled auto-merge (squash) October 14, 2021 05:07

Merge branch 'release' into design-audit/table-widget

9e4fa6e

eco-monk requested a review from somangshu October 14, 2021 06:38

Merge branch 'release' into design-audit/table-widget

74a0ae7

somangshu previously approved these changes Oct 18, 2021

View reviewed changes

Merge branch 'release' into design-audit/table-widget

df30a2d

eco-monk requested review from jsartisan and removed request for somangshu and jsartisan October 25, 2021 08:17

eco-monk requested review from somangshu, ashit-rath and jsartisan and removed request for somangshu October 25, 2021 10:32

ashit-rath reviewed Oct 25, 2021

View reviewed changes

app/client/src/widgets/TableWidget/component/TableUtilities.tsx Outdated Show resolved Hide resolved

move svg to assets folder

28ae5e7

eco-monk requested a review from ashit-rath October 25, 2021 16:48

eco-monk added UI Builders Pod Issues that UI Builders face using appsmith and removed UI Improvement App Viewers Pod This label assigns issues to the app viewers pod UI Building Pod UI Builders Pod Issues that UI Builders face using appsmith labels Oct 26, 2021

ashit-rath approved these changes Oct 26, 2021

View reviewed changes

eco-monk removed the request for review from jsartisan October 26, 2021 07:59

eco-monk merged commit 9e55ca9 into release Oct 26, 2021

eco-monk deleted the design-audit/table-widget branch October 26, 2021 08:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: table widget design #8426

fix: table widget design #8426

eco-monk commented Oct 11, 2021 •

edited by github-actions bot

somangshu Oct 12, 2021

somangshu left a comment

momcilo-appsmith commented Oct 12, 2021

eco-monk commented Oct 12, 2021 •

edited

momcilo-appsmith commented Oct 12, 2021

somangshu left a comment

somangshu commented Oct 18, 2021

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

somangshu commented Oct 25, 2021

eco-monk commented Oct 25, 2021

somangshu commented Oct 25, 2021

eco-monk commented Oct 25, 2021

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

YogeshJayaseelan commented Oct 26, 2021

fix: table widget design #8426

fix: table widget design #8426

Conversation

eco-monk commented Oct 11, 2021 • edited by github-actions bot

Fixes #8344

Description

Type of change

How Has This Been Tested?

Checklist:

Test coverage results 🧪

somangshu Oct 12, 2021

Choose a reason for hiding this comment

somangshu left a comment

Choose a reason for hiding this comment

momcilo-appsmith commented Oct 12, 2021

eco-monk commented Oct 12, 2021 • edited

momcilo-appsmith commented Oct 12, 2021

somangshu left a comment

Choose a reason for hiding this comment

somangshu commented Oct 18, 2021

eco-monk commented Oct 25, 2021 • edited

eco-monk commented Oct 25, 2021 • edited

eco-monk commented Oct 25, 2021 • edited

somangshu commented Oct 25, 2021

eco-monk commented Oct 25, 2021

somangshu commented Oct 25, 2021

eco-monk commented Oct 25, 2021

eco-monk commented Oct 25, 2021 • edited

eco-monk commented Oct 25, 2021 • edited

YogeshJayaseelan commented Oct 26, 2021

eco-monk commented Oct 11, 2021 •

edited by github-actions bot

eco-monk commented Oct 12, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited

eco-monk commented Oct 25, 2021 •

edited