fix(ctb): update attribute picker spacings (#18509)

* Fix attribute picker grid spacing

* Change CTB attribute options order

* Update snapshots

* Add comment

packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeList/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Box, Flex, Grid, GridItem, KeyboardNavigable } from '@strapi/design-system';
+import { Flex, Grid, GridItem, KeyboardNavigable } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 
 import AttributeOption from '../AttributeOption';
-import getPadding from '../utils/getPadding';
 
 const AttributeList = ({ attributes }) => (
   <KeyboardNavigable tagName="button">
@@ -12,23 +11,12 @@ const AttributeList = ({ attributes }) => (
       {attributes.map((attributeRow, index) => {
         return (
           // eslint-disable-next-line react/no-array-index-key
-          <Grid key={index} gap={0}>
+          <Grid key={index} gap={3}>
-            {attributeRow.map((attribute, index) => {
+            {attributeRow.map((attribute) => (
-              const { paddingLeft, paddingRight } = getPadding(index);
+              <GridItem key={attribute} col={6}>
-
+                <AttributeOption type={attribute} />
-              return (
+              </GridItem>
-                <GridItem key={attribute} col={6}>
+            ))}
-                  <Box
-                    paddingLeft={paddingLeft}
-                    paddingRight={paddingRight}
-                    paddingBottom={1}
-                    style={{ height: '100%' }}
-                  >
-                    <AttributeOption type={attribute} />
-                  </Box>
-                </GridItem>
-              );
-            })}
           </Grid>
         );
       })}

packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { Box, Flex, Grid, GridItem, KeyboardNavigable, Link } from '@strapi/design-system';
+import { Flex, Grid, GridItem, KeyboardNavigable, Link } from '@strapi/design-system';
 import { useCustomFields } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../../utils';
 import CustomFieldOption from '../CustomFieldOption';
 import EmptyAttributes from '../EmptyAttributes';
-import getPadding from '../utils/getPadding';
 
 const CustomFieldsList = () => {
   const { formatMessage } = useIntl();
@@ -26,23 +25,12 @@ const CustomFieldsList = () => {
   return (
     <KeyboardNavigable tagName="button">
       <Flex direction="column" alignItems="stretch" gap={3}>
-        <Grid gap={0}>
+        <Grid gap={3}>
-          {sortedCustomFields.map(([uid, customField], index) => {
+          {sortedCustomFields.map(([uid, customField]) => (
-            const { paddingLeft, paddingRight } = getPadding(index);
+            <GridItem key={uid} col={6}>
-
+              <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />
-            return (
+            </GridItem>
-              <GridItem key={uid} col={6} style={{ height: '100%' }}>
+          ))}
-                <Box
-                  paddingLeft={paddingLeft}
-                  paddingRight={paddingRight}
-                  paddingBottom={1}
-                  style={{ height: '100%' }}
-                >
-                  <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />
-                </Box>
-              </GridItem>
-            );
-          })}
         </Grid>
         <Link
           href="https://docs.strapi.io/developer-docs/latest/development/custom-fields.html"

packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js

@@ -36,7 +36,7 @@ const AttributeOptions = ({ attributes, forTarget, kind }) => {
   const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
 
   return (
-    <ModalBody padding={6}>
+    <ModalBody padding={7}>
       <TabGroup
         label={formatMessage({
           id: getTrad('modalForm.tabs.label'),

packages/core/content-type-builder/admin/src/components/AttributeOptions/utils/getPadding.js

@@ -1,9 +0,0 @@
-const getPadding = (index) => {
-  const isOdd = index % 2 === 1;
-  const paddingLeft = isOdd ? 2 : 0;
-  const paddingRight = isOdd ? 0 : 2;
-
-  return { paddingLeft, paddingRight };
-};
-
-export default getPadding;

packages/core/content-type-builder/admin/src/components/FormModal/utils/getAttributesToDisplay.js

@@ -1,17 +1,17 @@
 const getAttributes = (dataTarget = '', targetUid, nestedComponents) => {
   const defaultAttributes = [
     'text',
-    'email',
-    'richtext',
-    'password',
-    'blocks',
-    'number',
-    'enumeration',
-    'date',
-    'media',
     'boolean',
+    'blocks',
     'json',
+    'number',
+    'email',
+    'date',
+    'password',
+    'media',
+    'enumeration',
     'relation',
+    'richtext',
   ];
 
   const isPickingAttributeForAContentType = dataTarget === 'contentType';
@@ -21,7 +21,8 @@ const getAttributes = (dataTarget = '', targetUid, nestedComponents) => {
 
   if (isPickingAttributeForAContentType) {
     return [
-      [...defaultAttributes, 'uid'],
+      // Insert UID before the last item (richtext)
+      [...defaultAttributes.slice(0, -1), 'uid', ...defaultAttributes.slice(-1)],
       ['component', 'dynamiczone'],
     ];
   }