Make search boxes consistent throughout GitLab

Resources

FE @timzallmann

We have a number of differently styles search boxes across the site.

Here are three different examples all on the same page:

Let's standarize all the search boxes. The magnifying glass icon should remain, even when text is entered into the search field. We should remove the clear icon, as it doesn't provide enough value.

Proposal

cc @awhildy @jivanvl

added frontend label

mentioned in merge request !8281 (merged)

I really like this idea!

Sounds great @tauriedavis! I just created a quick MR to document this in the UX guide (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8429/diffs). Let me know if that makes sense. We should definitely go ahead and do this work. Thanks!

added ~123454 to schedule labels

changed milestone to %Backlog

added search label

mentioned in issue #26259 (closed)

changed milestone to %8.17

added Stretch label

removed Stretch label

changed milestone to %Backlog

added ~1434245 label

removed ~19492 label

added ~974571 label

added Deliverable label

changed milestone to %9.4

changed the description

created branch 26303-make-search-boxes-consistent-throughout-gitlab

mentioned in merge request !12221 (merged)

closed via merge request !12221 (merged)

reopened

created branch 26303-make-search-boxes-consistent-throughout-gitlab

mentioned in merge request !12222

@tauriedavis I identified one problem with changing the current solution , as the 3rd input box is a search which is going back to the server the magnifying glass is also the submit button :

So what should I implement ? I can do the unified approach and you can only submit through return ? Show both Icons ?

@timzallmann I think the unified approach makes sense, since that is what we have moved towards with the rest of our search boxes.

However, I think it does make sense for all of our search boxes to keep the mag glass icon in order to submit. @sarrahvesselov The main problem to fix here in this issue is consistency. But what are your thoughts on keeping the search icon on search fields so users can submit via the icon if they prefer? We should still have a close icon appear next to the submit field in order to keep that functionality. This may be out of scope for this issue. I could create a new one if we want to do that approach instead and it is out of scope here.

But what are your thoughts on keeping the search icon on search fields so users can submit via the icon if they prefer?

I strongly feel we should have a search icon in all search boxes. The icon is the quickest way to differentiate a search box from an input field. We also have a very low-contrast interface overall, the small addition of an icon can make the search that much easier to see.

Here is some research done on the use of a search icon. Spoiler alert! It say's they can be helpful

https://www.nngroup.com/articles/magnifying-glass-icon/

We should still have a close icon appear next to the submit field in order to keep that functionality. This may be out of scope for this issue. I could create a new one if we want to do that approach instead and it is out of scope here.

I agree, no need to start another issue. I think that falls within the realm of consistency.

I'm not sure the clear icon is even really necessary, actually. We could keep it, but it'll just be more visual bloat. I think the search icon is more important.

mentioned in merge request !12376 (merged)

@timzallmann For this one, lets keep the mag glass icon and remove the clear icon for all search boxes.

I updated the description.

changed the description

@timzallmann what is the status of this one? Is this going to make it in for %9.4?

changed milestone to %9.5

assigned to @timzallmann

changed milestone to %10.0

moved to gitlab#7636

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