Skip to content

Conversation

@andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented May 21, 2024

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

It changes buttons style and adds hierarchy.

image

image

image

image

image

image

image

Specifically:

  • Adds icons for campaign builder buttons
  • Define primary, secondary, tertiary, ghost and icon buttons

📋 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 the dashboard > Look at the buttons
  3. Open Contacts to see a scenario where we have 2 primary buttons (Quick add and New, on the technical side), but the second (new) and the dropdown become tertiary automatically
  4. Create a new contact, Save & Close
  5. Open Campaigns > New > Builder > See buttons with icons

@andersonjeccel andersonjeccel self-assigned this May 21, 2024
@andersonjeccel andersonjeccel removed the pending-feedback PR's and issues that are awaiting feedback from the author label Aug 23, 2024
RCheesley
RCheesley previously approved these changes Aug 27, 2024
Copy link
Member

@RCheesley RCheesley left a comment

Choose a reason for hiding this comment

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

Thanks for the explanation @andersonjeccel - in this case I feel I'll have to 'disagree and commit' - personally I don't like the text being top-aligned, but if that's what the research says is the best thing to do for the user experience, then let's see how users find it. We can always decide to change it in the future, it's a fairly reversible decision.

@andersonjeccel
Copy link
Contributor Author

@RCheesley Thank you for the reasonable review
I believe we can sit together to have a honest conversation about the current state of the interface before the 5.2 release to address potential reversion or improvements ❤️

commit 62c7d49dc7938f4c63a2071d47aa56929cb3aa1f
Merge: a33f0aa f455fc0
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Aug 30 10:22:40 2024 -0300

    Merge remote-tracking branch 'upstream/5.x' into ux-replace-default-buttons-with-ghost

commit a33f0aa
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Thu Jul 18 11:38:52 2024 -0300

    fix send icon

commit b408cd4
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Thu Jul 18 11:37:49 2024 -0300

    fix: page actions buttons

commit c1d664d
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 14:15:50 2024 -0300

    fix: dashboard daterange button

commit de08169
Merge: 21c84f2 cf59090
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 14:09:27 2024 -0300

    Merge branch 'ui-ux-buttons' into ux-replace-default-buttons-with-ghost

commit 21c84f2
Merge: 20eb961 a1a6aac
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 13:38:43 2024 -0300

    Merge branch 'ui-ux-buttons' into ux-replace-default-buttons-with-ghost

commit 20eb961
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 12:51:55 2024 -0300

    Revert ".btn-default in themes?"

    This reverts commit 19c24f2.

commit 19c24f2
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 12:48:42 2024 -0300

    .btn-default in themes?

commit 2b57c56
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Jul 17 12:47:51 2024 -0300

    [UI] Assigning hierarchycal buttons to buttons
@andersonjeccel andersonjeccel added code-review-needed PR's that require a code review before merging pending-test-confirmation PR's that require one test before they can be merged and removed ready-to-commit PR's with 2 successful tests, 1 approval, automated tests and docs and is ready to be merged code-review-passed PRs which have passed code review user-testing-passed PRs which have been successfully tested by the required number of people. labels Sep 4, 2024
@andersonjeccel andersonjeccel added the essential This must be done to close the milestone label Sep 5, 2024
@RCheesley RCheesley merged commit 48bf4ff into mautic:5.x Sep 24, 2024
@andersonjeccel andersonjeccel deleted the ui-ux-buttons branch September 24, 2024 08:35
andersonjeccel added a commit to andersonjeccel/mautic that referenced this pull request Sep 25, 2024
commit 581033c
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 14:11:59 2024 -0300

    Revert "fix for theme field disabled state"

    This reverts commit 4c0285b.

commit 8515a7d
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 14:11:25 2024 -0300

    Revert "updating function that disables permission tab for admin roles"

    This reverts commit 14187a4.

commit 9c271ab
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 14:06:48 2024 -0300

    simplifiyng again

commit 14926d2
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 13:59:25 2024 -0300

    v2 using radios again to recover compatibility

commit 14187a4
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 13:03:55 2024 -0300

    updating function that disables permission tab for admin roles

commit fcde8e3
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 13:03:18 2024 -0300

    simplifying even more

commit d0a1094
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:57:57 2024 -0300

    simplifying again

commit d0a0b5c
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:57:32 2024 -0300

    readding missing attributes

commit 8af37ea
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:29:24 2024 -0300

    improve unique identifier tooltip

    Go to Custom fields > New > Check tooltip for Unique identifier

commit ed7ce35
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:28:55 2024 -0300

    message for Indexable custom fields

    Go to Custom Fields > New > Toggle the Indexable field

commit c229e43
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:20:47 2024 -0300

    message for reports visibility

    Go to Reports > New > Toggle Visible for all logged-in users to see the No label

commit a784bd8
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:18:10 2024 -0300

    message for point action repeatable

    Go to Points > Point Actions > New > Toggle Is repeatable? and see two different labels

commit 4c0285b
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:11:45 2024 -0300

    fix for theme field disabled state

commit d8aca94
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:11:33 2024 -0300

    message for segment visibility

    Go to Segments > New > Toggle Visible for other users > Check the label for No (Only me)

commit 9b58364
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 12:09:23 2024 -0300

    message for Kiosk mode

    Go to Forms > New > Toggle the option Kiosk mode

commit 5891935
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 11:09:30 2024 -0300

    shorter

commit 8c59ff2
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 10:52:00 2024 -0300

    no hardcoded values

commit 051a75d
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Wed Sep 25 09:07:09 2024 -0300

    [UX] Toggle

commit 48bf4ff
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Tue Sep 24 05:26:01 2024 -0300

    [UI/UX] Buttons (mautic#13770)

    * tokens

    * incorporating all bootstrap variables

    * migrating mautic variables into bootstrap

    * fixing broken darken/lighten

    * variables

    * revert removing 5x duplicated import rules

    revert
    Revert "fixing broken darken/lighten"
    This reverts commit bcf4ac98e07c0c17162a74794a8161d5398c3d7c.

    * grunt compile-less

    * aligning previous tokens

    * remove duplicated imports

    * dark color scheme disabled by default to avoid conflicts

    * utilities syntax fix

    * improve radius calc

    * tag to label token names

    * setting the dark theme implementation method

    * set implementation mode for high contrast + run grunt-compile-less

    * fix missing transparency bg colors

    * darker brand bg on dark theme

    * Responsive typography

    * secondary brand color support

    * style fixes

    * fixes for secondary brand color support

    * transparency for borders when on brand bg

    * Revert "transparency for borders when on brand bg"

    This reverts commit a8c4748.

    * sat improv

    * reduced max bdr value

    * enhanced border calc

    * removing duplicates

    * high contrast improvement

    * separate file for tokens to avoid duplication on .css files

    * brand center enabled by default

    * another pallete generation method + accessibility improvement

    * 4px rounded standard

    * revert to 0 based on community feedback

    * fix css to less

    * same as last but for buttons

    * new as primary

    * style

    * changes to twig/classes

    * modal buttons

    * fix for icon-only

    * Fetch IP Lookup Data Store button

    * change the way sizes are handled

    * email settings

    * fix for icons

    * twig

    * campaign builder buttons + add icons

    * types of form/email/sms

    * fix dropdown spacing

    * wip

    * wip

    * [UI] Buttons

    * fix: tertiary borders and toggle icon color

    * cs fix

    * fix: ghost buttons horizontal alignment

    * cs fix

    * cs fix again

    * workaround: non standard buttons

    * workaround: dropdown links spacing

    * workaround: global search button background

    * fix for outline

    * fix for alignment of btn-default

    * Squashed commit of the following:

    commit 9a03509
    Merge: 5f73439 c95fcd7
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 31 10:54:22 2024 -0300

        Merge remote-tracking branch 'upstream/5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit c95fcd7
    Author: Patrick Jenkner <139468697+PatrickJenkner@users.noreply.github.com>
    Date:   Wed Jul 31 14:49:08 2024 +0200

        Re-enable rendering of html in form field labels (mautic#14026)

        * add "raw" to form field labels to enable html rendering

        * replace "raw" filter with "purify" filter

    commit a703a34
    Author: Mattias Michaux <mattias.michaux@dropsolid.com>
    Date:   Wed Jul 31 10:54:58 2024 +0200

        Ensure asset and page titles are correctly shown in ckeditor (mautic#13678)

        * Ensure asset and page titles are correctly shown in ckeditor

        * deprecate methods that no longer should be used

        ---------

        Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>
        Co-authored-by: John Linhart <admin@escope.cz>

    commit f46d79f
    Author: Abhisek Mazumdar <abhisekmazumdar@users.noreply.github.com>
    Date:   Wed Jul 31 13:55:49 2024 +0530

        Fix generatePageTitle to retrieve the correct page header tag. (mautic#13921)

    commit 0098ccf
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 31 04:44:59 2024 -0300

        [UI] Replace FA icons (part 3) (mautic#13957)

        * [UI] Stable - replace FA icons

        * fa-fw / ri-fw

        * fa-lg / ri-lg

        * class="fa / class="

        * potentially unstable

        * potentially unstable

        * fix: duplicated search icon

    commit a69b55c
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 31 04:43:53 2024 -0300

        [UX] Copy code blocks on click (mautic#13897)

        * [UX] Copy code blocks on click

        * fix AJAX calls

    commit 5f73439
    Merge: dbce124 32aeb2a
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 24 14:24:31 2024 -0300

        Merge branch '5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit dbce124
    Merge: d7095cf 6463f65
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Tue Jul 16 14:32:32 2024 -0300

        Merge branch '5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit d7095cf
    Merge: ea1a97f bf37943
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Mon Jul 15 11:12:28 2024 -0300

        Merge branch '5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit ea1a97f
    Merge: c3d62a5 eee1879
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Mon Jul 15 07:47:53 2024 -0300

        Merge branch '5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit c3d62a5
    Merge: 5b91ca4 77e642d
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Tue Jul 9 13:30:36 2024 -0300

        Merge remote-tracking branch 'upstream/5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit 5b91ca4
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Mon Jul 1 17:54:41 2024 -0300

        outline

    commit 7d3ee43
    Merge: a7fbf15 760bf0c
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Mon Jul 1 17:37:38 2024 -0300

        Merge remote-tracking branch 'upstream/5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit a7fbf15
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jun 26 16:06:22 2024 -0300

        Assign links and body text color to tokens

    commit 26f781d
    Merge: dd992b1 4fb0c5c
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jun 26 16:01:19 2024 -0300

        Merge remote-tracking branch 'upstream/5.x' into ux-More-intuitive-links-in-small-grey-typeface-that-you-dont-know-are-links-is-one-example

    commit dd992b1
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jun 26 15:57:44 2024 -0300

        Revert "underline when high contrast theme is enabled"

        This reverts commit d212172.

    commit d212172
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Mon Jun 17 14:45:40 2024 -0300

        underline when high contrast theme is enabled

    * fix outline

    * fixing @LordRembo

    * comment

    * sidebar fix

    * Squashed commit of the following:

    commit 62c7d49dc7938f4c63a2071d47aa56929cb3aa1f
    Merge: a33f0aa f455fc0
    Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Fri Aug 30 10:22:40 2024 -0300

        Merge remote-tracking branch 'upstream/5.x' into ux-replace-default-buttons-with-ghost

    commit a33f0aa
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Thu Jul 18 11:38:52 2024 -0300

        fix send icon

    commit b408cd4
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Thu Jul 18 11:37:49 2024 -0300

        fix: page actions buttons

    commit c1d664d
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 14:15:50 2024 -0300

        fix: dashboard daterange button

    commit de08169
    Merge: 21c84f2 cf59090
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 14:09:27 2024 -0300

        Merge branch 'ui-ux-buttons' into ux-replace-default-buttons-with-ghost

    commit 21c84f2
    Merge: 20eb961 a1a6aac
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 13:38:43 2024 -0300

        Merge branch 'ui-ux-buttons' into ux-replace-default-buttons-with-ghost

    commit 20eb961
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 12:51:55 2024 -0300

        Revert ".btn-default in themes?"

        This reverts commit 19c24f2.

    commit 19c24f2
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 12:48:42 2024 -0300

        .btn-default in themes?

    commit 2b57c56
    Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
    Date:   Wed Jul 17 12:47:51 2024 -0300

        [UI] Assigning hierarchycal buttons to buttons

    * stability improvement

    * improvement to styles

    * reset dropdown-toggle

    * fix test

    * modal footer

    * fix for containers
Merge remote-tracking branch 'upstream/5.x' into ui-toggle-dark-theme
This was referenced Oct 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

code-review-needed PR's that require a code review before merging developer-experience Anything related to developer experience enhancement Any improvement to an existing feature or functionality essential This must be done to close the milestone pending-test-confirmation PR's that require one test before they can be merged T1 Low difficulty to fix (issue) or test (PR) user-experience Anything related to related to workflows, feedback, and navigation user-interface Anything related to appearance, layout, and interactivity

Projects

Archived in project
Status: Done

Development

Successfully merging this pull request may close these issues.

4 participants