[MessageBar] Add an optional toggle for the fade in animation.

[yspanj]

Pull Request

📖 Description

Add a options to disable the animation in the MessageBar component.

👩‍💻 Reviewer Notes

📑 Test Plan

Existing message bar tests have been updated with the new animation CSS class. And a new test has been added.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

[yspanj]

@yspanj please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

[dvoituron]

Great work.

Just a quick discussion on "how the browser can detect when to apply the animation?".
In general, I prefer to use an HTML element attribute like this. I found the code cleaner and easier for future updates.
What are your thoughts?

<div class="fluent-messagebar intent-info" animation="fadein">
   ...
</div>

.fluent-messagebar[animation="fadein"] {
  animation: fadein 1.5s;
}

[yspanj]

animation

Thanks!

I agree that the HTML element attribute looks cleaner. But I think that that would resolve in a bigger change is how the components is created.

Are you thinking about implementing something like an AnimationBuilder similar to the CssBuilder? Or am I missing something that's already in the library that can be used for this?

[dvoituron]

Are you thinking about implementing something like an AnimationBuilder similar to the CssBuilder? Or am I missing something that's already in the library that can be used for this?

No, nothing exists about that. And I don't think we need to use an AnimationBuilder: FluentUI Blazor uses the WebComponents which will do this part.

A MessageBar is a component to "Communicates important information about the state of the entire application". By default, it is not necessary to display an animated message like explained in the FluentUI React components. Probably a difference between the Toast.

But we already display the MessageBar using this animation :-(
Si I think the code should be clean (using a attribute) and keeping the existing behavior (FadeIn=true like you did).

[vnbaaij]

@yspanj we are pulling this PR in now so it will be available in v4.10.1.

Please submit a follow-up PR to change the behavior to use an attribute so we can include that for a later version. Thanks!

I agree that the HTML element attribute looks cleaner. But I think that that would resolve in a bigger change is how the components is created.

Are you thinking about implementing something like an AnimationBuilder similar to the CssBuilder? Or am I missing something that's already in the library that can be used for this?

You can just set the attribute to the fadein value if the parameter is true and otherwise make it null. Empty attributes won't be rendered. Something like:

<div class="fluent-messagebar intent-info" animation="@( FadeIn ? "fadein" : null )">
   ...
</div>

As discussed

[yspanj]

@yspanj we are pulling this PR in now so it will be available in v4.10.1.

Please submit a follow-up PR to change the behavior to use an attribute so we can include that for a later version. Thanks!

I agree that the HTML element attribute looks cleaner. But I think that that would resolve in a bigger change is how the components is created.
Are you thinking about implementing something like an AnimationBuilder similar to the CssBuilder? Or am I missing something that's already in the library that can be used for this?

You can just set the attribute to the fadein value if the parameter is true and otherwise make it null. Empty attributes won't be rendered. Something like:

<div class="fluent-messagebar intent-info" animation="@( FadeIn ? "fadein" : null )">
   ...
</div>

Thanks.
Opened the pull request #2723 for this.