fix(dropdown): Remove bootstrap @extend statements
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 |
---|---|---|
Edited by Enrique Alcántara