GitLab.org issueshttps://gitlab.com/groups/gitlab-org/-/issues2024-02-23T19:36:40Zhttps://gitlab.com/gitlab-org/gitlab/-/issues/329888Weird border on Pipelines in Dark theme mode2024-02-23T19:36:40ZTakuya NoguchiWeird border on Pipelines in Dark theme mode### Summary
Weird border exist in Job list in a stage on Pipelines in Dark theme mode.
### Steps to reproduce
See https://gitlab.com/gitlab-org/gitlab/-/pipelines in the Dark theme mode.
### Example Project
This bug is independent f...### Summary
Weird border exist in Job list in a stage on Pipelines in Dark theme mode.
### Steps to reproduce
See https://gitlab.com/gitlab-org/gitlab/-/pipelines in the Dark theme mode.
### Example Project
This bug is independent from a specific project.
### What is the current *bug* behavior?
A short white border appears on top of Job list in a stage on Pipelines page ONLY in Dark theme mode.
![pipelines](/uploads/8ad924a331e5d82e9662367a13969c8d/pipelines.png)
This code was introduced in gitlab-org/gitlab-foss!8097 (%8.15), but still not sure if that rule was necessary even at that time.
### What is the expected *correct* behavior?
Any weird border does not appear on top of Job list in a stage on Pipelines page even in Dark theme mode.
### Relevant logs and/or screenshots
![pipelines](/uploads/8ad924a331e5d82e9662367a13969c8d/pipelines.png)
### Output of checks
This bug happens on GitLab.com (13.12-pre)
### Possible fixes
Fix it.
A part of &290213.12Takuya NoguchiTakuya Noguchi2021-05-15https://gitlab.com/gitlab-org/gitlab/-/issues/330702Text in performance bar in Dark mode is not readable2024-02-23T19:35:20ZTakuya NoguchiText in performance bar in Dark mode is not readable### Summary
Texts in performance bar in Dark mode is not readable since they are specified as `gl-text-white`.
### Steps to reproduce
Use dark mode and performance bar simultaneously.
### What is the current *bug* behavior?
#### dev...### Summary
Texts in performance bar in Dark mode is not readable since they are specified as `gl-text-white`.
### Steps to reproduce
Use dark mode and performance bar simultaneously.
### What is the current *bug* behavior?
#### dev
![dev](/uploads/8ede3b644eec980d24bd340ce6185fc7/dev.png)
#### prd (cny)
![production-cny](/uploads/f7d61ed62f10de059f08b1e5fc92b800/production-cny.png)
### What is the expected *correct* behavior?
Texts are readable.
### Output of checks
This bug happens on GitLab.com (13.12-pre)14.0Takuya NoguchiTakuya Noguchi2021-06-05https://gitlab.com/gitlab-org/gitlab-foss/-/issues/59854Fix the following style-lint errors and warnings for `app/assets/stylesheets/...2024-02-07T17:37:53ZFilipa LacerdaFix the following style-lint errors and warnings for `app/assets/stylesheets/framework/forms.scss`## Problem
Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/forms.scss`
```
45:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend ...## Problem
Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/forms.scss`
```
45:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
49:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
95:3 ⚠ Expected ".help-form .form-group .input-group-prepend .btn" to have no more than 3 compound selectors selector-max-compound-selectors
95:3 ⚠ Expected ".help-form .form-group .input-group-append .btn" to have no more than 3 compound selectors selector-max-compound-selectors
106:5 ⚠ Expected ".help-form .form-group .text-block code" to have no more than 3 compound selectors selector-max-compound-selectors
110:5 ⚠ Expected ".help-form .form-group .text-block img" to have no more than 3 compound selectors selector-max-compound-selectors
238:3 ⚠ ".gl-field-error-message" and ".gl-field-error (app/assets/stylesheets/framework/forms.scss -207:1)" have the same stylelint-gitlab/duplicate-selectors
properties.
255:1 ⚠ ".input-icon-wrapper" and ".select-wrapper (app/assets/stylesheets/framework/forms.scss -143:1)" have the same properties. stylelint-gitlab/duplicate-selectors
```
## What to do
1. If possible, replace the CSS class with a utility one, check [common.scss](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss) and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
1. Double check if all the warning have been fixed by running `yarn run stylelint-file app/assets/stylesheets/framework/forms.scss`
1. In the MR, add screenshots of the affected areas before and after the changes, check the [first MR](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/26768) as a guideline
1. If there are a lot of changes, we recommend to break them into smaller MRs
1. Double check the usage of each changed class both in CE and EE
1. EE changes should either be backported into CE or moved into `ee/` folder. You can read more about how to handle EE code [here](https://docs.gitlab.com/ee/development/ee_features.html)
1. Label the MR with ~"CSS cleanup"Enrique Alcántaraealcantara@gitlab.comEnrique Alcántaraealcantara@gitlab.comhttps://gitlab.com/gitlab-org/gitlab/-/issues/409947VSD page CSS and layout improvments2024-01-19T06:04:15ZEzekiel KigboVSD page CSS and layout improvments## Summary
We should improve the CSS and visual layout of the VSD page to match the original designs
### Key areas
- The UI should align with the product analytics dashboards
- We support multiple visualizations within a dashboard, eac...## Summary
We should improve the CSS and visual layout of the VSD page to match the original designs
### Key areas
- The UI should align with the product analytics dashboards
- We support multiple visualizations within a dashboard, each visualization should be responsive
### Proposal
- ~~Update background color of dashboard pages to `$gray-10` in order to visually highlight the panels~~
- On the [VSD dashboard](https://gitlab.com/groups/gitlab-org/-/analytics/dashboards/value_streams_dashboard), the metrics comparison table should be inside a panel, similar to the panel below it
| Optimize VSD (current) | Optimize VSD (proposal) |
| ------ | ------ |
|![screencapture-gitlab-groups-gitlab-org-analytics-dashboards-value-streams-dashboard-2023-12-18-08_27_59](/uploads/eeb29ee444672523c8d4066f52ce94f5/screencapture-gitlab-groups-gitlab-org-analytics-dashboards-value-streams-dashboard-2023-12-18-08_27_59.png) | ![screencapture-gitlab-groups-gitlab-org-analytics-dashboards-value-streams-dashboard-2023-12-18-08_48_53](/uploads/a76611c4c94a1ac7fa6db32595884ecd/screencapture-gitlab-groups-gitlab-org-analytics-dashboards-value-streams-dashboard-2023-12-18-08_48_53.png) |
See design management for mock ups.
[❖ Figma project →](https://www.figma.com/file/3OdxYMCcb11ml67RajawkD/Value-Stream-Dashboard-!9317?type=design&node-id=2622%3A6971&mode=design&t=Lm0NEJDFZIdNmuY4-1)
### Resources
- https://gitlab.com/gitlab-org/gitlab/-/issues/426140+
- [Pajamas - Dashboard panel](https://design.gitlab.com/patterns/dashboards#panel)
### Concerns
- https://gitlab.com/gitlab-org/gitlab/-/issues/409394+ will allow specifying different metrics in each visualization, do we need any special considerations for vertical height?
- https://gitlab.com/gitlab-org/gitlab/-/issues/388890+ will provide support for visualization (widget) level filtering16.9Alex PennellsAlex Pennellshttps://gitlab.com/gitlab-org/gitlab/-/issues/332050Startup CSS imports some elements twice2023-10-26T11:50:46ZDavid O'ReganStartup CSS imports some elements twiceFor: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/62486#note_586855640
- `app/assets/stylesheets/startup/startup-general.scss` => `@keyframes gl-spinner-rotate {`
> David O'Regan question Is there any reason we should have thi...For: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/62486#note_586855640
- `app/assets/stylesheets/startup/startup-general.scss` => `@keyframes gl-spinner-rotate {`
> David O'Regan question Is there any reason we should have this twice?
> Good catch! 🤔
> I think this is actually because it appears twice in application_utilities...css...
> It looks like we might be importing some of these things twice somehow 🤔
> https://gitlab.com/gitlab-org/gitlab/blob/18b41a3382a206687555e0a8596cbdf9f73199bd/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss#L21
https://gitlab.com/gitlab-org/gitlab/blob/3b87ee87165aed7840f4257f12c0acc185056cc5/app/assets/stylesheets/application_utilities.scss#L12BacklogPaul Slaughterpslaughter@gitlab.comPaul Slaughterpslaughter@gitlab.comhttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/1951Delete deprecated gl-flex-wrap classes2023-10-20T14:04:50ZMark Florianmflorian@gitlab.comDelete deprecated gl-flex-wrap classesIn !2987, the `gl-flex-wrap` classes we deprecated in favour of `gl-flex-wrap-wrap`, which is more consistent with our naming convention of `gl-{breakpoint?}-{property}-{value}`.
We should delete the deprecated classes and release a new...In !2987, the `gl-flex-wrap` classes we deprecated in favour of `gl-flex-wrap-wrap`, which is more consistent with our naming convention of `gl-{breakpoint?}-{property}-{value}`.
We should delete the deprecated classes and release a new major version.BacklogEduardo Sanz GarcíaEduardo Sanz Garcíahttps://gitlab.com/gitlab-org/gitlab-docs/-/issues/1267Revisit tweaks for mermaid after MR 24522023-09-18T03:03:08ZTakuya NoguchiRevisit tweaks for mermaid after MR 2452Some CSS tweaks introduced in !2452 for mermaid break some diagrams drawn in Mermaid in gitlab-docs.
The goal aimed in #1139
> Currently our mermaid diagrams have a bit of a springtime theme -- purple and yellow.
>
> Would be nice if ...Some CSS tweaks introduced in !2452 for mermaid break some diagrams drawn in Mermaid in gitlab-docs.
The goal aimed in #1139
> Currently our mermaid diagrams have a bit of a springtime theme -- purple and yellow.
>
> Would be nice if they were a bit more monochrome, and if the fonts matched the fonts in the rest of the docs.
Some was fixed in !2920.
gitlab-org/gitlab!88199 was blocked to get merged by this problem.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/303Let's revisit our use of bootstrap-vue's css2023-08-21T14:23:19ZLukas 'ai-pi' Eipertleipert@gitlab.comLet's revisit our use of bootstrap-vue's cssWith !210 we started importing bootstrap-vue's CSS, we should validate whether this is the best strategy and whether we need ALL of the CSS or we could just import parts of the SCSS, as it is also part of the package, e.g. https://unpkg....With !210 we started importing bootstrap-vue's CSS, we should validate whether this is the best strategy and whether we need ALL of the CSS or we could just import parts of the SCSS, as it is also part of the package, e.g. https://unpkg.com/bootstrap-vue@2.0.0-rc.24/src/index.scss
- - -
The following discussion from !210 should be addressed:
- [ ] @leipert started a [discussion](https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/210#note_185751147): (+2 comments)
> Why don't we consume just the SCSS source? https://unpkg.com/bootstrap-vue@2.0.0-rc.24/src/index.scsshttps://gitlab.com/gitlab-org/gitlab/-/issues/333475Search on navbar has multiple technical debts2023-06-15T21:29:42ZTakuya NoguchiSearch on navbar has multiple technical debts### Summary
Global search on navbar has a lot of technical debts in frontend. e.g., deep nesting, unused HTML snippets etc. Most technical debts were introduced in gitlab-org/gitlab-foss!3212 in %8.7 and have been left untouched since t...### Summary
Global search on navbar has a lot of technical debts in frontend. e.g., deep nesting, unused HTML snippets etc. Most technical debts were introduced in gitlab-org/gitlab-foss!3212 in %8.7 and have been left untouched since the author/reviewer @asumaran @jschatz1 have been not in the Team for a while.
### Steps to reproduce
Use global search.
### What is the current *bug* behavior?
TBA
### What is the expected *correct* behavior?
TBA
### Relevant logs and/or screenshots
See some from previously merged MRs gitlab-org/gitlab-foss!3212 etc.
### Output of checks
This bug happened on GitLab.com as of %14.0 through %14.10 but does not any more on %14.10 and later.
### TODO after %"15.0"
- [ ] Remove app/views/layouts/_search.html.haml
- [ ] Remove `loadHTMLFixture` of `'static/search_autocomplete.html'`BacklogTakuya NoguchiTakuya Noguchi2022-07-05https://gitlab.com/gitlab-org/gitlab/-/issues/362038Reduce unused CSS on page load2023-02-07T22:34:21ZEzekiel KigboReduce unused CSS on page load##Summary
It's critical to the longer-term success of our product to simplify the code that's used to make it easier to manage.
## Background
Linked discussion https://gitlab.com/gitlab-org/gitlab/-/merge_requests/84187#note_9393870...##Summary
It's critical to the longer-term success of our product to simplify the code that's used to make it easier to manage.
## Background
Linked discussion https://gitlab.com/gitlab-org/gitlab/-/merge_requests/84187#note_939387038
> **thought:** I wonder if some of these CSS attributes could be applied dynamically via JS, since we don't really need them on page load when the header search is `inactive`.
Follow up issue to https://gitlab.com/gitlab-org/gitlab/-/merge_requests/84187
<details><summary>Click to expand process progress </summary>
### Next Steps for this issue
#### Validation track
- `checkboxes are required steps`
- `Bugs can skip Design and Solution Validation`
- [x] ~"workflow::validation backlog" [Problem Validation Backlog](https://about.gitlab.com/handbook/product-development-flow/#validation-phase-1-validation-backlog) -@JohnMcGuire
- [x] Issue is Up-to-date
- [ ] Prioritized in the backlog
- [ ] ~"workflow::problem validation" [Problem validation](https://about.gitlab.com/handbook/product-development-flow/#validation-phase-2-problem-validation) - @JohnMcGuire
- [ ] Thorough understanding of the problem
- [Problem Validation Template](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Problem%20Validation.md)
- [Opportunity Canvas](https://about.gitlab.com/handbook/product/product-processes/#opportunity-canvas)
- Review of the opportunity canvas
- [UX Research](https://gitlab.com/gitlab-org/ux-research/-/blob/master/.gitlab/issue_templates/Problem%20validation.md)
- Validate your problem with users
- Update issue/epic description
- Ensure your issue is up-to-date with the latest understanding of the problem.
- Understand and document (in the issue) the goals that people want to accomplish using the [Jobs to be Done (JTBD) framework](https://about.gitlab.com/handbook/engineering/ux/jobs-to-be-done/).
- communicate the findings to Product and UX leadership.
- PMs are strongly encouraged to open [Dogfooding issues](https://about.gitlab.com/handbook/product/product-processes/#dogfooding-process)
- [ ] ~"workflow::ready for design" - @nickbrandt
- [ ] ~"workflow::design" [Validation phase 3: Design](https://about.gitlab.com/handbook/product-development-flow/#validation-phase-3-design) - @nickbrandt
- [ ] Proposed solution(s) identified and documented
- Diverge: explore multiple different approaches as a team
- [Think Big session](https://about.gitlab.com/handbook/engineering/ux/thinkbig/).
- [document findings in Dovetail](https://about.gitlab.com/handbook/engineering/ux/dovetail/)
- Converge: identify a small set of options to validate
- [Think Small](https://about.gitlab.com/handbook/engineering/ux/thinkbig/#think-small) session with the team.
- Design reviews with team
- Low fidelity design ideas
- Update issue/epic description with proposed solution
- Add Figma design file link or attach design to [GitLab's Design Management](https://docs.gitlab.com/ee/user/project/issues/design_management.html)
- Validate approach with help from stakeholders.
- Run user validation using any of the [proposed methods](https://about.gitlab.com/handbook/engineering/ux/ux-research/#solution-validation)
- [Document your findings in Dovetail](https://about.gitlab.com/handbook/engineering/ux/dovetail/) and appropriate GitLab issue.
- Draw inspiration from competitive and adjacent offerings.
- [ ] Shared understanding in the team of the proposed solution
- Review the proposed solution as a team so that everyone has a chance to contribute
- ask questions
- raise concerns
- suggest alternatives
- Review the proposed solution with leadership.
- [ ] Confidence in the technical feasibility
- Discuss the technical implications with Engineering to ensure that what is being proposed is possible within the desired timeframe.
- Engage engineering peers early and often
- If the solution is large and complex, consider scheduling a [spike](https://about.gitlab.com/handbook/product/product-processes/#spikes) to mitigate risks and uncover the optimal iteration path.
- [ ] Updated issues/epic descriptions - @JohnMcGuire
- Ensure issues and epics are up-to-date, so we can continue our work efficiently and asynchronously.
- [Experiment definition](https://about.gitlab.com/handbook/engineering/development/growth/#experiment-definition-standards)
- Continue Dogfooding process
- [ ] ~"workflow::solution validation" - [Validation phase 4: Solution Validation](https://about.gitlab.com/handbook/product-development-flow/#validation-phase-4-solution-validation) - @nickbrandt
- [ ] High confidence in the proposed solution
- Gather feedback from relevant stakeholders.
- Follow [solution validation guidance](https://about.gitlab.com/handbook/engineering/ux/ux-research-training/solution-validation-and-methods/) to gather feedback.
- [ ] Documented Solution validation Learnings
- Document solution validation findings as [insights in Dovetail](https://about.gitlab.com/handbook/engineering/ux/dovetail/).
- Update the [opportunity canvas](https://about.gitlab.com/handbook/product/product-processes/#opportunity-canvas) (if used) with relevant insights.
- Update the issue or epic description to contain or link to the findings.
#### Build track
- [x] ~"workflow::planning breakdown" - @JohnMcGuire
- [ ] Well-scoped MVC issues
- Issues are the [SSOT](https://about.gitlab.com/handbook/values/#single-source-of-truth) for all feature development.
- Refine issues into something that can be delivered within a single milestone
- Open follow on issues to track work that is de-prioritized
- Promote existing issues to Epics and open implementation issues for the upcoming milestone
- Review feature issues with contributors
- Consider scheduling a POC or engineering investigation issue
- Make scope tradeoffs to reach for a [right-sized MVC](https://about.gitlab.com/handbook/product/product-principles/#the-minimal-viable-change-mvc)
- Request an [issue review](https://about.gitlab.com/handbook/product/product-processes/#issue-reviews) to ensure communication is clear and have proposed the [right iteration plan](https://about.gitlab.com/handbook/product/product-processes/#iteration-strategies) to execute on the solution.
- [ ] Prioritized in Milestone
- The team should understand what issues should be delivered during the next milestone
- [ ] ~"workflow::ready for development" - @JohnMcGuire
- [x] ~"type::bug" ~"type::feature" ~"type::maintenance" - @JohnMcGuire
- [ ] ~"Deliverable" - @changzhengliu and @nickbrandt
- [ ] Add to Planning Issue - @JohnMcGuire
- [ ] Defined Quality Plan -@ebanks
- [Quad Planning](https://about.gitlab.com/handbook/engineering/quality/quality-engineering/quad-planning/)
- [Test planning](https://about.gitlab.com/handbook/engineering/quality/quality-engineering/test-engineering/#test-planning)
- ~"workflow::refinement" - @changzhengliu
- as needed, refine the aspects of the original feature
- [ ] ~"workflow::in dev" - @changzhengliu
- Applied by the engineer after work (including documentation) has begun on the issue. An MR is typically linked to the issue at this point.
- [ ] ~"workflow::in review" - Engineering
- Applied by an engineer indicating that all MRs required to close an issue are in review.
- [ ] ~"workflow::blocked" - Engineering
- Applied if at any time during development the issue is blocked. For example: technical issue, open question to PM or PD, cross-group dependency.
- [ ] ~"workflow::verification" - Engineering
- After the MRs in the issue have been merged, this label is applied signaling the issue needs to be verified in staging or production.
- [ ] ~"workflow::awaiting security release" -Engineering
- Applied by an engineer after the security issue has passed verification, this label signals that it is ready but awaiting the next monthly security release.
- [ ] Close the Issue - Once available in production
- [ ] Feature is available to GitLab.com hosted customers - Developer
- Code is deployed to production.
- [Feature flag(s)](https://about.gitlab.com/handbook/product-development-flow/feature-flag-lifecycle/) enabled.
- [ ] Feature is available to self-managed customers - Developer
- Code is included in the self-managed release (depending upon the cut-off).
- [ ] Stakeholders of a feature will know it's available in production - Developer
- After the feature is deployed to production and any needed verification in production is completed, the development team will close the issue.
- Prior to the issue being closed, the development team may set the workflow label to workflow::verification or workflow::production for tracking purposes.
- Product Manager may follow up with individual [stakeholders](https://about.gitlab.com/handbook/product/product-processes/#what-is-a-stakeholder) to let them know the feature is available.
- [ ] Customers will be informed about major changes - @JohnMcGuire
- Product Manager follows the instructions in the [template](https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/.gitlab/merge_request_templates/Release-Post.md), which will then cause it to appear on the [GitLab.com releases page](https://about.gitlab.com/releases/gitlab-com/) and be part of the release post.
</details>15.9Tomas BulvaTomas Bulvahttps://gitlab.com/gitlab-org/gitlab/-/issues/325306Geo Status Page 2.0 - CSS Exploration Followup2023-01-03T21:12:01ZZack Cuddyzcuddy@gitlab.comGeo Status Page 2.0 - CSS Exploration Followup## What/Why
Based on feedback:
1. Concerns about nested grids: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55904#note_531695073
2. Concerns about switching from grid/block/flex: https://gitlab.com/gitlab-org/gitlab/-/merge_req...## What/Why
Based on feedback:
1. Concerns about nested grids: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55904#note_531695073
2. Concerns about switching from grid/block/flex: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55904#note_531695071
3. Conversations on call with `@markrian` including concerns about the node header alignment
There may be an opportunity to take another look at the css implementation of the Geo Status UI once it is fully implemented. There are a few places where we are mixing patterns and could pose difficult to modify parts without touching everything. That being said it does **work** so this isn't an immediate issue.
## Proposal
Take a look at the UI and look for opportunities to at least comment/document the reason the node header is able to align. Also look for a chance to utilize one display format in components rather than switching between them. Especially in the case of using block/grid. An idea of pulling a `grid-template-areas` to the top level to manage everything may be feasible.Backloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/706Links in `GlPopover` are larger by default than the Pajama Mocks2023-01-03T19:28:12ZZack Cuddyzcuddy@gitlab.comLinks in `GlPopover` are larger by default than the Pajama MocksThis issue is written as more of a question of desired behavior.
Based on the comments found [here](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27033#note_318522019).
@sunjungp found that when referencing the mocks for Popove...This issue is written as more of a question of desired behavior.
Based on the comments found [here](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27033#note_318522019).
@sunjungp found that when referencing the mocks for Popovers in the Pajama design guidelines: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/popovers-spec-previews/
That the links inside the popover were `12px` vs the default `14px`.
However, when implementing in `gitlab-org` the links defaulted to 14px, requiring use to override the font size of the links to match the mocks.
Is this something that should be handled on the GitLab UI side for `GlPopover`? Or is it expected to override these sizes when implementing?https://gitlab.com/gitlab-org/gitlab-ui/-/issues/523"Include GitLab CSS bundle" checkbox doesn't follow resources' order of that ...2022-11-22T20:12:09ZDenys Mishunovdmishunov@gitlab.com"Include GitLab CSS bundle" checkbox doesn't follow resources' order of that of gitlab.comThe "Include GitLab CSS bundle" feature of Storybook at https://gitlab-org.gitlab.io/gitlab-ui/ is supposed to provide an idea of how that or another component is supposed to look like when put into the context of GitLab product. However...The "Include GitLab CSS bundle" feature of Storybook at https://gitlab-org.gitlab.io/gitlab-ui/ is supposed to provide an idea of how that or another component is supposed to look like when put into the context of GitLab product. However, the order of resources is wrong in this case:
* Storybook suggests that `gitlab-ui` resources (stylesheet) overrides those of GitLab, while
* in GitLabm, the order of stylesheets is such that most of the stylesheets [can override `gitlab-ui` styles](https://gitlab.com/gitlab-org/gitlab/blob/master/app%2Fassets%2Fstylesheets%2Fframework.scss#L5)
This is in part the reason our `gitlab-ui` components don't look consistent in different contexts of GitLab.
Either:
* we have to update the Storybook feature, OR
* that might be a bit better, update GitLab even though it might raise a lot of regressionshttps://gitlab.com/gitlab-org/gitlab/-/issues/284210Replace prepend-left-20 CSS class2022-11-22T19:54:27ZJose Ivan VargasReplace prepend-left-20 CSS class## Summary
As part of our efforts to move to gitlab-ui based utility classes in https://gitlab.com/gitlab-org/gitlab/-/issues/217418
We should move the `prepend-left-20` class to the gitlab-ui utility class of `gl-ml-5` or `gl-ml-7` de...## Summary
As part of our efforts to move to gitlab-ui based utility classes in https://gitlab.com/gitlab-org/gitlab/-/issues/217418
We should move the `prepend-left-20` class to the gitlab-ui utility class of `gl-ml-5` or `gl-ml-7` depending on the design
The file list that contain the aforementioned class is listed below
| File | Converted |
|----------------------------------------------|-----------|
| app/views/projects/network/show.html.haml | :white_check_mark: |
| app/views/admin/hooks/_form.html.haml | :white_check_mark: |
| app/views/shared/web_hooks/_form.html.haml | :white_check_mark: |
| app/assets/stylesheets/framework/common.scss | :white_check_mark: |
## Improvements
<!--
Explain the benefits of refactoring this code.
See also https://about.gitlab.com/handbook/values/index.html#say-why-not-just-what
-->
## Risks
Not every single file will use the same class, it is neccessary to request a UX review for each change being madeBackloghttps://gitlab.com/gitlab-org/gitlab-ui/-/issues/1683Replace theme prop with CSS custom property reference in GlTabs2022-11-22T19:08:09ZMark Florianmflorian@gitlab.comReplace theme prop with CSS custom property reference in GlTabs14.8Mark Florianmflorian@gitlab.comMark Florianmflorian@gitlab.comhttps://gitlab.com/gitlab-org/gitlab/-/issues/368329Replace bootstrap utils with gl- equivalents in billings / subscription_table...2022-09-17T04:40:35ZEzekiel KigboReplace bootstrap utils with gl- equivalents in billings / subscription_table.vue## Background
The following discussion from !92729 should be addressed:
- [ ] @ekigbo started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/92729#note_1030342697): (+1 comment)
> It would be nice to also re...## Background
The following discussion from !92729 should be addressed:
- [ ] @ekigbo started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/92729#note_1030342697): (+1 comment)
> It would be nice to also replace `flex-lg-column` but it looks like we dont have that defined yet, so i'll skip for now.
## Implementation guide
* We should add `gl-lg-flex-direction-column` to [gitlab-ui](https://gitlab.com/gitlab-org/gitlab-ui)
* Replace `flex-lg-column` with `gl-lg-flex-direction-column` in `ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue`15.4vamshivamshihttps://gitlab.com/gitlab-org/gitlab/-/issues/364079Use ci-icon size=14 instead of nested CSS specifications2022-07-19T18:41:34ZTakuya NoguchiUse ci-icon size=14 instead of nested CSS specificationsOn `GET /:namespace/:project/-/jobs/:id` (`Projects::JobsController#show`), there are duplicated CSS definitions happening with bare CSS and from gitlab-ui.
## Solution
- Use `.s14` by using `<ci-icon :size="14" />` instead of `<ci-icon...On `GET /:namespace/:project/-/jobs/:id` (`Projects::JobsController#show`), there are duplicated CSS definitions happening with bare CSS and from gitlab-ui.
## Solution
- Use `.s14` by using `<ci-icon :size="14" />` instead of `<ci-icon />` equivalent to `<ci-icon :size="16" />`.
- Remove extra CSS definitions.
## location
Location: an element specified by the selector `.right-sidebar.build-sidebar .builds-container`
![gitlab.com_gitlab-org_gitlab-ui_-_jobs_2518064044](/uploads/73f0312fe7bd3c06e99f0a20a16d6307/gitlab.com_gitlab-org_gitlab-ui_-_jobs_2518064044.png)
Taken from https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/2518064044
## Screenshot from DevTools
![ci-icon-size14](/uploads/0457819b4de2524916e8183654fef366/ci-icon-size14.png)
## Resources
- https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/14567
- Blocked by !8900215.2Takuya NoguchiTakuya Noguchihttps://gitlab.com/gitlab-org/gitlab/-/issues/27775Fix the following style-lint errors and warnings for `app/assets/stylesheets/...2022-07-19T08:26:06ZFilipa LacerdaFix the following style-lint errors and warnings for `app/assets/stylesheets/page_bundles/xterm.scss`## Problem
Fix the following style-lint errors and warnings for `app/assets/stylesheets/page_bundles/xterm.scss`
```
```
## What to do
1. If possible, replace the CSS class with a utility one, check [common.scss](https://gitlab.com/git...## Problem
Fix the following style-lint errors and warnings for `app/assets/stylesheets/page_bundles/xterm.scss`
```
```
## What to do
1. If possible, replace the CSS class with a utility one, check [common.scss](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss) and https://getbootstrap.com/docs/4.4/utilities/ for existing ones
1. Double check if all the warning have been fixed by running `yarn run stylelint-file app/assets/stylesheets/page_bundles/xterm.scss`
1. In the MR, add screenshots of the affected areas before and after the changes, check the [first MR](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/26768) as a guideline
1. If there are a lot of changes, we recommend to break them into smaller MRs
1. Double check the usage of each changed class both in CE and EE
1. EE changes should either be backported into CE or moved into `ee/` folder. You can read more about how to handle EE code [here](https://docs.gitlab.com/ee/development/ee_features.html)
1. Label the MR with ~"CSS cleanup"13.10Takuya NoguchiTakuya Noguchihttps://gitlab.com/gitlab-org/gitlab-docs/-/issues/1115H1's are hidden when you access them with an anchor2022-07-15T20:00:10ZSuzanne SelhornH1's are hidden when you access them with an anchorWhen you link to an H1 anchor in a new window, the H1 heading is hidden. In this example, if you
have the site up and running locally on port 3004, click this link:
http://localhost:3004/ee/user/permissions.html#permissions-and-roles
...When you link to an H1 anchor in a new window, the H1 heading is hidden. In this example, if you
have the site up and running locally on port 3004, click this link:
http://localhost:3004/ee/user/permissions.html#permissions-and-roles
If not, click: https://docs.gitlab.com/ee/user/permissions.html#permissions-and-roles
#### Actual:
![image](/uploads/a3b648f10d55c43fbfdb5723872b9987/image.png)
#### Expected:
![image](/uploads/649190217bde239845a0f12c21384a1d/image.png)
### Possible solutions:
Either jump to the H1 itself, or somehow disable the ability to use an H1 anchor.
The in-docs search uses the H1 anchor and it shouldn't. Nowhere else do we link to the H1 anchor.Sarah Germansgerman@gitlab.comSarah Germansgerman@gitlab.comhttps://gitlab.com/gitlab-org/gitlab-docs/-/issues/987Docs.gitlab.com - Homepage CSS follow-ups2022-06-08T20:49:32ZDavid O'ReganDocs.gitlab.com - Homepage CSS follow-ups- Apply homepage feedback / transition CSS from the [design audit in Figma](https://www.figma.com/file/Uq1FFHeWTPOl0FeZMIzad9/Docs-home-page-redesign?node-id=348%3A345) (View comments to see flagged items).
- Reduce duplicated CSS in `la...- Apply homepage feedback / transition CSS from the [design audit in Figma](https://www.figma.com/file/Uq1FFHeWTPOl0FeZMIzad9/Docs-home-page-redesign?node-id=348%3A345) (View comments to see flagged items).
- Reduce duplicated CSS in `landing.scss`Sarah Germansgerman@gitlab.comSarah Germansgerman@gitlab.com