Merge branch 'master' into BUDI-9297

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.11.0",
+  "version": "3.11.1",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {

packages/client/manifest.json

@@ -5545,12 +5545,26 @@
         "wide": true
       },
       {
-        "label": "",
-        "type": "filterConfiguration",
-        "key": "filterConfig",
-        "nested": true,
-        "dependsOn": "targetComponent",
-        "resetOn": "targetComponent"
+        "type": "select",
+        "label": "Size",
+        "showInBar": true,
+        "key": "size",
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M",
+        "wide": true
       },
       {
         "type": "boolean",
@@ -5563,6 +5577,14 @@
         "label": "Clear filters",
         "key": "showClear",
         "defaultValue": false
+      },
+      {
+        "label": "",
+        "type": "filterConfiguration",
+        "key": "filterConfig",
+        "nested": true,
+        "dependsOn": "targetComponent",
+        "resetOn": "targetComponent"
       }
     ]
   },

packages/client/src/components/app/filter/Filter.svelte

@@ -32,6 +32,7 @@
   export let showClear: boolean | undefined = false
   export let filterConfig: FilterConfig[] | undefined = []
   export let targetComponent: any
+  export let size: string | undefined = "M"
 
   const memoFilters = memo({} as Record<string, SearchFilter>)
   const component = getContext("component")
@@ -405,6 +406,7 @@
       {#each visibleFilters || [] as config}
         {@const filter = $memoFilters[config.field]}
         <FilterButton
+          {size}
           {config}
           {filter}
           {schema}
@@ -424,7 +426,7 @@
         />
       {/each}
       {#if showClear && Object.keys(filters).length}
-        <Button size={"S"} secondary on:click={clearAll}>Clear all</Button>
+        <Button {size} secondary on:click={clearAll}>Clear all</Button>
       {/if}
     </Container>
   </div>

packages/client/src/components/app/filter/FilterButton.svelte

@@ -170,7 +170,7 @@
           }}
         >
           <svg
-            class="spectrum-Icon spectrum-Icon--sizeS"
+            class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
             focusable="false"
             aria-hidden="true"
             aria-label={icon}
@@ -200,7 +200,7 @@
     z-index: 1;
   }
   .toggle-wrap svg {
-    width: 12px;
+    scale: 90%;
     pointer-events: none;
   }
   .filter-button-wrap.inactive .spectrum-Button .spectrum-Icon {
@@ -212,6 +212,17 @@
     display: flex;
     gap: var(--spacing-xs);
   }
+
+  .spectrum-Button--sizeM,
+  .spectrum-Button--sizeL {
+    gap: var(--spacing-s);
+  }
+
+  .spectrum-Button--sizeL {
+    padding-left: calc(1em * 0.9);
+    padding-right: calc(1em * 0.9);
+  }
+
   .spectrum-Button.is-disabled {
     cursor: default;
   }