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 @@ }) -