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 contentful#2077
mgueyraud · Nov 2, 2022 · 96f4a47 · 96f4a47
1 parent 4c4b111
commit 96f4a47
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/packages/components/entity-list/src/EntityList.styles.ts b/packages/components/entity-list/src/EntityList.styles.ts
@@ -1,16 +1,44 @@
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
+import { getEntityListItemStyles } from './EntityListItem/EntityListItem.styles';
+
+const entityListItemStyles = getEntityListItemStyles();
 
 export const getEntityListStyles = () => ({
   root: css({
     display: 'block',
     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
@@ -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
@@ -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>
   );
 };