diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeList/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeList/index.js index 3b1a3f8a95..3a9ed591fd 100644 --- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeList/index.js +++ b/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 }) => ( @@ -12,23 +11,12 @@ const AttributeList = ({ attributes }) => ( {attributes.map((attributeRow, index) => { return ( // eslint-disable-next-line react/no-array-index-key - - {attributeRow.map((attribute, index) => { - const { paddingLeft, paddingRight } = getPadding(index); - - return ( - - - - - - ); - })} + + {attributeRow.map((attribute) => ( + + + + ))} ); })} diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js index c28af76bac..d1c8594a52 100644 --- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js +++ b/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 ( - - {sortedCustomFields.map(([uid, customField], index) => { - const { paddingLeft, paddingRight } = getPadding(index); - - return ( - - - - - - ); - })} + + {sortedCustomFields.map(([uid, customField]) => ( + + + + ))} { const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`); return ( - + renders and matches the snapshot 1`] = ` -.c26 { +.c24 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -36,21 +36,21 @@ exports[` renders and matches the snapshot 1`] = ` color: #666687; } -.c23 { +.c22 { font-size: 0.875rem; line-height: 1.43; font-weight: 600; color: #32324d; } -.c24 { +.c23 { font-size: 0.75rem; line-height: 1.33; color: #666687; } .c0 { - padding: 24px; + padding: 32px; } .c5 { @@ -66,16 +66,11 @@ exports[` renders and matches the snapshot 1`] = ` } .c16 { - padding-right: 8px; - padding-bottom: 4px; -} - -.c17 { padding: 16px; border-radius: 4px; } -.c20 { +.c19 { width: 2rem; height: 1.5rem; -webkit-flex-shrink: 0; @@ -83,16 +78,11 @@ exports[` renders and matches the snapshot 1`] = ` flex-shrink: 0; } -.c22 { +.c21 { padding-left: 16px; width: 100%; } -.c25 { - padding-bottom: 4px; - padding-left: 8px; -} - .c2 { -webkit-align-items: center; -webkit-box-align: center; @@ -126,7 +116,7 @@ exports[` renders and matches the snapshot 1`] = ` gap: 40px; } -.c19 { +.c18 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -152,6 +142,7 @@ exports[` renders and matches the snapshot 1`] = ` .c14 { display: grid; grid-template-columns: repeat(12,1fr); + gap: 12px; } .c15 { @@ -176,19 +167,19 @@ exports[` renders and matches the snapshot 1`] = ` cursor: not-allowed; } -.c21 svg { +.c20 svg { height: 100%; width: 100%; } -.c18 { +.c17 { width: 100%; height: 100%; border: 1px solid #dcdce4; text-align: left; } -.c18:hover { +.c17:hover { background: #f0f0ff; border: 1px solid #d9d8ff; } @@ -289,802 +280,742 @@ exports[` renders and matches the snapshot 1`] = `
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
-
- -
+
+
renders and matches the snapshot 1`] = `
-
- -
+
+
-
- -
+
+ @@ -1238,7 +1159,7 @@ exports[` renders and matches the snapshot 1`] = `

{ - const isOdd = index % 2 === 1; - const paddingLeft = isOdd ? 2 : 0; - const paddingRight = isOdd ? 0 : 2; - - return { paddingLeft, paddingRight }; -}; - -export default getPadding; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/getAttributesToDisplay.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/getAttributesToDisplay.js index 8d630623a1..bace8689f6 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/getAttributesToDisplay.js +++ b/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'], ]; }