feat: ADS Entity Item (#38442)

app/client/packages/design-system/ads/src/List/List.stories.tsx

@@ -210,6 +210,7 @@ export const ListItemBlockDescStory = ListItemTemplate.bind({}) as StoryObj;
 ListItemBlockDescStory.storyName = "List item block description";
 ListItemBlockDescStory.argTypes = ListItemArgTypes;
 ListItemBlockDescStory.args = {
+  startIcon: <Icon name="file-list-2-line" size={"md"} />,
   title: "Action item 1",
   description: "block",
   descriptionType: "block",
@@ -219,7 +220,8 @@ export const ListItemOverflowStory = ListItemTemplate.bind({}) as StoryObj;
 ListItemOverflowStory.storyName = "List item title overflow";
 ListItemOverflowStory.argTypes = ListItemArgTypes;
 ListItemOverflowStory.args = {
-  title: "Action item 1 Action item 1 Action item 1 Action item 1",
+  title:
+    "Action item 1 Action item 1 Action item 1 Action item 1 Action item 1",
 };
 
 export const ListItemRightControlStory = ListItemTemplate.bind({}) as StoryObj;

app/client/packages/design-system/ads/src/List/List.styles.tsx

@@ -31,62 +31,37 @@ export const TooltipTextWrapper = styled.div`
   min-width: 0;
 `;
 
-export const DescriptionWrapper = styled.div`
-  flex-direction: column;
-  min-width: 0;
-  gap: var(--ads-v2-spaces-2);
+export const RightControlWrapper = styled.div`
+  height: 100%;
+  line-height: normal;
   display: flex;
+  align-items: center;
+
+  button {
+    margin-left: -4px;
+  }
 `;
 
-export const InlineDescriptionWrapper = styled.div`
+export const TopContentWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex: 1;
+  gap: var(--ads-v2-spaces-3);
   min-width: 0;
+  height: 24px;
+  width: 100%;
 `;
 
-export const RightControlWrapper = styled.div`
-  height: 100%;
-  line-height: normal;
+export const BottomContentWrapper = styled.div`
+  padding-left: var(--ads-v2-spaces-7);
+  padding-bottom: var(--ads-v2-spaces-2);
 `;
 
-export const ContentTextWrapper = styled.div`
+export const InlineDescriptionWrapper = styled.div`
   display: flex;
-  width: 100%;
+  justify-content: space-between;
   align-items: center;
-  box-sizing: border-box;
-  gap: var(--ads-v2-spaces-3);
-  overflow: hidden;
   flex: 1;
   min-width: 0;
-
-  & .${ListItemTextOverflowClassName} {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  & .${ListItemTitleClassName} {
-    font-size: var(--listitem-title-font-size);
-    line-height: 16px;
-  }
-
-  & .${ListItemBDescClassName} {
-    -webkit-line-clamp: 1;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    text-overflow: initial;
-    white-space: initial;
-    font-size: var(--listitem-bdescription-font-size);
-    line-height: normal;
-  }
-
-  & .${ListItemIDescClassName} {
-    font-size: var(--listitem-idescription-font-size);
-    line-height: 16px;
-    padding-right: var(--ads-v2-spaces-2);
-  }
 `;
 
 export const StyledList = styled.div`
@@ -106,28 +81,24 @@ export const StyledListItem = styled.div<{
 
   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);
+  gap: var(--ads-v2-spaces-1);
+  flex: 1;
+  flex-shrink: 0;
+  flex-direction: column;
 
   ${({ size }) => Sizes[size]}
 
-  &[data-isblockdescription="true"] {
-    height: 54px;
-  }
-
-  &[data-isblockdescription="false"] {
-    height: 32px;
-  }
-
   &[data-rightcontrolvisibility="hover"] {
     ${RightControlWrapper} {
       display: none;
     }
+
     &:hover ${RightControlWrapper} {
       display: block;
     }
@@ -138,6 +109,7 @@ export const StyledListItem = styled.div<{
   }
 
   /* disabled style */
+
   &[data-disabled="true"] {
     cursor: not-allowed;
     opacity: var(--ads-v2-opacity-disabled);
@@ -153,9 +125,38 @@ export const StyledListItem = styled.div<{
   }
 
   /* 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;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+  & .${ListItemTitleClassName} {
+    font-size: var(--listitem-title-font-size);
+    line-height: 16px;
+  }
+
+  & .${ListItemBDescClassName} {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: initial;
+    white-space: initial;
+    font-size: var(--listitem-bdescription-font-size);
+    line-height: normal;
+  }
+
+  & .${ListItemIDescClassName} {
+    font-size: var(--listitem-idescription-font-size);
+    line-height: 16px;
+    padding-right: var(--ads-v2-spaces-2);
+  }
 `;

app/client/packages/design-system/ads/src/List/List.tsx

@@ -3,13 +3,13 @@ import clsx from "classnames";
 
 import type { ListItemProps, ListProps } from "./List.types";
 import {
-  ContentTextWrapper,
-  DescriptionWrapper,
+  BottomContentWrapper,
   InlineDescriptionWrapper,
   RightControlWrapper,
   StyledList,
   StyledListItem,
   TooltipTextWrapper,
+  TopContentWrapper,
 } from "./List.styles";
 import type { TextProps } from "../Text";
 import { Text } from "../Text";
@@ -89,14 +89,21 @@ function ListItem(props: ListItemProps) {
     startIcon,
     title,
   } = props;
-  const isBlockDescription = descriptionType === "block";
+  const isBlockDescription = descriptionType === "block" && description;
+  const isInlineDescription = descriptionType === "inline" && description;
 
   const handleOnClick = () => {
     if (!props.isDisabled && props.onClick) {
       props.onClick();
     }
   };
 
+  const handleDoubleClick = () => {
+    if (!props.isDisabled && props.onDoubleClick) {
+      props.onDoubleClick();
+    }
+  };
+
   const handleRightControlClick = (e: React.MouseEvent) => {
     e.stopPropagation();
   };
@@ -105,38 +112,26 @@ function ListItem(props: ListItemProps) {
     <StyledListItem
       className={clsx(ListItemClassName, props.className)}
       data-disabled={props.isDisabled || false}
-      data-isblockdescription={isBlockDescription}
       data-rightcontrolvisibility={rightControlVisibility}
       data-selected={props.isSelected}
       onClick={handleOnClick}
+      onDoubleClick={handleDoubleClick}
+      role="listitem"
       size={size}
-      tabIndex={props.isDisabled ? -1 : 0}
     >
-      <ContentTextWrapper>
+      <TopContentWrapper>
         {startIcon}
         {props.customTitleComponent ? (
           props.customTitleComponent
         ) : (
           <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={ListItemTitleClassName}
+              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
+            >
+              {title}
+            </TextWithTooltip>
+            {isInlineDescription && (
               <TextWithTooltip
                 className={ListItemIDescClassName}
                 color="var(--ads-v2-color-fg-muted)"
@@ -147,11 +142,23 @@ function ListItem(props: ListItemProps) {
             )}
           </InlineDescriptionWrapper>
         )}
-      </ContentTextWrapper>
-      {rightControl && (
-        <RightControlWrapper onClick={handleRightControlClick}>
-          {rightControl}
-        </RightControlWrapper>
+        {rightControl && (
+          <RightControlWrapper onClick={handleRightControlClick}>
+            {rightControl}
+          </RightControlWrapper>
+        )}
+      </TopContentWrapper>
+      {isBlockDescription && (
+        <BottomContentWrapper>
+          <TextWithTooltip
+            className={ListItemBDescClassName}
+            color="var(--ads-v2-color-fg-muted)"
+            isMultiline
+            kind="body-s"
+          >
+            {description}
+          </TextWithTooltip>
+        </BottomContentWrapper>
       )}
     </StyledListItem>
   );

app/client/packages/design-system/ads/src/List/List.types.tsx

@@ -8,10 +8,12 @@ export interface ListItemProps {
   startIcon?: ReactNode;
   /** The control to display at the end. */
   rightControl?: ReactNode;
-  /**  */
+  /** Control the visibility trigger of right control */
   rightControlVisibility?: "hover" | "always";
   /** callback for when the list item is clicked */
   onClick: () => void;
+  /** callback for when the list item is double-clicked */
+  onDoubleClick?: () => void;
   /** Whether the list item is disabled. */
   isDisabled?: boolean;
   /** Whether the list item is selected. */

app/client/packages/design-system/ads/src/Templates/EntityExplorer/Editable/index.ts

@@ -0,0 +1 @@
+export { useEditableText } from "./useEditableText";