accordion group custom to deal with style

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Text } from '@strapi/design-system/Text';
+import { Flex } from '@strapi/design-system/Flex';
+import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
+
+const AccordionFooter = styled(Box)`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+`;
+
+const EnhancedGroup = styled(Box)`
+  > div {
+    & > * {
+      border-radius: unset;
+      border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
+      border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+      border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+    }
+  }
+
+  > div:first-of-type {
+    > div {
+      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+    }
+
+    > div:not([data-strapi-expanded='true']) {
+      border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+
+      &:hover {
+        border-top: 1px solid ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+
+  & [data-strapi-expanded='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
+  }
+
+  ${({ theme, footer }) => `
+    &:not(${footer}) {
+      & > *:last-of-type {
+        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
+      }
+    }
+  `}
+`;
+
+const LabelAction = styled(Box)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
+const AccordionGroupCustom = ({ children, footer, label, labelAction }) => {
+  return (
+    <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
+      {label && (
+        <Flex paddingBottom={1}>
+          <Text as="label" textColor="neutral800" small bold>
+            {label}
+          </Text>
+          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
+        </Flex>
+      )}
+      <EnhancedGroup footer={footer}>{children}</EnhancedGroup>
+      {footer && <AccordionFooter>{footer}</AccordionFooter>}
+    </KeyboardNavigable>
+  )
+};
+
+AccordionGroupCustom.defaultProps = {
+  footer: null,
+  label: null,
+  labelAction: undefined,
+};
+
+AccordionGroupCustom.propTypes = {
+  children: PropTypes.node.isRequired,
+  footer: PropTypes.node,
+  label: PropTypes.string,
+  labelAction: PropTypes.node,
+};
+
+export default AccordionGroupCustom;

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -10,6 +10,7 @@ import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-sys
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import ItemTypes from '../../../utils/ItemTypes';
@@ -22,11 +23,6 @@ import { connect, select } from './utils';
 // FIXME
 // Temporary workaround to remove the overflow until we migrate the react-select for the relations
 // to the DS one
-// const StyledBox = styled(Box)`
-//   > div {
-//     overflow: visible;
-//   }
-// `;
 
 const CustomIconButton = styled(IconButton)`
   background-color: transparent;
@@ -169,7 +165,7 @@ const DraggedItem = ({
   };
 
   return (
-    <>
+    <Box data-strapi-acc>
       {isDragging && <Preview />}
       {!isDragging &&
         <Accordion 
@@ -258,7 +254,7 @@ const DraggedItem = ({
             </Stack>
           </AccordionContent>
         </Accordion>}
-    </>
+    </Box>
   //   <StyledBox ref={refs ? refs.dropRef : null}>
   //     {isDragging && <Preview />}
   //     {!isDragging && (

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -9,7 +9,6 @@ import take from 'lodash/take';
 // import { FormattedMessage } from 'react-intl';
 import { useNotification } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
-import { AccordionGroup } from '@strapi/design-system/Accordion';
 import { Flex } from '@strapi/design-system/Flex';
 import { TextButton } from '@strapi/design-system/TextButton';
 import Plus from '@strapi/icons/Plus';
@@ -21,6 +20,7 @@ import ComponentInitializer from '../ComponentInitializer';
 import connect from './utils/connect';
 import select from './utils/select';
 import DraggedItem from './DraggedItem';
+import AccordionGroupCustom from './AccordionGroupCustom';
 
 const TextButtonCustom = styled(TextButton)`
   height: 100%;
@@ -116,12 +116,8 @@ const RepeatableComponent = ({
       hasRadius 
       background='neutral0' 
       shadow='tableShadow'
-      paddingLeft={7} 
-      paddingRight={7} 
-      paddingBottom={6} 
-      paddingTop={6}
     >
-      <AccordionGroup
+      <AccordionGroupCustom
         footer={
           <Flex justifyContent="center" height="48px" background="neutral0" hasRadius>
             <TextButtonCustom disabled={isReadOnly} onClick={handleClick} startIcon={<Plus />}>
@@ -170,7 +166,7 @@ const RepeatableComponent = ({
             />
           );
         })}
-      </AccordionGroup>
+      </AccordionGroupCustom>
     </Box>
     // <Box hasRadius borderColor="neutral200">
     //   <Box ref={drop}>