From 4aa2d94087a7cae2e018ffc0ecec152a8d3812a5 Mon Sep 17 00:00:00 2001
From: Scott de Jonge <sdejonge@gitlab.com>
Date: Fri, 7 Mar 2025 10:22:52 +1100
Subject: [PATCH] Use text.color.link for hover color in issuable sidebar
controls
Update GlButton class overrides
Update `.right-sidebar a:not(.btn)` hover CSS styles
Changelog: changed
---
.../sidebar/components/assignees/assignees.vue | 9 +++++++--
.../components/assignees/issuable_assignees.vue | 5 ++---
.../components/assignees/sidebar_invite_members.vue | 2 +-
.../components/reviewers/reviewer_avatar_link.vue | 2 +-
.../sidebar/components/reviewers/reviewers.vue | 5 ++---
.../work_items/components/work_item_assignees.vue | 11 +++++++----
app/assets/stylesheets/framework/sidebar.scss | 2 +-
.../components/assignees/issuable_assignees_spec.js | 2 +-
8 files changed, 22 insertions(+), 16 deletions(-)
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 5e1eecc46397..92b72f893206 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -56,8 +56,13 @@ export default {
{{ __('None') }}
<template v-if="editable">
-
- <gl-button variant="link" data-testid="assign-yourself" @click="assignSelf">
- <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+ <gl-button
+ class="!gl-text-inherit hover:!gl-text-link"
+ variant="link"
+ data-testid="assign-yourself"
+ @click="assignSelf"
+ >
+ {{ __('assign yourself') }}
</gl-button>
</template>
</span>
diff --git a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
index 0b97c3fc99c1..cdfe3ddc10a8 100644
--- a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
@@ -52,12 +52,11 @@ export default {
<span class="gl-ml-2">-</span>
<gl-button
data-testid="assign-yourself"
- category="tertiary"
+ class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
variant="link"
- class="gl-ml-2"
@click="$emit('assign-self')"
>
- <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+ {{ __('assign yourself') }}
</gl-button>
</template>
</div>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
index 361392f1de5c..40263243e8a9 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
@@ -26,6 +26,6 @@ export default {
trigger-element="anchor"
:display-text="$options.displayText"
:trigger-source="triggerSource"
- classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-blue-800"
+ classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-link"
/>
</template>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index 53a9a063dc11..c451da83ae0e 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
@@ -53,7 +53,7 @@ export default {
:data-username="user.username"
:data-cannot-merge="cannotMerge"
data-placement="left"
- class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-blue-800"
+ class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-link"
>
<!-- use gl-flex so that slot can be appropriately styled -->
<span class="gl-flex">
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
index 974de02e3e8c..faf7ab3f84d0 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
@@ -70,13 +70,12 @@ export default {
<template v-if="editable">
-
<gl-button
- category="tertiary"
+ class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
variant="link"
- class="gl-ml-2"
data-testid="assign-yourself"
@click="assignSelf"
>
- <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+ {{ __('assign yourself') }}
</gl-button>
</template>
</span>
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index 3f7683e03055..b392cb003d32 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -362,11 +362,14 @@ export default {
<span>{{ __('None') }}</span>
<template v-if="currentUser && canUpdate">
<span>-</span>
- <gl-button variant="link" data-testid="assign-self" @click.stop="assignToCurrentUser"
- ><span class="gl-text-subtle hover:gl-text-blue-800">{{
- __('assign yourself')
- }}</span></gl-button
+ <gl-button
+ class="!gl-text-inherit hover:!gl-text-link"
+ variant="link"
+ data-testid="assign-self"
+ @click.stop="assignToCurrentUser"
>
+ {{ __('assign yourself') }}
+ </gl-button>
</template>
</div>
</template>
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 3901f0771382..720bba87ab21 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -340,7 +340,7 @@
color: inherit;
&:hover {
- color: $blue-800;
+ @apply gl-text-link;
}
}
diff --git a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
index 82145b82e21f..35d783b70517 100644
--- a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
+++ b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
@@ -31,7 +31,7 @@ describe('IssuableAssignees', () => {
'renders "$message" when signedIn is $signedIn and editable is $editable',
({ signedIn, editable, message }) => {
createComponent({ signedIn, editable });
- expect(findEmptyAssignee().text()).toBe(message);
+ expect(findEmptyAssignee().text().replace(/\s\s+/g, ' ')).toBe(message);
},
);
});
--
GitLab