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

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

@@ -59,31 +59,32 @@ const FieldComponent = ({
 
   return (
     <Box>
-      <Stack size={1}>
-        <Row justifyContent="space-between">
-          {intlLabel && (
-            <Label
-              intlLabel={intlLabel}
-              labelAction={labelAction}
-              name={name}
-              numberOfEntries={componentValueLength}
-              showNumberOfEntries={isRepeatable}
-            />
-          )}
+      <Row justifyContent="space-between">
+        {intlLabel && (
+          <Label
+            intlLabel={intlLabel}
+            labelAction={labelAction}
+            name={name}
+            numberOfEntries={componentValueLength}
+            showNumberOfEntries={isRepeatable}
+          />
+        )}
 
-          {showResetComponent && (
-            <IconButton
-              label={formatMessage({
-                id: getTrad('components.reset-entry'),
-                defaultMessage: 'Reset Entry',
-              })}
-              icon={<DeleteIcon />}
-              onClick={() => {
-                removeComponentFromField(name, componentUid);
-              }}
-            />
-          )}
-        </Row>
+        {showResetComponent && (
+          <IconButton
+            label={formatMessage({
+              id: getTrad('components.reset-entry'),
+              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 HelpIcon from '@strapi/icons/HelpIcon';
+import StrikedWorld from '@strapi/icons/StrikedWorld';
 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 />}
               />
             ),
           },