fix(menu): fix css for disabled "value" slots in menu items

[najikahalsema]

Description

My last fix didn't include a fix for slot="value"children of menu items. I added some stories for <sp-menu-item>s with "value" slots, and disabled another menu item in a story for VRT reasons.

Related issue(s)

• fixes [Bug]: Fix css for slots of disabled menu-items #4094

Motivation and context

How has this been tested?

• VRTs (see the difference here)

Screenshots (if appropriate)

Before:

After (live in this PR's storybook):

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.97	0.97	0.98
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	242.265 kB	226.813 kB 🏆	226.962 kB
Scripts	59.353 kB	53.81 kB 🏆	53.854 kB
Stylesheet	50.43 kB	41.142 kB 🏆	41.25 kB
Document	5.74 kB	5.119 kB	5.116 kB 🏆
Third Party	126.742 kB	126.742 kB	126.742 kB

Request Count

Category	Latest	Main	Branch
Total	42 🏆	43	43
Scripts	34 🏆	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

[github-actions]

Tachometer results

Chrome

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	162.48ms - 165.89ms	-	unsure 🔍 -1% - +2% -1.00ms - +3.98ms
branch	635 kB	160.88ms - 164.51ms	unsure 🔍 -2% - +1% -3.98ms - +1.00ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	37.49ms - 37.89ms	-	slower ❌ 0% - 2% 0.04ms - 0.63ms
branch	694 kB	37.13ms - 37.57ms	faster ✔ 0% - 2% 0.04ms - 0.63ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	207.26ms - 212.06ms	-	unsure 🔍 -1% - +2% -2.42ms - +3.95ms
branch	465 kB	206.80ms - 211.00ms	unsure 🔍 -2% - +1% -3.95ms - +2.42ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	561.01ms - 574.08ms	-	unsure 🔍 -2% - +2% -11.42ms - +9.85ms
branch	501 kB	559.95ms - 576.72ms	unsure 🔍 -2% - +2% -9.85ms - +11.42ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	722 kB	1859.98ms - 1862.47ms	-	unsure 🔍 -0% - -0% -5.58ms - -1.91ms
branch	706 kB	1863.63ms - 1866.31ms	unsure 🔍 +0% - +0% +1.91ms - +5.58ms	-

Firefox

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	321.58ms - 333.18ms	-	unsure 🔍 -2% - +3% -5.19ms - +8.99ms
branch	635 kB	321.39ms - 329.57ms	unsure 🔍 -3% - +2% -8.99ms - +5.19ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	67.15ms - 72.17ms	-	slower ❌ 6% - 14% 3.60ms - 9.08ms
branch	694 kB	62.23ms - 64.41ms	faster ✔ 5% - 13% 3.60ms - 9.08ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	437.92ms - 449.92ms	-	unsure 🔍 -1% - +3% -2.80ms - +13.48ms
branch	465 kB	433.08ms - 444.08ms	unsure 🔍 -3% - +1% -13.48ms - +2.80ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	1009.60ms - 1035.16ms	-	unsure 🔍 -0% - +2% -3.91ms - +23.43ms
branch	501 kB	1007.74ms - 1017.50ms	unsure 🔍 -2% - +0% -23.43ms - +3.91ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	722 kB	1646.63ms - 1653.21ms	-	unsure 🔍 -0% - +0% -6.72ms - +3.80ms
branch	706 kB	1647.27ms - 1655.49ms	unsure 🔍 -0% - +0% -3.80ms - +6.72ms	-

[Westbrook]

Love to see it!