Add underline for all anchors on hover and focus

Resources

FE @alfredo1

From the discussion in #21287 (moved) it was decided to add an underline to every text link on hover and focus to make them more discoverable and accessible.

This is a list of all the places we've found the underline missing:

• Project name in "Contributed projects" and "Personal projects" under user profile. Missing underline on hover and focus.

• File name in the file tree. Missing underline on hover and focus.

• Quick links under Project page. Missing underline on hover and focus.

• Timestamps on comments and system notes under Issue and Merge Requests. Missing underline on hover.

• Anchors in Issue and Merge Request sidebar. Missing underline on hover.

• Links in the build header also need underlines:

• sha on commit page:

• tags on a commit:

• Names in comments:

• Website on profile

• Labels

If anyone finds more examples of this, please add them to this issue.

Mentioned in issue #24062 (moved)

• What about dropdown anchors - should these have an underline?

• Also what about labels?

• Links in the build header also need underlines:

• sha on commit page:

• tags on a commit:

• Names in comments:

• Website on profile

@tauriedavis I think that changing background-color on dropdown links and labels is enough. Good inventory by the way!

I agree with only changing the color for dropdown links. I was thinking that maybe it would be good to add an underline to labels in order to differentiate them from buttons but maybe there is a different way of doing this. Thoughts @pedroms?

Added ~164274 label

Removed ~164274 label

Mentioned in issue #24130 (moved)

@tauriedavis I think labels should be treated as buttons. Labels are essentially navigation actions, for which we also use buttons. However, I do think they can have something different from buttons so that they are easier to spot and communicate the “label” notion. For example, having a “pill” look:

@cperessini I think the discussion around underlining links on hover and focus is very important. But I would add that we should also discuss underlining (or adding another visual indicator) to links that are not blue, hence they don't appear to be links. Take a look at this comment I made and tell me what you think.

@pedroms I think labels should not behave as buttons, because even though labels are mostly navigation actions, buttons are usually about adding, modifying or removing items. Buttons that take you to another page (like the New issue button) have the ultimate goal of creating something.

I also don't think that the style for hover and active from buttons is good for labels:

This is what it would look like with the underline, and I think it's a good addition:

I think the "pill" labels look good, but we have to consider that we use rectangles rounded corners for everything. If we made the change, maybe we could apply that style to other elements in GitLab to give it more consistency.

I'll reply to the underlining issue in #24062 (moved)

@cperessini I don't have a strong opinion on this, so let's go forward with your suggestion

If we made the change, maybe we could apply that style to other elements in GitLab to give it more consistency.

Yes, the “pill” labels are a nice visual in order to further separate them from buttons. What other elements were you thinking about? Feel free to break this into another issue if this is deviating from the discussion at hand (or tell me to and I'll create one).

Added ~131895 and removed ~19492 labels

Milestone changed to %8.15

I agree with you @cperessini. For this issue, lets add the underline to everything (including lables) but not for dropdown anchors.

We should look at the pill idea for labels in a separate issue

mentioned in issue #25518 (closed)

mentioned in issue #25419 (closed)

changed milestone to %8.16

added ~874211 label

added Deliverable and removed ~131895 labels

removed ~874211 label

mentioned in issue #26210 (closed)

mentioned in merge request !8394

removed milestone

added to schedule and removed Deliverable labels

added ~1434245 label

added ~974571 label

added ~480950 and removed to schedule labels

changed milestone to %9.3

changed the description

changed milestone to %9.4

added Deliverable label

I'm actually really excited to work on this. This is something always wanted to fix <3

assigned to @alfredo1

Assigning this to @lbennett since it looks like he's almost ready with a fix for this in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8394

assigned to @lbennett

unassigned @alfredo1

changed milestone to %9.5

removed assignee

removed Deliverable label

removed milestone

mentioned in issue gitlab#6850

moved to gitlab#6867

Hey!

GitLab is moving all development for both GitLab Community Edition and Enterprise Edition into a single codebase. The current gitlab-ce repository will become a read-only mirror, without any proprietary code. All development is moved to the current gitlab-ee repository, which we will rename to just gitlab in the coming weeks. As part of this migration, issues will be moved to the current gitlab-ee project.

If you have any questions about all of this, please ask them in our dedicated FAQ issue.

https://gitlab.com/gitlab-org/gitlab-ee/issues/13855

You can also find more information here:

• https://gitlab.com/gitlab-org/gitlab-ee/issues/13304
• https://about.gitlab.com/2019/08/23/a-single-codebase-for-gitlab-community-and-enterprise-edition/

Frequently Asked Questions

For an up to date list of questions and answers, please take a look at https://gitlab.com/gitlab-org/gitlab-ee/issues/13855

What will we do with the repository names?

https://gitlab.com/gitlab-org/gitlab-ee/ will become https://gitlab.com/gitlab-org/gitlab, and https://gitlab.com/gitlab-org/gitlab-ce will become https://gitlab.com/gitlab-org/gitlab-foss.

Why rename gitlab-ce to gitlab-foss?

Using "gitlab" and "gitlab-ce" would be confusing, so we decided to rename gitlab-ce to gitlab-foss to make the purpose of this FOSS repository more clear

I created a merge requests for CE, and this got closed. What do I need to do?

You will need to create a merge request at https://gitlab.com/gitlab-org/gitlab-ee/. This link will eventually redirect to https://gitlab.com/gitlab-org/gitlab.

How does the licensing work in this new setup?

Everything in the ee/ directory is proprietary. Everything else is free and open source software. If your merge request does not change anything in the ee/ directory, the process of contributing changes is the same as when using the gitlab-ce repository.

Will you accept merge requests on the gitlab-ce/gitlab-foss project after it has been renamed?

No. Merge requests submitted to this project will be closed automatically.

Will I still be able to view old issues and merge requests in gitlab-ce/gitlab-foss?

Yes.

How will this affect users of GitLab CE using Omnibus?

No changes will be necessary, as the packages built remain the same.

How will this affect users of GitLab CE that build from source?

Once the project has been renamed, you will need to change your Git remotes to use this new URL. GitLab will take care of redirecting Git operations so there is no hard deadline, but we recommend doing this as soon as the projects have been renamed.

Where can I see a timeline of the remaining steps?

https://gitlab.com/gitlab-org/gitlab-ee/issues/13304

Will community contributions submitted to the new "gitlab" repository be available in the new gitlab-foss repository?

Yes, these changes will be synced to gitlab-foss automatically, several times per day.

locked this issue