diff --git a/apis/nucleus/src/components/listbox/ListBox.jsx b/apis/nucleus/src/components/listbox/ListBox.jsx index 89d6e77d9..0f661c6a7 100644 --- a/apis/nucleus/src/components/listbox/ListBox.jsx +++ b/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 || {}; diff --git a/apis/nucleus/src/components/listbox/assets/__tests__/get-list-sizes.test.jsx b/apis/nucleus/src/components/listbox/assets/__tests__/get-list-sizes.test.jsx index 2a4ef9e58..cd531dc72 100644 --- a/apis/nucleus/src/components/listbox/assets/__tests__/get-list-sizes.test.jsx +++ b/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: { diff --git a/apis/nucleus/src/components/listbox/assets/get-list-sizes.js b/apis/nucleus/src/components/listbox/assets/get-list-sizes.js index 79645bd51..09ff404d7 100644 --- a/apis/nucleus/src/components/listbox/assets/get-list-sizes.js +++ b/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) { diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRadioButton.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRadioButton.jsx index 392b54e8f..8b9f76bee 100644 --- a/apis/nucleus/src/components/listbox/components/ListBoxRadioButton.jsx +++ b/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, }, })); diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn.jsx index fc22c365a..ebc53bbb3 100644 --- a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn.jsx +++ b/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 ( - +