Update collapsed button groups to support alignment

packages/client/manifest.json

@@ -517,11 +517,7 @@
                 "barTitle": "Align stretched horizontally"
               }
             ],
-            "defaultValue": "left",
+            "defaultValue": "left"
-            "dependsOn": {
-              "setting": "collapsed",
-              "invert": true
-            }
           },
           {
             "type": "select",
@@ -555,11 +551,7 @@
                 "barTitle": "Align stretched vertically"
               }
             ],
-            "defaultValue": "top",
+            "defaultValue": "top"
-            "dependsOn": {
-              "setting": "collapsed",
-              "invert": true
-            }
           },
           {
             "type": "select",

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

@@ -12,8 +12,7 @@
   export let collapsed = false
   export let collapsedText = "Action"
 
-  const { styleable, enrichButtonActions } = getContext("sdk")
+  const { enrichButtonActions } = getContext("sdk")
-  const component = getContext("component")
   const context = getContext("context")
 
   $: collapsedButtons = collapsed ? makeCollapsed(buttons) : null
@@ -29,30 +28,28 @@
   }
 </script>
 
-{#if collapsed}
+<Block>
-  <div use:styleable={$component.styles}>
+  <BlockComponent
-    <CollapsedButtonGroup
+    type="container"
-      text={collapsedText || "Action"}
+    props={{
-      buttons={collapsedButtons}
+      direction,
-    />
+      hAlign,
-  </div>
+      vAlign,
-{:else}
+      gap,
-  <Block>
+      wrap: true,
-    <BlockComponent
+    }}
-      type="container"
+    styles={{
-      props={{
+      normal: {
-        direction,
+        height: "100%",
-        hAlign,
+      },
-        vAlign,
+    }}
-        gap,
+  >
-        wrap: true,
+    {#if collapsed}
-      }}
+      <CollapsedButtonGroup
-      styles={{
+        text={collapsedText || "Action"}
-        normal: {
+        buttons={collapsedButtons}
-          height: "100%",
+      />
-        },
+    {:else}
-      }}
-    >
       {#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
         <BlockComponent
           type="button"
@@ -68,6 +65,6 @@
           }}
         />
       {/each}
-    </BlockComponent>
+    {/if}
-  </Block>
+  </BlockComponent>
-{/if}
+</Block>