Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

button and button-icon not horizontally aligned correctly #753

Open
FabienTaillon opened this issue Feb 27, 2023 · 5 comments
Open

button and button-icon not horizontally aligned correctly #753

FabienTaillon opened this issue Feb 27, 2023 · 5 comments

Comments

@FabienTaillon
Copy link

(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the
reduced test case.

buttons

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.
@vc4u
Copy link

vc4u commented Apr 3, 2023

I've been bugged with this issue for long as well, was going crazy trying to understand what changed in my apps.

@ondrejkonec
Copy link

ondrejkonec commented Apr 18, 2023 •
edited
Loading

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.

@FabienTaillon
Copy link
Author

Well I don't know if it's working as designed, but the workaround is working, thank you !

@ondrejkonec
Copy link

@FabienTaillon you are welcome! I hope I can change it in code, but it take some time (because of tests etc.).

@FabienTaillon
Copy link
Author

The fix is already in Production, thank you efficient CI/CD 🙂 (and thank you again for letting me know how to fix it 👍).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@FabienTaillon @vc4u @ondrejkonec