spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard
verified publisher icon adobe

fix: adding max height and full height to picker menu component

Open aramos-adobe opened this issue 1 year ago • 6 comments

Description

The picker menu list can get very extensive. Why don't we add the ability to set a fixed height to scroll or extend the menu to the height of the viewport where a user can select their option.

  • Added max-block-size capabilities
  • As a Web Component, is-fixed would be the attribute to enable the CSS modification
  • Added boolean in Storybook to enable fixed height if isOpen is true

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • [ ] The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • [ ] VRTs have been run and looked at.
  • [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

  • [ ] I have read the contribution guidelines.
  • [ ] I have updated relevant storybook stories and templates.
  • [ ] I have tested these changes in Windows High Contrast mode.
  • [ ] If my change impacts other components, I have tested to make sure they don't break.
  • [ ] If my change impacts documentation, I have updated the documentation accordingly.
  • [ ] ✨ This pull request is ready to merge. ✨

aramos-adobe avatar Aug 29 '24 15:08 aramos-adobe

🦋 Changeset detected

Latest commit: 1e39eff73e4648d33664ca40670d3d222f27d9e8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@spectrum-css/popover Minor
@spectrum-css/picker Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Aug 29 '24 15:08 changeset-bot[bot]

🚀 Deployed on https://pr-3051--spectrum-css.netlify.app

github-actions[bot] avatar Aug 29 '24 15:08 github-actions[bot]

File metrics

Summary

Total size: 4.10 MB* Total change (Δ): ⬇ 2.61 KB (-0.06%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
alertdialog 5.14 KB ⬆ 0.03 KB
assetlist 7.91 KB ⬆ 0.01 KB
avatar 5.04 KB ⬆ 0.06 KB
button 83.00 KB ⬇ 0.99 KB
calendar 19.29 KB ⬆ 0.02 KB
card 20.64 KB ⬇ 0.02 KB
closebutton 15.69 KB ⬇ 0.14 KB
dialog 14.67 KB ⬆ 0.03 KB
fieldlabel 6.63 KB ⬆ 0.09 KB
modal 5.47 KB ⬆ 0.01 KB
picker 30.25 KB ⬆ 0.11 KB
popover 16.01 KB ⬆ 0.14 KB
site 14.26 KB ⬆ < 0.01 KB
stepper 20.54 KB ⬇ 0.11 KB
toast 8.60 KB ⬇ 0.03 KB
tooltip 33.97 KB ⬆ < 0.01 KB
treeview 17.06 KB ⬇ 0.10 KB
underlay 3.27 KB ⬆ 0.01 KB

Details

alertdialog

File Head Base Δ
index-base.css 5.14 KB 5.11 KB ⬆ 0.03 KB (0.61%)
index-vars.css 5.14 KB 5.11 KB ⬆ 0.03 KB (0.61%)
index.css 5.14 KB 5.11 KB ⬆ 0.03 KB (0.61%)

assetlist

File Head Base Δ
index-base.css 7.91 KB 7.90 KB ⬆ 0.01 KB (0.07%)
index-vars.css 7.91 KB 7.90 KB ⬆ 0.01 KB (0.07%)
index.css 7.91 KB 7.90 KB ⬆ 0.01 KB (0.07%)

avatar

File Head Base Δ
index-base.css 5.04 KB 4.99 KB ⬆ 0.06 KB (1.08%)
index-vars.css 5.04 KB 4.99 KB ⬆ 0.06 KB (1.08%)
index.css 5.04 KB 4.99 KB ⬆ 0.06 KB (1.08%)

button

File Head Base Δ
index-base.css 53.04 KB 54.01 KB ⬇ 0.99 KB (-1.78%)
index-theme.css 30.56 KB 30.56 KB -
index-vars.css 83.00 KB 83.96 KB ⬇ 0.99 KB (-1.15%)
index.css 83.00 KB 83.96 KB ⬇ 0.99 KB (-1.15%)
themes/express.css 29.37 KB 29.37 KB -
themes/spectrum.css 29.43 KB 29.43 KB -

calendar

File Head Base Δ
index-base.css 19.29 KB 19.27 KB ⬆ 0.02 KB (0.09%)
index-vars.css 19.29 KB 19.27 KB ⬆ 0.02 KB (0.09%)
index.css 19.29 KB 19.27 KB ⬆ 0.02 KB (0.09%)

card

File Head Base Δ
index-base.css 20.64 KB 20.66 KB ⬇ 0.02 KB (-0.11%)
index-vars.css 20.64 KB 20.66 KB ⬇ 0.02 KB (-0.11%)
index.css 20.64 KB 20.66 KB ⬇ 0.02 KB (-0.11%)

closebutton

File Head Base Δ
index-base.css 15.05 KB 15.19 KB ⬇ 0.14 KB (-0.93%)
index-theme.css 1.26 KB 1.26 KB -
index-vars.css 15.69 KB 15.83 KB ⬇ 0.14 KB (-0.89%)
index.css 15.69 KB 15.83 KB ⬇ 0.14 KB (-0.89%)
themes/express.css 0.96 KB 0.96 KB -
themes/spectrum.css 0.95 KB 0.95 KB -

dialog

File Head Base Δ
index-base.css 14.67 KB 14.64 KB ⬆ 0.03 KB (0.21%)
index-vars.css 14.67 KB 14.64 KB ⬆ 0.03 KB (0.21%)
index.css 14.67 KB 14.64 KB ⬆ 0.03 KB (0.21%)

fieldlabel

File Head Base Δ
index-base.css 6.63 KB 6.54 KB ⬆ 0.09 KB (1.39%)
index-vars.css 6.63 KB 6.54 KB ⬆ 0.09 KB (1.39%)
index.css 6.63 KB 6.54 KB ⬆ 0.09 KB (1.39%)

modal

File Head Base Δ
index-base.css 5.47 KB 5.46 KB ⬆ 0.01 KB (0.13%)
index-vars.css 5.47 KB 5.46 KB ⬆ 0.01 KB (0.13%)
index.css 5.47 KB 5.46 KB ⬆ 0.01 KB (0.13%)

picker

File Head Base Δ
index-base.css 28.37 KB 28.27 KB ⬆ 0.11 KB (0.37%)
index-theme.css 2.50 KB 2.50 KB -
index-vars.css 30.25 KB 30.15 KB ⬆ 0.11 KB (0.34%)
index.css 30.25 KB 30.15 KB ⬆ 0.11 KB (0.34%)
themes/express.css 1.51 KB 1.51 KB -
themes/spectrum.css 1.60 KB 1.60 KB -

popover

File Head Base Δ
index-base.css 15.86 KB 15.72 KB ⬆ 0.14 KB (0.89%)
index-theme.css 0.78 KB 0.78 KB -
index-vars.css 16.01 KB 15.87 KB ⬆ 0.14 KB (0.88%)
index.css 16.01 KB 15.87 KB ⬆ 0.14 KB (0.88%)
themes/express.css 0.69 KB 0.69 KB -
themes/spectrum.css 0.72 KB 0.72 KB -

site

File Head Base Δ
index-base.css 14.26 KB 14.26 KB ⬆ < 0.01 KB (0.01%)
index-vars.css 14.26 KB 14.26 KB ⬆ < 0.01 KB (0.01%)
index.css 14.26 KB 14.26 KB ⬆ < 0.01 KB (0.01%)

stepper

File Head Base Δ
index-base.css 17.14 KB 17.25 KB ⬇ 0.11 KB (-0.64%)
index-theme.css 4.01 KB 4.01 KB -
index-vars.css 20.54 KB 20.65 KB ⬇ 0.11 KB (-0.53%)
index.css 20.54 KB 20.65 KB ⬇ 0.11 KB (-0.53%)
themes/express.css 2.33 KB 2.33 KB -
themes/spectrum.css 2.29 KB 2.29 KB -

toast

File Head Base Δ
index-base.css 8.36 KB 8.39 KB ⬇ 0.03 KB (-0.30%)
index-theme.css 0.87 KB 0.87 KB -
index-vars.css 8.60 KB 8.63 KB ⬇ 0.03 KB (-0.29%)
index.css 8.60 KB 8.63 KB ⬇ 0.03 KB (-0.29%)
themes/express.css 0.75 KB 0.75 KB -
themes/spectrum.css 0.75 KB 0.75 KB -

tooltip

File Head Base Δ
index-base.css 33.71 KB 33.70 KB ⬆ < 0.01 KB (0.01%)
index-theme.css 0.89 KB 0.89 KB -
index-vars.css 33.97 KB 33.96 KB ⬆ < 0.01 KB (0.01%)
index.css 33.97 KB 33.96 KB ⬆ < 0.01 KB (0.01%)
themes/express.css 0.76 KB 0.76 KB -
themes/spectrum.css 0.76 KB 0.76 KB -

treeview

File Head Base Δ
index-base.css 17.06 KB 17.16 KB ⬇ 0.10 KB (-0.57%)
index-vars.css 17.06 KB 17.16 KB ⬇ 0.10 KB (-0.57%)
index.css 17.06 KB 17.16 KB ⬇ 0.10 KB (-0.57%)

underlay

File Head Base Δ
index-base.css 3.27 KB 3.27 KB ⬆ 0.01 KB (0.15%)
index-vars.css 3.27 KB 3.27 KB ⬆ 0.01 KB (0.15%)
index.css 3.27 KB 3.27 KB ⬆ 0.01 KB (0.15%)
* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions[bot] avatar Aug 29 '24 15:08 github-actions[bot]

PR Looking great! Just an FYI. This issue was also being reported while using Tray component in isolation. So would it also be okay to add this property in tray.css too so that users can have control on the max-height? cc @pfulton @rubencarvalho

Rajdeepc avatar Aug 30 '24 14:08 Rajdeepc

@rubencarvalho Ready for review my man!

aramos-adobe avatar Sep 05 '24 17:09 aramos-adobe

@pfulton Would you let us know what has been decided here? I see its still open!

Rajdeepc avatar Oct 07 '24 12:10 Rajdeepc