adding functionality for custom title component in list item

appsmithorg · Dec 25, 2024 · 31de395 · 31de395
1 parent ad2b3bb
commit 31de395
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 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
@@ -87,7 +87,7 @@ const ListItemArgTypes = {
       },
     },
   },
-  rightContolVisibility: {
+  rightControlVisibility: {
     description:
       "`always` type will show the right control always. `hover` type will show the right control only when the list item is hovered.",
     control: "radio",
@@ -146,6 +146,15 @@ const ListItemArgTypes = {
       },
     },
   },
+  customTitleComponent: {
+    description:
+      "A custom title component for the list item to use input component for name editing",
+    table: {
+      type: {
+        summary: "ReactNode",
+      },
+    },
+  },
 };
 
 function ListItemTemplate(args: JSX.IntrinsicAttributes & ListItemProps) {
@@ -162,7 +171,6 @@ ListItemLargeStory.args = {
   descriptionType: "inline",
   size: "lg",
   rightControl: <Icon name="add-more" size={"md"} />,
-  rightControlVisibility: "hover",
 };
 
 export const ListItemErrorStory = ListItemTemplate.bind({}) as StoryObj;

diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -125,35 +125,39 @@ function ListItem(props: ListItemProps) {
         size={size}
       >
         {startIcon}
-        <InlineDescriptionWrapper>
-          <DescriptionWrapper>
-            <TextWithTooltip
-              className={ListItemTitleClassName}
-              color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
-            >
-              {title}
-            </TextWithTooltip>
-            {isBlockDescription && description && (
+        {props.customTitleComponent ? (
+          props.customTitleComponent
+        ) : (
+          <InlineDescriptionWrapper>
+            <DescriptionWrapper>
               <TextWithTooltip
-                className={ListItemBDescClassName}
+                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={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>
+          </InlineDescriptionWrapper>
+        )}
       </StyledListItem>
       {rightControl && (
         <RightControlWrapper>{rightControl}</RightControlWrapper>

diff --git a/app/client/packages/design-system/ads/src/List/List.types.tsx b/app/client/packages/design-system/ads/src/List/List.types.tsx
@@ -34,6 +34,8 @@ export interface ListItemProps {
   wrapperClassName?: string;
   /** id for the list item */
   id?: string;
+  /** customTitleComponent for the list item to use input component for name editing */
+  customTitleComponent?: ReactNode | ReactNode[];
 }
 
 export interface ListProps {