rework Icons to use new API

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -20,7 +20,7 @@
   <div class="property-group-name" on:click={onHeaderClick}>
     <div class:thin class="name">{name}</div>
     <div class="icon">
-      <Icon s name={show ? 'Remove' : 'Add'} />
+      <Icon size="S" name={show ? "Remove" : "Add"} />
     </div>
   </div>
   <div class="property-panel" class:show>

packages/bbui/src/Icon/Icon.svelte

@@ -6,26 +6,18 @@
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
-  export let s = false
-  export let m = false
-  export let l = false
-  export let xl = false
+  export let size = "M"
   export let hoverable = false
   export let disabled = false
 
   $: rotation = directions.indexOf(direction) * 45
-  $: useDefault = ![s, m, l, xl].includes(true)
 </script>
 
 <svg
   on:click
   class:hoverable
   class:disabled
-  class:spectrum-Icon--sizeS={s}
-  class:spectrum-Icon--sizeM={m || useDefault}
-  class:spectrum-Icon--sizeL={l}
-  class:spectrum-Icon--sizeXL={xl}
-  class="spectrum-Icon"
+  class="spectrum-Icon spectrum-Icon--size{size}"
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}

packages/builder/src/components/automation/Shared/WebhookDisplay.svelte

@@ -30,7 +30,7 @@
 <div>
   <Input readonly value={fullWebhookURL(value)} />
   <div class="icon" on:click={() => copyToClipboard()}>
-    <Icon s name="Copy" />
+    <Icon size="S" name="Copy" />
   </div>
 </div>
 

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -22,7 +22,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -15,7 +15,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>

packages/builder/src/components/common/DrawerBindableInput.svelte

@@ -36,7 +36,7 @@
     on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
-    <Icon s name="FlashOn" />
+    <Icon size="S" name="FlashOn" />
   </div>
 </div>
 <Drawer bind:this={bindingDrawer} {title}>

packages/builder/src/components/common/NavItem.svelte

@@ -29,13 +29,13 @@
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <Icon s name="ChevronRight" />
+        <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon"><Icon s name={icon} /></div>
+      <div class="icon"><Icon size="S" name={icon} /></div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -68,7 +68,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
   <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -41,7 +41,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -25,7 +25,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -120,7 +120,7 @@
               on:click={() => deleteAction(index)}
               style="margin-left: auto;"
             >
-              <Icon s hoverable name="Close" />
+              <Icon size="S" hoverable name="Close" />
             </div>
           </div>
         {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -87,7 +87,7 @@
       class="icon"
       data-cy={`${key}-binding-button`}
       on:click={bindingDrawer.show}>
-      <Icon s name="FlashOn" />
+      <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
       <svelte:fragment slot="description">

packages/builder/src/components/start/AppList.svelte

@@ -20,7 +20,7 @@
 
 <div class="root">
   <Heading m>Your Apps</Heading>
-  <Divider m />
+  <Divider size="M" />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />