From d8b352a9ae7cbe96a5b1aa8366e483c595affa8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 8 Apr 2021 18:04:03 +0200
Subject: [PATCH] convert table command buttons to spectrum

---
 packages/bbui/package.json                  |  3 ++-
 packages/bbui/src/Button/Button.svelte      |  8 +++++---
 packages/bbui/src/Modal/ModalContent.svelte | 12 +++++++-----
 packages/bbui/yarn.lock                     | 13 +++++++++----
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index a194473517..c29f766923 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -31,7 +31,7 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-svelte-hot": "^0.11.0",
     "semantic-release": "^17.0.8",
-    "svelte": "^3.29.0",
+    "svelte": "^3.37.0",
     "svench": "^0.0.10-7",
     "vite": "^2.1.5"
   },
@@ -44,6 +44,7 @@
   ],
   "dependencies": {
     "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/buttongroup": "^3.0.1",
     "@spectrum-css/dialog": "^3.0.1",
     "@spectrum-css/divider": "^1.0.1",
     "@spectrum-css/modal": "^3.0.1",
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index ed8d46f737..7b415faeb9 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -10,6 +10,8 @@
   export let size = "M";
   /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
   export let type = "primary"
+
+  export let quiet = false
   
   export let icon = undefined;
 </script>
@@ -21,7 +23,7 @@
     {href}
     {disabled}>
     {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="{icon}">
+      <svg 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}
@@ -29,11 +31,11 @@
   </a>
 {:else}
   <button
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
+    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
     {disabled}
     on:click|preventDefault>
     {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="{icon}">
+      <svg 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}
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index ab1dec2b96..533568926a 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -7,7 +7,7 @@
   import Context from "../context"
 
   export let title = undefined
-  export let size
+  export let size = "small"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
@@ -40,15 +40,17 @@
     </section>
     {#if showCancelButton || showConfirmButton}
       <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
-        <footer class="footer-content">
+        <!-- <footer class="footer-content">
+          <slot name="footer" />
+        </footer> -->
+        <div class="spectrum-ButtonGroup-item">
           <slot name="footer" />
-        </footer>
-        <div class="buttons">
           {#if showCancelButton}
-            <Button secondary on:click={hide}>{cancelText}</Button>
+            <Button type="secondary" on:click={hide}>{cancelText}</Button>
           {/if}
           {#if showConfirmButton}
             <Button
+            type="cta"
               primary
               {...$$restProps}
               disabled={confirmDisabled}
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 94e1a365dd..ce044b9c63 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -415,6 +415,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
   integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
 
+"@spectrum-css/buttongroup@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.1.tgz#99e59cf32ed9a73dacb0c04d260c830ecbafb181"
+  integrity sha512-/cktRh8N63lCMvcGX/E/8yTBcearuETzZCxm6YDisk3W4Pi68621JVNjxLOB65pf855EHpoZufzLJIRVj+dyOw==
+
 "@spectrum-css/dialog@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.1.tgz#33aae036282159f6aa998848b8c0828640a9620a"
@@ -6110,10 +6115,10 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte@^3.29.0:
-  version "3.36.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.36.0.tgz#3fc4c6fc7a04c3d4249b4fcccae28fc14f442f64"
-  integrity sha512-LSmdCYoAS6kzLff9nejB5KK5FBJaqyiivs7hPl0OJZ+OxiggI8lMAhvo5W3y8vSP0IWS5++Yb5EbKuQdzOSIoA==
+svelte@^3.37.0:
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
+  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
 
 svench@^0.0.10-7:
   version "0.0.10-7"