chore: review fixes

appsmithorg · Oct 11, 2023 · 8557fa3 · 8557fa3
1 parent 8c73136
commit 8557fa3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/packages/design-system/src/List/List.constants.ts b/packages/design-system/src/List/List.constants.ts
@@ -5,3 +5,4 @@ export const ListItemClassName = `${CLASS_NAME_PREFIX}-listitem`;
 export const ListItemTitleClassName = `${ListItemClassName}__title`;
 export const ListItemIDescClassName = `${ListItemClassName}__idesc`;
 export const ListItemBDescClassName = `${ListItemClassName}__bdesc`;
+export const ListItemTextOverflowClassName = `${ListItemClassName}_text-overflow`;
diff --git a/packages/design-system/src/List/List.stories.tsx b/packages/design-system/src/List/List.stories.tsx
@@ -159,7 +159,7 @@ ListItemLargeStory.argTypes = ListItemArgTypes;
 ListItemLargeStory.args = {
   startIcon: "box-3-line",
   title: "Action item 1",
-  description: "block",
+  description: "inline",
   descriptionType: "inline",
   size: "lg",
   endIcon: "open",
@@ -171,7 +171,7 @@ ListItemErrorStory.argTypes = ListItemArgTypes;
 ListItemErrorStory.args = {
   startIcon: "box-3-line",
   title: "Action item 1",
-  isDisabled: true,
+  hasError: true,
 };
 
 export const ListItemDisabledStory = ListItemTemplate.bind({});
@@ -192,7 +192,7 @@ ListItemInlineDescStory.args = {
 
 export const ListItemBlockDescStory = ListItemTemplate.bind({});
 ListItemBlockDescStory.storyName = "List item block description";
-ListItemInlineDescStory.argTypes = ListItemArgTypes;
+ListItemBlockDescStory.argTypes = ListItemArgTypes;
 ListItemBlockDescStory.args = {
   title: "Action item 1",
   description: "block",

diff --git a/packages/design-system/src/List/List.styles.tsx b/packages/design-system/src/List/List.styles.tsx
@@ -3,6 +3,7 @@ import { ListSizes } from "./List.types";
 import {
   ListItemBDescClassName,
   ListItemIDescClassName,
+  ListItemTextOverflowClassName,
   ListItemTitleClassName,
 } from "./List.constants";
 
@@ -111,7 +112,7 @@ export const StyledListItem = styled.div<{
     }
   `}
 
-  .text-overflow {
+  & .${ListItemTextOverflowClassName} {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

diff --git a/packages/design-system/src/List/List.tsx b/packages/design-system/src/List/List.tsx
@@ -20,6 +20,7 @@ import { Tooltip } from "Tooltip";
 import {
   ListItemBDescClassName,
   ListItemIDescClassName,
+  ListItemTextOverflowClassName,
   ListItemTitleClassName,
 } from "./List.constants";
 
@@ -65,7 +66,10 @@ function TextWithTooltip(props: TextProps & { isMultiline?: boolean }) {
   return (
     <Tooltip content={props.children} isDisabled={disableTooltip}>
       <TooltipTextWrapper ref={ref}>
-        <Text {...props} className={clsx("text-overflow", props.className)}>
+        <Text
+          {...props}
+          className={clsx(ListItemTextOverflowClassName, props.className)}
+        >
           {props.children}
         </Text>
       </TooltipTextWrapper>
@@ -107,6 +111,14 @@ function ListItem(props: ListItemProps) {
     }
   };
 
+  const endIconOnClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (props.onEndIconClick) {
+      props.onEndIconClick();
+    }
+  };
+
   return (
     <Wrapper>
       <StyledListItem
@@ -119,7 +131,7 @@ function ListItem(props: ListItemProps) {
         size={size}
         tabIndex={props.isDisabled ? -1 : 0}
       >
-        <ContentTextWrapper className="content-text-wrapper">
+        <ContentTextWrapper>
           <StartIconWrapper>
             {startIcon && (
               <Icon
@@ -166,12 +178,7 @@ function ListItem(props: ListItemProps) {
             isDisabled={props.isDisabled}
             isIconButton
             kind="tertiary"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (props.onEndIconClick) {
-                props.onEndIconClick();
-              }
-            }}
+            onClick={endIconOnClick}
             onKeyDown={endIconhandleKeyDown}
             size={"sm"}
             startIcon={endIcon}

diff --git a/packages/design-system/src/__theme__/default/index.css b/packages/design-system/src/__theme__/default/index.css
@@ -155,8 +155,8 @@
   /* --ads-v2-color-outline: var(--ads-v2-color-blue-300);
   --ads-v2-border-width-outline: 2px; */
   /* TODO: fix focus issue across the platform */
-  --ads-v2-color-outline: var(--ads-v2-color-blue-300);
-  --ads-v2-border-width-outline: 2px;
+  --ads-v2-color-outline: transparent;
+  --ads-v2-border-width-outline: 0;
   --ads-v2-offset-outline: 0;
 
   /**