update grid areas and fix edgeToText

Author: yihuiliao

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

@@ -186,15 +186,15 @@ export let listboxItem = style({
   gridColumnEnd: -1,
   display: 'grid',
   gridTemplateAreas: [
-    '. checkmark icon label       value keyboard descriptor .',
-    '. .         .    description .     .        .          .'
+    '. checkmark icon label  .',
+    '.      .      .  description .'
   ],
   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)]
+      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(24)],
+      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(32)],
+      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(40)],
+      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(48)]
     }
   },
   gridTemplateRows: {
@@ -223,10 +223,10 @@ export let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
   paddingY: centerPadding(),
   marginX: {
     size: {
-      S: '[calc(24 * 3 / 8)]',
-      M: '[calc(32 * 3 / 8)]',
-      L: '[calc(40 * 3 / 8)]',
-      XL: '[calc(48 * 3 / 8)]'
+      S: `[${edgeToText(24)}]`,
+      M: `[${edgeToText(24)}]`,
+      L: `[${edgeToText(24)}]`,
+      XL: `[${edgeToText(24)}]`
     }
   }
 });
@@ -244,20 +244,13 @@ const separatorWrapper = style({
     ':is(:last-child > &)': 'none',
     default: 'flex'
   },
-  // marginX: {
-  //   size: {
-  //     S: edgeToText(24),
-  //     M: edgeToText(32),
-  //     L: edgeToText(40),
-  //     XL: edgeToText(48)
-  //   }
-  // },
+  // A workaround since edgeToText() returns undefined for some reason
   marginX: {
     size: {
-      S: '[calc(24 * 3 / 8)]',
-      M: '[calc(32 * 3 / 8)]',
-      L: '[calc(40 * 3 / 8)]',
-      XL: '[calc(48 * 3 / 8)]'
+      S: `[${edgeToText(24)}]`,
+      M: `[${edgeToText(24)}]`,
+      L: `[${edgeToText(24)}]`,
+      XL: `[${edgeToText(24)}]`
     }
   },
   height: 12