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.

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

Fix inset link buttons not looking like buttons #878

Merged
merged 1 commit into from
Dec 18, 2024

Conversation

joshhanley
Copy link
Member

Currently if we have a button that is inset and another button that has a href and is inset, they do not look the same.

<div class="mt-4 space-y-4">
    <flux:button variant="ghost" inset>Button with inset</flux:button>
    <flux:button variant="ghost" inset href="#">Button with inset and href</flux:button>
</div>
Pasted image 20241217163930

This was previously fixed in PR #35 for links, but the issue now happens for link-buttons that use the inset prop.

The reason this happens is in the code for the button, there is this line and comment ->add($inset ? 'flex' : 'inline-flex') // inline-flex is weird with negative margins....

The inline-flex was added in PR livewire/flux#35 to ensure that link-buttons looked like standard buttons. This was because buttons are inline-block by default and links are block by default, so inline-flex needed to be applied so they get treaded the same way.

So for link-buttons to work with inset, we need to re-enable the inline-flex for inset buttons and link-buttons.

I've done some testing with buttons and link buttons both set to flex and inline-flex, to see if I could work out how inline-flex and negative margins could interact, and I couldn't see any differences.

Pasted image 20241217165211

As I can't work out exactly what weird negative margin issues inline-flex required that line of code to be added, I think we should just remove it for now and see if we can any bug reports regarding it.

So this PR removes that line.

Fixes #801

@joshhanley joshhanley changed the title Add fix for inset link buttons not looking like buttons Fix inset link buttons not looking like buttons Dec 17, 2024
@calebporzio calebporzio merged commit d2aeeb3 into main Dec 18, 2024
@joshhanley joshhanley deleted the josh/fix-inset-link-button-display branch December 18, 2024 22:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Button with href AND inset renders as full width
2 participants