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

* chore: add stories for menu items with value slot * fix(menu): add css for disabled menu item value slot * ci: update hash * ci: update hash --------- Co-authored-by: Najika Yoo <naj.halsema@gmail.com>
adobe · Mar 1, 2024 · 3c5855d · 3c5855d
1 parent 7c32867
commit 3c5855d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 2b61b82c83bc3f5e7cfff9eaf4695fc67e591aeb
+        default: 686fa6e78586a47ae3fd13d4171392ca5aa5d42d
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css
@@ -23,6 +23,16 @@ governing permissions and limitations under the License.
     pointer-events: none;
 }
 
+:host([disabled]) [name='value']::slotted(*) {
+    color: var(
+        --highcontrast-menu-item-color-disabled,
+        var(
+            --mod-menu-item-label-icon-color-disabled,
+            var(--spectrum-menu-item-label-icon-color-disabled)
+        )
+    );
+}
+
 :host([has-submenu][disabled]) .chevron {
     color: var(
         --highcontrast-menu-item-color-disabled,

diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
@@ -168,7 +168,7 @@ export const menuItemWithDescription = (): TemplateResult => {
                 Open a copy
                 <span slot="description">Illustrator for iPad</span>
             </sp-menu-item>
-            <sp-menu-item>
+            <sp-menu-item disabled>
                 <sp-icon-share slot="icon"></sp-icon-share>
                 Share link
                 <span slot="description">Enable comments and download</span>
@@ -373,3 +373,56 @@ export const MenuGroupSelectsMultiple = (): TemplateResult => {
         </sp-popover>
     `;
 };
+
+export const menuWithValueSlots = (): TemplateResult => {
+    return html`
+        <sp-menu style="width: 150px">
+            <sp-menu-item>
+                Undo
+                <span slot="value">⌘Z</span>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Redo
+                <span slot="value">⇧⌘Z</span>
+            </sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-item>
+                Cut
+                <span slot="value">⌘X</span>
+            </sp-menu-item>
+            <sp-menu-item>
+                Copy
+                <span slot="value">⌘S</span>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Paste
+                <span slot="value">⌘P</span>
+            </sp-menu-item>
+        </sp-menu>
+        <sp-popover open style="width: 150px">
+            <sp-menu>
+                <sp-menu-item>
+                    Undo
+                    <span slot="value">⌘Z</span>
+                </sp-menu-item>
+                <sp-menu-item disabled>
+                    Redo
+                    <span slot="value">⇧⌘Z</span>
+                </sp-menu-item>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item>
+                    Cut
+                    <span slot="value">⌘X</span>
+                </sp-menu-item>
+                <sp-menu-item>
+                    Copy
+                    <span slot="value">⌘S</span>
+                </sp-menu-item>
+                <sp-menu-item disabled>
+                    Paste
+                    <span slot="value">⌘P</span>
+                </sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};