Make fields full-width by default when using `createCompositeBlockTex…

…tField` and `createCompositeBlockSelectField`
vivid-planet · Jan 15, 2025 · 8587e5d · 8587e5d
1 parent 1883751
commit 8587e5d
Show file tree

Hide file tree

Showing 17 changed files with 16 additions and 26 deletions.
diff --git a/.changeset/two-humans-decide.md b/.changeset/two-humans-decide.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": major
+---
+
+Make fields full-width by default when using `createCompositeBlockTextField` and `createCompositeBlockSelectField`
diff --git a/demo/admin/src/common/blocks/AccordionItemBlock.tsx b/demo/admin/src/common/blocks/AccordionItemBlock.tsx
@@ -31,7 +31,6 @@ export const AccordionItemBlock = createCompositeBlock(
         blocks: {
             title: {
                 block: createCompositeBlockTextField({
-                    fullWidth: true,
                     label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" />,
                 }),
                 hiddenInSubroute: true,

diff --git a/demo/admin/src/common/blocks/CallToActionBlock.tsx b/demo/admin/src/common/blocks/CallToActionBlock.tsx
@@ -15,14 +15,13 @@ export const CallToActionBlock = createCompositeBlock(
             },
             variant: {
                 block: createCompositeBlockSelectField<CallToActionBlockData["variant"]>({
+                    label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />,
                     defaultValue: "Contained",
                     options: [
                         { value: "Contained", label: <FormattedMessage id="callToActionBlock.variant.contained" defaultMessage="Contained" /> },
                         { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> },
                         { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> },
                     ],
-                    label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />,
-                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/HeadingBlock.tsx b/demo/admin/src/common/blocks/HeadingBlock.tsx
@@ -72,6 +72,7 @@ export const HeadingBlock = createCompositeBlock(
             },
             htmlTag: {
                 block: createCompositeBlockSelectField<HeadingBlockData["htmlTag"]>({
+                    label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />,
                     defaultValue: "H2",
                     options: [
                         { value: "H1", label: <FormattedMessage id="headingBlock.headline1" defaultMessage="Headline 1" /> },
@@ -81,8 +82,6 @@ export const HeadingBlock = createCompositeBlock(
                         { value: "H5", label: <FormattedMessage id="headingBlock.headline5" defaultMessage="Headline 5" /> },
                         { value: "H6", label: <FormattedMessage id="headingBlock.headline6" defaultMessage="Headline 6" /> },
                     ],
-                    label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />,
-                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/MediaGalleryBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
@@ -22,10 +22,9 @@ export const MediaGalleryBlock = createCompositeBlock(
             },
             aspectRatio: {
                 block: createCompositeBlockSelectField<MediaGalleryBlockData["aspectRatio"]>({
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
-                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
@@ -13,7 +13,6 @@ export const MediaGalleryItemBlock = createCompositeBlock(
             },
             caption: {
                 block: createCompositeBlockTextField({
-                    fullWidth: true,
                     label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
                 }),
                 hiddenInSubroute: true,

diff --git a/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx b/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
@@ -13,14 +13,13 @@ export const StandaloneCallToActionListBlock = createCompositeBlock(
             },
             alignment: {
                 block: createCompositeBlockSelectField<StandaloneCallToActionListBlockData["alignment"]>({
+                    label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
                     defaultValue: "left",
                     options: [
                         { value: "left", label: <FormattedMessage id="standaloneCallToActionList.alignment.left" defaultMessage="left" /> },
                         { value: "center", label: <FormattedMessage id="standaloneCallToActionList.alignment.center" defaultMessage="center" /> },
                         { value: "right", label: <FormattedMessage id="standaloneCallToActionList.alignment.right" defaultMessage="right" /> },
                     ],
-                    label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
-                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx b/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
@@ -13,13 +13,12 @@ export const StandaloneHeadingBlock = createCompositeBlock(
             },
             textAlignment: {
                 block: createCompositeBlockSelectField<StandaloneHeadingBlockData["textAlignment"]>({
+                    label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />,
                     defaultValue: "left",
                     options: [
                         { value: "left", label: <FormattedMessage id="standaloneHeading.textAlignment.left" defaultMessage="left" /> },
                         { value: "center", label: <FormattedMessage id="standaloneHeading.textAlignment.center" defaultMessage="center" /> },
                     ],
-                    label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />,
-                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx b/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
@@ -14,10 +14,9 @@ export const StandaloneMediaBlock = createCompositeBlock(
             },
             aspectRatio: {
                 block: createCompositeBlockSelectField<StandaloneMediaBlockData["aspectRatio"]>({
+                    label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />,
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />,
-                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx b/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
@@ -40,7 +40,6 @@ export const BasicStageBlock = createCompositeBlock({
             block: createCompositeBlockSelectField<BasicStageBlockData["overlay"]>({
                 defaultValue: 50,
                 options: overlayOptions,
-                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.overlay" defaultMessage="Overlay" />,
             hiddenInSubroute: true,
@@ -52,7 +51,6 @@ export const BasicStageBlock = createCompositeBlock({
                     { value: "left", label: <FormattedMessage id="basicStageBlock.alignment.left" defaultMessage="left" /> },
                     { value: "center", label: <FormattedMessage id="basicStageBlock.alignment.center" defaultMessage="center" /> },
                 ],
-                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.alignment" defaultMessage="Alignment" />,
             hiddenInSubroute: true,

diff --git a/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx b/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
@@ -41,7 +41,6 @@ export const BillboardTeaserBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<BillboardTeaserBlockData["overlay"]>({
                     defaultValue: 50,
                     options: overlayOptions,
-                    fullWidth: true,
                 }),
                 title: <FormattedMessage id="billboardTeaserBlock.overlay" defaultMessage="Overlay" />,
                 hiddenInSubroute: true,

diff --git a/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx b/demo/admin/src/documents/pages/blocks/ContentGroupBlock.tsx
@@ -44,10 +44,9 @@ export const ContentGroupBlock = createCompositeBlock(
         blocks: {
             backgroundColor: {
                 block: createCompositeBlockSelectField<ContentGroupBlockData["backgroundColor"]>({
+                    label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" />,
                     defaultValue: "default",
                     options: backgroundColorOptions,
-                    fullWidth: true,
-                    label: <FormattedMessage id="contentGroupBlock.overlay" defaultMessage="Background Color" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx b/demo/admin/src/documents/pages/blocks/KeyFactsItemBlock.tsx
@@ -23,13 +23,11 @@ export const KeyFactsItemBlock = createCompositeBlock(
             },
             fact: {
                 block: createCompositeBlockTextField({
-                    fullWidth: true,
                     label: <FormattedMessage id="keyFactsItemBlock.fact" defaultMessage="Fact" />,
                 }),
             },
             label: {
                 block: createCompositeBlockTextField({
-                    fullWidth: true,
                     label: <FormattedMessage id="keyFactsItemBlock.label" defaultMessage="Label" />,
                 }),
             },

diff --git a/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx b/demo/admin/src/documents/pages/blocks/TeaserItemBlock.tsx
@@ -25,7 +25,6 @@ export const TeaserItemBlock = createCompositeBlock(
             },
             title: {
                 block: createCompositeBlockTextField({
-                    fullWidth: true,
                     label: <FormattedMessage id="teaserItemBlock.title" defaultMessage="Title" />,
                 }),
             },

diff --git a/demo/admin/src/footer/blocks/FooterContentBlock.tsx b/demo/admin/src/footer/blocks/FooterContentBlock.tsx
@@ -25,7 +25,6 @@ export const FooterContentBlock = createCompositeBlock({
         copyrightNotice: {
             block: createCompositeBlockTextField({
                 label: <FormattedMessage id="footers.blocks.content.copyrightNotice" defaultMessage="Copyright notice" />,
-                fullWidth: true,
             }),
             hiddenInSubroute: true,
         },

diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockSelectField.tsx
@@ -15,14 +15,15 @@ interface Options<T extends string | number> extends Partial<SelectFieldProps<T>
 export function createCompositeBlockSelectField<T extends string | number>({
     defaultValue,
     options,
+    fullWidth = true,
     fieldProps: legacyFieldProps,
     ...fieldProps
 }: Options<T>) {
     return createCompositeSetting<T>({
         defaultValue,
         AdminComponent: ({ state, updateState }) => (
             <BlocksFinalForm<{ value: typeof state }> onSubmit={({ value }) => updateState(value)} initialValues={{ value: state }}>
-                <SelectField name="value" {...legacyFieldProps} {...fieldProps} options={options} />
+                <SelectField name="value" fullWidth={fullWidth} {...legacyFieldProps} {...fieldProps} options={options} />
             </BlocksFinalForm>
         ),
     });

diff --git a/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx b/packages/admin/blocks-admin/src/blocks/helpers/createCompositeBlockTextField.tsx
@@ -11,15 +11,15 @@ interface Options extends Partial<TextFieldProps> {
     fieldProps?: Partial<TextFieldProps>;
 }
 
-export function createCompositeBlockTextField({ defaultValue = "", fieldProps: legacyFieldProps, ...fieldProps }: Options) {
+export function createCompositeBlockTextField({ defaultValue = "", fullWidth = true, fieldProps: legacyFieldProps, ...fieldProps }: Options) {
     return createCompositeSetting<string>({
         defaultValue,
         AdminComponent: ({ state, updateState }) => (
             <BlocksFinalForm<{ value: typeof state }>
                 onSubmit={({ value }) => updateState(value ?? "")}
                 initialValues={{ value: state || undefined }}
             >
-                <TextField name="value" {...legacyFieldProps} {...fieldProps} />
+                <TextField name="value" fullWidth={fullWidth} {...legacyFieldProps} {...fieldProps} />
             </BlocksFinalForm>
         ),
     });