From dad2f83a5e85c72bd62cb0affc0436eae0c502d4 Mon Sep 17 00:00:00 2001 From: Ahmed Awan Date: Wed, 30 Apr 2025 19:25:14 -0500 Subject: [PATCH 1/3] Prevent routing when `GButton` is disabled --- client/src/components/BaseComponents/GButton.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/BaseComponents/GButton.vue b/client/src/components/BaseComponents/GButton.vue index b77bc1a22d93..818a02dde22b 100644 --- a/client/src/components/BaseComponents/GButton.vue +++ b/client/src/components/BaseComponents/GButton.vue @@ -121,8 +121,8 @@ useAccessibleHover( class="g-button" :data-title="currentTooltip" :class="{ ...variantClasses, ...styleClasses }" - :to="props.to" - :href="props.to ?? props.href" + :to="!props.disabled ? props.to : ''" + :href="!props.disabled ? props.to ?? props.href : ''" :title="currentTitle" :aria-describedby="describedBy" :aria-disabled="props.disabled" From a84f12b4b1afb36cecdd66d9366649ef8f36a53f Mon Sep 17 00:00:00 2001 From: Ahmed Awan Date: Wed, 30 Apr 2025 19:40:05 -0500 Subject: [PATCH 2/3] make transparent disabled `GButton`s gray Otherwise, for `GButton`s with the `transparent` prop, the disabled state is not visible. --- client/src/components/BaseComponents/GButton.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/BaseComponents/GButton.vue b/client/src/components/BaseComponents/GButton.vue index 818a02dde22b..f01b66fd808f 100644 --- a/client/src/components/BaseComponents/GButton.vue +++ b/client/src/components/BaseComponents/GButton.vue @@ -45,7 +45,7 @@ function onClick(event: PointerEvent) { const variantClasses = computed(() => { const classObject = {} as ComponentVariantClassList; - classObject[prefix(props.color ?? "grey")] = true; + classObject[prefix(!props.color || (props.transparent && props.disabled) ? "grey" : props.color)] = true; classObject[prefix(props.size ?? "medium")] = true; return classObject; }); From 1a8d4c9cfb4f4771da3d6297bf0ca07735590a10 Mon Sep 17 00:00:00 2001 From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com> Date: Mon, 5 May 2025 16:28:11 +0200 Subject: [PATCH 3/3] improve disabled state in css to cover more variants --- .../src/components/BaseComponents/GButton.vue | 44 ++++++------------- 1 file changed, 14 insertions(+), 30 deletions(-) diff --git a/client/src/components/BaseComponents/GButton.vue b/client/src/components/BaseComponents/GButton.vue index f01b66fd808f..2fb1d6770818 100644 --- a/client/src/components/BaseComponents/GButton.vue +++ b/client/src/components/BaseComponents/GButton.vue @@ -45,7 +45,7 @@ function onClick(event: PointerEvent) { const variantClasses = computed(() => { const classObject = {} as ComponentVariantClassList; - classObject[prefix(!props.color || (props.transparent && props.disabled) ? "grey" : props.color)] = true; + classObject[prefix(props.color ?? "grey")] = true; classObject[prefix(props.size ?? "medium")] = true; return classObject; }); @@ -259,44 +259,28 @@ useAccessibleHover( } &.g-disabled { - background-color: var(--color-grey-100); - border-color: var(--color-grey-200); - color: var(--color-grey-500); - - &:hover, - &:focus-visible { - background-color: var(--color-grey-100); - border-color: var(--color-grey-200); - - &:active { - background-color: var(--color-grey-100); - border-color: var(--color-grey-200); - color: var(--color-grey-500); - } - } + background-color: var(--color-grey-100) !important; + border-color: var(--color-grey-200) !important; + color: var(--color-grey-500) !important; &:focus-visible { - border-color: var(--color-grey-500); + border-color: var(--color-grey-500) !important; } &.g-outline { - background-color: var(--background-color); - border-color: var(--color-grey-400); - color: var(--color-grey-400); + background-color: var(--background-color) !important; + border-color: var(--color-grey-400) !important; + color: var(--color-grey-400) !important; - &:hover, - &:focus, &:focus-visible { - background-color: var(--background-color); - border-color: var(--color-grey-400); - color: var(--color-grey-400); + border-color: var(--color-grey-800) !important; + background-color: var(--background-color) !important; + color: var(--color-grey-500) !important; } + } - &:focus-visible { - border-color: var(--color-grey-800); - background-color: var(--background-color); - color: var(--color-grey-500); - } + &.g-transparent { + background-color: rgb(100% 100% 100% / 0) !important; } }