diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7bf9b77bda..25e7840a66 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -247,7 +247,6 @@
"description": "A basic html button that is ready for styling",
"icon": "Button",
"editable": true,
- "illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
@@ -2650,6 +2649,8 @@
"dynamicfilter": {
"name": "Dynamic Filter",
"icon": "FilterEdit",
+ "showSettingsBar": true,
+ "editable": true,
"settings": [
{
"type": "dataProvider",
@@ -2665,8 +2666,69 @@
{
"type": "text",
"label": "Button text",
- "key": "buttonText",
+ "key": "text",
"defaultValue": "Filter"
+ },
+ {
+ "type": "select",
+ "showInBar": true,
+ "label": "Button variant",
+ "key": "type",
+ "options": [
+ {
+ "label": "Primary",
+ "value": "primary"
+ }, {
+ "label": "Secondary",
+ "value": "secondary"
+ },
+ {
+ "label": "Action",
+ "value": "cta"
+ },
+ {
+ "label": "Warning",
+ "value": "warning"
+ },
+ {
+ "label": "Over Background",
+ "value": "overBackground"
+ }
+ ],
+ "defaultValue": "primary"
+ },
+ {
+ "type": "select",
+ "label": "Button size",
+ "showInBar": true,
+ "key": "size",
+ "options": [
+ {
+ "label": "Small",
+ "value": "S"
+ },
+ {
+ "label": "Medium",
+ "value": "M"
+ },
+ {
+ "label": "Large",
+ "value": "L"
+ },
+ {
+ "label": "Extra large",
+ "value": "XL"
+ }
+ ],
+ "defaultValue": "M"
+ },
+ {
+ "type": "boolean",
+ "label": "Quiet button",
+ "key": "quiet",
+ "showInBar": true,
+ "barIcon": "VisibilityOff",
+ "barTitle": "Quiet variant"
}
]
},
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 92b78905ef..f85fe7bedd 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -8,7 +8,10 @@
export let dataProvider
export let allowedFields
- export let buttonText
+ export let text = ""
+ export let size = "M"
+ export let type = "primary"
+ export let quiet = false
const component = getContext("component")
const { builderStore, ActionTypes, getAction } = getContext("sdk")
@@ -28,7 +31,7 @@
)
$: schema = dataProvider?.schema
$: schemaFields = getSchemaFields(schema, allowedFields)
- $: text = getText(buttonText, filters)
+ $: buttonText = getButtonText(text, filters)
// Add query extension to data provider
$: {
@@ -40,12 +43,12 @@
}
}
- const getText = (buttonText, filters) => {
- let text = buttonText || "Edit filters"
+ const getButtonText = (text, filters) => {
+ let buttonText = text || "Filter"
if (filters?.length) {
- text += ` (${filters.length})`
+ buttonText += ` (${filters.length})`
}
- return text
+ return buttonText
}
const getSchemaFields = (schema, allowedFields) => {
@@ -77,7 +80,7 @@
})
-
+