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.

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

[UI] Dropdown menus #13749

Draft
wants to merge 21 commits into
base: 5.x
Choose a base branch
from
Draft

Conversation

andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented May 14, 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

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 code review.

It changes dropdown styles and makes it compatible with dark theme.
Also fixes the too tiny size of clickable items on mobile.

Now when you hover over danger actions, have better visual feedback:

dropdown-danger.mp4

Or navigating with your keyboard arrows

dropdown-focus.mp4
Before After
image 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 the Dashboard
  3. Click on the caret to open the dropdown

@andersonjeccel andersonjeccel requested review from a team, ricfreire and Esthertests May 14, 2024 15:41
@andersonjeccel andersonjeccel self-assigned this May 14, 2024
@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity ready-to-test PR's that are ready to test code-review-needed PR's that require a code review before merging enhancement Any improvement to an existing feature or functionality labels May 14, 2024
Copy link

codecov bot commented May 14, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 61.93%. Comparing base (4883fa0) to head (bdce257).
Report is 7 commits behind head on 5.x.

Current head bdce257 differs from pull request most recent head 2a12ac5

Please upload reports for the commit 2a12ac5 to get more accurate results.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff              @@
##                5.x   #13749      +/-   ##
============================================
+ Coverage     61.62%   61.93%   +0.30%     
- Complexity    34145    34195      +50     
============================================
  Files          2245     2248       +3     
  Lines        102077   102265     +188     
============================================
+ Hits          62909    63337     +428     
+ Misses        39168    38928     -240     

see 23 files with indirect coverage changes

Copy link

@PatrickJenkner PatrickJenkner left a comment

Choose a reason for hiding this comment

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

Works and looks good on both desktop and mobile 👍

@PatrickJenkner PatrickJenkner added pending-test-confirmation PR's that require one test before they can be merged and removed ready-to-test PR's that are ready to test labels May 15, 2024
@escopecz escopecz self-requested a review May 21, 2024 07:50
@escopecz
Copy link
Sponsor Member

Isn't this PR based on #13735?

@LordRembo
Copy link
Contributor

@andersonjeccel as mentioned in other similar PR's, this is another one based on the Tokens branch. I think there's 5 or 6 now? Please put it in draft until we discussed what you're trying to achieve and set a better course of action.

@andersonjeccel andersonjeccel marked this pull request as draft May 21, 2024 11:01
@andersonjeccel andersonjeccel added the user-experience Anything related to related to workflows, feedback, and navigation label May 23, 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 enhancement Any improvement to an existing feature or functionality 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
Status: In Progress
Development

Successfully merging this pull request may close these issues.

None yet

5 participants