Remove layout responsibility from StandardButton

Upstream also have a wrapper div so I've kept that for now but I think it's best to pretend it doesn't exist and layout the button in parent components rather than try to pass styling to that div. Simplifies the dialog footers.
microbit-foundation · Dec 21, 2023 · e35b718 · e35b718
1 parent c2efd5b
commit e35b718
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 28 deletions.
diff --git a/src/components/StandardButton.svelte b/src/components/StandardButton.svelte
@@ -40,8 +40,6 @@
   export let disabled = false;
   export let size: ButtonSize = 'normal';
   export let shadows = true;
-  export let position: 'center' | 'right' = 'center';
-  export let extraClasses: string = '';
 
   const classes: { [key in ButtonVariant]: string } = {
     primary: 'bg-primary text-white border-solid border-2 border-primary',
@@ -50,16 +48,9 @@
     info: 'bg-info',
     infolight: 'bg-infolight',
   };
-
-  function getPosition(): string {
-    if (position === 'right') {
-      return 'content-end place-items-end';
-    }
-    return 'content-center place-items-center';
-  }
 </script>
 
-<div class="grid grid-cols-1 {extraClasses} {getPosition()}">
+<div class="grid grid-cols-1 place-items-center">
   <button
     {disabled}
     class="{classes[type]} font-bold outline-none rounded-full {size}"

diff --git a/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte b/src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte
@@ -61,16 +61,11 @@
       </div>
     </div>
   </div>
-  <div class="flex items-center w-full">
-    <div
-      on:click={onStartRadioClick}
-      class="w-full align-bottom hover:cursor-pointer text-link">
+  <div class="flex justify-between items-center">
+    <div on:click={onStartRadioClick} class="hover:cursor-pointer text-link">
       {$t('connectMB.bluetoothStart.switchRadio')}
     </div>
-    <StandardButton
-      extraClasses="basis-full"
-      position="right"
-      onClick={onNextClick}
-      type="primary">{$t('connectMB.nextButton')}</StandardButton>
+    <StandardButton onClick={onNextClick} type="primary"
+      >{$t('connectMB.nextButton')}</StandardButton>
   </div>
 </main>
diff --git a/src/components/connection-prompt/radio/StartRadioDialog.svelte b/src/components/connection-prompt/radio/StartRadioDialog.svelte
@@ -60,7 +60,7 @@
       </div>
     </div>
   </div>
-  <div class="flex items-center w-full">
+  <div class="flex justify-between items-center">
     <div on:click={onStartBluetoothClick} class="w-full hover:cursor-pointer text-link">
       {$t('connectMB.radioStart.switchBluetooth')}
     </div>

diff --git a/src/components/control-bar/control-bar-items/AboutDialog.svelte b/src/components/control-bar/control-bar-items/AboutDialog.svelte
@@ -46,7 +46,9 @@
         </table>
       </div>
     </div>
-    <StandardButton position="right" onClick={onClose} type="primary"
-      >{$t('actions.close')}</StandardButton>
+    <div class="flex justify-end">
+      <StandardButton onClick={onClose} type="primary"
+        >{$t('actions.close')}</StandardButton>
+    </div>
   </div>
 </StandardDialog>
diff --git a/src/components/control-bar/control-bar-items/LanguageDialog.svelte b/src/components/control-bar/control-bar-items/LanguageDialog.svelte
@@ -32,7 +32,9 @@
         </button>
       {/each}
     </div>
-    <StandardButton position="right" onClick={onClose} type="primary"
-      >{$t('actions.close')}</StandardButton>
+    <div class="flex justify-end">
+      <StandardButton onClick={onClose} type="primary"
+        >{$t('actions.close')}</StandardButton>
+    </div>
   </div>
 </StandardDialog>
diff --git a/src/pages/DataPage.svelte b/src/pages/DataPage.svelte
@@ -118,6 +118,8 @@
       <NewGestureButton />
     </div>
 
-    <TrainingButton action="navigate" position="right" />
+    <div class="flex justify-end mx-10">
+      <TrainingButton action="navigate" />
+    </div>
   {/if}
 </main>
diff --git a/src/pages/training/TrainingButton.svelte b/src/pages/training/TrainingButton.svelte
@@ -14,7 +14,6 @@
 
   export let type: ButtonVariant = 'primary';
   export let action: 'navigate' | 'train' = 'train';
-  export let position: 'center' | 'right' = 'center';
 
   $: trainButtonLabel = !$state.isPredicting
     ? 'menu.trainer.trainModelButton'
@@ -45,7 +44,5 @@
   onClick={action === 'navigate' ? navitgateToTrainingPage : startTraining}
   disabled={trainingButtonDisabled}
   {type}
-  {position}
-  extraClasses="mx-10"
   >{$t(trainButtonLabel)}
 </StandardButton>