Merge pull request #11097 from strapi/cm/add-border-to-nested-components

Add border to nested compos

packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js

@@ -17,6 +17,7 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
   const label = intlLabel?.id ? formatMessage(intlLabel) : '';
 
   return (
+    <Box paddingBottom={1}>
       <Row>
         <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
           {label}
@@ -24,6 +25,7 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
         </Text>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
       </Row>
+    </Box>
   );
 };
 

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

@@ -59,7 +59,6 @@ const FieldComponent = ({
 
   return (
     <Box>
-      <Stack size={1}>
       <Row justifyContent="space-between">
         {intlLabel && (
           <Label
@@ -78,12 +77,14 @@ const FieldComponent = ({
               defaultMessage: 'Reset Entry',
             })}
             icon={<DeleteIcon />}
+            noBorder
             onClick={() => {
               removeComponentFromField(name, componentUid);
             }}
           />
         )}
       </Row>
+      <Stack size={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
             isReadOnly={isReadOnly}
@@ -94,6 +95,7 @@ const FieldComponent = ({
           <NonRepeatableComponent
             componentUid={componentUid}
             isFromDynamicZone={isFromDynamicZone}
+            isNested={isNested}
             name={name}
           />
         )}

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

@@ -10,7 +10,7 @@ import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
 
-const NonRepeatableComponent = ({ componentUid, name }) => {
+const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
     componentUid,
@@ -19,7 +19,15 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
   const fields = componentLayoutData.layouts.edit;
 
   return (
-    <Box background="neutral100" paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>
+    <Box
+      background={isFromDynamicZone ? 'neutral0' : 'neutral100'}
+      paddingLeft={6}
+      paddingRight={6}
+      paddingTop={6}
+      paddingBottom={6}
+      hasRadius={isNested}
+      borderColor={isNested ? 'neutral200' : ''}
+    >
       <Stack size={6}>
         {fields.map((fieldRow, key) => {
           return (
@@ -39,6 +47,7 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
                           id: metadatas.label,
                           defaultMessage: metadatas.label,
                         }}
+                        isNested
                         isRepeatable={fieldSchema.repeatable}
                         max={fieldSchema.max}
                         min={fieldSchema.min}
@@ -67,8 +76,15 @@ const NonRepeatableComponent = ({ componentUid, name }) => {
   );
 };
 
+NonRepeatableComponent.defaultProps = {
+  isFromDynamicZone: false,
+  isNested: false,
+};
+
 NonRepeatableComponent.propTypes = {
   componentUid: PropTypes.string.isRequired,
+  isFromDynamicZone: PropTypes.bool,
+  isNested: PropTypes.bool,
   name: PropTypes.string.isRequired,
 };
 

packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import I18N from '@strapi/icons/I18N';
-// FIXME
+import StrikedWorld from '@strapi/icons/StrikedWorld';
-import HelpIcon from '@strapi/icons/HelpIcon';
 import LabelAction from '../components/LabelAction';
 import { getTrad } from '../utils';
 
@@ -45,7 +44,7 @@ const enhanceEditLayout = layout =>
             ? 'This value is unique for the selected locale'
             : 'This value is common to all locales',
         },
-        icon: hasI18nEnabled ? <I18N aria-hidden /> : <HelpIcon aria-hidden />,
+        icon: hasI18nEnabled ? <I18N aria-hidden /> : <StrikedWorld aria-hidden />,
       };
 
       acc.push({ ...field, labelAction: <LabelAction {...labelActionProps} /> });

packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import I18N from '@strapi/icons/I18N';
-// FIXME
+
-import HelpIcon from '@strapi/icons/HelpIcon';
+import StrikedWorld from '@strapi/icons/StrikedWorld';
 import LabelAction from '../../components/LabelAction';
 import { getTrad } from '../../utils';
 import mutateEditViewLayout, {
@@ -450,7 +450,7 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
             labelAction: (
               <LabelAction
                 title={{ id: notLocalizedTrad, defaultMessage: notLocalizedTradDefaultMessage }}
-                icon={<HelpIcon aria-hidden />}
+                icon={<StrikedWorld aria-hidden />}
               />
             ),
           },