chore: [ADS] Entity Tree Hover interactions (appsmithorg#38615)

oi2996814 · Jan 13, 2025 · bfd66e5 · bfd66e5
1 parent 97ebfaa
commit bfd66e5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/app/client/packages/design-system/ads/src/List/List.stories.tsx b/app/client/packages/design-system/ads/src/List/List.stories.tsx
@@ -38,6 +38,7 @@ const items = [
   {
     startIcon: <Icon name="file-list-2-line" size={"md"} />,
     title: "Action item 3",
+    isSelected: true,
   },
   {
     startIcon: <Icon name="file-list-2-line" size={"md"} />,

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
@@ -93,7 +93,6 @@ export const StyledListItem = styled.div<{
   flex-direction: column;
 
   ${({ size }) => Sizes[size]}
-
   &[data-rightcontrolvisibility="hover"] {
     ${RightControlWrapper} {
       display: none;
@@ -124,14 +123,6 @@ export const StyledListItem = styled.div<{
     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);
-  }
-
   & .${ListItemTextOverflowClassName} {
     overflow: hidden;
     white-space: nowrap;

diff --git a/...t/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts b/...t/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts
@@ -13,4 +13,12 @@ export const EntityEditableName = styled(Text)`
     min-width: 3ch;
     text-overflow: unset;
   }
+
+  & input {
+    background-color: var(--ads-v2-color-bg);
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 32px;
+    top: 0;
+  }
 `;
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
@@ -47,13 +47,6 @@ export const EntityItem = (props: EntityItemProps) => {
     () => ({
       onChange: handleTitleChange,
       onKeyUp: handleKeyUp,
-      style: {
-        backgroundColor: "var(--ads-v2-color-bg)",
-        paddingTop: 0,
-        paddingBottom: 0,
-        height: "32px",
-        top: 0,
-      },
     }),
     [handleKeyUp, handleTitleChange],
   );

diff --git a/...es/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts b/...es/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { Flex } from "../../../Flex";
+import { StyledListItem } from "../../../List/List.styles";
 
 /**
  * This is used to add a spacing when collapse icon is not present
@@ -12,9 +13,9 @@ export const PaddingOverrider = styled.div`
   width: 100%;
 
   & > div {
-    /* Override the padding of the entity item since collapsible icon can be on the left
-         * By default the padding on the left is 8px, so we need to reduce it to 4px
-         **/
+    // Override the padding of the entity item since collapsible icon can be on the left
+    // By default the padding on the left is 8px, so we need to reduce it to 4px
+
     padding-left: 4px;
   }
 `;
@@ -33,36 +34,45 @@ export const CollapseWrapper = styled.div`
 export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>`
   border-radius: var(--ads-v2-border-radius);
   cursor: pointer;
+  user-select: none;
 
   padding-left: ${(props) => {
     return 4 + props["data-depth"] * 8;
   }}px;
 
+  /* selected style */
+  // Set the selected style for wrapper and remove from list item
+
   &[data-selected="true"] {
     background-color: var(--ads-v2-colors-content-surface-active-bg);
   }
 
+  ${StyledListItem} {
+    &[data-selected="true"] {
+      background-color: unset;
+    }
+  }
+
   /* disabled style */
+  // Set the disabled style for wrapper and remove from list item
 
   &[data-disabled="true"] {
     cursor: not-allowed;
     opacity: var(--ads-v2-opacity-disabled);
     background-color: var(--ads-v2-colors-content-surface-default-bg);
   }
 
+  ${StyledListItem} {
+    &[data-disabled="true"] {
+      background-color: unset;
+    }
+  }
+
   &: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);
-  }
 `;