feat(Listbox): row height (#1029)

* feat: listbox row height

* fix: merge conflicts

* test: update sizes

* test: update baseline

apis/nucleus/src/components/listbox/ListBox.jsx

@@ -145,7 +145,7 @@ export default function ListBox({
   const listCount = getListCount({ pages, minimumBatchSize, count, calculatePagesHeight });
   setStoreValue('listCount', listCount);
 
-  const sizes = getListSizes({ layout, width, height, checkboxes, listCount, count, textWidth });
+  const sizes = getListSizes({ layout, width, height, listCount, count, textWidth });
 
   const { textAlign } = layout?.qListObject.qDimensionInfo || {};
 

apis/nucleus/src/components/listbox/assets/__tests__/get-list-sizes.test.jsx

@@ -41,7 +41,7 @@ describe('get-list-sizes', () => {
       columnCount: 4,
       columnWidth: 47.5,
       count: 200,
-      itemSize: 33,
+      itemSize: 29,
       listCount: 100,
       listHeight: 300,
       overflowStyling: {
@@ -52,12 +52,6 @@ describe('get-list-sizes', () => {
     });
   });
 
-  it('should return expected itemSize with checkboxes true', () => {
-    args.checkboxes = true;
-    const sizes = getListSizes(args);
-    expect(sizes).toMatchObject({ itemSize: 40 });
-  });
-
   it('dense should override itemSize', () => {
     args.checkboxes = true;
     args.layout.layoutOptions.dense = true;
@@ -72,7 +66,7 @@ describe('get-list-sizes', () => {
       columnCount: 4,
       columnWidth: 47.5,
       count: 200,
-      itemSize: 33,
+      itemSize: 29,
       listCount: 100,
       listHeight: 300,
       overflowStyling: {

apis/nucleus/src/components/listbox/assets/get-list-sizes.js

@@ -1,6 +1,6 @@
 const scrollBarWidth = 10; // TODO: ignore this - instead set the styling only show on hover...
 
-export default function getListSizes({ layout, width, height, checkboxes, listCount, count, textWidth }) {
+export default function getListSizes({ layout, width, height, listCount, count, textWidth }) {
   const { layoutOptions = {} } = layout || {};
 
   const { layoutOrder, maxVisibleRows = {}, maxVisibleColumns, dense } = layoutOptions;
@@ -11,10 +11,7 @@ export default function getListSizes({ layout, width, height, checkboxes, listCo
   let columnWidth;
   let rowCount;
 
-  let itemSize = checkboxes ? 40 : 33;
-  if (dense) {
-    itemSize = 20;
-  }
+  const itemSize = dense ? 20 : 29;
   const listHeight = height || 8 * itemSize;
 
   if (layoutOrder) {

apis/nucleus/src/components/listbox/components/ListBoxRadioButton.jsx

@@ -9,9 +9,10 @@ const classes = {
   radioButton: `${PREFIX}-radioButton`,
 };
 
-const StyledRadio = styled(Radio)(() => ({
+const StyledRadio = styled(Radio)(({ theme, checked }) => ({
   [`&.${classes.radioButton}`]: {
     right: '5px',
+    color: checked ? theme.palette.selected.main : theme.palette.main,
   },
 }));
 

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

@@ -62,7 +62,7 @@ const getSelectedStyle = ({ theme }) => ({
 
 const Root = styled('div', {
   shouldForwardProp: (props) => props !== 'flexBasisProp',
-})(({ theme, flexBasisProp }) => ({
+})(({ theme, flexBasisProp, dense }) => ({
   [`& .${classes.row}`]: {
     flexWrap: 'nowrap',
     color: theme.listBox?.content?.color ?? theme.palette.text.primary,
@@ -130,6 +130,7 @@ const Root = styled('div', {
     margin: 0,
     width: '100%',
     height: '100%',
+    overflow: 'hidden',
 
     // The checkbox's span
     '& > span:nth-of-type(1)': {
@@ -141,6 +142,7 @@ const Root = styled('div', {
       display: 'flex',
       alignItems: 'center',
       paddingLeft: 0,
+      paddingRight: '2px',
     },
   },
 
@@ -184,7 +186,7 @@ const Root = styled('div', {
   [`& .${classes.bar}`]: {
     border: `${barBorderWidthPx}px solid`,
     borderColor: '#D9D9D9',
-    height: '16px',
+    height: dense ? '16px' : '20px',
     position: 'absolute',
     zIndex: '-1',
     alignSelf: 'center',
@@ -292,7 +294,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
     setSelected(selected);
 
     const clazzArr = [column ? classes.column : classes.row];
-    if (!(histogram && dense)) clazzArr.push(classes.rowBorderBottom);
+    if (!(histogram && dense) && !checkboxes) clazzArr.push(classes.rowBorderBottom);
     if (!checkboxes) {
       if (cell.qState === 'XS') {
         clazzArr.push(showGray ? classes.XS : classes.S);
@@ -305,7 +307,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
       }
     }
     setClassArr(clazzArr);
-  }, [cell && cell.qState]);
+  }, [cell && cell.qState, histogram, dense, checkboxes]);
 
   if (!cell) {
     return null; // prevent rendering empty rows
@@ -429,7 +431,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
   const flexBasisVal = checkboxes ? 'auto' : 'max-content';
 
   return (
-    <Root className={classes.barContainer} flexBasisProp={flexBasisVal}>
+    <Root className={classes.barContainer} flexBasisProp={flexBasisVal} dense={dense}>
       <Grid
         container
         gap={0}