Background
When Vector icons were married to Codex buttons more than 2 years ago, Codex buttons haven't had ability to provide gap between icon and label with Vector icons.
Hence
.cdx-button:not( .cdx-button--icon-only ) .vector-icon {
// Add spacing between icon and text
margin-right: @spacing-35;
}made it into Vector's Button.less.
Fast-forward two years of Codex development, the gap is now provided by Flexbox gap baked in.
Now we've got a duplication of spacing which leads to confusion and a usability issue, specifically in quiet buttons.
2025-09-08
QTE's @Edtadros was identifying another leftover margin, the spacing between userAvatar and dropdown icon is a custom set one in Vector from times before the Codex buttons had spacing integrated.
The distance between the icon and the dropdown arrow, even though one interaction object, is bigger than the distance to the other elements
Requirement
Remove the outdated margin-right gap styling applied to Vector icons within Codex buttons in Vector, MobileFrontend, and MinervaNeue, as the current Codex implementation now provides spacing via Flexbox. Ensure that removing this rule does not introduce any layout or usability regressions.
BDD
Feature: Remove outdated Vector icon margin-right rule from Codex buttons
Scenario: No regression in button appearance across skins
Given Codex buttons in Vector, MobileFrontend, and MinervaNeue
When viewing buttons in all supported states and variants
Then the layout, alignment, and spacing remain visually correctTest Steps
Test Case 1: Check appearance across skins
- View the same button in Vector skin, MobileFrontend, and MinervaNeue.
- Inspect all button states (default, hover, active, disabled, quiet).
- AC1: The layout and spacing are correct in all skins and button states.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T401359#11081060 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ❓ | T401359#11109285 |
Acceptance criteria for done
- Remove the margin-right gap rule to result in
- Test if there are no side-effects removing this
