fix: change drill down icon from button icon to a normal icon (#1145)

qlik-oss · Mar 15, 2023 · 4b677c6 · 4b677c6
1 parent 154cbc4
commit 4b677c6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -16,11 +16,9 @@ import { getListboxInlineKeyboardNavigation } from './interactions/listbox-keybo
 import addListboxTheme from './assets/addListboxTheme';
 import useAppSelections from '../../hooks/useAppSelections';
 import createSelectionState from './hooks/selections/selectionState';
-import { CELL_PADDING_LEFT, ICON_PADDING } from './constants';
+import { CELL_PADDING_LEFT, ICON_WIDTH, ICON_PADDING, BUTTON_ICON_WIDTH } from './constants';
 
 const PREFIX = 'ListBoxInline';
-const searchIconWidth = 28;
-const drillDownIconWidth = 24;
 const classes = {
   listBoxHeader: `${PREFIX}-listBoxHeader`,
   screenReaderOnly: `${PREFIX}-screenReaderOnly`,
@@ -33,7 +31,7 @@ const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'
     [`& .${classes.listBoxHeader}`]: {
       alignSelf: 'center',
       display: 'inline-flex',
-      width: `calc(100% - ${searchIconWidth}px)`,
+      width: `calc(100% - ${BUTTON_ICON_WIDTH}px)`,
     },
     [`& .${classes.screenReaderOnly}`]: {
       position: 'absolute',
@@ -208,9 +206,8 @@ function ListBoxInline({ options, layout }) {
   const showSearchIcon = searchEnabled !== false && search === 'toggle' && !constraints?.active;
   const showSearchOrLockIcon = isLocked || showSearchIcon;
   const showIcons = showSearchOrLockIcon || isDrillDown;
-  const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
-  const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING;
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0);
+  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);
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = layoutOptions?.dataLayout === 'grid';
@@ -261,14 +258,12 @@ function ListBoxInline({ options, layout }) {
                   )
                 )}
                 {isDrillDown && (
-                  <IconButton
+                  <DrillDownIcon
                     tabIndex={-1}
                     title={translator.get('Listbox.DrillDown')}
                     size="large"
-                    sx={{ paddingLeft: `${drillDownPaddingLeft}px` }}
-                  >
-                    <DrillDownIcon style={{ fontSize: '12px' }} />
-                  </IconButton>
+                    style={{ fontSize: '12px' }}
+                  />
                 )}
               </Grid>
             )}

diff --git a/apis/nucleus/src/components/listbox/constants.jsx b/apis/nucleus/src/components/listbox/constants.jsx
@@ -1,2 +1,4 @@
-export const ICON_PADDING = 7;
 export const CELL_PADDING_LEFT = 9;
+export const ICON_WIDTH = 12;
+export const ICON_PADDING = 7;
+export const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width