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 = () => { const [firstEntry, setFirstEntry] = useState(false); const [secondEntry, setSecondEntry] = useState(false); const [thirdEntry, setThirdEntry] = useState(false); + const [fourthEntry, setFourthEntry] = useState(false); return ( @@ -66,6 +67,14 @@ export const SelectableEntryListItems: Story = () => { isSelected={thirdEntry} onClick={() => setThirdEntry(!thirdEntry)} /> + setFourthEntry(!fourthEntry)} + /> ); };