fix(picker-button): update quiet styles

[Rocss]

Description

Replaced spectrum-PickerButton--low with spectrum-PickerButton--quiet as per https://opensource.adobe.com/spectrum-css/pickerbutton.html#migrationguide
Added story to track this in VRT.

Related issue(s)

• [Bug]: sp-picker-button quiet styles need to be updated #4345

Motivation and context

Resolves a small visual bug.

How has this been tested?

• Test case 1
  1. Go here
  2. Compare the Quiet section of the documentation with the Quiet section from Spectrum CSS

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• 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

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• 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.

[github-actions]

Branch preview

• Documentation Site
• Storybook

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:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.98	0.99	0.99
Accessibility	1	1	1
Best Practices	0.96	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	223.021 kB	210.318 kB 🏆	210.46 kB
Scripts	54.648 kB	48.136 kB 🏆	48.148 kB
Stylesheet	35.194 kB	30.381 kB 🏆	30.534 kB
Document	5.923 kB	5.195 kB	5.173 kB 🏆
Font	127.256 kB	126.606 kB	126.605 kB 🏆

Request Count

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

[github-actions]

Tachometer results

Chrome

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	708 kB	36.01ms - 36.69ms	-	faster ✔ 2% - 4% 0.60ms - 1.54ms
branch	696 kB	37.09ms - 37.75ms	slower ❌ 2% - 4% 0.60ms - 1.54ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	382.37ms - 389.68ms	-	faster ✔ 2% - 5% 7.88ms - 18.58ms
branch	696 kB	395.35ms - 403.16ms	slower ❌ 2% - 5% 7.88ms - 18.58ms	-

picker-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	414 kB	24.68ms - 25.96ms	-	faster ✔ 2% - 9% 0.60ms - 2.40ms
branch	401 kB	26.18ms - 27.45ms	slower ❌ 2% - 10% 0.60ms - 2.40ms	-

Firefox

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	708 kB	63.28ms - 68.52ms	-	slower ❌ 4% - 13% 2.40ms - 7.76ms
branch	696 kB	60.28ms - 61.36ms	faster ✔ 4% - 11% 2.40ms - 7.76ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	707.37ms - 730.15ms	-	slower ❌ 2% - 5% 11.22ms - 37.18ms
branch	696 kB	688.34ms - 700.78ms	faster ✔ 2% - 5% 11.22ms - 37.18ms	-

picker-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	414 kB	60.69ms - 65.47ms	-	unsure 🔍 -7% - +4% -4.65ms - +2.81ms
branch	401 kB	61.14ms - 66.86ms	unsure 🔍 -4% - +7% -2.81ms - +4.65ms	-

[Westbrook]

This looks great. Please rebase it to your other Combobox changes that are now in main and we're be good to go!

[Westbrook]

Excellent!