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

fast-button elements on the same line with and without icons do not align #5414

Closed
rajsite opened this issue Nov 20, 2021 · 4 comments
Closed
Labels
bug A bug community:good-first-issue Good issues for first time contributors community:request Issues specifically reported by a member of the community. status:needs-investigation Needs additional investigation warning:stale No recent activity within a reasonable amount of time

Comments

@rajsite
Copy link

rajsite commented Nov 20, 2021

🐛 Bug Report

See the following screenshot of two FAST Buttons on the same line (one with icon and one without) and how they are offset from each other:
image

💻 Repro or Code Sample

Stackblitz: https://stackblitz.com/edit/fast-button-alignment?file=index.html

<div>
  <fast-button>Hello</fast-button>
  <fast-button>
    World
    <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><!-- ... --></svg>
  </fast-button>
</div>

🤔 Expected Behavior

I expect the buttons to be aligned on the same line like the following workaround:

<div>
  <fast-button style="vertical-align:middle;">Hello</fast-button>
  <fast-button style="vertical-align:middle;">
    World
    <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><!-- ... --></svg>
  </fast-button>
</div>

Note: See the added style="vertical-align:middle;"

image

😯 Current Behavior

See above.

💁 Possible Solution

See workaround above.

🔦 Context

We style buttons based on fast-foundation and ran into a similar issue when using display: inline-flex like fast is doing and have included a :host {vertical-align: middle; } in our styles. I think it has to do with weirdness involving changing the display configuration of the inner <button> but we did not find a clear root cause.

🌍 Your Environment

"@microsoft/fast-components": "^2.14.2",
"@microsoft/fast-element": "^1.6.1"
@rajsite rajsite added the status:triage New Issue - needs triage label Nov 20, 2021
@alphashr
Copy link
Contributor

I think I know the fix.
Following changes would align the contents (all three slots: start, content and end) on cross axis properly:

.control {
    align-items: baseline
}

.content,
.start,
.end {
    align-self: center;
}

image

I'd be happy to pick it up once it's triaged.

@alphashr
Copy link
Contributor

alphashr commented Nov 20, 2021

I can see this issue for search component (not yet released) which uses the same startSlotTemplate and endSlotTemplate like button:
image
First control:

<fast-search minlength="8"></fast-search>

Second one with svg in its start slot:

<fast-search>
    <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path
            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
        />
    </svg>
</fast-search>

Other components such as Breadcrumb, Listbox Option, Number Field, Text Field and maybe others have the same issue.

@EisenbergEffect EisenbergEffect added area:fast-components bug A bug community:good-first-issue Good issues for first time contributors community:request Issues specifically reported by a member of the community. status:needs-investigation Needs additional investigation and removed status:triage New Issue - needs triage labels Nov 29, 2021
@stale
Copy link

stale bot commented Apr 16, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the warning:stale No recent activity within a reasonable amount of time label Apr 16, 2022
@chrisdholt
Copy link
Member

I believe this was closed by #5435 - @rajsite if you come across other instances, let us know, but this should be addressed. Thanks all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug A bug community:good-first-issue Good issues for first time contributors community:request Issues specifically reported by a member of the community. status:needs-investigation Needs additional investigation warning:stale No recent activity within a reasonable amount of time
Projects
None yet
Development

No branches or pull requests

4 participants