Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Action Widgets Reskinning - Button, Button Group, Icon Button, Menu Button #17093

Merged
merged 16 commits into from
Sep 30, 2022
Merged

feat: Action Widgets Reskinning - Button, Button Group, Icon Button, Menu Button #17093

merged 16 commits into from
Sep 30, 2022

Conversation

dhruvikn
Copy link
Contributor

@dhruvikn dhruvikn commented Sep 27, 2022 •
edited

Description

This PR fixes UI inconsistencies in the following Action Widgets -

  1. Button
  2. Button Group
  3. Icon Button
  4. Menu Button

Fixes #10972
Fixes #15170
Fixes #10989
Fixes #10996

Type of change

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

How Has This Been Tested?

  • Manually

Checklist:

  • My code follows the style guidelines of this project
  • 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
  • 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

@dhruvikn dhruvikn added Enhancement New feature or request App Viewers Pod This label assigns issues to the app viewers pod Low An issue that is neither critical nor breaks a user flow Button Widget Issues related to the button widget Menu Button Widget Issues related to Menu Button widget Icon Button Widget Issues related to the icon button widget Button Group widget Issue and enhancements related to the button group widget labels Sep 27, 2022
@dhruvikn dhruvikn self-assigned this Sep 27, 2022
@vercel
Copy link

vercel bot commented Sep 27, 2022 •
edited

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
appsmith ✅ Ready (Inspect) Visit Preview Sep 30, 2022 at 6:46AM (UTC)

@github-actions github-actions bot removed the Enhancement New feature or request label Sep 27, 2022
@github-actions
Copy link

Unable to find test scripts. Please add necessary tests to the PR.

@dhruvikn dhruvikn changed the title WIP: feat: Action Widgets Reskinning - Button, Button Group, Icon Button, Menu Button feat: Action Widgets Reskinning - Button, Button Group, Icon Button, Menu Button Sep 27, 2022
@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=2f2cfee

@github-actions github-actions bot added Enhancement New feature or request and removed Enhancement New feature or request labels Sep 27, 2022
@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3135784459.
Workflow: Appsmith External Integration Test Workflow.
Commit: 2f2cfee.
PR: 17093.

@github-actions github-actions bot added the Enhancement New feature or request label Sep 27, 2022
jsartisan
jsartisan reviewed Sep 27, 2022
View reviewed changes
app/client/src/widgets/ButtonWidget/index.ts Outdated
@@ -17,7 +17,7 @@ export const CONFIG = {
text: "Submit",
buttonVariant: ButtonVariantTypes.PRIMARY,
placement: ButtonPlacementTypes.CENTER,
rows: 4,
rows: 5,
Copy link
Contributor

@jsartisan jsartisan Sep 27, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dilippitchika @dhruvikn Are we sure we want to increase button height? It looks odd to me as compared to standard button sizes.

Copy link
Contributor Author

@dhruvikn dhruvikn Sep 27, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is also worth noting that the current height of buttons with row = 4 is 32px, and not 30px, as mentioned in the PRD.
Therefore, when changing row to 5, we will get a button with a height of 42px, not 40px.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had a discussion with @dilippitchika, @somangshu, and @jsartisan. We're gonna be sticking with row = 4 and button height = 32px. Will be reverting the change.

cc: @laveena-en @chandannkumar

app/client/src/widgets/IconButtonWidget/component/index.tsx Show resolved Hide resolved
@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3142905368.
Workflow: Appsmith External Integration Test Workflow.
Commit: f2e9fd3.
PR: 17093.

@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=8eafc8a

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3143410546.
Workflow: Appsmith External Integration Test Workflow.
Commit: 8eafc8a.
PR: 17093.

jsartisan
jsartisan previously approved these changes Sep 29, 2022
View reviewed changes
Copy link
Contributor

@jsartisan jsartisan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@vercel
Copy link

vercel bot commented Sep 29, 2022

Deployment failed with the following error:

Resource is limited - try again in 2 minutes (more than 100, code: "api-deployments-free-per-day").

@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=b301eaa

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3149415525.
Workflow: Appsmith External Integration Test Workflow.
Commit: b301eaa.
PR: 17093.

@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=4ea6a76

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3154112978.
Workflow: Appsmith External Integration Test Workflow.
Commit: 4ea6a76.
PR: 17093.

@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=a573e07

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3156545334.
Workflow: Appsmith External Integration Test Workflow.
Commit: a573e07.
PR: 17093.

@dhruvikn
Copy link
Contributor Author

/ok-to-test sha=0f3167e

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3156761433.
Workflow: Appsmith External Integration Test Workflow.
Commit: 0f3167e.
PR: 17093.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/3156761433.
Commit: ``.
Results:

Click to view performance test results

Run 1 (ms) Run 2 (ms) Run 3 (ms) Run 4 (ms) Run 5 (ms) Minimum (ms) Median (ms) Mean (ms) Range (%) SD.Sample (%) SD.Population (%)
SELECT_CATEGORY
scripting 503.31 404.76 423.52 389.49 319.29 319.29 404.76 408.07 45.10 16.23 14.52
painting 4.89 4.85 3.84 3.47 4.94 3.47 4.85 4.4 33.41 15.68 14.09
rendering 121.37 118.46 116.9 109.62 105.32 105.32 116.9 114.33 14.04 5.81 5.20
BIND_TABLE_DATA
scripting 1654.37 1148.33 1139.93 1096.12 1041.92 1041.92 1139.93 1216.13 50.36 20.44 18.28
painting 28.97 29.33 15.34 24.15 19.33 15.34 24.15 23.42 59.74 26.00 23.27
rendering 601.43 874.28 871.76 846.23 828.9 601.43 846.23 804.52 33.91 14.30 12.79
CLICK_ON_TABLE_ROW
scripting 1044.29 978.14 1244.87 986.23 933.22 933.22 986.23 1037.35 30.04 11.81 10.57
painting 11.89 12.97 11.39 9.78 8.72 8.72 11.39 10.95 38.81 15.53 13.88
rendering 368.61 317.59 353.68 315.93 302.47 302.47 317.59 331.66 19.94 8.46 7.56
UPDATE_POST_TITLE
scripting 1825.74 1534.66 1701.44 1543.49 1335.46 1335.46 1543.49 1588.16 30.87 11.70 10.46
painting 18.97 15.35 21.34 15.2 13.34 13.34 15.35 16.84 47.51 19.24 17.22
rendering 683.63 738.63 680.08 661.1 605.14 605.14 680.08 673.72 19.81 7.12 6.37
OPEN_MODAL
scripting 588.96 507.72 502.25 978.16 431.09 431.09 507.72 601.64 90.93 36.20 32.38
painting 10.76 26.16 10.72 10.16 7.76 7.76 10.72 13.11 140.35 56.45 50.50
rendering 1411.9 1338.03 1279.98 1309.69 1215.26 1215.26 1309.69 1310.97 15.00 5.53 4.95
CLOSE_MODAL
scripting 253.58 231.5 259.36 234.81 189.07 189.07 234.81 233.66 30.08 11.82 10.57
painting 16.65 6.08 5.04 10.38 5.11 5.04 6.08 8.65 134.22 57.57 51.45
rendering 953.49 1010.82 990.77 989.59 923.51 923.51 989.59 973.64 8.97 3.58 3.20
SELECT_WIDGET_MENU_OPEN
scripting 959.72 1041.39 1039.43 960.61 922.25 922.25 960.61 984.68 12.10 5.40 4.83
painting 7.03 7.44 6.8 5.56 9.16 5.56 7.03 7.2 50.00 18.06 16.11
rendering 687.67 709.05 691.18 642.95 664.05 642.95 687.67 678.98 9.74 3.79 3.39
SELECT_WIDGET_SELECT_OPTION
scripting 157.49 162.4 181.11 161.21 148.93 148.93 161.21 162.23 19.84 7.27 6.50
painting 8.22 4.26 2.28 1.98 6.87 1.98 4.26 4.72 132.20 58.47 52.33
rendering 314.07 318.76 320.73 314.49 300.08 300.08 314.49 313.63 6.58 2.58 2.31

@jsartisan jsartisan merged commit 762df62 into release Sep 30, 2022
@jsartisan jsartisan deleted the reskinning/button branch September 30, 2022 11:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jsartisan jsartisan jsartisan approved these changes

Assignees

@dhruvikn dhruvikn

Labels
App Viewers Pod This label assigns issues to the app viewers pod Button Group widget Issue and enhancements related to the button group widget Button Widget Issues related to the button widget Enhancement New feature or request Icon Button Widget Issues related to the icon button widget Low An issue that is neither critical nor breaks a user flow Menu Button Widget Issues related to Menu Button widget
Projects
None yet
Milestone
No milestone
3 participants
@dhruvikn @laveena-en @jsartisan