Update dynamic filter component styles and remove lots of settings

packages/client/manifest.json

@@ -2650,7 +2650,6 @@
     "name": "Dynamic Filter",
     "icon": "FilterEdit",
     "showSettingsBar": true,
-    "editable": true,
     "settings": [
       {
         "type": "dataProvider",
@@ -2669,34 +2668,6 @@
         "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",
@@ -2721,14 +2692,6 @@
           }
         ],
         "defaultValue": "M"
-      },
-      {
-        "type": "boolean",
-        "label": "Quiet button",
-        "key": "quiet",
-        "showInBar": true,
-        "barIcon": "VisibilityOff",
-        "barTitle": "Quiet variant"
       }
     ]
   },

packages/client/src/components/app/Button.svelte

@@ -12,6 +12,10 @@
   export let type = "primary"
   export let quiet = false
 
+  // For internal use only for now - not defined in the manifest
+  export let icon = null
+  export let active = false
+
   let node
 
   $: $component.editing && node?.focus()
@@ -35,10 +39,22 @@
   {disabled}
   use:styleable={$component.styles}
   on:click={onClick}
-  contenteditable={$component.editing}
+  contenteditable={$component.editing && !icon}
   on:blur={$component.editing ? updateText : null}
   bind:this={node}
+  class:active
 >
+  {#if icon}
+    <svg
+      class:hasText={componentText?.length > 0}
+      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
   {componentText}
 </button>
 
@@ -56,4 +72,10 @@
   .spectrum-Button::after {
     display: none;
   }
+  .spectrum-Icon.hasText {
+    margin-right: var(--spectrum-button-primary-icon-gap);
+  }
+  .active {
+    color: var(--spectrum-global-color-blue-600);
+  }
 </style>

packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte

@@ -10,8 +10,6 @@
   export let allowedFields
   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")
@@ -31,7 +29,7 @@
   )
   $: schema = dataProvider?.schema
   $: schemaFields = getSchemaFields(schema, allowedFields)
-  $: buttonText = getButtonText(text, filters)
+  $: buttonText = text || "Filter"
 
   // Add query extension to data provider
   $: {
@@ -43,14 +41,6 @@
     }
   }
 
-  const getButtonText = (text, filters) => {
-    let buttonText = text || "Filter"
-    if (filters?.length) {
-      buttonText += ` (${filters.length})`
-    }
-    return buttonText
-  }
-
   const getSchemaFields = (schema, allowedFields) => {
     let clonedSchema = {}
     if (!allowedFields?.length) {
@@ -80,10 +70,18 @@
   })
 </script>
 
-<Button onClick={openEditor} text={buttonText} {size} {type} {quiet} />
+<Button
+  onClick={openEditor}
+  icon="Properties"
+  text={buttonText}
+  {size}
+  type="secondary"
+  quiet
+  active={filters?.length > 0}
+/>
 
 <Modal bind:this={modal}>
-  <ModalContent title={text} size="XL" onConfirm={updateQuery}>
+  <ModalContent title={buttonText} size="XL" onConfirm={updateQuery}>
     <FilterModal bind:filters={tmpFilters} {schemaFields} />
   </ModalContent>
 </Modal>