Add button variant, size and quiet settings to dynamic filter. Allow dyanmic filter button text to be edited inline

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"
       }
     ]
   },

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) => {
+  const getButtonText = (text, filters) => {
-    let text = buttonText || "Edit 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 @@
   })
 </script>
 
-<Button onClick={openEditor} {text} />
+<Button onClick={openEditor} text={buttonText} {size} {type} {quiet} />
 
 <Modal bind:this={modal}>
   <ModalContent title={text} size="XL" onConfirm={updateQuery}>