addressing review comment

appsmithorg · Dec 27, 2024 · 8f55f31 · 8f55f31
1 parent 1a18d43
commit 8f55f31
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 67 deletions.
diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -26,71 +26,6 @@ const Sizes = {
   `,
 };
 
-export const StyledList = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: var(--ads-v2-spaces-1);
-  display: flex;
-  flex-direction: column;
-  gap: var(--ads-v2-spaces-2);
-`;
-
-export const StyledListItem = styled.div<{
-  isBlockDescription?: boolean;
-  rightControlVisibility?: "hover" | "always";
-  size: ListSizes;
-}>`
-  ${Variables};
-
-  display: flex;
-  width: 100%;
-  align-items: center;
-  cursor: pointer;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: var(--ads-v2-border-radius);
-  padding: var(--ads-v2-spaces-2);
-  padding-left: var(--ads-v2-spaces-3);
-
-  ${({ size }) => Sizes[size]}
-
-  ${({ isBlockDescription }) =>
-    `height: ${isBlockDescription ? "54px" : "32px"};`}
-
-  ${(props) =>
-    props.rightControlVisibility === "hover" &&
-    `
-    ${RightControlWrapper} { display: none; }
-    &:hover ${RightControlWrapper} { display: block; }`}
-
-  &[data-selected="true"] {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  /* disabled style */
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: var(--ads-v2-opacity-disabled);
-    background-color: var(--ads-v2-colors-content-surface-default-bg);
-  }
-
-  &:hover {
-    background-color: var(--ads-v2-colors-content-surface-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--ads-v2-colors-content-surface-active-bg);
-  }
-
-  /* Focus styles */
-  &:focus-visible {
-    outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline);
-    outline-offset: var(--ads-v2-offset-outline);
-  }
-`;
-
 export const TooltipTextWrapper = styled.div`
   display: flex;
   min-width: 0;
@@ -152,3 +87,74 @@ export const ContentTextWrapper = styled.div`
     line-height: 16px;
   }
 `;
+
+export const StyledList = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: var(--ads-v2-spaces-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ads-v2-spaces-2);
+`;
+
+export const StyledListItem = styled.div<{
+  size: ListSizes;
+}>`
+  ${Variables};
+
+  display: flex;
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: var(--ads-v2-border-radius);
+  padding: var(--ads-v2-spaces-2);
+  padding-left: var(--ads-v2-spaces-3);
+
+  ${({ size }) => Sizes[size]}
+
+  &[data-isblockdescription="true"] {
+    height: 54px;
+  }
+
+  &[data-isblockdescription="false"] {
+    height: 32px;
+  }
+
+  &[data-rightcontrolvisibility="hover"] {
+    ${RightControlWrapper} {
+      display: none;
+    }
+    &:hover ${RightControlWrapper} {
+      display: block;
+    }
+  }
+
+  &[data-selected="true"] {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* disabled style */
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--ads-v2-opacity-disabled);
+    background-color: var(--ads-v2-colors-content-surface-default-bg);
+  }
+
+  &:hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
+`;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -113,9 +113,9 @@ function ListItem(props: ListItemProps) {
     <StyledListItem
       className={clsx(ListItemWrapperClassName, props.wrapperClassName)}
       data-disabled={props.isDisabled || false}
+      data-isblockdescription={isBlockDescription}
+      data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
-      isBlockDescription={isBlockDescription}
-      rightControlVisibility={rightControlVisibility}
       size={size}
       tabIndex={props.isDisabled ? -1 : 0}
     >