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 standardized common SortIcon component #13987

Merged
merged 15 commits into from
Nov 30, 2022
Merged

Conversation

maxiadlovskii
Copy link
Contributor

@maxiadlovskii maxiadlovskii commented Nov 17, 2022

Description

This PR adds a Sort Icon component. This component can be used in different application parts to ensure that we have the same standard.

Motivation and Context

fix: #13982

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.

@maxiadlovskii maxiadlovskii marked this pull request as ready for review November 18, 2022 13:15
@maxiadlovskii maxiadlovskii changed the title Create sort Icon Add standartized common SortIcon component Nov 18, 2022
cursor: pointer;
position: relative;
color: ${theme.colors.gray[70]};
&.active {
Copy link
Contributor

Choose a reason for hiding this comment

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

instead of adding a class we can just provide the state as a prop ($active) for the component.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I use this class in the tests. with a prop I wouldn't be able to pick active item

if (activeDirection === descId) return 'arrow-down-wide-short';

return 'arrow-down-wide-short';
}, [activeDirection, ascId, descId]);
Copy link
Contributor

Choose a reason for hiding this comment

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

It probably costs more to use useMemo here, compared with not memorising the result.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Maybe... I will change it. But descId in condition. We might need it for the future

@dennisoelkers dennisoelkers changed the title Add standartized common SortIcon component Add standardized common SortIcon component Nov 23, 2022
@linuspahl linuspahl merged commit 7436414 into master Nov 30, 2022
@linuspahl linuspahl deleted the feat/Creat-sort-icon branch November 30, 2022 13:31
bernd pushed a commit that referenced this pull request Dec 9, 2022
* Create sort Icon

* Allow defining custom direction ids for common `SortIcon`.

* Create sort Icon

* Add sort Icon to message table and data table

* Fix data table header test

* Add license

* Add tests

* Add changelog

* Refactoring

* fix tsc errors

Co-authored-by: Linus Pahl <linus@graylog.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Standardize sort icons for data table and message list.
2 participants