From 30996140a3a44a12f32ae532d1296b0f6c386636 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 27 Feb 2025 17:54:40 +0530 Subject: [PATCH] fix: Show "not-allowed" cursor for disabled buttons (#10986) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request Template ## Description Fixed an issue where hover styles were still applied to disabled buttons. Previously, `disabled:pointer-events-none` was used to prevent interactions, ensuring hover styles wouldn’t apply. However, this also removed showing the "not-allowed" cursor. This has been replaced with `hover:enabled` to ensure hover effects only apply when the button is enabled while preserving proper cursor behavior. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### **Screen recording** **Before** https://github.com/user-attachments/assets/a5d33869-4d9d-499b-94c8-6371cbb44ecc **After** https://github.com/user-attachments/assets/a03d93dc-2374-4c76-8bed-8f1fe79593d2 **Case where `disabled:pointer-events-none` and `hover:enabled` are not added (for context only).** https://github.com/user-attachments/assets/407320d8-f889-49d2-a78c-a5d24ed745a0 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --- .../components-next/button/Button.vue | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue index fadff67b2..81a74eec4 100644 --- a/app/javascript/dashboard/components-next/button/Button.vue +++ b/app/javascript/dashboard/components-next/button/Button.vue @@ -99,45 +99,50 @@ const computedJustify = computed(() => { const STYLE_CONFIG = { colors: { blue: { - solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent', + solid: + 'bg-n-brand text-white hover:enabled:brightness-110 outline-transparent', faded: - 'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent', + 'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 outline-transparent', outline: 'text-n-blue-text outline-n-blue-border', - ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent', - link: 'text-n-blue-text hover:underline outline-transparent', + ghost: 'text-n-blue-text hover:enabled:bg-n-alpha-2 outline-transparent', + link: 'text-n-blue-text hover:enabled:underline outline-transparent', }, ruby: { - solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent', + solid: + 'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 outline-transparent', faded: - 'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent', - outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8', - ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent', - link: 'text-n-ruby-9 hover:underline outline-transparent', + 'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 outline-transparent', + outline: 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 outline-n-ruby-8', + ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 outline-transparent', + link: 'text-n-ruby-9 hover:enabled:underline outline-transparent', }, amber: { - solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent', + solid: + 'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 outline-transparent', faded: - 'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent', - outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9', - link: 'text-n-amber-9 hover:underline outline-transparent', - ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent', + 'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 outline-transparent', + outline: + 'text-n-amber-11 hover:enabled:bg-n-amber-9/10 outline-n-amber-9', + link: 'text-n-amber-9 hover:enabled:underline outline-transparent', + ghost: 'text-n-amber-9 hover:enabled:bg-n-alpha-2 outline-transparent', }, slate: { solid: - 'bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12 outline-n-container', + 'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 hover:enabled:bg-n-alpha-2 text-n-slate-12 outline-n-container', faded: - 'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent', - outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10', - link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent', - ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent', + 'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 outline-transparent', + outline: 'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10', + link: 'text-n-slate-11 hover:enabled:text-n-slate-12 hover:enabled:underline outline-transparent', + ghost: 'text-n-slate-12 hover:enabled:bg-n-alpha-2 outline-transparent', }, teal: { - solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent', + solid: + 'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 outline-transparent', faded: - 'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent', - outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9', - link: 'text-n-teal-9 hover:underline outline-transparent', - ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent', + 'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 outline-transparent', + outline: 'text-n-teal-11 hover:enabled:bg-n-teal-9/10 outline-n-teal-9', + link: 'text-n-teal-9 hover:enabled:underline outline-transparent', + ghost: 'text-n-teal-9 hover:enabled:bg-n-alpha-2 outline-transparent', }, }, sizes: { @@ -171,7 +176,7 @@ const STYLE_CONFIG = { center: 'justify-center', end: 'justify-end', }, - base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50', + base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:opacity-50', }; const variantClasses = computed(() => {