Improve layout selection UX in createColumnsBlock (vivid-planet#1384)

Hide select when there's only one layout for a specific number of columns. --------- Co-authored-by: Ricky James Smith <jamesricky@me.com> Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
VP-DS · Jan 12, 2024 · 4bfaa9b · 4bfaa9b
1 parent 6e44833
commit 4bfaa9b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/.changeset/yellow-dots-listen.md b/.changeset/yellow-dots-listen.md
@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Improve layout selection UX in `createColumnsBlock`
+
+Hide select when there's only one layout for a specific number of columns
diff --git a/demo/admin/src/pages/blocks/ColumnsBlock.tsx b/demo/admin/src/pages/blocks/ColumnsBlock.tsx
@@ -49,6 +49,20 @@ const ColumnsBlock = createColumnsBlock({
                 </ColumnsLayoutPreview>
             ),
         },
+        {
+            name: "two-columns-12-6",
+            label: "Two columns 12-6",
+            columns: 2,
+            preview: (
+                <ColumnsLayoutPreview>
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                    <ColumnsLayoutPreviewContent width={12} />
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                    <ColumnsLayoutPreviewContent width={6} />
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                </ColumnsLayoutPreview>
+            ),
+        },
     ],
     contentBlock: ColumnsContentBlock,
 });

diff --git a/demo/api/src/pages/blocks/columns.block.ts b/demo/api/src/pages/blocks/columns.block.ts
@@ -19,7 +19,7 @@ const ColumnsContentBlock = createBlocksBlock(
 const ColumnsBlock = ColumnsBlockFactory.create(
     {
         contentBlock: ColumnsContentBlock,
-        layouts: [{ name: "one-column" }, { name: "two-columns" }],
+        layouts: [{ name: "one-column" }, { name: "two-columns" }, { name: "two-columns-12-6" }],
     },
     "Columns",
 );

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
@@ -23,7 +23,7 @@ interface Props extends FieldRenderProps<ColumnsBlockLayout> {
     layouts: ColumnsBlockLayout[];
 }
 
-export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props): React.ReactElement {
+export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props) {
     const sections = React.useMemo(() => {
         const sections: Section[] = [];
 
@@ -57,6 +57,18 @@ export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: P
         onChange(layouts.find((layout) => layout.name === event.target.value));
     };
 
+    if (layouts.length === 1) {
+        const layout = layouts[0];
+        return (
+            <SingleLayoutPreview>
+                <MenuItemContent>
+                    {layout.preview}
+                    <ListItemText primary={layout.label} secondary={layout.name} />
+                </MenuItemContent>
+            </SingleLayoutPreview>
+        );
+    }
+
     return (
         <Select value={value.name} onChange={handleChange} fullWidth>
             {sections.map((section, i) => [
@@ -112,3 +124,9 @@ const ListItemText = styled(MuiListItemText)`
     margin-top: 0;
     margin-bottom: 0;
 `;
+
+const SingleLayoutPreview = styled("div")`
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    padding: 9px;
+`;
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -267,7 +267,7 @@ export function createColumnsBlock<T extends BlockInterface>({
                                     fullWidth
                                 />
                             </BlocksFinalForm>
-                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.columns" defaultMessage="Columns" />}>
+                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.items" defaultMessage="Items" />}>
                                 <AdminComponentPaper disablePadding>
                                     <StackSwitchApiContext.Consumer>
                                         {(stackApi) => {