FluentAnchor does not display Icon correctly in Hypertext appearance

[1619digital]

The FluentAnchor component with appearance Hypertext should have its rendered anchor element be display: inline-flex instead of display: inline.

As it is, the icon at the end or start is on a separate line.

Thank you.

[vnbaaij]

Sorry to be a pain in the a**, but we really need your help. Even though this is only a small one, I don't have time to craft/setup a reproduction for this. See the standard reply below:

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.

[MarvinKlein1508]

@vnbaaij this can be reproduced pretty easily. https://github.com/MarvinKlein1508/FluentAnchorIssue

But I think this might an issue in the underlying web-components. Maybe there is a fix via CSS for it but for me

fluent-anchor::part(a) {
    display: inline-flex !important;
}

is not getting applied.

[vnbaaij]

@MarvinKlein1508 it is not about it being easy to reproduce, it is about issue creators helping us to help them. Thank you for creating the repo.

Getting a new project setup (thinking about what choices were made when the issue occurred as no details were supplied), coming up with how to reproduce, etc, easily takes anywhere from 5-10 minutes and is a giant burden with all the context switching we as maintainers need to do every time this happens. Cloning your repro repo (say that ten times fast) and opening it in VS takes 1-2 minutes. Not only is is faster, but I am also certain that it reproduces what was reported, do not have to think about what I was doing in my current branch, etc.

@1619digital is completely ignoring the template we have set up to create an issue. To me that just shows massive disrespect and entitlement which annoys me tremendously. I think I'm being courteous by giving 3 days to supply info. I really want to help people and make them successful in using the library but sometimes I just want to close these kind of issues immediately,

[MarvinKlein1508]

@vnbaaij yes I know. I've created it just because I remember I have seen this issue in some sort here a few times already and a repro repo has never been provided as far as I know.

I can relate to your frustration but I always think about this stuff from another point of view. People who are not familar with GitHub simply won't know better. GitHub has become so complex in the recent years. I would say there is so much stuff which you need to know to work effectifly here. Just remember when you have posted your first questions on StackOverFlow. I think we all went through this phase when our question immediately got closed.

Even for me a lot of the GitHub stuff is still a mystery because I usually don't needed it before. You learn by using the software not by just reading about it :) That's why I try to help whenever I can :)

Have a nice weekend! :)

[vnbaaij]

People who are not familar with GitHub simply won't know better. GitHub has become so complex in the recent years. I would say there is so much stuff which you need to know to work effectifly here. Just remember when you have posted your first questions on StackOverFlow. I think we all went through this phase when our question immediately got closed.

I wouldn't want to compare SO to GH. In general the attitude on SO is just hostile. For GH, I understand that it is not always easy, but we do supply a template. I don't think there is anything difficult about following that. Anyways, enough for the ranting. It is almost weekend indeed! 😀

Now, for the issue. The only mistake you made is you mixed up tags and selectors. the ::part pseudo-element expects the name of a part in the shadow dom. Changing your code to ::part(control)

fluent-anchor::part(control) {
    display: inline-flex !important;
}

makes it work as expected. Throw in some better styling for the spacing

fluent-anchor::part(start) {
    margin-inline-end: calc(var(--design-unit) * 1px);
}

fluent-anchor::part(end) {
    margin-inline-start: calc(var(--design-unit) * 1px);
}

and you'll get this:

I'll see if we can get this added to the standard styles.

[vnbaaij]

Fix will be in v4.10