design-system
design-system copied to clipboard
salesforce-ux
button and button-icon not horizontally aligned correctly
(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the reduced test case.
I don't have a pro codepen account so I can't upload the svg as a static file but that doesn't change anything in the buttons not being aligned: https://codepen.io/FabienTaillon-the-lessful/pen/NWLbXvR
Describe the issue. Is it a bug or a feature request (new component, new icon, new CSS class)?
All buttons are correctly horizontally aligned except the button icon one, which is lower than the others.
Is this issue related to a specific component, variant, and/or state? If so, please detail which.
button icon
Are any specific browsers impacted by this bug?
I tried with Chrome and Safari and issue happens in both.
Which version of the Salesforce Lightning Design System are you using?
2.20.1, but same for previous versions I tried.
What steps and/or code are needed to reproduce this issue?
<html>
<head>
<link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.min.css"/>
</head>
<body class="slds-m-around_large">
<button class="slds-button slds-button_neutral">Neutral Button</button>
<button class="slds-button slds-button_brand">Button</button>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Search">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
<span class="slds-assistive-text">Search</span>
</button>
</body>
</html>
What did you expect to happen?
All buttons are horizontally aligned.
What actually happened?
Button icon is lower than other buttons.
I've been bugged with this issue for long as well, was going crazy trying to understand what changed in my apps.
I think it's because of vertical-align property. I would open PR, but a bit busy at the moment to read all specs/contribution rules.
I think you can safely add vertical-align: middle to .slds-button component.
Well I don't know if it's working as designed, but the workaround is working, thank you !
@FabienTaillon you are welcome! I hope I can change it in code, but it take some time (because of tests etc.).
The fix is already in Production, thank you efficient CI/CD 🙂 (and thank you again for letting me know how to fix it 👍).