Merge pull request #397 from conversionxl/anoblet/feat/action

conversionxl · Feb 23, 2024 · 9debcbc · 9debcbc
2 parents 374c4f3 + 28cc73e
commit 9debcbc
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -320,3 +320,43 @@ ul.courses-list {
   }
 
 }
+
+/**
+  * Set button cursor to pointer, and add pending state.
+  *
+  * @see https://app.clickup.com/t/86azbhexr
+  * @since 2024.02.20
+  */
+vaadin-button {
+  cursor: pointer;
+
+  &[pending] {
+    &::before{
+      background-color: var(--lumo-base-color);
+      opacity: initial;
+    }
+
+    &[theme~="primary"] {
+      color: var(--lumo-primary-color);
+      background-color: var(--lumo-primary-color);
+
+      &::before {
+        mask: var(--cxl-loading-spinner-url);
+        mask-size: 24px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
+    }
+
+    &[theme~="secondary"] {
+      &::before {
+        background-color: var(--lumo-base-color);
+        background-image: var(--cxl-loading-spinner-url);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 24px;
+        border: 1px solid var(--lumo-primary-color);
+      }
+    }
+  }
+}
diff --git a/packages/cxl-lumo-styles/scss/loading.css b/packages/cxl-lumo-styles/scss/loading.css
@@ -2,7 +2,7 @@
  * App should inline this in `<style>` tag, early in <head>.
  */
 html {
-  --cxl-loading-spinner-url: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255) none repeat scroll 0%25 0%25; display: block; shape-rendering: auto;" width="48px" height="48px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"%3E%3Ccircle cx="50" cy="50" fill="none" stroke="%23d61f2c" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"%3E%3CanimateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E');
+  --cxl-loading-spinner-url: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; shape-rendering: auto;" width="48px" height="48px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"%3E%3Ccircle cx="50" cy="50" fill="none" stroke="%23d61f2c" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"%3E%3CanimateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E');
   --cxl-transition-duration: 0.5s;
 }
 

diff --git a/packages/storybook/cxl-lumo-styles/elements.stories.js b/packages/storybook/cxl-lumo-styles/elements.stories.js
@@ -3,6 +3,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/button';
 import '@vaadin/notification';
+import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css';
 
 export default {
   decorators: [withKnobs],
@@ -17,6 +18,9 @@ export default {
  * @constructor
  */
 export const VaadinButton = ({ Label }) => html`
+  <style>
+    ${cxlLoadingStyles}
+  </style>
   <h6>Basic</h6>
   <vaadin-button>${Label}</vaadin-button>
   <h6>Disabled</h6>
@@ -25,8 +29,12 @@ export const VaadinButton = ({ Label }) => html`
   <vaadin-button theme="primary">${Label}</vaadin-button>
   <h6>Primary Contrast</h6>
   <vaadin-button theme="primary contrast">${Label}</vaadin-button>
+  <h6>Primary Pending</h6>
+  <vaadin-button pending theme="primary">${Label}</vaadin-button>
   <h6>Secondary</h6>
   <vaadin-button>${Label}</vaadin-button>
+  <h6>Secondary Pending</h6>
+  <vaadin-button pending theme="secondary">${Label}</vaadin-button>
   <h6>Tertiary</h6>
   <vaadin-button theme="tertiary">${Label}</vaadin-button>
   <h6>Tertiary inline</h6>