fix: Update designs for select widgets according to Figma #8594

techbhavin · 2021-10-18T10:13:17Z

Description

update in design select / multi-select / multi treeselect / treeselect Widget

Fixes #8308
Fixes #8611

Type of change

Bugfix (non-breaking change which fixes an issue)

Checklist:

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

Test coverage results 🧪

🔴 Total coverage has decreased

// Code coverage diff between base branch:release and head branch: bug/design-audit-select-multi-tree

Status	File	% Stmts	% Branch	% Funcs	% Lines
🔴	total	54.58 (0)	36.33 (-0.11)	33.11 (-0.11)	55.09 (-0.02)
🟢	app/client/src/components/ads/Icon.tsx	50.79 (0.39)	33.54 (0.42)	100 (0)	50.66 (0.4)
✨ 🆕	app/client/src/widgets/DropdownWidget/component/index.styled.tsx	50	11.76	0	50
🔴	app/client/src/widgets/DropdownWidget/component/index.tsx	81.16 (-0.32)	50.77 (-9.7)	68.42 (-7.77)	80.6 (-0.17)
🟢	app/client/src/widgets/DropdownWidget/widget/index.tsx	71.74 (0.63)	23.53 (0)	63.64 (0)	70.73 (0.73)
🔴	app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx	50 (-4.84)	25 (-0.93)	0 (0)	51.52 (-4.04)
🟢	app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx	23.91 (3.46)	0 (0)	0 (0)	26.19 (3.11)
🔴	app/client/src/widgets/MultiSelectWidget/component/index.styled.tsx	51.72 (-40.59)	24.14 (-75.86)	0 (0)	51.85 (-48.15)
🟢	app/client/src/widgets/MultiSelectWidget/component/index.tsx	18.33 (1.02)	0 (0)	0 (0)	19.64 (0.89)
🟢	app/client/src/widgets/MultiSelectWidget/widget/index.tsx	50 (1.02)	0 (0)	50 (0)	51.06 (1.06)
🔴	app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx	52.78 (-5.84)	25.81 (-1.11)	0 (0)	53.13 (-4.56)
🟢	app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx	24.44 (3.51)	0 (0)	0 (0)	26.83 (3.15)

somangshu · 2021-10-19T05:37:20Z

/ok-to-test sha=e3c59b2

Tooluloope · 2021-10-19T06:19:25Z

For some reason the Dropdown is controlled from outside the Form

Tooluloope · 2021-10-19T06:27:54Z

Also I noticed the Keyboard operations have stopped working on Select widget

Showing it on release

Tooluloope · 2021-10-19T06:30:46Z

@somangshu I noticed on the Figma, there's a requirement for a label which we don't have currently, should that be taken up here or in another PR

somangshu · 2021-10-19T06:38:39Z

Suggest we take label as a new requirement. Ill create a requirement and re-assign

somangshu · 2021-10-19T06:46:50Z

@somangshu I noticed on the Figma, there's a requirement for a label which we don't have currently, should that be taken up here or in another PR

Created this issue > #8611

Tooluloope · 2021-10-19T14:48:27Z

@techbhavin There's been a change in the disabled state of the widget.
https://www.figma.com/file/w9CaXHF5iYcrLtiEbAHcFu?node-id=469:5847#117536147

…elect-multi-tree

techbhavin · 2021-10-20T10:02:26Z

/ok-to-test sha=0573cbb

techbhavin · 2021-11-10T10:52:17Z

https://github.com/appsmithorg/appsmith/actions/runs/1443778583

shwetha-ramesh · 2021-11-10T11:41:38Z

@techbhavin Tested PR for #8611.
Issue1: As discussed need not be fixed.
Issue2: FIXED.

Moving #8611 to DONE

shwetha-ramesh · 2021-11-10T13:15:42Z

@techbhavin as discussed for #8308 issue 3-to show error state widget tile to appear in red must be fixed. Issue8 - as discussed we are not handling since it does not solve any purpose. Rest all issues are fixed and agreed.

techbhavin · 2021-11-11T10:11:46Z

/ok-to-test sha=cec3151

techbhavin · 2021-11-11T10:12:28Z

https://github.com/appsmithorg/appsmith/actions/runs/1448288267

shwetha-ramesh · 2021-11-11T11:08:51Z

@techbhavin Retested this PR for #8308: as discussed when ’required’ is enabled and there is no selection made the widget tile appears red.

Moving this issue to DONE.

Tooluloope

Code wise, LGTM

somangshu · 2021-11-15T09:39:07Z

@techbhavin what is the update here, Please move it to the right pipeline, And let me know how can we close this?

…elect-multi-tree

techbhavin · 2021-11-15T10:24:45Z

/ok-to-test sha=27e1315

github-actions · 2021-11-15T10:25:19Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1461693159.
Workflow: Appsmith External Integration Test Workflow.
Commit: 27e1315.
PR: 8594.

techbhavin · 2021-11-16T07:14:29Z

/ok-to-test sha=9357533

github-actions · 2021-11-16T07:15:00Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1465728201.
Workflow: Appsmith External Integration Test Workflow.
Commit: 9357533.
PR: 8594.

techbhavin · 2021-11-16T08:28:19Z

/ok-to-test sha=9357533

github-actions · 2021-11-16T08:28:49Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1465946389.
Workflow: Appsmith External Integration Test Workflow.
Commit: 9357533.
PR: 8594.

updated design as per figma

e3c59b2

techbhavin requested a review from somangshu October 18, 2021 10:13

techbhavin added the UI Building Pod label Oct 18, 2021

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

techbhavin linked an issue Oct 18, 2021 that may be closed by this pull request

[Bug] Widget design audit: checkbox / checkbox group / radio group Widget #8310

Closed

7 tasks

techbhavin removed a link to an issue Oct 18, 2021

[Bug] Widget design audit: checkbox / checkbox group / radio group Widget #8310

Closed

7 tasks

techbhavin added UI Building Pod and removed UI Building Pod labels Oct 18, 2021

somangshu added the Widgets Product This label groups issues related to widgets label Oct 18, 2021

somangshu requested review from Tooluloope and removed request for somangshu October 19, 2021 05:23

techbhavin added 3 commits October 20, 2021 10:30

Merge remote-tracking branch 'origin/release' into bug/design-audit-s…

9056e6d

…elect-multi-tree

updated design, fix cypress test

e8deef7

Merge remote-tracking branch 'origin/release' into bug/design-audit-s…

0573cbb

…elect-multi-tree

techbhavin added UI Building Pod and removed UI Building Pod labels Oct 20, 2021

techbhavin requested review from Tooluloope and removed request for Tooluloope October 20, 2021 10:03

techbhavin added Widgets Product This label groups issues related to widgets UI Building Pod and removed Widgets Product This label groups issues related to widgets UI Building Pod labels Oct 21, 2021

techbhavin added 2 commits November 11, 2021 15:15

updated border color for invalid selected value

19fef1f

Merge branch 'release' into bug/design-audit-select-multi-tree

cec3151

areyabhishek changed the title ~~fix: updated design as per figma~~ fix: Update designs for select widgets according to Figma Nov 12, 2021

Tooluloope previously approved these changes Nov 15, 2021

View reviewed changes

Merge remote-tracking branch 'origin/release' into bug/design-audit-s…

27e1315

…elect-multi-tree

techbhavin dismissed Tooluloope’s stale review via 27e1315 November 15, 2021 10:18

techbhavin requested a review from Tooluloope November 15, 2021 10:21

Tooluloope previously approved these changes Nov 15, 2021

View reviewed changes

fix for colors file

9357533

techbhavin dismissed Tooluloope’s stale review via 9357533 November 15, 2021 10:34

techbhavin enabled auto-merge (squash) November 15, 2021 11:22

techbhavin requested a review from Tooluloope November 15, 2021 11:38

Tooluloope approved these changes Nov 15, 2021

View reviewed changes

techbhavin merged commit 7032ee6 into release Nov 16, 2021

techbhavin deleted the bug/design-audit-select-multi-tree branch November 16, 2021 09:27

Tooluloope restored the bug/design-audit-select-multi-tree branch December 9, 2021 04:36

Tooluloope deleted the bug/design-audit-select-multi-tree branch December 9, 2021 06:12

fix: Update designs for select widgets according to Figma #8594

fix: Update designs for select widgets according to Figma #8594

Uh oh!

Conversation

techbhavin commented Oct 18, 2021 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist:

Test coverage results 🧪

Uh oh!

somangshu commented Oct 19, 2021

Uh oh!

Tooluloope commented Oct 19, 2021 • edited by loom-gif-previews bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Tooluloope commented Oct 19, 2021 • edited by loom-gif-previews bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Tooluloope commented Oct 19, 2021

Uh oh!

somangshu commented Oct 19, 2021

Uh oh!

somangshu commented Oct 19, 2021

Uh oh!

Tooluloope commented Oct 19, 2021

Uh oh!

techbhavin commented Oct 20, 2021

Uh oh!

techbhavin commented Nov 10, 2021

Uh oh!

shwetha-ramesh commented Nov 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shwetha-ramesh commented Nov 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

techbhavin commented Nov 11, 2021

Uh oh!

techbhavin commented Nov 11, 2021

Uh oh!

shwetha-ramesh commented Nov 11, 2021

Uh oh!

Tooluloope left a comment

Choose a reason for hiding this comment

Uh oh!

somangshu commented Nov 15, 2021

Uh oh!

techbhavin commented Nov 15, 2021

Uh oh!

github-actions bot commented Nov 15, 2021

Uh oh!

techbhavin commented Nov 16, 2021

Uh oh!

github-actions bot commented Nov 16, 2021

Uh oh!

techbhavin commented Nov 16, 2021

Uh oh!

github-actions bot commented Nov 16, 2021

Uh oh!

Uh oh!

techbhavin commented Oct 18, 2021 •

edited by github-actions bot

Loading

Tooluloope commented Oct 19, 2021 •

edited by loom-gif-previews bot

Loading

Tooluloope commented Oct 19, 2021 •

edited by loom-gif-previews bot

Loading

shwetha-ramesh commented Nov 10, 2021 •

edited

Loading

shwetha-ramesh commented Nov 10, 2021 •

edited

Loading