feat: Adds the DropdownContainer component

[michael-s-molina]

SUMMARY

Adds a new component called DropdownContainer. The component is a horizontal container that displays overflowed items in a popover. It also displays an indicator of how many items are currently overflowing.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-10-29.at.6.30.15.PM.mov

TESTING INSTRUCTIONS

Open the Storybook and check the new component.

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

[michael-s-molina]

I already have RTL tests locally but some are still failing. I'll add them soon. I'll also add an MDX file with an overview of the component.

[kgabryje]

Awesome job! 1 suggestion - in the recording we can see some flashing of appearing/disappearing elements during resizing. I'm assuming that happens when container size is on the verge of fitting or not an additional element. Could we maybe add a few pixels hysteresis to changing the state of displayed/hidden elements?

[michael-s-molina]

in the recording we can see some flashing of appearing/disappearing elements during resizing. I'm assuming that happens when container size is on the verge of fitting or not an additional element. Could we maybe add a few pixels hysteresis to changing the state of displayed/hidden elements?

Actually, this is somewhat related to Select's horizontal label. If you set the label position at the top or remove it, you'll see it's no longer flicking. I'll check this alongside the RTL tests. I just wanted to resolve the blocking ones first in case we need to merge the PR to unblock other things.

[codecov]

Codecov Report

Merging #21974 (d3f6349) into master (779d9f7) will decrease coverage by 0.04%.
The diff coverage is 17.18%.

@@            Coverage Diff             @@
##           master   #21974      +/-   ##
==========================================
- Coverage   66.95%   66.91%   -0.05%     
==========================================
  Files        1807     1808       +1     
  Lines       69196    69282      +86     
  Branches     7402     7432      +30     
==========================================
+ Hits        46331    46357      +26     
- Misses      20954    21012      +58     
- Partials     1911     1913       +2     

Flag	Coverage Δ
javascript	53.33% <17.18%> (-0.06%)	⬇️

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

Impacted Files	Coverage Δ
...rontend/src/components/DropdownContainer/index.tsx	0.00% <0.00%> (ø)
superset-frontend/src/components/Select/styles.tsx	81.81% <63.63%> (-18.19%)	⬇️
...set-frontend/src/components/Select/AsyncSelect.tsx	87.84% <100.00%> (+0.13%)	⬆️
superset-frontend/src/components/Select/Select.tsx	92.70% <100.00%> (+0.15%)	⬆️
...ashboard/components/BuilderComponentPane/index.tsx	66.66% <0.00%> (-9.81%)	⬇️
...ters/FiltersConfigModal/FiltersConfigForm/utils.ts	77.77% <0.00%> (-4.58%)	⬇️
...t-frontend/src/dashboard/components/SliceAdder.jsx	60.27% <0.00%> (-2.40%)	⬇️
...frontend/src/dashboard/components/Header/index.jsx	58.99% <0.00%> (-0.87%)	⬇️
...et-frontend/src/explore/reducers/exploreReducer.js	38.09% <0.00%> (-0.62%)	⬇️
...d/src/SqlLab/components/SaveDatasetModal/index.tsx	52.27% <0.00%> (-0.61%)	⬇️
... and 36 more

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

[geido]

Tested locally. LGreaTM!

[codyml]

@michael-s-molina This looks great, thanks! Would it be possible to add a prop for customizing the value in the badge? For horizontal filter bar, I believe we'll need to show the number of active filters, not the total number of filters. If there was a badge count prop, we could handle calls to onOverflowingStateChange by checking which overflowing filters in the dropdown are active and setting the badge accordingly.

[codyml]

@michael-s-molina For the horizontal filter bar, I think we may also need a way to programmatically open/close the dropdown. Would that be possible to include here, maybe with a useImperativeHandle? I think we'll also want to be able to scroll to and highlight overflow content, so could we also maybe expose a ref to the dropdown content container?

[kgabryje]

Merged to unblock other tasks, we'll address @codyml's comments in other PRs