Skip to content

[UI] New flexbox utilities #13772

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 9 commits into from
Jun 28, 2024
Merged

[UI] New flexbox utilities #13772

merged 9 commits into from
Jun 28, 2024

Conversation

andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented May 23, 2024 •
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#196
Issue(s) addressed Fixes #...

Description

This PR is based on another PR, where I introduce tokens to replace most of the UI variables, aiming to improve consistency in all components. We need it to be merged before this one becomes available for test.

It creates new classes for most-used flexbox properties.
Also extends existing classes for things like padding.

📋 Steps to test this PR:

  1. No testing

@andersonjeccel andersonjeccel self-assigned this May 23, 2024
@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity enhancement Any improvement to an existing feature or functionality developer-experience Anything related to developer experience labels May 23, 2024
@andersonjeccel andersonjeccel requested a review from LordRembo May 23, 2024 19:11
@andersonjeccel andersonjeccel mentioned this pull request May 24, 2024
Closed
1 task
@andersonjeccel andersonjeccel marked this pull request as ready for review May 31, 2024 17:33
@LordRembo
Copy link
Contributor

These changes make a lot of sense, I think. As you mentioned in another discussion, we need some flexbox options in there to be able to add new elements when proposing design changes/additions in future (eg. cards).
Is it useful to also have some documentation about the new classes and structures you are adding, eg. how to use them?

@andersonjeccel
Copy link
Contributor Author

@LordRembo Nice idea, I'll add to my tasks list

@andersonjeccel andersonjeccel marked this pull request as draft June 11, 2024 12:50
This was referenced Jun 14, 2024
Merged
Merged
@andersonjeccel andersonjeccel added the blocked Something blocks this PR/issue (e.g. waiting for another PR to be merged) label Jun 17, 2024
@andersonjeccel andersonjeccel added this to the 5.2 milestone Jun 17, 2024
@andersonjeccel andersonjeccel mentioned this pull request Jun 24, 2024
Closed
LordRembo
LordRembo suggested changes Jun 25, 2024
View reviewed changes
Copy link
Contributor

@LordRembo LordRembo left a comment

Choose a reason for hiding this comment

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

Alright, then if docs exist & the dependency is merged, I think this one is okay for further approval.

@andersonjeccel andersonjeccel marked this pull request as ready for review June 26, 2024 14:41
@andersonjeccel andersonjeccel added code-review-passed PRs which have passed code review and removed blocked Something blocks this PR/issue (e.g. waiting for another PR to be merged) labels Jun 26, 2024
@andersonjeccel andersonjeccel mentioned this pull request Jun 26, 2024
Merged
@andersonjeccel
Copy link
Contributor Author

@escopecz This one is ready and has docs
We need it to proceed with the campaign builder redesign (it's probably the next one to be merged)

@LordRembo
Copy link
Contributor

@andersonjeccel Could you link to the docs, in the issue description?

escopecz
escopecz approved these changes Jun 27, 2024
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.

I don't see any issue in the code, but I'd also like to read more about how to use the new classes.

@escopecz escopecz requested a review from LordRembo June 28, 2024 11:31
LordRembo
LordRembo approved these changes Jun 28, 2024
View reviewed changes
Copy link
Contributor

@LordRembo LordRembo left a comment

Choose a reason for hiding this comment

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

Looks good, I'll just add a comment to the docs but it's not blocking for this PR.

@LordRembo LordRembo added the user-testing-passed PRs which have been successfully tested by the required number of people. label Jun 28, 2024
@andersonjeccel
Copy link
Contributor Author

Thanks!

@andersonjeccel
Copy link
Contributor Author

@escopecz Seems ready!

@escopecz escopecz merged commit cc730cc into mautic:5.x Jun 28, 2024
@andersonjeccel andersonjeccel deleted the ui-new-utilities branch July 15, 2024 16:42
andersonjeccel added a commit to andersonjeccel/mautic that referenced this pull request Jul 16, 2024
@andersonjeccel
Squashed commit of the following:
c60b544 
commit 5999093
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Sat Jun 29 17:17:09 2024 -0300

    [UI] Nav tabs line style

commit 40d6f56
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Sat Jun 29 16:50:32 2024 -0300

    [UI] Migrating nav-tabs to nav-tabs-contained by default

commit 1e4bea7
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Sat Jun 29 16:44:08 2024 -0300

    [UI] Line tabs for plugin modal content

commit cc730cc
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 11:54:51 2024 -0300

    [UI] New flexbox utilities (mautic#13772)

    * New utilities

    * media queries for wrap

    * responsive utilities

    * reorganize and expand utilities

commit 50085e0
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 11:54:17 2024 -0300

    Update regions.json (mautic#13877)

commit 73976d3
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 09:48:10 2024 -0300

    [UX] Modify form layout to add help block for Yes/No buttons and selection fields (mautic#13875)

    * modify form layout to add help for yes/no

    * modify form layout to add help for select fields

commit a87e23f
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 08:56:19 2024 -0300

    [UI] Improve timeline and audit log tables (mautic#13899)

commit f9c3d54
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 08:55:50 2024 -0300

    [UI] Keyboard shortcuts modal with translations (mautic#13895)

commit 05a3ffc
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 08:47:44 2024 -0300

    [UI] Dropdown menus (mautic#13749)

    * 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

    * semantic fixes

    * text and icon reorder improvement

    * replacing variables

    * danger dropdown

    * focus

    * minor fixes

commit f285c8b
Author: Alan Wierzchoń <100592709+AlanWierzchonCA@users.noreply.github.com>
Date:   Fri Jun 28 12:46:38 2024 +0200

    fix:[DPMMA-2626] fix focus view count stats (mautic#13561)

    Co-authored-by: Alan <alanwierzchon@gmail.com>
    Co-authored-by: John Linhart <admin@escope.cz>

commit d204139
Author: John Linhart <admin@escope.cz>
Date:   Fri Jun 28 12:46:26 2024 +0200

    Adding down() method to the Migration template (mautic#13823)

    * Adding the down() method to the migration template

    * Improving the migration template

    * Simplifying existing migrations with the new abstract method

    * CS fix

    * Making the down() method optional

commit 83d84d0
Author: John Linhart <admin@escope.cz>
Date:   Fri Jun 28 12:34:16 2024 +0200

    Revert "Segment email send to email address once (mautic#13768)" (mautic#13902)

    This reverts commit 8a2814a.

commit 953ba8b
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 07:28:50 2024 -0300

    [UI] Improve recent activity (mautic#13900)

commit abe9413
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 07:28:14 2024 -0300

    [UI] Code style (mautic#13898)

commit 8a2814a
Author: Hugo Prossaird <97947420+hugoprossaird@users.noreply.github.com>
Date:   Fri Jun 28 11:22:33 2024 +0200

    Segment email send to email address once (mautic#13768)

    * Segment email send to email address just once

    * Remove log

    * Fix new functional test (sql command issue)

    * fix - set sql mode in test session + cs fix

    * Fix disable ONLY_FULL_GROUP_BY on test

commit f32d229
Author: Zdeno Kuzmany <zdeno@kuzmany.biz>
Date:   Fri Jun 28 11:07:37 2024 +0200

    Fix elFinder paste image from search (mautic#13861)

commit a67c9e4
Author: Zdeno Kuzmany <zdeno@kuzmany.biz>
Date:   Fri Jun 28 11:05:07 2024 +0200

    Fix invalidate dashboard cache (mautic#13863)

    * Fix invalidate dashboard cache

    * Fic PHP Stan and unit tests

commit 36dc842
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Fri Jun 28 11:03:19 2024 +0200

    Auto-update GrapesJS generated JS dist files (mautic#13880)

    Co-authored-by: dennisameling <dennisameling@users.noreply.github.com>

commit 764d073
Author: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
Date:   Fri Jun 28 10:53:14 2024 +0200

    docs: add nishant-s7 as a contributor for code (mautic#13901)

    * docs: update README.md [skip ci]

    * docs: update .all-contributorsrc [skip ci]

    ---------

    Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>

commit 543cbd9
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 28 04:44:39 2024 -0300

    turn the message into an inline warning alert (mautic#13876)

commit cec91d7
Author: Zdeno Kuzmany <zdeno@kuzmany.biz>
Date:   Thu Jun 27 17:14:05 2024 +0200

    Fix operators for text type report filters (mautic#13867)

commit 1b2ccdb
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Thu Jun 27 09:54:12 2024 -0300

    [UI] Nav tabs and nav content (mautic#13888)

    * nav tabs

    * classes

    * grunt compile-less

    * moving paddings to the correct elements

    * additional css fixes

    * lead view fixes

    * minor improvements
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

+1 more reviewer

@LordRembo LordRembo LordRembo approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@andersonjeccel andersonjeccel

Labels
code-review-passed PRs which have passed code review developer-experience Anything related to developer experience enhancement Any improvement to an existing feature or functionality T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity user-testing-passed PRs which have been successfully tested by the required number of people.
Projects
Open Source Fridays
Archived in project
UX/UI Tiger Team
Status: Done
Milestone
5.2
Development

Successfully merging this pull request may close these issues.
3 participants
@andersonjeccel @LordRembo @escopecz