Fix the following style-lint errors and warning for `app/assets/stylesheets/framework/filters.scss`
Problem
Fix the following style-lint errors and warning for app/assets/stylesheets/framework/filters.scss
92:3 ⚠ ".selectable" and ".filtered-search-wrapper (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/filters.scss -52:1)" have the same stylelint-gitlab/duplicate-selectors
properties.
195:5 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
343:1 ⚠ ".filter-dropdown-container" and ".selectable (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/filters.scss -92:3)" have the same stylelint-gitlab/duplicate-selectors
properties.
376:3 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .btn" to have no more than 3 compound selectors selector-max-compound-selectors
379:5 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .btn svg" to have no more than 3 compound selectors selector-max-compound-selectors
383:5 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .btn .dropdown-label-box" to have no more than 3 compound selectors selector-max-compound-selectors
393:3 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .dropdown-light-content" to have no more than 3 compound selectors selector-max-compound-selectors
398:3 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .dropdown-user" to have no more than 3 compound selectors selector-max-compound-selectors
398:3 ⚠ ".dropdown-user" and ".filter-dropdown-container (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/filters.scss -343:1)" have the same stylelint-gitlab/duplicate-selectors
properties.
402:3 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .dropdown-user-details" to have no more than 3 compound selectors selector-max-compound-selectors
406:5 ⚠ Expected ".droplab-dropdown .dropdown-menu .filter-dropdown-item .dropdown-user-details > span" to have no more than 3 compound selectors
What to do
- If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
- Double check if all the warning have been fixed by running
yarn run stylelint-file app/assets/stylesheets/framework/filters.scss
- In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
- If there are a lot of changes, we recommend to break them into smaller MRs
- Double check the usage of each changed class both in CE and EE
- EE changes should either be backported into CE or moved into
ee/
folder. You can read more about how to handle EE code here - Label the MR with CSS cleanup