[InfoButton] New component #2332
Conversation
| } | ||
|
|
||
| [Fact] | ||
| public void FluentInfoButton_Default() |
There was a problem hiding this comment.
Can you add other Unit Test to validate all properties (one test by property)?
|
|
||
| namespace Microsoft.FluentUI.AspNetCore.Components; | ||
|
|
||
| public partial class FluentInfoButton |
There was a problem hiding this comment.
This component must be accessible (you can use NVDA to validate it).
Example (playing with sound):
- Enter to open and read the tooltip content
- Tab to navigate in the tooltip
- Escape to close the tooltip
InfoButton.mp4
There was a problem hiding this comment.
I wanted to change from tooltip to popover, because it seems to me that the input management is better. I don't know how to display corner. How can I do it?
There was a problem hiding this comment.
You can't. At least not with the in-built capabilities. You would have to resort to CSS and JS to make it work which seems to me a bit overkill for something that is already there.
There was a problem hiding this comment.
How do I manage the focus on the tooltip?
There was a problem hiding this comment.
I don't know what to do. I ask for help.
There was a problem hiding this comment.
No :-(
- Not accessible (Enter, ESC, Read and navigate tooltip content)
- Unit tests fail
There was a problem hiding this comment.
sorry for my distraction
There was a problem hiding this comment.
how to test? aria-describedby is created every time.
There was a problem hiding this comment.
The IdTooltip must be a concatenation of the component ID and a fixed string like $"{Id}-tooltip". So in your tests, you can set an Id and your HTML results will be invariant.
There was a problem hiding this comment.
I fixed the test and removed AdditionalAttributes because it gives an error:
The property 'AdditionalAttributes' on component type 'Microsoft.FluentUI.AspNetCore.Components.FluentTooltip' cannot be set explicitly when also used to capture unmatched values. Unmatched values: role
tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj
Outdated
Show resolved
Hide resolved
tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj
Outdated
Show resolved
Hide resolved
|
Hi! Is the InfoButton still planned for a upcoming release? Got a use case for it, so just checking before i implement my own version :P |
@franklupo is quite busy it seems. What if you just take the code from this PR, address the remarks Denis and I posted and submit a new PR? We'll then review that one and include it in an upcoming version (all dependent on time we all need) if all is okay. Probably still less work than creating a new one yourself and as a bonus you'd be helping us and the community. Sounds good? |
Hey! I have to check whether I can invest time in that, depending on how much its needed right now. But I will keep it in mind! |
|
Hi guys, |
|
Hey, I just did some work on the unit tests that were still needed. Was there any other work still open in this PR? It's a pretty long log so I'm not sure. I tried to open up a PR but I am getting a unauthorized response, do I need to get some rights in order to open it? Storing the changes locally now :) |
|
You need to create a PR in your fork of our repo. It should work then. Once you're done, we need to go through all earlier unresolved comments and check those. |
Use Info button control to provide additional information to users.
React: https://react.fluentui.dev/?path=/docs/components-infolabel--default
Power Apps:: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-info-button