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

feat(ra-ui-materialui): Improve FilterButton UX #10183

Closed
wants to merge 7 commits into from

Conversation

erwanMarmelab
Copy link
Contributor

@erwanMarmelab erwanMarmelab commented Sep 4, 2024

Problem

There is no way to differentiate between filter choices and filter actions (such as save current query) in the FilterButton

when you select a filter, it disappears from the list, which changes the place of each choice item and makes it hard to remember where is the filter you want to enable ; same for the actions (Remove all filters)

To Do

  • Add a divider to separate between the filter choices and filter actions
  • Keep all choices in the list at all times, and simply gray out the items when they are not available
  • Test icons in the Filter Button Menu items
  • Add checkbox before filter names

Additional Checks

  • The PR targets master for a bugfix, or next for a feature
  • The PR includes unit tests (if not possible, describe why)
  • The PR includes one or several stories (if not possible, describe why)
    - [ ] The documentation is up to date

image

image

image

@erwanMarmelab erwanMarmelab added the WIP Work In Progress label Sep 4, 2024
@erwanMarmelab erwanMarmelab changed the title Add a divider to separate between the filter choices and filter actions feat(ra-ui-materialui): Improve FilterButton UX Sep 4, 2024
@@ -212,6 +213,16 @@ export const FilterButton = (props: FilterButtonProps) => {
</MenuItem>
)
)}
{hasFilterValues && (
<Box
Copy link
Member

Choose a reason for hiding this comment

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

use MUI's Divider instead

@@ -212,6 +213,16 @@ export const FilterButton = (props: FilterButtonProps) => {
</MenuItem>
)
)}
{hasFilterValues && (
Copy link
Member

Choose a reason for hiding this comment

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

Why this test?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To not display the divider if we don't have any option below
image

@erwanMarmelab
Copy link
Contributor Author

PR based from the wrong branch. New PR available : #10186

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants