chore: fix end icon hover

appsmithorg · Oct 9, 2023 · 30d2cd9 · 30d2cd9
1 parent 429d5db
commit 30d2cd9
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 49 deletions.
diff --git a/packages/design-system/src/List/List.styles.tsx b/packages/design-system/src/List/List.styles.tsx
@@ -30,17 +30,27 @@ export const StyledList = styled.div`
   padding: 2px;
 `;
 
-export const StyledListItem = styled.div<{ size: ListSizes }>`
-  ${Variables};
-
+export const Wrapper = styled.div`
   display: flex;
-  padding: 8px;
   width: 100%;
   align-items: center;
   gap: 8px;
   cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+`;
+
+export const StyledListItem = styled.div<{ size: ListSizes; endIcon?: string }>`
+  ${Variables};
+
+  display: flex;
+  width: 100%;
+  align-items: center;
   border-radius: var(--ads-v2-border-radius);
+  padding: 8px;
   box-sizing: border-box;
+  // 40px is the offset to make it look like the end icon is part of this div
+  ${(props) => !!props.endIcon && `padding: 8px 40px 8px 8px;`}}
 
   ${({ size }) => Sizes[size]}
 
@@ -129,3 +139,8 @@ export const InlineDescriptionWrapper = styled.div`
   gap: 8px;
   flex: 1;
 `;
+
+export const EndIconWrapper = styled.div`
+  position: absolute;
+  right: 8px;
+`;
diff --git a/packages/design-system/src/List/List.tsx b/packages/design-system/src/List/List.tsx
@@ -5,11 +5,13 @@ import { ListItemProps, ListProps } from "./List.types";
 import {
   ContentTextWrapper,
   DescriptionWrapper,
+  EndIconWrapper,
   InlineDescriptionWrapper,
   StartIconWrapper,
   StyledList,
   StyledListItem,
   TooltipTextWrapper,
+  Wrapper,
 } from "./List.styles";
 import { Icon } from "Icon";
 import { Text, TextProps } from "Text";
@@ -106,73 +108,76 @@ function ListItem(props: ListItemProps) {
   };
 
   return (
-    <StyledListItem
-      data-disabled={props.isDisabled || false}
-      data-selected={props.selected}
-      onClick={props.onClick}
-      onKeyDown={listItemhandleKeyDown}
-      size={size}
-      tabIndex={props.isDisabled ? -1 : 0}
-    >
-      <ContentTextWrapper className="content-text-wrapper">
-        <StartIconWrapper>
-          {startIcon && (
-            <Icon
-              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
-              name={startIcon}
-              size={size}
-            />
-          )}
-        </StartIconWrapper>
-        <InlineDescriptionWrapper>
-          <DescriptionWrapper>
-            <TextWithTooltip
-              className={ListItemTitleClassName}
-              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
-            >
-              {title}
-            </TextWithTooltip>
-            {isBlockDescription && description && (
+    <Wrapper>
+      <StyledListItem
+        data-disabled={props.isDisabled || false}
+        data-selected={props.selected}
+        endIcon={props.endIcon}
+        onClick={props.onClick}
+        onKeyDown={listItemhandleKeyDown}
+        size={size}
+        tabIndex={props.isDisabled ? -1 : 0}
+      >
+        <ContentTextWrapper className="content-text-wrapper">
+          <StartIconWrapper>
+            {startIcon && (
+              <Icon
+                color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
+                name={startIcon}
+                size={size}
+              />
+            )}
+          </StartIconWrapper>
+          <InlineDescriptionWrapper>
+            <DescriptionWrapper>
+              <TextWithTooltip
+                className={ListItemTitleClassName}
+                color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
+              >
+                {title}
+              </TextWithTooltip>
+              {isBlockDescription && description && (
+                <TextWithTooltip
+                  className={ListItemBDescClassName}
+                  color="var(--ads-v2-color-fg-muted)"
+                  isMultiline
+                  kind="body-s"
+                >
+                  {description}
+                </TextWithTooltip>
+              )}
+            </DescriptionWrapper>
+            {!isBlockDescription && description && (
               <TextWithTooltip
-                className={ListItemBDescClassName}
+                className={ListItemIDescClassName}
                 color="var(--ads-v2-color-fg-muted)"
-                isMultiline
                 kind="body-s"
               >
                 {description}
               </TextWithTooltip>
             )}
-          </DescriptionWrapper>
-          {!isBlockDescription && description && (
-            <TextWithTooltip
-              className={ListItemIDescClassName}
-              color="var(--ads-v2-color-fg-muted)"
-              kind="body-s"
-            >
-              {description}
-            </TextWithTooltip>
-          )}
-        </InlineDescriptionWrapper>
-      </ContentTextWrapper>
+          </InlineDescriptionWrapper>
+        </ContentTextWrapper>
+      </StyledListItem>
       {endIcon && (
-        <div>
+        <EndIconWrapper>
           <Button
             isDisabled={props.isDisabled}
             isIconButton
             kind="tertiary"
             onClick={(e) => {
+              e.stopPropagation();
               if (props.onEndIconClick) {
-                e.stopPropagation();
                 props.onEndIconClick();
               }
             }}
             onKeyDown={endIconhandleKeyDown}
             size={"sm"}
             startIcon={endIcon}
           />
-        </div>
+        </EndIconWrapper>
       )}
-    </StyledListItem>
+    </Wrapper>
   );
 }