fix: histogram position in rtl mode

qlik-oss · Mar 24, 2023 · cd69749 · cd69749
1 parent 64a3b20
commit cd69749
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx
@@ -177,6 +177,7 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
       isGridMode={dataLayout === 'grid'}
       dense={dense}
       frequencyWidth={frequencyWidth}
+      direction={direction}
       data-testid="listbox.item"
     >
       <ItemGrid

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ItemGrid.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ItemGrid.jsx
@@ -4,12 +4,16 @@ import getItemSizes from '../../grid-list-components/item-sizes';
 import classes from '../helpers/classes';
 
 const ItemGrid = styled(Grid, {
-  shouldForwardProp: (prop) => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop),
-})(({ dataLayout, layoutOrder, itemPadding, cellPaddingRight }) => ({
-  [`&.${classes.fieldRoot}`]: {
-    ...getItemSizes({ dataLayout, layoutOrder, itemPadding }),
-    paddingRight: cellPaddingRight ? '8px' : undefined,
-  },
-}));
+  shouldForwardProp: (prop) =>
+    !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction'].includes(prop),
+})(({ dataLayout, layoutOrder, itemPadding, cellPaddingRight, direction }) => {
+  const att = `padding${direction === 'rtl' ? 'left' : 'right'}`;
+  return {
+    [`&.${classes.fieldRoot}`]: {
+      ...getItemSizes({ dataLayout, layoutOrder, itemPadding }),
+      [att]: cellPaddingRight ? '8px' : undefined,
+    },
+  };
+});
 
 export default ItemGrid;
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx
@@ -25,8 +25,9 @@ const ellipsis = {
 const iconWidth = 24; // tick and lock icon width in px
 
 const RowColRoot = styled('div', {
-  shouldForwardProp: (prop) => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop),
-})(({ theme, flexBasisProp, isGridMode, isGridCol, dense, frequencyWidth }) => ({
+  shouldForwardProp: (prop) =>
+    !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'direction'].includes(prop),
+})(({ theme, flexBasisProp, isGridMode, isGridCol, dense, frequencyWidth, direction }) => ({
   '&:focus': {
     boxShadow: `inset 0 0 0 2px ${theme.palette.custom.focusBorder} !important`,
   },
@@ -188,7 +189,7 @@ const RowColRoot = styled('div', {
   },
 
   [`& .${classes.barWithCheckbox}`]: {
-    left: barWithCheckboxLeftPadPx,
+    left: direction === 'rtl' ? barPadPx : barWithCheckboxLeftPadPx,
     width: `calc(100% - ${barWithCheckboxLeftPadPx + barPadPx}px)`,
   },