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

Add clear button to list filter search input #1845

Merged
merged 5 commits into from
Oct 15, 2021

Conversation

7dJx1qP
Copy link
Contributor

@7dJx1qP 7dJx1qP commented Oct 14, 2021

Addresses #1306 but only for the ListFilter component.
image

Closes #1306

Copy link
Collaborator

@WithoutPants WithoutPants left a comment

Choose a reason for hiding this comment

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

  • The x button should only be visible if there is text entered in the text field.
  • Add a className to the button so that it can be manipulated with css.
  • The button probably needs some styling work on it. The colour needs to be more subtle and it probably should change background colour on hover. It stands out a lot in the current version.

Comment on lines 228 to 235
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="filter-tooltip">
<FormattedMessage id="actions.clear" />
</Tooltip>
}
>
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think an overlay is necessary for this. A title on the button should be sufficient.

@7dJx1qP
Copy link
Contributor Author

7dJx1qP commented Oct 14, 2021

image
Button now appears only if text is entered
Added a classname and customized the styling to make the button more subtle. It uses the muted text color which turns to white on hover. Removed all other button effect styling and used absolute positioning so it is more integrated into the input field rather than looking like a completely separate button

Copy link
Collaborator

@kermieisinthehouse kermieisinthehouse left a comment

Choose a reason for hiding this comment

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

Tested and reviewed the requested changes, approved

@kermieisinthehouse kermieisinthehouse added improvement Something needed tweaking. ui Issues related to UI labels Oct 14, 2021
@kermieisinthehouse kermieisinthehouse added this to the Version 0.11.0 milestone Oct 14, 2021
<Button
variant="secondary"
onClick={onClearQuery}
title={intl.formatMessage({ id: "actions.search" })}
Copy link
Collaborator

Choose a reason for hiding this comment

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

This should be actions.clear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement Something needed tweaking. ui Issues related to UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] Clear button on the search input group components
3 participants