Add Unit Tests and rename enum LabelPosition and MessageState

microsoft · Feb 4, 2025 · 74553b2 · 74553b2
1 parent 285761f
commit 74553b2
Show file tree

Hide file tree

Showing 20 changed files with 244 additions and 52 deletions.
diff --git a/...ples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldDefault.razor b/...ples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldDefault.razor
@@ -1,4 +1,4 @@
 <FluentTextInput Label="Example field"
-                 MessageState="FieldMessageState.Success"
+                 MessageState="MessageState.Success"
                  Message="This is a success message."
                  MessageCondition="@FluentFieldCondition.Always" />
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldExtra.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldExtra.razor
@@ -7,7 +7,7 @@
     </FluentField>
 
     <FluentField Label="Label before"
-                 LabelPosition="@FieldLabelPosition.Before"
+                 LabelPosition="@LabelPosition.Before"
                  LabelWidth="150px"
                  ForId="field-22"
                  Required="true"
@@ -17,7 +17,7 @@
     </FluentField>
 
     <FluentField Label="Other label before"
-                 LabelPosition="@FieldLabelPosition.Before"
+                 LabelPosition="@LabelPosition.Before"
                  LabelWidth="150px"
                  ForId="field-23"
                  Required="true"
@@ -27,7 +27,7 @@
     </FluentField>
 
     <FluentField Label="Label after"
-                 LabelPosition="@FieldLabelPosition.After"
+                 LabelPosition="@LabelPosition.After"
                  ForId="field-24"
                  Message="This is a warning message"
                  MessageIcon="@FluentStatus.WarningIcon">
@@ -53,22 +53,22 @@
         </select>
     </FluentField>
 
-    <FluentTextInput Label="My label" MessageState="@FieldMessageState.Error" MessageCondition="@(i => true)" />
+    <FluentTextInput Label="My label" MessageState="@MessageState.Error" MessageCondition="@(i => true)" />
 
     <FluentTextInput Label="My label 4"
                      @bind-Value="@Value4"
                      Immediate="true"
-                     MessageCondition="@(i => i.When(() => Value4.Length > 7).Display(FieldMessageState.Warning)
+                     MessageCondition="@(i => i.When(() => Value4.Length > 7).Display(MessageState.Warning)
                                                .When(() => Value4.Length > 5).Display("More than 5", new Icons.Regular.Size16.Image())
-                                               .When(() => Value4.Length > 3).Display("More than 3", FieldMessageState.Error)
-                                               .When(() => Value4.Length > 1).Display("More than 1", FieldMessageState.Success)
+                                               .When(() => Value4.Length > 3).Display("More than 3", MessageState.Error)
+                                               .When(() => Value4.Length > 1).Display("More than 1", MessageState.Success)
                                                .Build())" />
 
     <FluentTextInput id="myText" Label="@LabelSample" Required="true" Margin="30px" MessageCondition="DisplayMessage" @bind-Value="@Value2" Immediate="true" />
     <FluentButton OnClick="@(e => LabelSample = LabelSample + "x")">Click</FluentButton>
 
 
-    <FluentTextInput id="myText2" Label="@LabelSample" LabelPosition="FieldLabelPosition.Before" Required="true" Margin="30px" @bind-Value="@Value3" Immediate="true" />
+    <FluentTextInput id="myText2" Label="@LabelSample" LabelPosition="LabelPosition.Before" Required="true" Margin="30px" @bind-Value="@Value3" Immediate="true" />
 
 </FluentStack>
 
@@ -91,7 +91,7 @@
         if (Value2.Length == 0)
         {
             input.Message = "My custom required message";
-            input.MessageState = FieldMessageState.Error;
+            input.MessageState = MessageState.Error;
             return true;
         }
 
@@ -104,7 +104,7 @@
 
         if (Value2.Length > 3)
         {
-            input.MessageState = FieldMessageState.Warning;
+            input.MessageState = MessageState.Warning;
             return true;
         }
 

diff --git a/...Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldLabelExample.razor b/...Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldLabelExample.razor
@@ -21,10 +21,10 @@
 
 @code
 {
-    private FieldLabelPosition SelectedPosition;
+    private LabelPosition SelectedPosition;
 
-    public static IEnumerable<FieldLabelPosition> GetLabelPositions()
+    public static IEnumerable<LabelPosition> GetLabelPositions()
     {
-        return Enum.GetValues(typeof(FieldLabelPosition)).Cast<FieldLabelPosition>();
+        return Enum.GetValues(typeof(LabelPosition)).Cast<LabelPosition>();
     }
 }
diff --git a/.../FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageCondition.razor b/.../FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageCondition.razor
@@ -1,10 +1,10 @@
 <FluentTextInput Label="Example field"
                  @bind-Value="@MyValue"
                  Immediate="true"
-                 MessageCondition="@(i => i.When(() => MyValue.Length <= 1).Display("Less than 1", FieldMessageState.Success)
-                                           .When(() => MyValue.Length <= 3).Display("Less than 3", FieldMessageState.Error)
+                 MessageCondition="@(i => i.When(() => MyValue.Length <= 1).Display("Less than 1", MessageState.Success)
+                                           .When(() => MyValue.Length <= 3).Display("Less than 3", MessageState.Error)
                                            .When(() => MyValue.Length <= 5).Display("Less than 5", new Icons.Regular.Size16.Image())
-                                           .When(() => true).Display(FieldMessageState.Warning)
+                                           .When(() => true).Display(MessageState.Warning)
                                            .Build())" />
 
 @code

diff --git a/...emo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldStatesExample.razor b/...emo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldStatesExample.razor
@@ -1,15 +1,15 @@
 <FluentTextInput Label="Error state"
-                 MessageState="@FieldMessageState.Error"
+                 MessageState="@MessageState.Error"
                  Message="This is an error message."
                  MessageCondition="@FluentFieldCondition.Always" />
 
 <FluentTextInput Label="Warning state"
-                 MessageState="@FieldMessageState.Warning"
+                 MessageState="@MessageState.Warning"
                  Message="This is a warning message."
                  MessageCondition="@FluentFieldCondition.Always" />
 
 <FluentTextInput Label="Success state"
-                 MessageState="@FieldMessageState.Success"
+                 MessageState="@MessageState.Success"
                  Message="This is a success message."
                  MessageCondition="@FluentFieldCondition.Always" />
 

diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md
@@ -95,13 +95,13 @@ the associated `Display` action
 
 ```csharp
 field => field.When(() => MyValue.Length <= 1)
-                   .Display("Less than 1", FieldMessageState.Success)
+                   .Display("Less than 1", MessageState.Success)
               .When(() => MyValue.Length <= 3)
-                   .Display("Less than 3", FieldMessageState.Error)
+                   .Display("Less than 3", MessageState.Error)
               .When(() => MyValue.Length <= 5)
                    .Display("Less than 5", new Icons.Regular.Size16.Image())
               .When(() => true)
-                   .Display(FieldMessageState.Warning)
+                   .Display(MessageState.Warning)
               .Build())
 ```
 

diff --git a/src/Core/Components/Base/FluentInputBase.cs b/src/Core/Components/Base/FluentInputBase.cs
@@ -95,7 +95,7 @@ protected FluentInputBase()
 
     /// <inheritdoc />
     [Parameter]
-    public virtual FieldLabelPosition? LabelPosition { get; set; }
+    public virtual LabelPosition? LabelPosition { get; set; }
 
     /// <inheritdoc />
     [Parameter]
@@ -123,7 +123,7 @@ protected FluentInputBase()
 
     /// <inheritdoc />
     [Parameter]
-    public virtual FieldMessageState? MessageState { get; set; }
+    public virtual MessageState? MessageState { get; set; }
 
     #endregion
 

diff --git a/src/Core/Components/Field/Condition/FluentFieldConditionItem.cs b/src/Core/Components/Field/Condition/FluentFieldConditionItem.cs
@@ -10,7 +10,7 @@ public class FluentFieldConditionItem
     internal FluentFieldCondition Owner;
     internal Func<bool> Condition;
     internal string? Message;
-    internal FieldMessageState? State;
+    internal MessageState? State;
     internal Icon? Icon;
 
     /// <summary />
@@ -27,19 +27,19 @@ public FluentFieldCondition Display(string message, Icon? icon = null)
     }
 
     /// <summary />
-    public FluentFieldCondition Display(FieldMessageState state)
+    public FluentFieldCondition Display(MessageState state)
     {
         return InternalDisplay(message: null, state, icon: null);
     }
 
     /// <summary />
-    public FluentFieldCondition Display(string message, FieldMessageState state, Icon? icon = null)
+    public FluentFieldCondition Display(string message, MessageState state, Icon? icon = null)
     {
         return InternalDisplay(message, state, icon);
     }
 
     /// <summary />
-    private FluentFieldCondition InternalDisplay(string? message, FieldMessageState? state, Icon? icon)
+    private FluentFieldCondition InternalDisplay(string? message, MessageState? state, Icon? icon)
     {
         Message = message;
         State = state;

diff --git a/src/Core/Components/Field/FluentField.razor.cs b/src/Core/Components/Field/FluentField.razor.cs
@@ -27,7 +27,7 @@ public partial class FluentField : FluentComponentBase, IFluentField
         .Build();
 
     private string? LabelStyle => new StyleBuilder()
-        .AddStyle("width", Parameters.LabelWidth, when: () => !string.IsNullOrEmpty(Parameters.LabelWidth) && Parameters.LabelPosition != FieldLabelPosition.Above)
+        .AddStyle("width", Parameters.LabelWidth, when: () => !string.IsNullOrEmpty(Parameters.LabelWidth) && Parameters.LabelPosition != Components.LabelPosition.Above)
         .Build();
 
     /// <summary>
@@ -59,7 +59,7 @@ public partial class FluentField : FluentComponentBase, IFluentField
 
     /// <see cref="IFluentField.LabelPosition"/>"
     [Parameter]
-    public FieldLabelPosition? LabelPosition { get; set; }
+    public LabelPosition? LabelPosition { get; set; }
 
     /// <see cref="IFluentField.LabelWidth"/>"
     [Parameter]
@@ -97,7 +97,7 @@ public partial class FluentField : FluentComponentBase, IFluentField
 
     /// <see cref="IFluentField.MessageIcon"/>"
     [Parameter]
-    public FieldMessageState? MessageState { get; set; }
+    public MessageState? MessageState { get; set; }
 
     private FluentFieldParameterSelector Parameters => new(this, Localizer);
 

diff --git a/src/Core/Components/Field/FluentFieldParameterSelector.cs b/src/Core/Components/Field/FluentFieldParameterSelector.cs
@@ -42,9 +42,9 @@ public RenderFragment? LabelTemplate
         set => throw new NotSupportedException();
     }
 
-    public FieldLabelPosition? LabelPosition
+    public LabelPosition? LabelPosition
     {
-        get => _component.LabelPosition ?? _component.InputComponent?.LabelPosition ?? FieldLabelPosition.Above;
+        get => _component.LabelPosition ?? _component.InputComponent?.LabelPosition ?? Components.LabelPosition.Above;
         set => throw new NotSupportedException();
     }
 
@@ -89,7 +89,7 @@ public Func<IFluentField, bool>? MessageCondition
         get => _component.MessageCondition ?? _component.InputComponent?.MessageCondition ?? (field => true);
         set => throw new NotSupportedException();
     }
-    public FieldMessageState? MessageState
+    public MessageState? MessageState
     {
         get => _component.MessageState ?? _component.InputComponent?.MessageState;
         set => throw new NotSupportedException();
@@ -99,9 +99,9 @@ public FieldMessageState? MessageState
     {
         return MessageState switch
         {
-            FieldMessageState.Success => FluentStatus.SuccessIcon,
-            FieldMessageState.Error => FluentStatus.ErrorIcon,
-            FieldMessageState.Warning => FluentStatus.WarningIcon,
+            Components.MessageState.Success => FluentStatus.SuccessIcon,
+            Components.MessageState.Error => FluentStatus.ErrorIcon,
+            Components.MessageState.Warning => FluentStatus.WarningIcon,
             _ => null
         };
     }
@@ -110,9 +110,9 @@ public FieldMessageState? MessageState
     {
         return MessageState switch
         {
-            FieldMessageState.Success => _localizer[LanguageResource.Field_SuccessMessage],
-            FieldMessageState.Error => _localizer[LanguageResource.Field_ErrorMessage],
-            FieldMessageState.Warning => _localizer[LanguageResource.Field_WarningMessage],
+            Components.MessageState.Success => _localizer[LanguageResource.Field_SuccessMessage],
+            Components.MessageState.Error => _localizer[LanguageResource.Field_ErrorMessage],
+            Components.MessageState.Warning => _localizer[LanguageResource.Field_WarningMessage],
             _ => null
         };
     }
@@ -121,7 +121,7 @@ public FieldMessageState? MessageState
     {
         return MessageState switch
         {
-            FieldMessageState.Success => builder =>
+            Components.MessageState.Success => builder =>
             {
                 builder.OpenComponent(0, typeof(FluentText));
                 builder.AddAttribute(1, "ChildContent", (RenderFragment)(contentBuilder =>
@@ -132,7 +132,7 @@ public FieldMessageState? MessageState
                 builder.CloseComponent();
             }
             ,
-            FieldMessageState.Error => builder =>
+            Components.MessageState.Error => builder =>
             {
                 builder.OpenComponent(0, typeof(FluentText));
                 builder.AddAttribute(1, "ChildContent", (RenderFragment)(contentBuilder =>
@@ -143,7 +143,7 @@ public FieldMessageState? MessageState
                 builder.CloseComponent();
             }
             ,
-            FieldMessageState.Warning => builder =>
+            Components.MessageState.Warning => builder =>
             {
                 builder.OpenComponent(0, typeof(FluentText));
                 builder.AddAttribute(1, "ChildContent", (RenderFragment)(contentBuilder =>

diff --git a/src/Core/Components/Field/IFluentField.cs b/src/Core/Components/Field/IFluentField.cs
@@ -32,7 +32,7 @@ public interface IFluentField
     /// <summary>
     /// Gets or sets the position of the label relative to the input.
     /// </summary>
-    FieldLabelPosition? LabelPosition { get; set; }
+    LabelPosition? LabelPosition { get; set; }
 
     /// <summary>
     /// Gets or sets the width of the label.
@@ -74,5 +74,5 @@ public interface IFluentField
     /// Gets or sets a value that affects the content
     /// of the <see cref="Message"/> and the <see cref="MessageIcon" />.
     /// </summary>
-    FieldMessageState? MessageState { get; set; }
+    MessageState? MessageState { get; set; }
 }
diff --git a/src/Core/Enums/FieldLabelPosition.cs → src/Core/Enums/LabelPosition.cs b/src/Core/Enums/FieldLabelPosition.cs → src/Core/Enums/LabelPosition.cs
@@ -9,7 +9,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// <summary>
 /// Represents the position of the label relative to the input.
 /// </summary>
-public enum FieldLabelPosition
+public enum LabelPosition
 {
     /// <summary>
     /// The label is positioned above the input.

diff --git a/src/Core/Enums/FieldMessageState.cs → src/Core/Enums/MessageState.cs b/src/Core/Enums/FieldMessageState.cs → src/Core/Enums/MessageState.cs
@@ -7,7 +7,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// <summary>
 /// Represents the type of content to display in the message (and the associated icon).
 /// </summary>
-public enum FieldMessageState
+public enum MessageState
 {
     /// <summary>
     /// Display a red error message text and red error icon.

diff --git a/tests/Core/Components/Base/InputBaseTests.cs b/tests/Core/Components/Base/InputBaseTests.cs
@@ -67,9 +67,9 @@ public InputBaseTests(ITestOutputHelper testOutputHelper)
     [InlineData("Required", true, "required")]
     [InlineData("Label", "my-label")]
     [InlineData("LabelWidth", "150px", null, "width: 150px;", "Set_LabelPosition_Before")]
-    [InlineData("LabelPosition", FieldLabelPosition.Before, "label-position", "before")]
+    [InlineData("LabelPosition", LabelPosition.Before, "label-position", "before")]
     [InlineData("Message", "my-message", null, null, "Add_MessageCondition_AlwaysTrue")]
-    [InlineData("MessageState", FieldMessageState.Success, null, "color: var(--success);", "Add_MessageCondition_AlwaysTrue")]
+    [InlineData("MessageState", MessageState.Success, null, "color: var(--success);", "Add_MessageCondition_AlwaysTrue")]
     [InlineData("InputSlot", "input", null, "slot=\"input\"")]
     public void InputBase_DefaultProperties(string attributeName, object attributeValue, string? htmlAttribute = null, object? htmlValue = null, string? extraCondition = null)
     {
@@ -103,7 +103,7 @@ public void InputBase_DefaultProperties(string attributeName, object attributeVa
                 {
                     case "Set_LabelPosition_Before":
                         attributes.Add("Label", "my-label");
-                        attributes.Add("LabelPosition", FieldLabelPosition.Before);
+                        attributes.Add("LabelPosition", LabelPosition.Before);
                         break;
 
                     case "Add_MessageCondition_AlwaysTrue":

diff --git a/tests/Core/Components/Field/FluentFieldTests.FluentField_DefaultTemplate.verified.razor.html b/tests/Core/Components/Field/FluentFieldTests.FluentField_DefaultTemplate.verified.razor.html
@@ -0,0 +1,14 @@
+
+<fluent-field label-position="above" class="my-3">
+  <fluent-label slot="label" for="xxx">
+    My
+    <b>label</b>
+  </fluent-label>
+  <div slot="input" id="xxx">
+    Field content
+  </div>
+  <fluent-text as="span" size="200" slot="message">
+    My
+    <i>message</i>
+  </fluent-text>
+</fluent-field>
diff --git a/tests/Core/Components/Field/FluentFieldTests.FluentField_MessageIcon.verified.razor.html b/tests/Core/Components/Field/FluentFieldTests.FluentField_MessageIcon.verified.razor.html
@@ -0,0 +1,8 @@
+
+<fluent-field label-position="above" class="my-3">
+  <div slot="input" id="xxx">Field content</div>
+  <fluent-text as="span" size="200" slot="message">
+    <svg style="margin: 0px 4px 0px 0px; width: 12px;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="x" blazor:onclick="x">
+      <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+    </svg>My message</fluent-text>
+</fluent-field>
diff --git a/...Core/Components/Field/FluentFieldTests.FluentField_MessageState-Error.verified.razor.html b/...Core/Components/Field/FluentFieldTests.FluentField_MessageState-Error.verified.razor.html
@@ -0,0 +1,10 @@
+
+<fluent-field label-position="above" class="my-3">
+  <div slot="input" id="xxx">Field content</div>
+  <fluent-text as="span" size="200" slot="message">
+    <svg style="margin: 0px 4px 0px 0px; width: 12px; fill: var(--error);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="x" blazor:onclick="x">
+      <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z"></path>
+    </svg>
+    <fluent-text style="color: var(--error);" as="span">An error occured</fluent-text>
+  </fluent-text>
+</fluent-field>
diff --git a/...re/Components/Field/FluentFieldTests.FluentField_MessageState-Success.verified.razor.html b/...re/Components/Field/FluentFieldTests.FluentField_MessageState-Success.verified.razor.html
@@ -0,0 +1,10 @@
+
+<fluent-field label-position="above" class="my-3">
+  <div slot="input" id="xxx">Field content</div>
+  <fluent-text as="span" size="200" slot="message">
+    <svg style="margin: 0px 4px 0px 0px; width: 12px; fill: var(--success);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="x" blazor:onclick="x">
+      <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z"></path>
+    </svg>
+    <fluent-text style="color: var(--success);" as="span">Valid data</fluent-text>
+  </fluent-text>
+</fluent-field>