Merge branch 'master' into ild/auto-hide-toolbar

qlik-oss · Mar 22, 2023 · 3e45506 · 3e45506
2 parents 61de24b + 9928f84
commit 3e45506
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx
@@ -39,7 +39,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
     histogram = false,
     keyboard,
     showGray = true,
-    showTick: sizePermitsTick = true,
+    showTick: sizePermitsTickOrLock = true,
     columnCount = 1,
     rowCount = 1,
     dataOffset,
@@ -165,16 +165,15 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
   const flexBasisVal = checkboxes ? 'auto' : 'max-content';
 
   const showLock = isSelected && isLocked;
-  const showTick = !checkboxes && isSelected && !isLocked && sizePermitsTick;
-  const showIcon = !checkboxes && (showTick || showLock);
+  const showTick = !checkboxes && isSelected && !isLocked;
+  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
 
   return (
     <RowColRoot
       className={classes.barContainer}
       flexBasisProp={flexBasisVal}
       style={styles}
-      showIcon={showIcon}
-      checkboxes={checkboxes}
       isGridCol={isGridCol}
       isGridMode={dataLayout === 'grid'}
       dense={dense}
@@ -184,7 +183,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
         ref={rowRef}
         container
         dataLayout={dataLayout}
-        checkboxes={checkboxes}
+        cellPaddingRight={cellPaddingRight}
         layoutOrder={layoutOrder}
         itemPadding={itemPadding}
         gap={0}

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ItemGrid.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ItemGrid.jsx
@@ -5,10 +5,10 @@ import classes from '../helpers/classes';
 
 const ItemGrid = styled(Grid, {
   shouldForwardProp: (prop) => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop),
-})(({ dataLayout, layoutOrder, itemPadding, checkboxes }) => ({
+})(({ dataLayout, layoutOrder, itemPadding, cellPaddingRight }) => ({
   [`&.${classes.fieldRoot}`]: {
     ...getItemSizes({ dataLayout, layoutOrder, itemPadding }),
-    paddingRight: checkboxes ? '8px' : undefined,
+    paddingRight: cellPaddingRight ? '8px' : undefined,
   },
 }));
 

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx
@@ -26,9 +26,8 @@ const ellipsis = {
 const iconWidth = 24; // tick and lock icon width in px
 
 const RowColRoot = styled('div', {
-  shouldForwardProp: (prop) =>
-    !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'showIcon', 'checkboxes'].includes(prop),
-})(({ theme, flexBasisProp, isGridMode, isGridCol, dense, frequencyWidth, showIcon, checkboxes }) => ({
+  shouldForwardProp: (prop) => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop),
+})(({ theme, flexBasisProp, isGridMode, isGridCol, dense, frequencyWidth }) => ({
   '&:focus': {
     boxShadow: `inset 0 0 0 2px ${theme.palette.custom.focusBorder} !important`,
   },
@@ -77,7 +76,7 @@ const RowColRoot = styled('div', {
     flexBasis: flexBasisProp,
     lineHeight: '16px',
     userSelect: 'none',
-    paddingRight: showIcon || checkboxes ? '1px' : `${iconWidth}px`,
+    paddingRight: '1px',
     ...ellipsis,
     whiteSpace: 'pre', // to keep white-space on highlight
     fontSize: theme.listBox?.content?.fontSize,
@@ -157,7 +156,7 @@ const RowColRoot = styled('div', {
   [`& .${classes.frequencyCount}`]: {
     justifyContent: 'flex-end',
     ...ellipsis,
-    flex: `0 1 ${frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth)}px`,
+    flex: `0 1 ${frequencyWidth}px`,
     textAlign: 'right',
     paddingLeft: '2px',
   },

diff --git a/...ndering/listbox/listbox.spec.js-snapshots/list-frequency-histogram-js-linux.png b/...ndering/listbox/listbox.spec.js-snapshots/list-frequency-histogram-js-linux.png