You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2022/11/30 14:02:58 UTC

[GitHub] [superset] kgabryje opened a new pull request, #22273: Feat/horizontal native filters

kgabryje opened a new pull request, #22273:
URL: https://github.com/apache/superset/pull/22273

### SUMMARY
This PR adjusts native filter components for horizontal filter bar.
Noteworthy changes:
1. Value filter:
a) use `maxTagCount: responsive` while in horizontal orientation, which ensures that the Select component doesn't grow in height when selecting more values
b) Set a fixed `maxTagTextLength`, so that while in `responsive` mode, at least 1 value is always displayed
c) Customize `maxTagPlaceholder, so that the overflow tag doesn't display 3 dots at the end, which takes precious space
(e.g. instead of the default `+ 1 ...` we show `+1` when 1 item is overflowing)
2. Range filter:
a) Adjust the top and bottom margin to make sure that the slider is centered in horizontal mode
b) Decrease font weight and line height so that the marks fit well in the horizontal filter bar
3. Time range filter: add styling to make sure that the pill is centered in horizontal mode

Known issues:
1. Due to how the responsive mode works, we needed to set a fixed max tag text length, which means that if there's 1 tag, it won't take the whole available space and it will be truncated. It looks a bit awkward and I'm searching for a better solution.
2. The time range pill's width is dynamic depending on selected time range ("No filter" pill is smaller than "2022-01-01 : 2022-12-01" pill). However, the filter component itself always has a fixed width, which means that if the pill is short, there might be some empty space between the time range filter and the filter next to it.

### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<img width="1792" alt="Screenshot 2022-11-30 at 14 49 21" src="https://user-images.githubusercontent.com/15073128/204815039-5b059801-4ec0-4f9b-ba79-46ae40603a38.png">

### TESTING INSTRUCTIONS
1. Enable `HORIZONTAL_FILTER_BAR` ff
3. Set horizontal mode for the native filters bar
4. Add various types of filters
5. Make sure that nothing breaks

### ADDITIONAL INFORMATION


- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API

--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org