nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcSelect] border & box-shadow combination seems off in 9.3.1

Open
#7,981 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

Hey,

in the current release, the border & box-shadow combination looks off.

This is what it looks like while developing an app using nextcloud-docker-dev.

Image

The inspector shows the following CSS being applied:

Image

To check that it's not an issue in the app I'm developing, I cloned the official calendar app into the apps-extra directory, updated the dependency to 9.3.1, which resulted in the same "weird" look.

However, on https://nextcloud-vue-components.netlify.app/#/Components/NcSelect the border/box-shadow looks like it's supposed to:

Image

I guess, it has something to do with this change:

https://github.com/nextcloud-libraries/nextcloud-vue/commit/1c4d8e19795e46c6b9c3313678bf15d5adf84b5b#diff-e220135f30cfa99bbb7f8f8c79e4d517b44dfacf958bd2a80ecfeb4a8a471a63R1124-R1126

.vs__dropdown-toggle {
	@include border.inputLikeBorder('.select--dark', '.select--legacy', var(--vs-border-color));
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the NcSelect component and inspect the .vs__dropdown-toggle rule using border.inputLikeBorder, especially the cited commit change. Reproduce the appearance in the reported 9.3.1 setup and compare it with the component shown on the documentation site; done means the border and box-shadow render consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.