From 6f7eeab283a3f1728dd96006efb9ed3222f84f6e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 4 Apr 2023 12:58:46 +0100
Subject: [PATCH] feat: loading button

---
 apps/pink/src/pages/elements/button.mdx |  33 ++
 packages/ui/src/6-elements/_button.scss | 423 +++++++++++++-----------
 2 files changed, 272 insertions(+), 184 deletions(-)

diff --git a/apps/pink/src/pages/elements/button.mdx b/apps/pink/src/pages/elements/button.mdx
index 1367a91a2f..2f6c64ef4b 100644
--- a/apps/pink/src/pages/elements/button.mdx
+++ b/apps/pink/src/pages/elements/button.mdx
@@ -58,6 +58,32 @@ There are two sizes of buttons; large and medium. Each size has its own purpose,
   </button>
 </Preview>
 
+## Loading
+
+If you include the loader component inside a button, you can have a loading button.
+
+| class        |                                                    |
+| ------------ | -------------------------------------------------- |
+| `is-loading` | Use to represent a loading state within the button |
+
+<Preview center>
+  <button id="loading-btn" class="button ">
+    <span class="text">Click me!</span>
+    <div class="loader"></div>
+  </button>
+
+<script set:html={
+  `document.getElementById('loading-btn').addEventListener('click', () => {
+    document.getElementById('loading-btn').classList.add('is-loading')
+    setTimeout(() => {
+      document.getElementById('loading-btn').classList.remove('is-loading')
+    }, 2000)
+  })`
+} />
+
+
+</Preview>
+
 ## Buttons With Icons
 
 Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default.
@@ -135,3 +161,10 @@ Avoid using specific icons, uppercase in every word and long sentences.
 :::
 
 ::::
+
+
+
+
+
+
+
diff --git a/packages/ui/src/6-elements/_button.scss b/packages/ui/src/6-elements/_button.scss
index 7a75f19235..04946543a8 100644
--- a/packages/ui/src/6-elements/_button.scss
+++ b/packages/ui/src/6-elements/_button.scss
@@ -1,224 +1,279 @@
-@use '../abstract' as *;
+@use "../abstract" as *;
 
 .button {
-    $button-size: pxToRem(40);
-    --p-button-size: var(--button-size, #{$button-size});
-
-    $padding-horizontal: pxToRem(16);
-    --padding-horizontal: #{$padding-horizontal};
-
-    $font-size: pxToRem(14);
-    --p-font-size: #{$font-size};
-
-    /* Light Theme */
-    --p-text-color: var(--p-text-color-default);
-    --p-button-color: var(--p-button-color-default);
-    --p-border-color: var(--p-border-color-default);
-
-    --p-text-color-default: var(--color-neutral-5);
-    --p-button-color-default: var(--color-primary-200);
-    --p-border-color-default: var(--color-primary-300);
-
-    --p-text-color-hover: var(--p-text-color-default);
-    --p-button-color-hover: var(--color-primary-100);
-    --p-border-color-hover: var(--p-border-color-default);
-
-    --p-text-color-focus: var(--p-text-color-default);
-    --p-button-color-focus: var(--color-primary-200);
-    --p-border-color-focus: var(--color-primary-200);
-
-    --p-text-color-active: var(--p-text-color-default);
-    --p-button-color-active: var(--color-primary-300);
-    --p-border-color-active: var(--color-primary-300);
-
-    --p-text-color-disabled: var(--color-neutral-50);
-    --p-button-color-disabled: var(--color-neutral-10);
-    --p-border-color-disabled: var(--color-neutral-10);
-
-    /* End Light theme variables */
-
-    @include trim();
-    display:flex; gap:pxToRem(8); align-items:center; inline-size:fit-content; block-size:var(--p-button-size);
-    padding-inline:var(--padding-horizontal); cursor:pointer; font-size:var(--p-font-size); font-weight:600;
-    color:hsl(var(--p-text-color)); background-color:hsl(var(--p-button-color)); text-align:center;
-    border:solid pxToRem(1) hsl(var(--p-border-color)); border-radius:var(--border-radius-xsmall); flex-shrink:0;
-    -webkit-user-select:none; user-select:none;
-
-    [class*="icon"] {
-        line-height: 1;
-        &::before { vertical-align:middle; }
+  $button-size: pxToRem(40);
+  --p-button-size: var(--button-size, #{$button-size});
+
+  $padding-horizontal: pxToRem(16);
+  --padding-horizontal: #{$padding-horizontal};
+
+  $font-size: pxToRem(14);
+  --p-font-size: #{$font-size};
+
+  /* Light Theme */
+  --p-text-color: var(--p-text-color-default);
+  --p-button-color: var(--p-button-color-default);
+  --p-border-color: var(--p-border-color-default);
+
+  --p-text-color-default: var(--color-neutral-5);
+  --p-button-color-default: var(--color-primary-200);
+  --p-border-color-default: var(--color-primary-300);
+
+  --p-text-color-hover: var(--p-text-color-default);
+  --p-button-color-hover: var(--color-primary-100);
+  --p-border-color-hover: var(--p-border-color-default);
+
+  --p-text-color-focus: var(--p-text-color-default);
+  --p-button-color-focus: var(--color-primary-200);
+  --p-border-color-focus: var(--color-primary-200);
+
+  --p-text-color-active: var(--p-text-color-default);
+  --p-button-color-active: var(--color-primary-300);
+  --p-border-color-active: var(--color-primary-300);
+
+  --p-text-color-disabled: var(--color-neutral-50);
+  --p-button-color-disabled: var(--color-neutral-10);
+  --p-border-color-disabled: var(--color-neutral-10);
+
+  position: relative;
+
+  .loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    opacity: 0;
+    transition: 250ms;
+    --p-base-color: 0, 0%, 100%, 0.5 !important;
+  }
+
+  .text {
+    transition: 250ms 250ms;
+  }
+
+  &.is-loading {
+    .text {
+      translate: 0 -150%;
+      transition: 250ms;
     }
 
-    &.is-small {
-        $button-size: pxToRem(32);
-        --p-button-size: var(--button-size, #{$button-size});
+    .loader {
+      opacity: 1;
+      transition: 250ms 250ms;
     }
-    &.is-big {
-        $font-size: pxToRem(16);
-        --p-font-size: #{$font-size};
-
-        $button-size:pxToRem(48); --p-button-size:#{$button-size};
-        $padding-horizontal:pxToRem(20); --padding-horizontal: #{$padding-horizontal};
+  }
+
+  /* End Light theme variables */
+
+  @include trim();
+  display: flex;
+  gap: pxToRem(8);
+  align-items: center;
+  inline-size: fit-content;
+  block-size: var(--p-button-size);
+  padding-inline: var(--padding-horizontal);
+  cursor: pointer;
+  font-size: var(--p-font-size);
+  font-weight: 600;
+  color: hsl(var(--p-text-color));
+  background-color: hsl(var(--p-button-color));
+  text-align: center;
+  border: solid pxToRem(1) hsl(var(--p-border-color));
+  border-radius: var(--border-radius-xsmall);
+  flex-shrink: 0;
+  -webkit-user-select: none;
+  user-select: none;
+
+  [class*="icon"] {
+    line-height: 1;
+    &::before {
+      vertical-align: middle;
     }
-    &.is-only-icon { aspect-ratio:1 / 1; padding:0; justify-content:center; align-items:center; border-radius:var(--border-radius-circular); }
-    &.is-full-width { inline-size:100%; justify-content:center; }
-    &.is-full-width-mobile { @media #{$break1} {inline-size:100%; justify-content:center; } }
-    /* default - PRIMARY */
-    &:is(:hover) {
-        &:where(:not(#{$disabled})) {
-            --p-text-color: var(--p-text-color-hover);
-            --p-button-color: var(--p-button-color-hover);
-            --p-border-color: var(--p-border-color-hover);
-        }
+  }
+
+  &.is-small {
+    $button-size: pxToRem(32);
+    --p-button-size: var(--button-size, #{$button-size});
+  }
+  &.is-big {
+    $font-size: pxToRem(16);
+    --p-font-size: #{$font-size};
+
+    $button-size: pxToRem(48);
+    --p-button-size: #{$button-size};
+    $padding-horizontal: pxToRem(20);
+    --padding-horizontal: #{$padding-horizontal};
+  }
+  &.is-only-icon {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-circular);
+  }
+  &.is-full-width {
+    inline-size: 100%;
+    justify-content: center;
+  }
+  &.is-full-width-mobile {
+    @media #{$break1} {
+      inline-size: 100%;
+      justify-content: center;
     }
-    &:is(:focus-visible) {
-        &:where(:not(#{$disabled})) {
-            --p-text-color: var(--p-text-color-focus);
-            --p-button-color: var(--p-button-color-focus);
-            --p-border-color: var(--p-border-color-focus);
-        }
+  }
+  /* default - PRIMARY */
+  &:is(:hover) {
+    &:where(:not(#{$disabled})) {
+      --p-text-color: var(--p-text-color-hover);
+      --p-button-color: var(--p-button-color-hover);
+      --p-border-color: var(--p-border-color-hover);
     }
-    &:is(:active) {
-        &:where(:not(#{$disabled})) {
-            --p-text-color: var(--p-text-color-active);
-            --p-button-color: var(--p-button-color-active);
-            --p-border-color: var(--p-border-color-active);
-        }
+  }
+  &:is(:focus-visible) {
+    &:where(:not(#{$disabled})) {
+      --p-text-color: var(--p-text-color-focus);
+      --p-button-color: var(--p-button-color-focus);
+      --p-border-color: var(--p-border-color-focus);
     }
-    &:where(#{$disabled}) {
-        --p-text-color: var(--p-text-color-disabled);
-        --p-button-color: var(--p-button-color-disabled);
-        --p-border-color: var(--p-border-color-disabled);
-        cursor: unset;
-        /* opacity:0.3; filter:grayscale(1); - old styles */
+  }
+  &:is(:active) {
+    &:where(:not(#{$disabled})) {
+      --p-text-color: var(--p-text-color-active);
+      --p-button-color: var(--p-button-color-active);
+      --p-border-color: var(--p-border-color-active);
     }
-    /** DARK MODE **/
-    #{$theme-dark} & {
-        --p-button-color-default: var(--color-primary-200);
-        --p-border-color-default: var(--color-primary-200);
-
-        --p-button-color-hover: var(--color-primary-100);
-        --p-border-color-hover: var(--color-primary-100);
+  }
+  &:where(#{$disabled}) {
+    --p-text-color: var(--p-text-color-disabled);
+    --p-button-color: var(--p-button-color-disabled);
+    --p-border-color: var(--p-border-color-disabled);
+    cursor: unset;
+    /* opacity:0.3; filter:grayscale(1); - old styles */
+  }
+  /** DARK MODE **/
+  #{$theme-dark} & {
+    --p-button-color-default: var(--color-primary-200);
+    --p-border-color-default: var(--color-primary-200);
 
-        --p-border-color-focus: var(--color-primary-300);
+    --p-button-color-hover: var(--color-primary-100);
+    --p-border-color-hover: var(--color-primary-100);
 
-        --p-border-color-active: var(--color-primary-300);
+    --p-border-color-focus: var(--color-primary-300);
 
-        --p-text-color-disabled: var(--color-neutral-100);
-        --p-button-color-disabled: var(--color-neutral-150);
-        --p-border-color-disabled: var(--color-neutral-150);
-    }
-    /** end main button */
+    --p-border-color-active: var(--color-primary-300);
 
-    /* special color */
-    &.is-github {
-        --p-text-color-default: var(--color-neutral-0);
-        --p-button-color-default: var(--color-neutral-150);
-        --p-border-color-default: var(--color-neutral-150);
+    --p-text-color-disabled: var(--color-neutral-100);
+    --p-button-color-disabled: var(--color-neutral-150);
+    --p-border-color-disabled: var(--color-neutral-150);
+  }
+  /** end main button */
 
-        --p-text-color-hover: var(--p-text-color-default);
-        --p-button-color-hover: var(--p-button-color-default);
-        --p-border-color-hover: var(--p-border-color-default);
+  /* special color */
+  &.is-github {
+    --p-text-color-default: var(--color-neutral-0);
+    --p-button-color-default: var(--color-neutral-150);
+    --p-border-color-default: var(--color-neutral-150);
 
-        --p-text-color-focus: var(--p-text-color-default);
-        --p-button-color-focus: var(--p-button-color-default);
-        --p-border-color-focus: var(--p-border-color-default);
+    --p-text-color-hover: var(--p-text-color-default);
+    --p-button-color-hover: var(--p-button-color-default);
+    --p-border-color-hover: var(--p-border-color-default);
 
-        --p-text-color-active: var(--p-text-color-default);
-        --p-button-color-active: var(--p-button-color-default);
-        --p-border-color-active: var(--p-border-color-default);
-    }
+    --p-text-color-focus: var(--p-text-color-default);
+    --p-button-color-focus: var(--p-button-color-default);
+    --p-border-color-focus: var(--p-border-color-default);
 
-    &.is-secondary {
-        --p-text-color-default: var(--color-neutral-100);
-        --p-button-color-default: var(--color-neutral-5);
-        --p-border-color-default: var(--color-neutral-30);
+    --p-text-color-active: var(--p-text-color-default);
+    --p-button-color-active: var(--p-button-color-default);
+    --p-border-color-active: var(--p-border-color-default);
+  }
 
-        --p-text-color-hover: var(--p-text-color-default);
-        --p-button-color-hover: var(--color-neutral-10);
-        --p-border-color-hover: var(--p-border-color-default);
+  &.is-secondary {
+    --p-text-color-default: var(--color-neutral-100);
+    --p-button-color-default: var(--color-neutral-5);
+    --p-border-color-default: var(--color-neutral-30);
 
-        --p-text-color-focus: var(--p-text-color-default);
-        --p-button-color-focus: var(--p-button-color-default);
-        --p-border-color-focus: var(--transparent);
+    --p-text-color-hover: var(--p-text-color-default);
+    --p-button-color-hover: var(--color-neutral-10);
+    --p-border-color-hover: var(--p-border-color-default);
 
-        --p-text-color-active: var(--color-neutral-300);
-        --p-button-color-active: var(--color-neutral-30);
-        --p-border-color-active: var(--color-neutral-30);
+    --p-text-color-focus: var(--p-text-color-default);
+    --p-button-color-focus: var(--p-button-color-default);
+    --p-border-color-focus: var(--transparent);
 
-        --p-text-color-disabled: var(--color-neutral-50);
-        --p-button-color-disabled: var(--p-button-color-default);
-        --p-border-color-disabled: var(--color-neutral-30);
+    --p-text-color-active: var(--color-neutral-300);
+    --p-button-color-active: var(--color-neutral-30);
+    --p-border-color-active: var(--color-neutral-30);
 
+    --p-text-color-disabled: var(--color-neutral-50);
+    --p-button-color-disabled: var(--p-button-color-default);
+    --p-border-color-disabled: var(--color-neutral-30);
 
-        /** DARK MODE **/
-        #{$theme-dark} & {
-            --p-text-color-default: var(--color-neutral-5);
-            --p-button-color-default: var(--color-neutral-300);
-            --p-border-color-default: var(--color-neutral-150);
+    /** DARK MODE **/
+    #{$theme-dark} & {
+      --p-text-color-default: var(--color-neutral-5);
+      --p-button-color-default: var(--color-neutral-300);
+      --p-border-color-default: var(--color-neutral-150);
 
-            --p-text-color-hover: var(--p-text-color-default);
-            --p-button-color-hover: var(--transparent);
-            --p-border-color-hover: var(--color-neutral-120);
+      --p-text-color-hover: var(--p-text-color-default);
+      --p-button-color-hover: var(--transparent);
+      --p-border-color-hover: var(--color-neutral-120);
 
-            --p-text-color-focus: var(--p-text-color-default);
-            --p-button-color-focus: var(--p-button-color-default);
-            --p-border-color-focus: var(--transparent);
+      --p-text-color-focus: var(--p-text-color-default);
+      --p-button-color-focus: var(--p-button-color-default);
+      --p-border-color-focus: var(--transparent);
 
-            --p-text-color-active: var(--p-text-color-default);
-            --p-button-color-active: var(--p-button-color-default);
-            --p-border-color-active: var(--color-neutral-100);
+      --p-text-color-active: var(--p-text-color-default);
+      --p-button-color-active: var(--p-button-color-default);
+      --p-border-color-active: var(--color-neutral-100);
 
-            --p-text-color-disabled: var(--color-neutral-100);
-            --p-button-color-disabled: var(--p-button-color-default);
-            --p-border-color-disabled: var(--color-neutral-150);
-        }
+      --p-text-color-disabled: var(--color-neutral-100);
+      --p-button-color-disabled: var(--p-button-color-default);
+      --p-border-color-disabled: var(--color-neutral-150);
     }
+  }
 
-    &.is-text {
-        --p-text-color-default: var(--color-neutral-100);
-        --p-button-color-default: var(--transparent);
-        --p-border-color-default: var(--transparent);
-
-        --p-text-color-hover: var(--color-neutral-120);
-        --p-button-color-hover: var(--p-button-color-default);
-        --p-border-color-hover: var(--p-border-color-default);
+  &.is-text {
+    --p-text-color-default: var(--color-neutral-100);
+    --p-button-color-default: var(--transparent);
+    --p-border-color-default: var(--transparent);
 
-        --p-text-color-focus: var(--p-text-color-default);
-        --p-button-color-focus: var(--color-neutral-5);
-        --p-border-color-focus: var(--p-border-color-default);
-
-        --p-text-color-active: var(--color-neutral-300);
-        --p-button-color-active: var(--p-button-color-default);
-        --p-border-color-active: var(--p-border-color-default);
+    --p-text-color-hover: var(--color-neutral-120);
+    --p-button-color-hover: var(--p-button-color-default);
+    --p-border-color-hover: var(--p-border-color-default);
 
+    --p-text-color-focus: var(--p-text-color-default);
+    --p-button-color-focus: var(--color-neutral-5);
+    --p-border-color-focus: var(--p-border-color-default);
 
-        --p-text-color-disabled: var(--color-neutral-50);
-        --p-button-color-disabled: var(--p-button-color-default);
-        --p-border-color-disabled: var(--p-border-color-default);
+    --p-text-color-active: var(--color-neutral-300);
+    --p-button-color-active: var(--p-button-color-default);
+    --p-border-color-active: var(--p-border-color-default);
 
-        /** DARK MODE **/
-        #{$theme-dark} & {
+    --p-text-color-disabled: var(--color-neutral-50);
+    --p-button-color-disabled: var(--p-button-color-default);
+    --p-border-color-disabled: var(--p-border-color-default);
 
-            --p-text-color-default: var(--color-neutral-5);
-            --p-button-color-default: var(--transparent);
-            --p-border-color-default: var(--transparent);
+    /** DARK MODE **/
+    #{$theme-dark} & {
+      --p-text-color-default: var(--color-neutral-5);
+      --p-button-color-default: var(--transparent);
+      --p-border-color-default: var(--transparent);
 
-            --p-text-color-hover: var(--color-neutral-50);
-            --p-button-color-hover: var(--p-button-color-default);
-            --p-border-color-hover: var(--p-border-color-default);
+      --p-text-color-hover: var(--color-neutral-50);
+      --p-button-color-hover: var(--p-button-color-default);
+      --p-border-color-hover: var(--p-border-color-default);
 
-            --p-text-color-focus: var(--color-neutral-5);
-            --p-button-color-focus: var(--p-button-color-default);
-            --p-border-color-focus: var(--p-border-color-default);
+      --p-text-color-focus: var(--color-neutral-5);
+      --p-button-color-focus: var(--p-button-color-default);
+      --p-border-color-focus: var(--p-border-color-default);
 
-            --p-text-color-active: var(--p-text-color-default);
-            --p-button-color-active: var(--p-button-color-default);
-            --p-border-color-active: var(--p-border-color-default);
+      --p-text-color-active: var(--p-text-color-default);
+      --p-button-color-active: var(--p-button-color-default);
+      --p-border-color-active: var(--p-border-color-default);
 
-            --p-text-color-disabled: var(--color-neutral-100);
-            --p-button-color-disabled: var(--p-button-color-default);
-            --p-border-color-disabled: var(--p-border-color-default);
-        }
+      --p-text-color-disabled: var(--color-neutral-100);
+      --p-button-color-disabled: var(--p-button-color-default);
+      --p-border-color-disabled: var(--p-border-color-default);
     }
-}
\ No newline at end of file
+  }
+}