imp: Improve feedback of disabled buttons

When Turbo handles a form submit, it sets the disabled attribute to the submit button. This allows to give feedback to users by customizing the style of disabled buttons.
flusio · Oct 31, 2024 · 8991c21 · 8991c21
1 parent c7083af
commit 8991c21
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/src/assets/stylesheets/components/buttons.css b/src/assets/stylesheets/components/buttons.css
@@ -33,16 +33,30 @@ button:active,
     border-color: var(--color-border-active);
 }
 
+button[disabled],
+.button[disabled] {
+    color: var(--color-text-disabled);
+
+    background-color: var(--color-grey-1);
+    border-color: var(--color-border-disabled);
+}
+
 .button--primary {
     background-color: var(--color-turquoise-3);
-    border-color: var(--color-text);
+    border-color: currentcolor;
 }
 
 .button--primary:hover,
 .button--primary:focus {
     background-color: var(--color-turquoise-1);
 }
 
+.button--primary[disabled] {
+    color: var(--color-text-disabled);
+
+    background-color: var(--color-turquoise-1);
+}
+
 .button--ghost {
     background-color: transparent;
     border-color: transparent;
@@ -58,6 +72,13 @@ button:active,
     border-color: var(--color-border-active);
 }
 
+.button--ghost[disabled] {
+    color: var(--color-text-disabled);
+
+    background-color: transparent;
+    border-color: var(--color-border-disabled);
+}
+
 .button--danger {
     background-color: var(--color-red-1);
     border-color: var(--color-red-5);
@@ -66,6 +87,10 @@ button:active,
 .button--danger:hover,
 .button--danger:focus {
     background-color: var(--color-red-2);
+}
+
+.button--danger[disabled] {
+    background-color: var(--color-red-1);
     border-color: var(--color-red-2);
 }
 

diff --git a/src/assets/stylesheets/custom/links.css b/src/assets/stylesheets/custom/links.css
@@ -257,3 +257,9 @@
 .link__actions-button:hover {
     border-color: var(--color-purple-2);
 }
+
+.link__actions-button[disabled] {
+    color: var(--color-text-disabled);
+
+    border-color: transparent;
+}
diff --git a/src/assets/stylesheets/utils/variables.css b/src/assets/stylesheets/utils/variables.css
@@ -87,6 +87,7 @@
     --color-text-error: var(--color-red-6);
     --color-text-info: var(--color-purple-6);
     --color-text-secondary: var(--color-grey-7);
+    --color-text-disabled: var(--color-grey-6);
     --color-text-success: var(--color-turquoise-7);
     --color-text-warning: var(--color-orange-9);