Relation background

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx

@@ -4,6 +4,7 @@ import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { BaseLink } from '@strapi/design-system/BaseLink';
 import { Badge } from '@strapi/design-system/Badge';
 import { Icon } from '@strapi/design-system/Icon';
+import { Box } from '@strapi/design-system/Box';
 import Cross from '@strapi/icons/Cross';
 import { RelationInput } from './RelationInput';
 import { relations } from './relationsDataMock';
@@ -18,26 +19,33 @@ WIP
 
 <Canvas>
   <Story name="base">
-    <RelationInput label="Relations" labelLoadMore="Load More" name="options" relations={{
-      data: {
-        pages: [
-          {
-            id: 1,
-            href: '',
-            title: 'Relation 1',
-            isDraft: false
+    <Box padding={8}>
+      <RelationInput
+        label="Relations"
+        labelLoadMore="Load More"
+        name="options"
+        relations={{
+          data: {
+            pages: [
+              {
+                id: 1,
+                href: '',
+                title: 'Relation 1',
+                isDraft: false,
+              },
+              {
+                id: 2,
+                href: '',
+                title: 'Relation 2',
+                isDraft: false,
+              },
+            ],
           },
-          {
-            id: 2,
-            href: '',
-            title: 'Relation 2',
-            isDraft: false
-          }
-        ],
-      },
-      isLoading: false,
-      isSuccess: true
-    }} />
+          isLoading: false,
+          isSuccess: true,
+        }}
+      />
+    </Box>
   </Story>
 </Canvas>
 

packages/core/helper-plugin/lib/src/components/RelationInput/components/Relation.js

@@ -6,7 +6,15 @@ import { Flex } from '@strapi/design-system/Flex';
 
 export const Relation = ({ children, loadMore, search, ...props }) => {
   return (
-    <Stack spacing={3}>
+    <Stack
+      spacing={3}
+      paddingTop={4}
+      paddingBottom={4}
+      paddingLeft={6}
+      paddingRight={6}
+      hasRadius
+      background="neutral100"
+    >
       <Flex justifyContent="space-between" alignItems="end">
         <Stack width="55%" spacing={1} {...props}>
           {search}

packages/core/helper-plugin/lib/src/components/RelationInput/components/RelationItem.js

@@ -25,6 +25,7 @@ export const RelationItem = ({ children, endAction, ...props }) => {
       paddingRight={4}
       hasRadius
       borderSize={1}
+      background="neutral0"
       borderColor="neutral200"
       justifyContent="space-between"
       as="li"