From 999e3e30682c3c25cc0166b8e8a3765a765f961e Mon Sep 17 00:00:00 2001
From: Adam Azzam <33043305+AAAZZAM@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:57:20 -0400
Subject: [PATCH 1/4] add size + variants props

---
 src/components/Button/PButton.vue | 40 ++++++++++++++++---------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/Button/PButton.vue b/src/components/Button/PButton.vue
index 4280b0fbd..4fef1a6e3 100644
--- a/src/components/Button/PButton.vue
+++ b/src/components/Button/PButton.vue
@@ -31,6 +31,8 @@
   import { isRouteExternal } from '@/utilities/router'
 
   const props = defineProps<{
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link',
+    size?: 'default' | 'sm' | 'lg' | 'icon',
     primary?: boolean,
     flat?: boolean,
     selected?: boolean,
@@ -80,10 +82,10 @@
 
   const classes = computed(() => ({
     'p-button--icon-only': props.icon && !slots.default,
-    'p-button--primary': props.primary,
-    'p-button--danger': props.dangerous,
-    'p-button--flat': props.flat,
-    'p-button--small': props.small,
+    'p-button--default': props.primary || props.variant === 'default' || props.variant === 'destructive',
+    'p-button--destructive': props.dangerous || props.variant === 'destructive',
+    'p-button--ghost': props.flat || props.variant === 'ghost',
+    'p-button--small': props.small || props.size === 'sm',
     'p-button--icon-prepend': props.icon && slots.default,
     'p-button--icon-append': props.iconAppend && slots.default,
     'p-button--disabled': props.disabled || props.loading,
@@ -151,81 +153,81 @@
   font-normal
 }
 
-.p-button--primary {
+.p-button--default {
   background-color: var(--p-color-button-primary-bg);
   border-color: var(--p-color-button-primary-border);
   color: var(--p-color-button-primary-text);
 }
-.p-button--primary:not(:disabled):hover {
+.p-button--default:not(:disabled):hover {
   background-color: var(--p-color-button-primary-bg-hover);
   border-color: var(--p-color-button-primary-border-hover);
   color: var(--p-color-button-primary-text-hover);
 }
-.p-button--primary:not(:disabled):active {
+.p-button--default:not(:disabled):active {
   background-color: var(--p-color-button-primary-bg-active);
   border-color: var(--p-color-button-primary-border-active);
   color: var(--p-color-button-primary-text-active);
 }
 
-.p-button--danger {
+.p-button--destructive {
   background-color: var(--p-color-button-danger-bg);
   border-color: var(--p-color-button-danger-border);
   color: var(--p-color-button-danger-text);
 }
-.p-button--danger:not(:disabled):hover {
+.p-button--destructive:not(:disabled):hover {
   background-color: var(--p-color-button-danger-bg-hover);
   border-color: var(--p-color-button-danger-border-hover);
   color: var(--p-color-button-danger-text-hover);
 }
-.p-button--danger:not(:disabled):active {
+.p-button--destructive:not(:disabled):active {
   background-color: var(--p-color-button-danger-bg-active);
   border-color: var(--p-color-button-danger-border-active);
   color: var(--p-color-button-danger-text-active);
 }
 
-.p-button--primary.p-button--danger {
+.p-button--default.p-button--destructive {
   background-color: var(--p-color-button-primary-danger-bg);
   border-color: var(--p-color-button-primary-danger-border);
   color: var(--p-color-button-primary-danger-text);
 }
-.p-button--primary.p-button--danger:not(:disabled):hover {
+.p-button--default.p-button--destructive:not(:disabled):hover {
   background-color: var(--p-color-button-primary-danger-bg-hover);
   border-color: var(--p-color-button-primary-danger-border-hover);
   color: var(--p-color-button-primary-danger-text-hover);
 }
-.p-button--primary.p-button--danger:not(:disabled):active {
+.p-button--default.p-button--destructive:not(:disabled):active {
   background-color: var(--p-color-button-primary-danger-bg-active);
   border-color: var(--p-color-button-primary-danger-border-active);
   color: var(--p-color-button-primary-danger-text-active);
 }
 
-.p-button--flat {
+.p-button--ghost {
   background-color: var(--p-color-button-flat-bg);
   border-color: var(--p-color-button-flat-border);
   color: var(--p-color-button-flat-text);
 }
-.p-button--flat:not(:disabled):hover {
+.p-button--ghost:not(:disabled):hover {
   background-color: var(--p-color-button-flat-bg-hover);
   border-color: var(--p-color-button-flat-border-hover);
   color: var(--p-color-button-flat-text-hover);
 }
-.p-button--flat:not(:disabled):active {
+.p-button--ghost:not(:disabled):active {
   background-color: var(--p-color-button-flat-bg-active);
   border-color: var(--p-color-button-flat-border-active);
   color: var(--p-color-button-flat-text-active);
 }
 
-.p-button--flat.p-button--danger {
+.p-button--ghost.p-button--destructive {
   background-color: var(--p-color-button-flat-danger-bg);
   border-color: var(--p-color-button-flat-danger-border);
   color: var(--p-color-button-flat-danger-text);
 }
-.p-button--flat.p-button--danger:not(:disabled):hover {
+.p-button--ghost.p-button--destructive:not(:disabled):hover {
   background-color: var(--p-color-button-flat-danger-bg-hover);
   border-color: var(--p-color-button-flat-danger-border-hover);
   color: var(--p-color-button-flat-danger-text-hover);
 }
-.p-button--flat.p-button--danger:not(:disabled):active {
+.p-button--ghost.p-button--destructive:not(:disabled):active {
   background-color: var(--p-color-button-flat-danger-bg-active);
   border-color: var(--p-color-button-flat-danger-border-active);
   color: var(--p-color-button-flat-danger-text-active);

From d1f8b6bce84fb9a85cfc2322971c40b1c0f3b4ce Mon Sep 17 00:00:00 2001
From: Adam Azzam <33043305+AAAZZAM@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:57:24 -0400
Subject: [PATCH 2/4] Update Buttons.vue

---
 demo/sections/components/Buttons.vue | 32 ++++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/demo/sections/components/Buttons.vue b/demo/sections/components/Buttons.vue
index bfc1df997..575a875af 100644
--- a/demo/sections/components/Buttons.vue
+++ b/demo/sections/components/Buttons.vue
@@ -25,7 +25,7 @@
         <p-button icon-append="PlusIcon">
           Appended Icon
         </p-button>
-        <p-button dangerous>
+        <p-button variant="destructive">
           Dangerous
         </p-button>
         <p-button disabled>
@@ -33,13 +33,13 @@
         </p-button>
       </div>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button small>
+        <p-button size="sm">
           Button
         </p-button>
-        <p-button small icon="PlusIcon">
+        <p-button size="sm" icon="PlusIcon">
           With Icon
         </p-button>
-        <p-button small icon-append="PlusIcon">
+        <p-button size="sm" icon-append="PlusIcon">
           Appended Icon
         </p-button>
       </div>
@@ -47,19 +47,19 @@
 
     <template #primary-button>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button primary>
+        <p-button variant="default">
           Button
         </p-button>
-        <p-button primary icon="PlusIcon">
+        <p-button variant="default" icon="PlusIcon">
           With Icon
         </p-button>
-        <p-button disabled primary>
+        <p-button disabled variant="default">
           Disabled
         </p-button>
-        <p-button dangerous primary>
+        <p-button dangerous variant="default">
           Dangerous
         </p-button>
-        <p-button primary small>
+        <p-button variant="default" size="sm">
           Small
         </p-button>
       </div>
@@ -68,13 +68,13 @@
     <template #icon-only>
       <div class="flex gap-4 items-center flex-wrap mb-4">
         <p-button icon="PlusIcon" />
-        <p-button icon="RocketLaunchIcon" primary />
+        <p-button icon="RocketLaunchIcon" variant="default" />
         <p-button icon="TrashIcon" dangerous />
       </div>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button small icon="PlusIcon" />
-        <p-button small icon="RocketLaunchIcon" primary />
-        <p-button small icon="TrashIcon" dangerous />
+        <p-button size="sm" icon="PlusIcon" />
+        <p-button size="sm" icon="RocketLaunchIcon" variant="default" />
+        <p-button size="sm" icon="TrashIcon" dangerous />
       </div>
     </template>
 
@@ -82,7 +82,7 @@
       <div class="flex gap-4 items-center flex-wrap">
         <p-button icon="PlusIcon" flat />
         <p-button icon="TrashIcon" flat dangerous />
-        <p-button icon="PlusIcon" flat small />
+        <p-button icon="PlusIcon" flat size="sm" />
         <p-button icon="PlusIcon" flat disabled />
       </div>
     </template>
@@ -92,13 +92,13 @@
         <p-button :loading="buttonLoading">
           Button
         </p-button>
-        <p-button :loading="buttonLoading" primary>
+        <p-button :loading="buttonLoading" variant="default">
           Button
         </p-button>
         <p-button :loading="buttonLoading" dangerous>
           Button
         </p-button>
-        <p-button :loading="buttonLoading" primary dangerous>
+        <p-button :loading="buttonLoading" variant="default" dangerous>
           Button
         </p-button>
         <p-button :loading="buttonLoading" icon="PlusIcon" />

From c9268fbd68ace1fefdcf12643f6209f436416466 Mon Sep 17 00:00:00 2001
From: Adam Azzam <33043305+AAAZZAM@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:15:51 -0400
Subject: [PATCH 3/4] Update Buttons.vue

---
 demo/sections/components/Buttons.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/demo/sections/components/Buttons.vue b/demo/sections/components/Buttons.vue
index 575a875af..8d46d6d18 100644
--- a/demo/sections/components/Buttons.vue
+++ b/demo/sections/components/Buttons.vue
@@ -56,7 +56,7 @@
         <p-button disabled variant="default">
           Disabled
         </p-button>
-        <p-button dangerous variant="default">
+        <p-button variant="destructive">
           Dangerous
         </p-button>
         <p-button variant="default" size="sm">
@@ -69,21 +69,20 @@
       <div class="flex gap-4 items-center flex-wrap mb-4">
         <p-button icon="PlusIcon" />
         <p-button icon="RocketLaunchIcon" variant="default" />
-        <p-button icon="TrashIcon" dangerous />
+        <p-button icon="TrashIcon" variant="destructive" />
       </div>
       <div class="flex gap-4 items-center flex-wrap">
         <p-button size="sm" icon="PlusIcon" />
         <p-button size="sm" icon="RocketLaunchIcon" variant="default" />
-        <p-button size="sm" icon="TrashIcon" dangerous />
+        <p-button size="sm" icon="TrashIcon" variant="destructive" />
       </div>
     </template>
 
     <template #flat-icon-only>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button icon="PlusIcon" flat />
-        <p-button icon="TrashIcon" flat dangerous />
-        <p-button icon="PlusIcon" flat size="sm" />
-        <p-button icon="PlusIcon" flat disabled />
+        <p-button icon="PlusIcon" variant="ghost" />
+        <p-button icon="PlusIcon" variant="ghost" size="sm" />
+        <p-button icon="PlusIcon" variant="ghost" disabled />
       </div>
     </template>
 
@@ -95,15 +94,14 @@
         <p-button :loading="buttonLoading" variant="default">
           Button
         </p-button>
-        <p-button :loading="buttonLoading" dangerous>
+        <p-button :loading="buttonLoading" variant="destructive">
           Button
         </p-button>
-        <p-button :loading="buttonLoading" variant="default" dangerous>
+        <p-button :loading="buttonLoading" variant="default">
           Button
         </p-button>
         <p-button :loading="buttonLoading" icon="PlusIcon" />
-        <p-button :loading="buttonLoading" icon="PlusIcon" flat />
-        <p-button :loading="buttonLoading" icon="PlusIcon" flat dangerous />
+        <p-button :loading="buttonLoading" icon="PlusIcon" variant="ghost" />
       </div>
 
       <p-checkbox v-model="buttonLoading" label="show loading" />

From 3df2208e6d285f263f5d4c8f6597705d0331bd61 Mon Sep 17 00:00:00 2001
From: Adam Azzam <33043305+AAAZZAM@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:40:39 -0400
Subject: [PATCH 4/4] Update Buttons.vue

---
 demo/sections/components/Buttons.vue | 78 ++++++++++++++++------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/demo/sections/components/Buttons.vue b/demo/sections/components/Buttons.vue
index 8d46d6d18..ae4574af8 100644
--- a/demo/sections/components/Buttons.vue
+++ b/demo/sections/components/Buttons.vue
@@ -2,69 +2,82 @@
   <ComponentPage
     title="Button"
     :demos="[
-      { title: 'Default button', description: 'Your go-to button for interactions.' },
-      { title: 'Primary button', description: 'For a button that progresses the current journey. Only one per screen.' },
-      { title: 'Icon only', description: 'When an icon is provided with no text.' },
-      { title: 'Flat icon only', description: 'While any button can technically be made flat, this style is intended to be used with icon only buttons.' },
-      { title: 'Loading', description: 'A soothing loading indicator for when a button is working on it.' },
-      { title: 'Selected', description: 'Indicates that a button is the active selection in a group.' },
+      { title: 'Outline button' },
+      { title: 'Default button' },
+      { title: 'Destructive button' },
+      { title: 'Ghost button' },
+      { title: 'Icon only' },
+      { title: 'Loading' },
+      { title: 'Selected' },
     ]"
   >
-    <template #description>
-      Buttons. The 'DON'T PANIC' signs of the internet, assuring us there's always something we're allowed to click.
-    </template>
-
-    <template #default-button>
+    <template #outline-button>
       <div class="flex gap-4 items-center flex-wrap mb-4">
-        <p-button>
+        <p-button variant="outline">
           Button
         </p-button>
-        <p-button icon="PlusIcon">
+        <p-button variant="outline" icon="PlusIcon">
           With Icon
         </p-button>
-        <p-button icon-append="PlusIcon">
-          Appended Icon
-        </p-button>
-        <p-button variant="destructive">
-          Dangerous
-        </p-button>
-        <p-button disabled>
+        <p-button variant="outline" disabled>
           Disabled
         </p-button>
+        <p-button variant="outline" size="sm">
+          Small
+        </p-button>
       </div>
+    </template>
+
+    <template #default-button>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button size="sm">
+        <p-button variant="default">
           Button
         </p-button>
-        <p-button size="sm" icon="PlusIcon">
+        <p-button variant="default" icon="PlusIcon">
           With Icon
         </p-button>
-        <p-button size="sm" icon-append="PlusIcon">
-          Appended Icon
+        <p-button disabled variant="default">
+          Disabled
+        </p-button>
+        <p-button variant="default" size="sm">
+          Small
         </p-button>
       </div>
     </template>
 
-    <template #primary-button>
+    <template #ghost-button>
       <div class="flex gap-4 items-center flex-wrap">
-        <p-button variant="default">
+        <p-button variant="ghost">
           Button
         </p-button>
-        <p-button variant="default" icon="PlusIcon">
+        <p-button variant="ghost" icon="PlusIcon">
           With Icon
         </p-button>
-        <p-button disabled variant="default">
+        <p-button variant="ghost" disabled>
           Disabled
         </p-button>
+        <p-button variant="ghost" size="sm">
+          Small
+        </p-button>
+      </div>
+    </template>
+
+    <template #destructive-button>
+      <div class="flex gap-4 items-center flex-wrap">
         <p-button variant="destructive">
-          Dangerous
+          Button
         </p-button>
-        <p-button variant="default" size="sm">
+        <p-button variant="destructive" icon="PlusIcon">
+          With Icon
+        </p-button>
+        <p-button variant="destructive" disabled>
+          Disabled
+        </p-button>
+        <p-button variant="destructive" size="sm">
           Small
         </p-button>
       </div>
     </template>
-
     <template #icon-only>
       <div class="flex gap-4 items-center flex-wrap mb-4">
         <p-button icon="PlusIcon" />
@@ -97,9 +110,6 @@
         <p-button :loading="buttonLoading" variant="destructive">
           Button
         </p-button>
-        <p-button :loading="buttonLoading" variant="default">
-          Button
-        </p-button>
         <p-button :loading="buttonLoading" icon="PlusIcon" />
         <p-button :loading="buttonLoading" icon="PlusIcon" variant="ghost" />
       </div>