fix(Listbox): rtl mode (#1144)

* fix(Listbox): rtl mode * fix: updated snapshots * fix: review comments * fix: failing tests * fix: rendering snapshots * fix: auto merge fails * fix: rendering snapshots
qlik-oss · Mar 16, 2023 · b25bddc · b25bddc
1 parent d88e765
commit b25bddc
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 16 deletions.
diff --git a/apis/nucleus/src/components/ActionsToolbar.jsx b/apis/nucleus/src/components/ActionsToolbar.jsx
@@ -46,9 +46,9 @@ const ActionToolbarElement = {
 };
 
 const ActionsGroup = React.forwardRef(
-  ({ ariaExpanded = false, actions = [], first = false, last = false, addAnchor = false }, ref) =>
+  ({ ariaExpanded = false, actions = [], first = false, last = false, addAnchor = false, isRtl = false }, ref) =>
     actions.length > 0 ? (
-      <Grid item container gap={0} wrap="nowrap">
+      <Grid item container gap={0} flexDirection={isRtl ? 'row-reverse' : 'row'} wrap="nowrap">
         {actions.map((e, ix) => {
           let cls = [];
           const isFirstItem = first && ix === 0;
@@ -111,6 +111,7 @@ function ActionsToolbar({
   },
   focusHandler = null,
   actionsRefMock = null, // for testing
+  direction = 'ltr',
 }) {
   const defaultSelectionActions = useDefaultSelectionActions(selections);
 
@@ -196,8 +197,17 @@ function ActionsToolbar({
   const showActions = newActions.length > 0;
   const showMore = moreActions.length > 0;
   const showDivider = (showActions && selections.show) || (showMore && selections.show);
+  const isRtl = direction === 'rtl';
+
   const Actions = (
-    <Grid ref={actionsRef} onKeyDown={tabCallback} container gap={0} wrap="nowrap">
+    <Grid
+      ref={actionsRef}
+      onKeyDown={tabCallback}
+      container
+      gap={0}
+      wrap="nowrap"
+      sx={{ flexDirection: isRtl ? 'row-reverse' : 'row' }}
+    >
       {showActions && <ActionsGroup actions={newActions} first last={!showMore && !selections.show} />}
       {showMore && (
         <ActionsGroup
@@ -214,7 +224,9 @@ function ActionsToolbar({
           <Divider orientation="vertical" />
         </Grid>
       )}
-      {selections.show && <ActionsGroup actions={defaultSelectionActions} first={!showActions && !showMore} last />}
+      {selections.show && (
+        <ActionsGroup actions={defaultSelectionActions} first={!showActions && !showMore} last isRtl={isRtl} />
+      )}
       {showMoreItems && (
         <More
           show={showMoreItems}

diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -33,7 +33,7 @@ const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'
     backgroundColor: theme.listBox?.backgroundColor ?? theme.palette.background.default,
     [`& .${classes.listBoxHeader}`]: {
       alignSelf: 'center',
-      display: 'inline-flex',
+      display: 'flex',
       width: `calc(100% - ${BUTTON_ICON_WIDTH}px)`,
     },
     [`& .${classes.screenReaderOnly}`]: {
@@ -187,7 +187,7 @@ function ListBoxInline({ options, layout }) {
   }
 
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
-
+  const isRtl = direction === 'rtl';
   const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
   const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
@@ -228,6 +228,7 @@ function ListBoxInline({ options, layout }) {
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
   const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
+  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : 0;
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = layoutOptions?.dataLayout === 'grid';
@@ -238,7 +239,7 @@ function ListBoxInline({ options, layout }) {
 
   return (
     <>
-      {toolbarDetachedOnly && <ActionsToolbar {...getActionToolbarProps(true)} />}
+      {toolbarDetachedOnly && <ActionsToolbar direction={direction} {...getActionToolbarProps(true)} />}
       <StyledGrid
         className="listbox-container"
         container
@@ -256,10 +257,21 @@ function ListBoxInline({ options, layout }) {
           <Grid
             item
             container
-            style={{ padding: theme.spacing(1), paddingLeft: `${headerPaddingLeft}px` }}
+            style={{
+              padding: theme.spacing(1),
+              paddingLeft: `${headerPaddingLeft}px`,
+              paddingRight: `${headerPaddingRight}px`,
+            }}
+            sx={{ flexDirection: isRtl ? 'row-reverse' : 'row' }}
             wrap="nowrap"
           >
-            <Grid item container height={headerHeight} wrap="nowrap">
+            <Grid
+              item
+              container
+              height={headerHeight}
+              sx={{ flexDirection: isRtl ? 'row-reverse' : 'row' }}
+              wrap="nowrap"
+            >
               {showIcons && (
                 <Grid item sx={{ display: 'flex', alignItems: 'center', width: iconsWidth }}>
                   {isLocked ? (
@@ -290,7 +302,7 @@ function ListBoxInline({ options, layout }) {
                   )}
                 </Grid>
               )}
-              <Grid item className={classes.listBoxHeader}>
+              <Grid item sx={{ justifyContent: isRtl ? 'flex-end' : 'flex-start' }} className={classes.listBoxHeader}>
                 {showTitle && (
                   <Title variant="h6" noWrap ref={titleRef} title={layout.title}>
                     {layout.title}
@@ -300,7 +312,10 @@ function ListBoxInline({ options, layout }) {
             </Grid>
             <Grid item xs />
             <Grid item>
-              <ActionsToolbar {...getActionToolbarProps(showToolbarDetached({ containerRef, titleRef, iconsWidth }))} />
+              <ActionsToolbar
+                direction={direction}
+                {...getActionToolbarProps(showToolbarDetached({ containerRef, titleRef, iconsWidth }))}
+              />
             </Grid>
           </Grid>
         )}
@@ -326,6 +341,7 @@ function ListBoxInline({ options, layout }) {
               searchContainerRef={searchContainerRef}
               wildCardSearch={wildCardSearch}
               searchEnabled={searchEnabled}
+              direction={direction}
             />
           </Grid>
           <Grid item xs className={classes.listboxWrapper}>

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/ListBoxRowColumn.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import React, { useEffect, useCallback, useRef, useMemo } from 'react';
 
 import { Grid } from '@mui/material';
@@ -123,7 +124,11 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
   };
 
   if (isAutoTextAlign) {
-    valueTextAlign = isNumeric ? 'right' : dirToTextAlignMap[direction];
+    if (!isNumeric) {
+      valueTextAlign = dirToTextAlignMap[direction];
+    } else {
+      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
+    }
   } else {
     valueTextAlign = textAlign?.align || 'left';
   }
@@ -151,7 +156,8 @@ function RowColumn({ index, rowIndex, columnIndex, style, data }) {
     alignItems: 'center',
     minWidth: 0,
     flexGrow: 1,
-    paddingLeft: checkboxes ? 0 : undefined,
+    paddingLeft: direction === 'rtl' ? 8 : checkboxes ? 0 : undefined,
+    paddingRight: checkboxes ? 0 : direction === 'rtl' ? 8 : 0,
     justifyContent: valueTextAlign,
   };
 

diff --git a/...src/components/listbox/components/ListBoxRowColumn/__tests__/list-box-row-column.test.jsx b/...src/components/listbox/components/ListBoxRowColumn/__tests__/list-box-row-column.test.jsx
@@ -935,14 +935,19 @@ describe('<ListBoxRowColumn />', () => {
       expect(type.props.children[1].props.style.justifyContent).toEqual('center');
     });
 
-    test('should get right text direction', async () => {
+    test('should get right text direction for non-numeric values', async () => {
       const index = 0;
       const style = {};
+      // Just replace qNum with 'NaN' so that we can test alignment for non-numeric values.
+      const nonNumericPages = defaultPages.map((p) => ({
+        ...p,
+        qMatrix: p.qMatrix.map(([mx]) => [{ ...mx, qNum: 'NaN' }]),
+      }));
       const data = {
         keyboard,
         textAlign: { auto: true },
         direction: 'rtl',
-        pages: defaultPages,
+        pages: nonNumericPages,
         dataOffset: 0,
       };
       const testRenderer = await render(
@@ -955,6 +960,26 @@ describe('<ListBoxRowColumn />', () => {
       expect(type.props.children[1].props.style.justifyContent).toEqual('right');
     });
 
+    test('should get left text direction for numeric values', async () => {
+      const index = 0;
+      const style = {};
+      const data = {
+        keyboard,
+        textAlign: { auto: true },
+        direction: 'rtl',
+        pages: defaultPages,
+        dataOffset: 0,
+      };
+      const testRenderer = await render(
+        <ThemeProvider theme={theme}>
+          <ListBoxRowColumn index={index} style={style} data={data} column={rowCol === 'column'} />
+        </ThemeProvider>
+      );
+      const testInstance = testRenderer.root;
+      const type = testInstance.findByType(Grid);
+      expect(type.props.children[1].props.style.justifyContent).toEqual('left');
+    });
+
     test('should get left text direction', async () => {
       const index = 0;
       const style = {};

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ValueField.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ValueField.jsx
@@ -18,7 +18,9 @@ function ValueField({ label, color, highlighted = false, dense, showGray = true,
       color={color}
       align={valueTextAlign}
     >
-      <span style={{ whiteSpace: 'pre' }}>{label}</span>
+      <span dir="auto" style={{ whiteSpace: 'pre' }}>
+        {label}
+      </span>
     </Typography>
   );
 }

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx b/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx
@@ -16,6 +16,7 @@ const StyledInputAdornment = styled(InputAdornment)(({ theme }) => ({
 
 const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
   color: theme.listBox?.content?.color,
+  display: 'flex',
 }));
 
 export default function ListBoxSearch({
@@ -28,6 +29,7 @@ export default function ListBoxSearch({
   autoFocus = true,
   wildCardSearch = false,
   searchEnabled,
+  direction,
 }) {
   const { translator } = useContext(InstanceContext);
   const [value, setValue] = useState('');
@@ -37,6 +39,8 @@ export default function ListBoxSearch({
 
   const theme = useTheme();
   const { getStoreValue } = useDataStore(model);
+  const isRtl = direction === 'rtl';
+  const inpuTextAlign = isRtl ? 'right' : 'left';
 
   const cancel = () => selections.isActive() && selections.cancel();
 
@@ -160,6 +164,7 @@ export default function ListBoxSearch({
             paddingBottom: '5px',
           },
         },
+        { flexDirection: isRtl ? 'row-reverse' : 'row' },
       ]}
       inputRef={inputRef}
       size="small"
@@ -172,6 +177,7 @@ export default function ListBoxSearch({
       autoFocus={autoFocus}
       inputProps={{
         tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+        style: { textAlign: `${inpuTextAlign}` },
       }}
     />
   );

diff --git a/...omponents/grid-list-components/__tests__/__snapshots__/grid-list-components.spec.jsx.snap b/...omponents/grid-list-components/__tests__/__snapshots__/grid-list-components.spec.jsx.snap
@@ -20,6 +20,7 @@ exports[`grid-list-components should create a Grid component 1`] = `
       "column": undefined,
       "columnCount": 2,
       "dataOffset": undefined,
+      "direction": "ltr",
       "focusListItems": undefined,
       "freqIsAllowed": true,
       "frequencyMax": undefined,
@@ -73,6 +74,7 @@ exports[`grid-list-components should create a List component 1`] = `
       "checkboxes": false,
       "column": false,
       "dataOffset": undefined,
+      "direction": "ltr",
       "focusListItems": undefined,
       "freqIsAllowed": true,
       "frequencyMax": undefined,

diff --git a/apis/nucleus/src/components/listbox/components/grid-list-components/grid-list-components.jsx b/apis/nucleus/src/components/listbox/components/grid-list-components/grid-list-components.jsx
@@ -80,6 +80,7 @@ export default function getListBoxComponents({
     showTick,
     dataOffset: local.current.dataOffset,
     focusListItems,
+    direction,
   };
 
   const List = ({ onItemsRendered, ref }) => {

diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-search-B-linux.png
diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-select-EH-linux.png