Skip to content

Fix style-lint errors and warnings for `app/assets/stylesheets/framework/forms.scss`

Enrique Alcántara requested to merge 59854-fix-forms-stylint-issues into master

What does this MR do?

Fixes the following style-lint warnings:

  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
Change Effect Notes Before After
Remove .form-control-label None Not used in CE/EE features. Run grep -rl --exclude-dir={node_modules,.git} "form-control-label" .
Remove .form-control-label-full-width None Not used in CE/EE features. Run grep -rl --exclude-dir={node_modules,.git} "form-control-label" .
Remove .help-form .form-group .text-block Slack command integration (project settings -> integrations -> slack slash commands) , Mattermost command integration (project settings -> integrations -> mattermost slash commands) slack-command-integration-before slack-command-integration-after
Remove .help-form .form-group .input-group-prepend .btn Slack command integration (project settings -> integrations -> slack slash commands) , Mattermost command integration (project settings -> integrations -> mattermost slash commands) I decided to remove the custom background-color even when it introduces a UI change because the custom background does not conform with our design specs for buttons. It also conflicts with the hover effect for buttons. slack-integration-before slack-integration-after
.input-icon-wrapper > .input-icon-right Personal Access Tokens (Profile -> Personal Access tokens) personal-access-token-before personal-access-tokens-after

Does this MR meet the acceptance criteria?

Conformity

If cross-browser testing is not required, please remove the relevant item, or mark it as not needed: [-] -->

Closes #59854 (closed)

Edited by 🤖 GitLab Bot 🤖

Merge request reports