use flexbox hack

Author: ling1726

packages/react-components/react-menu/library/src/components/MenuItem/renderMenuItem.tsx

@@ -13,8 +13,11 @@ export const renderMenuItem_unstable = (state: MenuItemState) => {
     <state.root>
       {state.checkmark && <state.checkmark />}
       {state.icon && <state.icon />}
-      {state.content && <state.content />}
-      {state.subText && <state.subText />}
+      {state.content && (
+        <state.content>
+          {state.content.children} {state.subText && <state.subText />}
+        </state.content>
+      )}
       {state.secondaryContent && <state.secondaryContent />}
       {state.submenuIndicator && <state.submenuIndicator />}
     </state.root>

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts

@@ -7,11 +7,6 @@ import type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
 import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-const cssVars = {
-  menuItemMultilineGridAreas: '--fui-MenuItem-grid-areas',
-  menuItemMultilineGridColumns: '--fui-MenuItem-grid-columns',
-};
-
 export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
   root: 'fui-MenuItem',
   icon: 'fui-MenuItem__icon',
@@ -119,8 +114,6 @@ const useSubmenuIndicatorBaseStyles = makeResetStyles({
 
 const useSubtextBaseStyles = makeResetStyles({
   ...typographyStyles.caption2,
-  paddingLeft: '2px',
-  paddingRight: '2px',
 });
 
 const useStyles = makeStyles({
@@ -188,62 +181,20 @@ const useStyles = makeStyles({
 });
 
 const useMultilineStyles = makeStyles({
-  root: {
-    display: 'grid',
-    gridTemplateColumns: `var(${cssVars.menuItemMultilineGridColumns})`,
-    gridTemplateAreas: `var(${cssVars.menuItemMultilineGridAreas})`,
-  },
-
-  checkmark: {
-    gridArea: 'checkmark',
-  },
-
-  icon: {
-    gridArea: 'icon',
-  },
-
   content: {
-    gridArea: 'content',
+    display: 'flex',
+    flexDirection: 'column',
   },
 
   secondaryContent: {
-    gridArea: 'secondaryContent',
     alignSelf: 'center',
   },
 
-  subText: {
-    gridArea: 'subText',
-  },
-
   submenuIndicator: {
     alignSelf: 'center',
-    gridArea: 'submenuIndicator',
   },
 });
 
-const buildMultilineGridArea = (slots: MenuItemSlots, hasSubmenu: boolean) => {
-  const checkmark = slots.checkmark ? 'checkmark' : '';
-  const icon = slots.icon ? 'icon' : '';
-  const secondaryContent = slots.secondaryContent ? 'secondaryContent' : '';
-  const submenuIndicator = slots.submenuIndicator || hasSubmenu ? 'submenuIndicator' : '';
-
-  return `
-    "${checkmark} ${icon} content ${secondaryContent} ${submenuIndicator}"
-    "${checkmark} ${icon} subText ${secondaryContent} ${submenuIndicator}"
-  `;
-};
-
-const buildMultilineGridColumns = (slots: MenuItemSlots, hasSubmenu: boolean) => {
-  const checkmark = slots.checkmark ? 'auto' : '';
-  const icon = slots.icon ? 'auto' : '';
-  const secondaryContent = slots.secondaryContent ? 'auto' : '';
-  const submenuIndicator = slots.submenuIndicator || hasSubmenu ? 'auto' : '';
-
-  return `
-    ${checkmark} ${icon} 1fr ${secondaryContent} ${submenuIndicator}
-  `;
-};
-
 /** Applies style classnames to slots */
 export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {
   'use no memo';
@@ -261,18 +212,9 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
     menuItemClassNames.root,
     rootBaseStyles,
     state.disabled && styles.disabled,
-    multiline && multilineStyles.root,
     state.root.className,
   );
 
-  if (multiline) {
-    state.root.style ??= {};
-    Object.assign(state.root.style, {
-      [cssVars.menuItemMultilineGridAreas]: buildMultilineGridArea(state, state.hasSubmenu),
-      [cssVars.menuItemMultilineGridColumns]: buildMultilineGridColumns(state, state.hasSubmenu),
-    });
-  }
-
   if (state.content) {
     state.content.className = mergeClasses(
       menuItemClassNames.content,
@@ -283,12 +225,7 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
   }
 
   if (state.checkmark) {
-    state.checkmark.className = mergeClasses(
-      menuItemClassNames.checkmark,
-      styles.checkmark,
-      state.checkmark.className,
-      multiline && multilineStyles.checkmark,
-    );
+    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
   }
 
   if (state.secondaryContent) {
@@ -301,12 +238,7 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
   }
 
   if (state.icon) {
-    state.icon.className = mergeClasses(
-      menuItemClassNames.icon,
-      iconBaseStyles,
-      state.icon.className,
-      multiline && multilineStyles.icon,
-    );
+    state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
   }
 
   if (state.submenuIndicator) {
@@ -319,12 +251,7 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
   }
 
   if (state.subText) {
-    state.subText.className = mergeClasses(
-      menuItemClassNames.subText,
-      state.subText.className,
-      subtextBaseStyles,
-      multiline && multilineStyles.subText,
-    );
+    state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
   }
 
   useCheckmarkStyles_unstable(state as MenuItemCheckboxState);

packages/react-components/react-menu/library/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx

@@ -12,8 +12,11 @@ export const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) =>
     <state.root>
       {state.checkmark && <state.checkmark />}
       {state.icon && <state.icon />}
-      {state.content && <state.content />}
-      {state.subText && <state.subText />}
+      {state.content && (
+        <state.content>
+          {state.content.children} {state.subText && <state.subText />}
+        </state.content>
+      )}
       {state.secondaryContent && <state.secondaryContent />}
     </state.root>
   );

packages/react-components/react-menu/library/src/components/MenuItemRadio/renderMenuItemRadio.tsx

@@ -15,8 +15,11 @@ export const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {
     <state.root>
       {state.checkmark && <state.checkmark />}
       {state.icon && <state.icon />}
-      {state.content && <state.content />}
-      {state.subText && <state.subText />}
+      {state.content && (
+        <state.content>
+          {state.content.children} {state.subText && <state.subText />}
+        </state.content>
+      )}
       {state.secondaryContent && <state.secondaryContent />}
     </state.root>
   );

packages/react-components/react-menu/library/src/components/MenuItemSwitch/renderMenuItemSwitch.tsx

@@ -12,8 +12,11 @@ export const renderMenuItemSwitch_unstable = (state: MenuItemSwitchState) => {
   return (
     <state.root>
       {state.icon && <state.icon />}
-      {state.content && <state.content />}
-      {state.subText && <state.subText />}
+      {state.content && (
+        <state.content>
+          {state.content.children} {state.subText && <state.subText />}
+        </state.content>
+      )}
       {state.secondaryContent && <state.secondaryContent />}
       {state.switchIndicator && <state.switchIndicator />}
     </state.root>

packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts

@@ -22,10 +22,6 @@ const trackWidth = 40;
 const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
 
 const useSwitchIndicatorBaseClassName = makeResetStyles({
-  // Switch items should not have submenus, we put it in the same grid area
-  // as the submenu indicator in multiline
-  gridArea: 'submenuIndicator',
-
   borderRadius: tokens.borderRadiusCircular,
   border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
   lineHeight: 0,
@@ -89,15 +85,23 @@ const useSwitchIndicatorStyles = makeStyles({
   },
 });
 
+const useMultilineStyles = makeStyles({
+  switch: {
+    alignSelf: 'center',
+  },
+});
+
 /**
  * Apply styling to the MenuItemSwitch slots based on the state
  */
 export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {
   'use no memo';
 
-  const { checked } = state;
+  const { checked, subText } = state;
+  const multiline = !!subText;
   const switchIndicatorStyles = useSwitchIndicatorStyles();
   const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
+  const multilineStyles = useMultilineStyles();
   state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
   if (state.content) {
     state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
@@ -124,6 +128,7 @@ export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): Me
       switchIndicatorBaseStyles,
       checked && switchIndicatorStyles.checked,
       state.switchIndicator.className,
+      multiline && multilineStyles.switch,
     );
   }
 
@@ -136,9 +141,7 @@ export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): Me
     },
     checkmark: undefined,
     submenuIndicator: undefined,
-    // Since switch items should not have submenus, we put it in the same grid area
-    // as the submen in multiline
-    hasSubmenu: !!state.subText,
+    hasSubmenu: false,
     persistOnClick: true,
   });