fix: explicitly set content-box on unavailable icon in Menu

Author: yihuiliao

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

@@ -272,6 +272,11 @@ governing permissions and limitations under the License.
     }
   }
 
+  .spectrum-Menu-unavailableIcon {
+    box-sizing: content-box;
+    align-self: center;
+  }
+
   &.spectrum-Menu-wrapper--isMobile {
     width: 100%;
     border: none;

packages/@react-spectrum/menu/src/MenuItem.tsx

@@ -21,7 +21,7 @@ import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';
-import React, {useMemo, useRef} from 'react';
+import React, {cloneElement, useMemo, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {Text} from '@react-spectrum/text';
 import {TreeState} from '@react-stately/tree';
@@ -96,6 +96,16 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
   let contents = typeof rendered === 'string'
     ? <Text>{rendered}</Text>
     : rendered;
+  
+  let unavailableIcon = cloneElement(<InfoOutline />, {
+    UNSAFE_className: classNames(
+      styles,
+      'spectrum-Menu-unavailableIcon'
+    ),
+    slot: 'end',
+    size: 'XS',
+    'aria-label': stringFormatter.format('unavailable')
+  });
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -141,7 +151,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
                   } />
               }
               {
-                isUnavailable && <InfoOutline slot="end" size="XS" alignSelf="center" aria-label={stringFormatter.format('unavailable')} />
+                isUnavailable && unavailableIcon
               }
               {
                 isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot="chevron" /> : <ChevronRight slot="chevron" />)