GitLab UI popover component box-shadow styling is being overwritten by gitlab CSS
Summary
We have a popover gitlab-ui component: https://gitlab.com/gitlab-org/gitlab-ui/blob/master/src/components/base/popover/popover.vue
When this component is used in gitlab, the box-shadow styling is incorrect — the box shadow is thicker/more opaque than it should be.
Steps to reproduce
Invoke the popover in the UI and observe the box-shadow
What is the current bug behavior?
Incorrect box-shadow when used in gitlab:
What is the expected correct behavior?
Correct box-shadow:
- https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-popover--default
- https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/popovers-spec-previews/
Output of checks
This bug happens locally and likely happens on GitLab.com but has not been verified
Possible fixes
Why does this happen?
In gitlab-ui:
- The popover component
src/components/base/popover/popover.vue
uses bootstrap-vuebootstrap-vue/src/components/popover/popover.js
- This bootstrap-vue popover code uses
bootstrap-vue/src/utils/popover.class.js
which uses the classclass="popover"
In gitlab:
- The stylesheet
app/assets/stylesheets/components/popover.scss
defines values for.popover
which overwrites the styling in the gitlab-ui component
Edited by Coung Ngo