fix: pick up and apply font-size in dense listboxes (#1709)

apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx

@@ -145,7 +145,7 @@ const RowColRoot = styled('div', {
 
     // The leaf node, containing the label text.
     [`& .${classes.labelText}`]: {
-      lineHeight: '16px',
+      lineHeight: '24px',
       userSelect: 'none',
       paddingRight: '1px',
       ...ellipsis,
@@ -153,7 +153,7 @@ const RowColRoot = styled('div', {
     },
 
     [`& .${classes.labelDense}`]: {
-      fontSize: 12,
+      lineHeight: '18px',
     },
 
     // Highlight is added to labelText spans, which are created as children to original labelText,

test/rendering/listbox/listbox-data.js

@@ -275,6 +275,7 @@ window.getFuncs = function getFuncs() {
       },
       layoutOptions: {
         layoutOrder: 'row',
+        dense: options?.dense ?? false,
       },
     }),
   };

test/rendering/listbox/listbox.js

@@ -66,6 +66,9 @@
       case 'standard':
         sc = {};
         break;
+      case 'dense':
+        sc = { dense: true };
+        break;
       case 'autoConfirm':
         sc = { autoConfirm: true };
         break;

test/rendering/listbox/listbox.spec.js

@@ -63,6 +63,23 @@ test.describe('listbox mashup rendering test', () => {
     return expect(image).toMatchSnapshot(FILE_NAME);
   });
 
+  test('selecting two values in dense listbox should result in two green rows', async () => {
+    const FILE_NAME = 'listbox_dense_select.png';
+
+    await page.goto(`${url}/listbox/listbox.html?scenario=dense`, { waitUntil: 'networkidle' });
+    const selector = await page.waitForSelector(listboxSelector, { visible: true });
+
+    const selectNumbers = [4, 7];
+    const action = async (nbr) => {
+      const rowSelector = `${listboxSelector} [data-n="${nbr}"]`;
+      await page.click(rowSelector);
+    };
+    await execSequence(selectNumbers, action);
+
+    const image = await selector.screenshot({ caret: 'hide' });
+    return expect(image).toMatchSnapshot(FILE_NAME);
+  });
+
   test('selecting values should not show the selections toolbar when autoConfirm is true', async () => {
     const FILE_NAME = 'listbox_select_EH_auto_confirm.png';