spectrum-web-components feat(picker): allow customisation of popover height

Description

Adds CSS custom property to adjust the popover height when needed.

Related issue(s)

https://github.com/adobe/spectrum-web-components/issues/4564

Motivation and context

For scenarios where there are a lot of options in the dropdown and the dropdown spawns the entire screen.

How has this been tested?

[ ] Test case 1
1. Go here
2. Add --sp-picker-popover-max-block-size: 100px on the sp-picker component
3. Observe the height of the popover is now 100px.

Screenshots (if appropriate)

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[x] If my change required a change to the documentation, I have updated the documentation in this pull request.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

Jun 17 '24 13:06 Rocss

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Jun 17 '24 14:06 github-actions[bot]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	222.628 kB	210.536 kB 🏆	210.831 kB
Scripts	54.665 kB	48.287 kB 🏆	48.506 kB
Stylesheet	34.957 kB	30.343 kB 🏆	30.397 kB
Document	6.024 kB	5.311 kB	5.306 kB 🏆
Font	126.982 kB	126.595 kB 🏆	126.622 kB

Request Count

Category	Latest	Main	Branch
Total	45	45	45
Scripts	37	37	37
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

Jun 17 '24 14:06 github-actions[bot]

Tachometer results

Chrome

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	647 kB	130.60ms - 132.78ms	-	faster ✔ 7% - 9% 9.33ms - 12.93ms
branch	634 kB	141.40ms - 144.25ms	slower ❌ 7% - 10% 9.33ms - 12.93ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	604 kB	60.73ms - 62.03ms	-	faster ✔ 6% - 9% 3.68ms - 5.79ms
branch	591 kB	65.29ms - 66.94ms	slower ❌ 6% - 9% 3.68ms - 5.79ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	603 kB	59.12ms - 60.18ms	-	faster ✔ 5% - 8% 3.29ms - 5.10ms
branch	591 kB	63.12ms - 64.58ms	slower ❌ 5% - 9% 3.29ms - 5.10ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	790 kB	1871.13ms - 1874.31ms	-	unsure 🔍 -0% - +0% -2.91ms - +1.39ms
branch	777 kB	1872.04ms - 1874.93ms	unsure 🔍 -0% - +0% -1.39ms - +2.91ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	788 kB	1858.19ms - 1862.02ms	-	unsure 🔍 -0% - +0% -3.43ms - +1.54ms
branch	775 kB	1859.46ms - 1862.63ms	unsure 🔍 -0% - +0% -1.54ms - +3.43ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	513 kB	525.47ms - 542.42ms	-	faster ✔ 1% - 5% 4.84ms - 25.83ms
branch	500 kB	543.08ms - 555.47ms	slower ❌ 1% - 5% 4.84ms - 25.83ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	723 kB	1857.30ms - 1860.92ms	-	unsure 🔍 -0% - +0% -2.57ms - +2.36ms
branch	710 kB	1857.54ms - 1860.89ms	unsure 🔍 -0% - +0% -2.36ms - +2.57ms	-

Firefox

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	647 kB	286.76ms - 288.96ms	-	faster ✔ 13% - 15% 44.74ms - 51.26ms
branch	634 kB	332.79ms - 338.93ms	slower ❌ 16% - 18% 44.74ms - 51.26ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	604 kB	137.92ms - 142.88ms	-	unsure 🔍 -1% - +3% -0.84ms - +4.72ms
branch	591 kB	137.20ms - 139.72ms	unsure 🔍 -3% - +1% -4.72ms - +0.84ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	603 kB	138.07ms - 147.33ms	-	slower ❌ 1% - 8% 1.04ms - 10.68ms
branch	591 kB	135.51ms - 138.17ms	faster ✔ 1% - 7% 1.04ms - 10.68ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	790 kB	1896.90ms - 1904.14ms	-	unsure 🔍 -0% - +0% -2.56ms - +7.92ms
branch	777 kB	1894.05ms - 1901.63ms	unsure 🔍 -0% - +0% -7.92ms - +2.56ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	788 kB	1889.03ms - 1893.85ms	-	unsure 🔍 -0% - -0% -8.18ms - -0.06ms
branch	775 kB	1892.29ms - 1898.83ms	unsure 🔍 +0% - +0% +0.06ms - +8.18ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	513 kB	1047.00ms - 1058.72ms	-	faster ✔ 4% - 7% 48.71ms - 76.69ms
branch	500 kB	1102.85ms - 1128.27ms	slower ❌ 5% - 7% 48.71ms - 76.69ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	723 kB	1878.71ms - 1883.57ms	-	unsure 🔍 -0% - +0% -1.41ms - +5.05ms
branch	710 kB	1877.19ms - 1881.45ms	unsure 🔍 -0% - +0% -5.05ms - +1.41ms	-

Jun 17 '24 14:06 github-actions[bot]

@Rajdeepc @Rocss what was the outcome of the qotd slack thread? Is this PR still valid or should it be closed?

Feb 26 '25 21:02 caseyisonit

Closing - design doesn't want the block size of the popover to be customizable.

Feb 27 '25 09:02 rubencarvalho