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
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] 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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/15073128/204815039-5b059801-4ec0-4f9b-ba79-46ae40603a38.png"](https://user-images.githubusercontent.com/15073128/204815039-5b059801-4ec0-4f9b-ba79-46ae40603a38.png"){kind=link}