Update alignment of multi-section menus

Author: devongovett

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -379,11 +379,12 @@ export function ComboBoxItem(props: ComboBoxItemProps) {
 
 export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}
 export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {
+  let {size} = useContext(InternalComboboxContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

packages/@react-spectrum/s2/src/Menu.tsx

@@ -88,17 +88,19 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
+const menuItemGrid = {
+  size: {
+    S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
+    M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+    L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
+    XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
+  }
+} as const;
+
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
-  gridTemplateColumns: {
-    size: {
-      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
-      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
-      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
-      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
-    }
-  },
+  gridTemplateColumns: menuItemGrid,
   boxSizing: 'border-box',
   maxHeight: '[inherit]',
   overflow: {
@@ -123,7 +125,7 @@ export let section = style({
     '. checkmark icon label       value keyboard descriptor .',
     '. .         .    description .     .        .          .'
   ],
-  gridTemplateColumns: 'subgrid'
+  gridTemplateColumns: menuItemGrid
 });
 
 export let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
@@ -425,11 +427,12 @@ export function Divider(props: SeparatorProps) {
 export interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}
 export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
   // remember, context doesn't work if it's around Section nor inside
+  let {size} = useContext(InternalMenuContext);
   return (
     <>
       <AriaMenuSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaMenuSection>
       <Divider />

packages/@react-spectrum/s2/src/Picker.tsx

@@ -464,11 +464,12 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
 
 export interface PickerSectionProps<T extends object> extends SectionProps<T> {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>) {
+  let {size} = useContext(InternalPickerContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />