From 96f4a4794d183842f12113c1b98bfba6164b2178 Mon Sep 17 00:00:00 2001
From: mgueyraud <mgueyraud.junior@gmail.com>
Date: Tue, 1 Nov 2022 23:30:48 -0300
Subject: [PATCH] feat(entity-list-item): corrected styles for the isSelected
 prop

Added the correct styles for the isSelected prop, so it doesn't overlap the existing borders

fix #2077
---
 .../entity-list/src/EntityList.styles.ts      | 30 ++++++++++++++++++-
 .../EntityListItem/EntityListItem.styles.ts   |  6 ++--
 .../stories/EntityList.stories.tsx            |  9 ++++++
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/components/entity-list/src/EntityList.styles.ts b/packages/components/entity-list/src/EntityList.styles.ts
index 48aef8c05d..5ec690196b 100644
--- a/packages/components/entity-list/src/EntityList.styles.ts
+++ b/packages/components/entity-list/src/EntityList.styles.ts
@@ -1,5 +1,8 @@
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
+import { getEntityListItemStyles } from './EntityListItem/EntityListItem.styles';
+
+const entityListItemStyles = getEntityListItemStyles();
 
 export const getEntityListStyles = () => ({
   root: css({
@@ -7,10 +10,35 @@ export const getEntityListStyles = () => ({
     listStyle: 'none',
     margin: 0,
     padding: 0,
-    border: `1px solid ${tokens.gray200}`,
     borderBottom: 'none',
     borderRadius: tokens.borderRadiusMedium,
     overflow: 'hidden',
+    [`& .${entityListItemStyles.root({})}`]: {
+      borderLeft: `1px solid ${tokens.gray200}`,
+      borderRight: `1px solid ${tokens.gray200}`,
+    },
+    [`& .${entityListItemStyles.root({})}:first-child`]: {
+      borderTop: `1px solid ${tokens.gray200}`,
+    },
+    [`& .${entityListItemStyles.root({ isSelected: true })}`]: {
+      borderLeft: `1px solid ${tokens.colorPrimary}`,
+      borderRight: `1px solid ${tokens.colorPrimary}`,
+    },
+    [`& .${entityListItemStyles.root({ isSelected: true })}:first-child`]: {
+      borderTop: `1px solid ${tokens.colorPrimary}`,
+    },
+    [`& .${entityListItemStyles.root({
+      isSelected: true,
+    })}:not(:first-child)::before`]: {
+      content: '""',
+      display: 'block',
+      width: 'calc(100% + 2px)',
+      position: 'absolute',
+      height: '1px',
+      top: -1,
+      left: -1,
+      backgroundColor: tokens.colorPrimary,
+    },
     '& li:first-child': {
       borderTopLeftRadius: tokens.borderRadiusMedium,
       borderTopRightRadius: tokens.borderRadiusMedium,
diff --git a/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts b/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts
index 7042d92813..3a4604c1f7 100644
--- a/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts
+++ b/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts
@@ -22,10 +22,8 @@ export const getEntityListItemStyles = () => ({
       },
       ...(props.isSelected
         ? {
-            backgroundColor: tokens.blue100,
-            borderStyle: 'solid',
-            borderColor: tokens.colorPrimary,
-            borderWidth: 1,
+            boxShadow: `inset 0 -1px 0 ${tokens.colorPrimary}`,
+            background: tokens.blue100,
           }
         : {}),
     }),
diff --git a/packages/components/entity-list/stories/EntityList.stories.tsx b/packages/components/entity-list/stories/EntityList.stories.tsx
index 9f9e2f7d06..bf80301643 100644
--- a/packages/components/entity-list/stories/EntityList.stories.tsx
+++ b/packages/components/entity-list/stories/EntityList.stories.tsx
@@ -39,6 +39,7 @@ export const SelectableEntryListItems: Story<EntityListProps> = () => {
   const [firstEntry, setFirstEntry] = useState(false);
   const [secondEntry, setSecondEntry] = useState(false);
   const [thirdEntry, setThirdEntry] = useState(false);
+  const [fourthEntry, setFourthEntry] = useState(false);
 
   return (
     <EntityList>
@@ -66,6 +67,14 @@ export const SelectableEntryListItems: Story<EntityListProps> = () => {
         isSelected={thirdEntry}
         onClick={() => setThirdEntry(!thirdEntry)}
       />
+      <EntityList.Item
+        title="Entry 4"
+        description="Description"
+        contentType="My content type"
+        status="archived"
+        isSelected={fourthEntry}
+        onClick={() => setFourthEntry(!fourthEntry)}
+      />
     </EntityList>
   );
 };