diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
index c540af5d4f..7f841e09ea 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
@@ -188,6 +188,7 @@
{#each category.children as component}
15}
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
@@ -226,7 +227,7 @@
.component {
background-color: var(--spectrum-global-color-gray-200);
border-radius: 4px;
- height: 72px;
+ height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -238,6 +239,9 @@
border: 1px solid var(--spectrum-global-color-gray-200);
transition: border-color 130ms ease-out;
}
+ .component.wide {
+ grid-column: span 2;
+ }
.component.selected,
.component:hover {
border-color: var(--spectrum-global-color-blue-400);
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
index 6873ae547d..acd28c6a41 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
@@ -26,6 +26,26 @@
"dynamicfilter"
]
},
+ {
+ "name": "Basic",
+ "icon": "TextParagraph",
+ "children": [
+ "heading",
+ "text",
+ "button",
+ "tag",
+ "spectrumcard",
+ "cardstat",
+ "divider",
+ "image",
+ "link",
+ "icon",
+ "embed",
+ "markdownviewer",
+ "backgroundimage",
+ "embeddedmap"
+ ]
+ },
{
"name": "Form",
"icon": "Form",
@@ -39,23 +59,15 @@
"optionsfield",
"booleanfield",
"longformfield",
- "datetimefield",
"attachmentfield",
- "relationshipfield",
"daterangepicker",
- "multifieldselect",
"jsonfield",
+ "relationshipfield",
+ "datetimefield",
+ "multifieldselect",
"s3upload"
]
},
- {
- "name": "Card",
- "icon": "Card",
- "children": [
- "spectrumcard",
- "cardstat"
- ]
- },
{
"name": "Chart",
"icon": "GraphBarVertical",
@@ -63,27 +75,9 @@
"bar",
"line",
"area",
+ "candlestick",
"pie",
- "donut",
- "candlestick"
- ]
- },
- {
- "name": "Elements",
- "icon": "TextParagraph",
- "children": [
- "heading",
- "text",
- "button",
- "tag",
- "divider",
- "image",
- "backgroundimage",
- "link",
- "icon",
- "embed",
- "markdownviewer",
- "embeddedmap"
+ "donut"
]
}
]