Menu Items - Improving disabled Item 'description' css specificity (#4530)

* improving description specificity in menus

* Update packages/@adobe/spectrum-css-temp/components/menu/skin.css

Co-authored-by: Robert Snow <[email protected]>

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@adobe/spectrum-css-temp/components/menu/skin.css

@@ -52,6 +52,9 @@ governing permissions and limitations under the License.
   }
 
   &.is-disabled {
+    .spectrum-Menu-description {
+      color: var(--spectrum-selectlist-option-text-color-disabled);
+    }
     background-color: var(--spectrum-selectlist-option-background-color-disabled);
     background-image: none;
     color: var(--spectrum-selectlist-option-text-color-disabled);

packages/@react-spectrum/listbox/stories/ListBox.stories.tsx

@@ -667,36 +667,38 @@ export const WithSemanticElementsStatic = {
       flexGrow={1}
       aria-labelledby="label"
       selectionMode="multiple"
+      disabledKeys={['paste', 'floof']}
       onSelectionChange={action('onSelectionChange')}>
       <Section title="Section 1">
-        <Item textValue="Copy">
+        <Item key="copy" textValue="Copy">
           <Copy size="S" />
           <Text>Copy</Text>
         </Item>
-        <Item textValue="Cut">
+        <Item key="cut" textValue="Cut">
           <Cut size="S" />
           <Text>Cut</Text>
         </Item>
-        <Item textValue="Paste">
+        <Item key="paste" textValue="Paste">
           <Paste size="S" />
           <Text>Paste</Text>
         </Item>
       </Section>
       <Section title="Section 2">
-        <Item textValue="Puppy">
+        <Item key="puppy" textValue="Puppy">
           <AlignLeft size="S" />
           <Text>Puppy</Text>
           <Text slot="description">Puppy description super long as well geez</Text>
         </Item>
-        <Item textValue="Doggo with really really really long long long text">
-          <AlignCenter size="S" />
-          <Text>Doggo with really really really long long long text</Text>
-        </Item>
-        <Item textValue="Floof">
+        <Item key="floof" textValue="Floof">
           <AlignRight size="S" />
           <Text>Floof</Text>
+          <Text slot="description">Floof medium description</Text>
+        </Item>
+        <Item key="doggo" textValue="Doggo with really really really long long long text">
+          <AlignCenter size="S" />
+          <Text>Doggo with really really really long long long text</Text>
         </Item>
-        <Item>Basic Item</Item>
+        <Item key="basic">Basic Item</Item>
       </Section>
     </ListBox>
   ),