Skip to content

[UX] Better action labels when creating forms #14514

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
Merged
merged 27 commits into from
Feb 21, 2025
Merged

[UX] Better action labels when creating forms #14514

merged 27 commits into from
Feb 21, 2025

Conversation

andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented Jan 28, 2025 •
edited
Loading

Q A
Bug fix? (use the a.b branch) 🟢
New feature/enhancement? (use the a.x branch) 🟢
Deprecations? 🔴
BC breaks? (use the c.x branch) 🔴
Automated tests included? 🔴
Related user documentation PR URL mautic/user-documentation#...
Related developer documentation PR URL mautic/developer-documentation-new#...
Issue(s) addressed Fixes #...

Description

Adds labels for actions when creating/editing forms

image

Thanks to @escopecz for the help in creating the EntityHelper

UX planning

Colors

Green: For addition or growth actions (e.g., adding points, multiplying values).
Red: For removal, reduction, or division actions (when representing a decrease).
Blue: For filling in, updating data, or neutral/configurable actions.
Neutral (Gray): Represents relationship or when no specific action is being performed.

Other aspects

  • Features use filled icons to express active state, while resources (segments, emails etc) use lined icons
  • Labels with border indicate they're operational (links)
  • Ensures no panel footer visible when no labels
  • All links open in new tab
  • All relevant labels consider user permissions

Before:

image

After:

image

📋 Steps to test this PR:

  1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
  2. Open Forms > New
  3. Open Actions tab
  4. Add absolutely all types of actions
  5. Play with their configurable options
  6. Check how they look on the list

@andersonjeccel andersonjeccel self-assigned this Jan 28, 2025
@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) ready-to-test PR's that are ready to test code-review-needed PR's that require a code review before merging user-experience Anything related to related to workflows, feedback, and navigation forms Anything related to forms twig enhancement Any improvement to an existing feature or functionality labels Jan 28, 2025
@andersonjeccel andersonjeccel added this to the 6.0.0-beta milestone Jan 28, 2025
@shinde-rahul shinde-rahul reopened this Feb 5, 2025
@shinde-rahul shinde-rahul reopened this Feb 5, 2025
shinde-rahul
shinde-rahul reviewed Feb 5, 2025
View reviewed changes
Copy link
Contributor

@shinde-rahul shinde-rahul left a comment

Choose a reason for hiding this comment

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

@escopecz, the requests have been incorporated, and coverage has been added.

@shinde-rahul shinde-rahul requested a review from escopecz February 5, 2025 03:23
@shinde-rahul
Copy link
Contributor

@andersonjeccel, Please review the changes.

@shinde-rahul shinde-rahul requested a review from kuzmany February 5, 2025 03:26
escopecz
escopecz approved these changes Feb 5, 2025
View reviewed changes
Copy link
Member

@escopecz escopecz left a comment

Choose a reason for hiding this comment

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

The code looks great now 👍

Can we get one more manual test after the refactoring? @andersonjeccel I know you cannot approve your own PR but you know the best what to test. Could you give us your test results with Rahul's changes?

@escopecz escopecz added code-review-passed PRs which have passed code review and removed code-review-needed PR's that require a code review before merging labels Feb 5, 2025
@kuzmany
Copy link
Member

kuzmany commented Feb 7, 2025

Works properly.
But seems like submit button and conditional fields display Hide when value exists, What is not current state of fields.

image

@andersonjeccel andersonjeccel mentioned this pull request Feb 11, 2025
Merged
@RCheesley RCheesley added the pending-feedback PR's and issues that are awaiting feedback from the author label Feb 18, 2025
@RCheesley
Copy link
Member

Marking this one as pending feedback given the comments from @kuzmany above - @andersonjeccel could you take a lookies? Would be lovely to get this in the beta release if we can! :)

@andersonjeccel
Copy link
Contributor Author

@RCheesley Feedback not related to this PR
See fix here:

@andersonjeccel andersonjeccel removed the pending-feedback PR's and issues that are awaiting feedback from the author label Feb 19, 2025
@Bastian2718
Copy link

Looks nice for every Action possible!

@andersonjeccel andersonjeccel added ready-to-commit PR's with 2 successful tests, 1 approval, automated tests and docs and is ready to be merged user-testing-passed PRs which have been successfully tested by the required number of people. and removed pending-test-confirmation PR's that require one test before they can be merged labels Feb 20, 2025
@RCheesley RCheesley merged commit 4c56f9a into mautic:6.x Feb 21, 2025
17 checks passed
@andersonjeccel andersonjeccel deleted the better-action-fields-when-creating-forms branch February 21, 2025 13:47
@RCheesley RCheesley modified the milestones: 6.0.0-beta, 6.0.0-beta2 Mar 5, 2025
@mautibot
Copy link
Contributor

mautibot commented Mar 6, 2025

This pull request has been mentioned on Mautic Forums. There might be relevant details there:

https://forum.mautic.org/t/announcing-mautic-6-beta-now-available-for-testing/35196/1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@escopecz escopecz escopecz approved these changes

@jos0405 jos0405 jos0405 approved these changes

@laurielim laurielim Awaiting requested review from laurielim laurielim was automatically assigned from mautic/ux-ui-tiger-team

@abhisekmazumdar abhisekmazumdar Awaiting requested review from abhisekmazumdar

@kuzmany kuzmany Awaiting requested review from kuzmany

+1 more reviewer

@shinde-rahul shinde-rahul shinde-rahul left review comments

Reviewers whose approvals may not affect merge requirements
Assignees

@andersonjeccel andersonjeccel

Labels
code-review-passed PRs which have passed code review enhancement Any improvement to an existing feature or functionality forms Anything related to forms ready-to-commit PR's with 2 successful tests, 1 approval, automated tests and docs and is ready to be merged T1 Low difficulty to fix (issue) or test (PR) twig user-experience Anything related to related to workflows, feedback, and navigation user-testing-passed PRs which have been successfully tested by the required number of people.
Projects
Open Source Fridays
Status: 🥳 Done
UX/UI Tiger Team
Status: Done
Milestone
6.0.0-beta2
Development

Successfully merging this pull request may close these issues.
8 participants
@andersonjeccel @shinde-rahul @kuzmany @RCheesley @Bastian2718 @mautibot @escopecz @jos0405