fix: add icon width only when present (#1166)

qlik-oss · Mar 21, 2023 · 2ad8fda · 2ad8fda
1 parent d83e6e6
commit 2ad8fda
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -28,13 +28,13 @@ const classes = {
   listboxWrapper: `${PREFIX}-listboxWrapper`,
 };
 
-const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'].includes(p) })(
-  ({ theme, containerPadding }) => ({
+const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding', 'hasIcon'].includes(p) })(
+  ({ theme, containerPadding, hasIcon }) => ({
     backgroundColor: theme.listBox?.backgroundColor ?? theme.palette.background.default,
     [`& .${classes.listBoxHeader}`]: {
       alignSelf: 'center',
       display: 'flex',
-      width: `calc(100% - ${BUTTON_ICON_WIDTH}px)`,
+      width: `calc(100% - ${hasIcon ? BUTTON_ICON_WIDTH : 0}px)`,
     },
     [`& .${classes.screenReaderOnly}`]: {
       position: 'absolute',
@@ -260,6 +260,7 @@ function ListBoxInline({ options, layout }) {
         onMouseEnter={handleOnMouseEnter}
         onMouseLeave={handleOnMouseLeave}
         ref={containerRef}
+        hasIcon={showIcons}
       >
         {toolbar && (
           <Grid