Refactoring

examples/Demo/FluentUI.Demo.Client/Documentation/Components/MessageBar/Examples/MessageBarLayouts.razor

@@ -1,27 +1,35 @@
-<FluentStack VerticalAlignment="VerticalAlignment.Bottom">
+<FluentStack>
     <FluentSelect Label="Layout"
                   Items="@(Enum.GetValues<MessageBarLayout>())"
                   @bind-Value="@Layout" />
 
     <FluentSwitch Label="Display an Action"
+                  Margin="42px 0 0 24px"
                   @bind-Value="@DisplayAction" />
 </FluentStack>
 
-<FluentMessageBar Layout="@Layout"
-                  Intent="MessageBarIntent.Success"
-                  Title="Delete operation"
-                  TimeStamp="@(DateTime.Now.AddHours(-1))"
-                  Animation="MessageBarAnimation.FadeIn">
-    <ChildContent>
-        Successfully deleted 'XYZ-blazor.pdf'
-    </ChildContent>
-    <ActionsTemplate>
-        @if (DisplayAction)
-        {
+@if (DisplayAction)
+{
+    <FluentMessageBar Layout="@Layout"
+                      Intent="MessageBarIntent.Success"
+                      Title="Delete operation">
+        <ChildContent>
+            Successfully deleted 'XYZ-blazor.pdf'
+        </ChildContent>
+        <ActionsTemplate>
             <FluentButton Size="ButtonSize.Small">Go to the resource</FluentButton>
-        }
-    </ActionsTemplate>
-</FluentMessageBar>
+        </ActionsTemplate>
+    </FluentMessageBar>
+}
+else
+{
+    <FluentMessageBar Layout="@Layout"
+                      Intent="MessageBarIntent.Success"
+                      Title="Delete operation"
+                      TimeStamp="@(DateTime.Now.AddHours(-1))">
+        Successfully deleted 'XYZ-blazor.pdf'
+    </FluentMessageBar>
+}
 
 @code
 {

examples/Demo/FluentUI.Demo.Client/Documentation/Components/MessageBar/FluentMessageBar.md

@@ -34,6 +34,10 @@ The `Layout` parameter allows you to choose the position of the actions:
   - **MultiLine**: On a new line, allowing for more space for the message content.
   - **Notification**: The title, message, and actions are displayed on separate lines, providing a clear and structured layout.
 
+When no action is defined, you can set the `TimeStamp` parameter to display the time when the message was created.
+This parameter is ignored if at least one action is defined.
+If you want to display an Action and a TimeStamp, you can use the `ActionsTemplate` parameter and customize the content.
+
 {{ MessageBarLayouts }}
 
 ## Message Service
@@ -45,7 +49,6 @@ TODO in the next PR.
 > This component needs to be added to the layout of your application.
 > See the [Installation page](/installation) for more information.
 
-
 ## API FluentMessageBar
 
 {{ API Type=FluentMessageBar }}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentMessageBar.md

@@ -15,4 +15,4 @@ hidden: true
 
   The `Intent.Custom` property has been removed. Don't use the `Intent` property and set `Icon` and `ChildContent` instead to customize the message bar.
 
-  The `Type` property has been removed. Use the `Layout` property instead to choose the position of the actions.
+  The `Type` property has been removed. Use the `Layout` property instead to choose the position of the actions and to display the `TimeStamp`.