Skip to content

[UI] Modals #13849

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
Closed
wants to merge 63 commits into from
Closed

[UI] Modals #13849

wants to merge 63 commits into from

Conversation

andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented Jun 17, 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#...
Issue(s) addressed Fixes #13164

Description

Specifically:

  • Makes overlays blurred when a modal is open
  • Integrates with [UI] Fields #13752 to ensure fields keep visible while on top of the modal background
Before After
image 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 Categories > New > See white fields and blurred background

@andersonjeccel
tokens
6a16fdf
@andersonjeccel
incorporating all bootstrap variables
23e3b6f
@andersonjeccel
migrating mautic variables into bootstrap
f4baec1
@andersonjeccel
fixing broken darken/lighten
5a97e52
@andersonjeccel
variables
af355d6
@andersonjeccel
revert removing 5x duplicated import rules
e7dbe89 
revert
Revert "fixing broken darken/lighten"
This reverts commit bcf4ac98e07c0c17162a74794a8161d5398c3d7c.
@andersonjeccel
grunt compile-less
4aaa9d9
@andersonjeccel
aligning previous tokens
7f261c4
@andersonjeccel
remove duplicated imports
af02466
@andersonjeccel
dark color scheme disabled by default to avoid conflicts
c7d151b
@andersonjeccel
utilities syntax fix
42d1c5d
@andersonjeccel
improve radius calc
ff5a8ed
@andersonjeccel
Merge branch '5.x' into ui-token-based-approach-for-interface-element…
5e3bee9 
…s-and-colors
@andersonjeccel
tag to label token names
f80989c
@andersonjeccel
setting the dark theme implementation method
d91ba0b
@andersonjeccel
set implementation mode for high contrast + run grunt-compile-less
db55686
@andersonjeccel
Merge branch '5.x' into ui-token-based-approach-for-interface-element…
1675884 
…s-and-colors
@andersonjeccel
fix missing transparency bg colors
c848335
@andersonjeccel
darker brand bg on dark theme
b3d2af4
@andersonjeccel
Responsive typography
d0e7fec
@andersonjeccel
secondary brand color support
74f49e0
@andersonjeccel
style fixes
40a2303
@andersonjeccel
fixes for secondary brand color support
65ee89b
@andersonjeccel
transparency for borders when on brand bg
a8c4748
@andersonjeccel
Revert "transparency for borders when on brand bg"
d32df8c 
This reverts commit a8c4748.
@andersonjeccel
Merge branch '5.x' into ui-token-based-approach-for-interface-element…
f2cab43 
…s-and-colors
@andersonjeccel
sat improv
3c8a340
@andersonjeccel
reduced max bdr value
6cdf195
@andersonjeccel
enhanced border calc
e6f2b75
@andersonjeccel
removing duplicates
179c312
@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 blocked Something blocks this PR/issue (e.g. waiting for another PR to be merged) code-review-passed PRs which have passed code review labels Sep 11, 2024
@andersonjeccel andersonjeccel marked this pull request as ready for review September 11, 2024 15:07
@andersonjeccel andersonjeccel added the accessibility Any issues relating to accessibility label Sep 11, 2024
@andersonjeccel andersonjeccel removed the request for review from shinde-rahul September 20, 2024 09:44
oltmanns-leuchtfeuer
oltmanns-leuchtfeuer approved these changes Sep 26, 2024
View reviewed changes
Copy link
Contributor

@oltmanns-leuchtfeuer oltmanns-leuchtfeuer left a comment

Choose a reason for hiding this comment

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

Nice Improvement, really puts an emphasis on the modal and increases its visibility by alot.

@oltmanns-leuchtfeuer oltmanns-leuchtfeuer added 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 Sep 26, 2024
@andersonjeccel andersonjeccel added the hacktoberfest Issues that would be great for Hacktoberfest participants to work on label Oct 2, 2024
@MojisolaaaO
Copy link

Nice job improving the visibility of the field! However, the buttons on the modal are purple, which doesn't match the color scheme in the UI design.
View screenshot attached

@andersonjeccel
Copy link
Contributor Author

@MojisolaaaO Hm, I'm a bit confused... Mautic's brand color is the same color you're showing on the screenshot. Could you provide more details?

@MojisolaaaO
Copy link

@andersonjeccel The color of the buttons in the screenshot does not match the color of the buttons in the description above; however, since it in line with Mautic's brand color, it is fine.

@MojisolaaaO MojisolaaaO mentioned this pull request Oct 4, 2024
Closed
1 task
@andersonjeccel
Copy link
Contributor Author

@MojisolaaaO Oh, my PR only changed the modals, the buttons were redesigned through other PR :)

Thanks for reviewing!

@andersonjeccel
Copy link
Contributor Author

Well, this PR was merged in #13767 so I'll close it

@andersonjeccel andersonjeccel deleted the ui-modals branch October 11, 2024 14:36
@escopecz escopecz removed this from the 5.2 milestone Dec 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

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

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

3 more reviewers

@LordRembo LordRembo LordRembo approved these changes

@oltmanns-leuchtfeuer oltmanns-leuchtfeuer oltmanns-leuchtfeuer approved these changes

@MojisolaaaO MojisolaaaO MojisolaaaO approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@andersonjeccel andersonjeccel

Labels
accessibility Any issues relating to accessibility code-review-needed PR's that require a code review before merging enhancement Any improvement to an existing feature or functionality hacktoberfest Issues that would be great for Hacktoberfest participants to work on 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
Mautic's No/Low/Code Tasks
Status: Done
Open Source Fridays
Archived in project
UX/UI Tiger Team
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Align modals to the design system
5 participants
@andersonjeccel @MojisolaaaO @LordRembo @oltmanns-leuchtfeuer @escopecz