From 8d3b298c83846af82984e67f710e7d494555a386 Mon Sep 17 00:00:00 2001 From: Rohan Chakraborty Date: Mon, 1 Jun 2026 12:27:51 +0530 Subject: [PATCH] fix: standardize disabled cursor --- packages/raystack/components/button/button.module.css | 4 ++-- packages/raystack/components/checkbox/checkbox.module.css | 3 +-- .../raystack/components/icon-button/icon-button.module.css | 2 +- packages/raystack/components/input/input.module.css | 2 ++ .../raystack/components/number-field/number-field.module.css | 2 ++ packages/raystack/components/radio/radio.module.css | 1 + packages/raystack/components/search/search.module.css | 1 + packages/raystack/components/switch/switch.module.css | 1 + packages/raystack/components/text-area/text-area.module.css | 1 + packages/raystack/components/toggle/toggle.module.css | 2 ++ 10 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css index 784c99610..710804e2a 100644 --- a/packages/raystack/components/button/button.module.css +++ b/packages/raystack/components/button/button.module.css @@ -32,7 +32,7 @@ .button-disabled { opacity: 0.5; pointer-events: initial; - cursor: default; + cursor: not-allowed; } .button:disabled:hover, @@ -96,7 +96,7 @@ .button-outline.button-disabled { opacity: 0.5; background-color: transparent; - cursor: default; + cursor: not-allowed; } .button-outline:disabled:hover, diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css index a12fe9aa8..1ccc55a4f 100644 --- a/packages/raystack/components/checkbox/checkbox.module.css +++ b/packages/raystack/components/checkbox/checkbox.module.css @@ -37,7 +37,7 @@ min-height: var(--rs-space-4); } -.checkbox:hover { +.checkbox:not([data-disabled]):hover { background: var(--rs-color-background-base-primary-hover); border-color: var(--rs-color-border-base-focus); } @@ -84,7 +84,6 @@ .checkbox[data-disabled] { opacity: 0.5; cursor: not-allowed; - pointer-events: none; } /* A4: Preserve checked state when disabled */ diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css index 3ae834aa9..2f45dcdf6 100644 --- a/packages/raystack/components/icon-button/icon-button.module.css +++ b/packages/raystack/components/icon-button/icon-button.module.css @@ -20,7 +20,7 @@ .iconButton:disabled { opacity: 0.5; - cursor: default; + cursor: not-allowed; } .iconButton-size-1 { diff --git a/packages/raystack/components/input/input.module.css b/packages/raystack/components/input/input.module.css index 1d50278a8..40b83a42f 100644 --- a/packages/raystack/components/input/input.module.css +++ b/packages/raystack/components/input/input.module.css @@ -36,6 +36,7 @@ .input-wrapper[data-disabled] { opacity: 0.5; + cursor: not-allowed; } .input-wrapper[data-disabled]:hover { @@ -91,6 +92,7 @@ .input-field[data-disabled] { color: var(--rs-color-foreground-base-tertiary); + cursor: not-allowed; } .has-leading-icon { diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css index a877ce39e..a612349be 100644 --- a/packages/raystack/components/number-field/number-field.module.css +++ b/packages/raystack/components/number-field/number-field.module.css @@ -42,6 +42,7 @@ .increment[data-disabled] { pointer-events: none; opacity: 0.5; + cursor: not-allowed; } .input { @@ -65,6 +66,7 @@ .input[data-disabled] { pointer-events: none; opacity: 0.5; + cursor: not-allowed; } .scrub-area { diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css index eda594e25..c509526d3 100644 --- a/packages/raystack/components/radio/radio.module.css +++ b/packages/raystack/components/radio/radio.module.css @@ -58,6 +58,7 @@ .radioitem[data-disabled]:hover { background: var(--rs-color-background-neutral-secondary); border-color: var(--rs-color-border-base-secondary); + cursor: not-allowed; } .radioitem[data-disabled][data-checked], diff --git a/packages/raystack/components/search/search.module.css b/packages/raystack/components/search/search.module.css index 8925c770b..42a453902 100644 --- a/packages/raystack/components/search/search.module.css +++ b/packages/raystack/components/search/search.module.css @@ -27,6 +27,7 @@ .clearButton:disabled { opacity: 0.5; + cursor: not-allowed; } .clearButton svg { diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css index d6ef022ef..edde474bf 100644 --- a/packages/raystack/components/switch/switch.module.css +++ b/packages/raystack/components/switch/switch.module.css @@ -35,6 +35,7 @@ .switch[data-disabled] { background: var(--rs-color-background-neutral-primary); + cursor: not-allowed; } .switch[data-disabled][data-checked] { diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css index 42f4b034b..20c9523d7 100644 --- a/packages/raystack/components/text-area/text-area.module.css +++ b/packages/raystack/components/text-area/text-area.module.css @@ -42,6 +42,7 @@ .textarea[data-disabled], .disabled { opacity: 0.5; + cursor: not-allowed; } .textarea:read-only { diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css index e948e61a9..7cc8a4d12 100644 --- a/packages/raystack/components/toggle/toggle.module.css +++ b/packages/raystack/components/toggle/toggle.module.css @@ -36,6 +36,7 @@ .toggle[data-disabled] { opacity: 0.5; pointer-events: none; + cursor: not-allowed; } .size-1 { @@ -95,4 +96,5 @@ .group[data-disabled] { opacity: 0.5; pointer-events: none; + cursor: not-allowed; }