feat(native-filters): Adjust filter components for horizontal mode

[kgabryje]

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

TESTING INSTRUCTIONS

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

ADDITIONAL INFORMATION

• [ ] Has associated issue:
• [ ] Required feature flags:
• [ ] Changes UI
• [ ] Includes DB Migration (follow approval process in SIP-59)
  • [ ] 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

CC @codyml for review

[codecov[bot]]

Codecov Report

Merging #22273 (4f76d87) into master (2bdf22b) will increase coverage by 0.00%. The diff coverage is 68.57%.

:exclamation: Current head 4f76d87 differs from pull request most recent head 1d38d63. Consider uploading reports for the commit 1d38d63 to get more accurate results

@@           Coverage Diff           @@
##           master   #22273   +/-   ##
=======================================
  Coverage   55.69%   55.70%           
=======================================
  Files        1846     1847    +1     
  Lines       70302    70330   +28     
  Branches     7689     7701   +12     
=======================================
+ Hits        39157    39177   +20     
- Misses      29151    29155    +4     
- Partials     1994     1998    +4     

Flag	Coverage Δ
javascript	53.81% <68.57%> (+0.01%)	:arrow_up:

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...Filters/FilterBar/FilterControls/FilterControl.tsx	29.03% <0.00%> (ø)
...veFilters/FilterBar/FilterControls/FilterValue.tsx	6.31% <0.00%> (ø)
...end/src/filters/components/Range/transformProps.ts	100.00% <ø> (ø)
...nd/src/filters/components/Select/transformProps.ts	91.66% <ø> (ø)
...et-frontend/src/filters/components/Select/types.ts	100.00% <ø> (ø)
...d/src/filters/components/Time/TimeFilterPlugin.tsx	0.00% <ø> (ø)
...tend/src/filters/components/Time/transformProps.ts	0.00% <ø> (ø)
...src/filters/components/Range/RangeFilterPlugin.tsx	68.80% <40.00%> (-1.95%)	:arrow_down:
...erset-frontend/src/components/Select/CustomTag.tsx	64.28% <64.28%> (ø)
...es/superset-ui-core/src/chart/models/ChartProps.ts	100.00% <100.00%> (ø)
... and 3 more

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[geido]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions[bot]]

@geido Ephemeral environment spinning up at http://54.188.207.110:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[kgabryje]

@michael-s-molina @geido @codyml I implemented the Select changes based on our yesterday discussion. Can you take a look?

[geido]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions[bot]]

@geido Ephemeral environment spinning up at http://52.26.161.172:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[kgabryje]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions[bot]]

@kgabryje Ephemeral environment spinning up at http://34.208.45.61:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

LGTM! One thing I noticed that can probably wait for a future PR (or left as-is) is that if there's a time filter in the overflow dropdown, clicking either of the popover buttons also closes the dropdown, which is probably not what we want:

Good point @codyml. Let's handle that in a follow-up.

[github-actions[bot]]

Ephemeral environment shutdown and build artifacts deleted.