Skip to content

fix(dropdown): Remove bootstrap @extend statements

Enrique Alcántara requested to merge fix-remove-extend-statements into master

Using SCSS @extend statements in GitLab UI to inherit bootstrap styles tightly couples GitLab UI, Bootstrap, and GitLab CSS. When producing the final CSS bundle in GitLab, we get complex selectors like:

.gl-modal .modal-footer .btn+.btn:not(.dropdown-toggle-split),
.gl-modal .modal-footer .project-buttons .stat-text+.btn:not(.dropdown-toggle-split),
.project-buttons .gl-modal .modal-footer .stat-text+.btn:not(.dropdown-toggle-split),
.gl-modal .modal-footer .project-buttons .btn+.stat-text:not(.dropdown-toggle-split),
.project-buttons .gl-modal .modal-footer .btn+.stat-text:not(.dropdown-toggle-split),
.gl-modal .modal-footer .project-buttons .stat-text+.stat-text:not(.dropdown-toggle-split),
.project-buttons .gl-modal .modal-footer .stat-text+.stat-text:not(.dropdown-toggle-split),
.gl-modal .modal-footer .btn+.btn-group,
.gl-modal .modal-footer .project-buttons .stat-text+.btn-group,
.project-buttons .gl-modal .modal-footer .stat-text+.btn-group,
.gl-modal .modal-footer .btn-group+.btn,
.gl-modal .modal-footer .project-buttons .btn-group+.stat-text,
.project-buttons .gl-modal .modal-footer .btn-group+.stat-text {
    margin-left: 0.5rem
}

One of the goals of moving component styles to GitLab UI is avoiding this sort of complexity. Besides the technical-debt created by these @extend statements, the dropdown button styles do not conform with the design specs anymore when extending bootstrap styles:

With @extend Without @extend Specs
dropdown-incorrect-padding dropdown-correct-padding specs
Edited by Enrique Alcántara

Merge request reports