yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 22:40:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Fix attribute picker grid spacing

* Change CTB attribute options order

* Update snapshots

* Add comment
This commit is contained in:
Rémi de Juvigny 2023-10-24 11:47:48 +02:00 committed by GitHub
parent 72d7b2a214
commit 4553cf9db2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 669 additions and 780 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,13 +1,12 @@
import React from 'react'; 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 { useCustomFields } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { getTrad } from '../../../utils'; import { getTrad } from '../../../utils';
import CustomFieldOption from '../CustomFieldOption'; import CustomFieldOption from '../CustomFieldOption';
import EmptyAttributes from '../EmptyAttributes'; import EmptyAttributes from '../EmptyAttributes';
import getPadding from '../utils/getPadding';
const CustomFieldsList = () => { const CustomFieldsList = () => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -26,23 +25,12 @@ const CustomFieldsList = () => {
return ( return (
<KeyboardNavigable tagName="button"> <KeyboardNavigable tagName="button">
<Flex direction="column" alignItems="stretch" gap={3}> <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}>
return (
<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} /> <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />
</Box>
</GridItem> </GridItem>
); ))}
})}
</Grid> </Grid>
<Link <Link
href="https://docs.strapi.io/developer-docs/latest/development/custom-fields.html" href="https://docs.strapi.io/developer-docs/latest/development/custom-fields.html"

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

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

299
packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/__snapshots__/index.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<AttributeOptions /> renders and matches the snapshot 1`] = ` exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
.c26 { .c24 {
border: 0; border: 0;
-webkit-clip: rect(0 0 0 0); -webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
@ -36,21 +36,21 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
color: #666687; color: #666687;
} }
.c23 { .c22 {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.43; line-height: 1.43;
font-weight: 600; font-weight: 600;
color: #32324d; color: #32324d;
} }
.c24 { .c23 {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.33; line-height: 1.33;
color: #666687; color: #666687;
} }
.c0 { .c0 {
padding: 24px; padding: 32px;
} }
.c5 { .c5 {
@ -66,16 +66,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
} }
.c16 { .c16 {
padding-right: 8px;
padding-bottom: 4px;
}
.c17 {
padding: 16px; padding: 16px;
border-radius: 4px; border-radius: 4px;
} }
.c20 { .c19 {
width: 2rem; width: 2rem;
height: 1.5rem; height: 1.5rem;
-webkit-flex-shrink: 0; -webkit-flex-shrink: 0;
@ -83,16 +78,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
flex-shrink: 0; flex-shrink: 0;
} }
.c22 { .c21 {
padding-left: 16px; padding-left: 16px;
width: 100%; width: 100%;
} }
.c25 {
padding-bottom: 4px;
padding-left: 8px;
}
.c2 { .c2 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
@ -126,7 +116,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
gap: 40px; gap: 40px;
} }
.c19 { .c18 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
@ -152,6 +142,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
.c14 { .c14 {
display: grid; display: grid;
grid-template-columns: repeat(12,1fr); grid-template-columns: repeat(12,1fr);
gap: 12px;
} }
.c15 { .c15 {
@ -176,19 +167,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
cursor: not-allowed; cursor: not-allowed;
} }
.c21 svg { .c20 svg {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.c18 { .c17 {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #dcdce4; border: 1px solid #dcdce4;
text-align: left; text-align: left;
} }
.c18:hover { .c17:hover {
background: #f0f0ff; background: #f0f0ff;
border: 1px solid #d9d8ff; border: 1px solid #d9d8ff;
} }
@ -288,21 +279,17 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
> >
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -328,22 +315,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
text text
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -352,24 +339,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -395,22 +377,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
email email
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -419,24 +401,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -464,22 +441,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
richtext richtext
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -488,24 +465,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -527,22 +499,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
password password
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -551,24 +523,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -594,22 +561,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
number number
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -618,24 +585,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -663,22 +625,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
enumeration enumeration
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -687,24 +649,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -728,22 +685,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
date date
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -752,24 +709,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -797,22 +749,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
media media
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -821,24 +773,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -864,22 +811,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
boolean boolean
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -888,24 +835,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -933,22 +875,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
json json
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -957,24 +899,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -998,22 +935,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
relation relation
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -1022,24 +959,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -1061,22 +993,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
uid uid
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -1086,27 +1018,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</button> </button>
</div> </div>
</div> </div>
</div>
<div <div
class="c14" class="c14"
> >
<div <div
class="c15" class="c15"
>
<div
class="c16"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -1138,22 +1065,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
component component
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -1162,24 +1089,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</button> </button>
</div> </div>
</div>
<div <div
class="c15" class="c15"
>
<div
class="c25"
style="height: 100%;"
> >
<button <button
class="c17 c18" class="c16 c17"
type="button" type="button"
> >
<div <div
class="c19" class="c18"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c20 c21" class="c19 c20"
> >
<svg <svg
class="" class=""
@ -1205,22 +1127,22 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c22" class="c21"
> >
<div <div
class="c2" class="c2"
> >
<span <span
class="c23" class="c22"
> >
dynamiczone dynamiczone
</span> </span>
</div> </div>
<div <div
class="c19" class="c18"
> >
<span <span
class="c24" class="c23"
> >
A type for modeling data A type for modeling data
</span> </span>
@ -1236,9 +1158,8 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="c26" class="c24"
> >
<p <p
aria-live="polite" aria-live="polite"

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

@ -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;

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

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