[dev-v5] Enhance TextInput component

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageMultipleConditions.razor

@@ -1,5 +1,5 @@
 <FluentTextInput Label="Example field"
-                 TextFieldType="TextInputType.Password"
+                 TextInputType="TextInputType.Password"
                  @bind-Value="@MyValue"
                  Immediate="true"
                  MessageCondition="@(i => i.When(() => MyValue.Length < 8)

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputPrefixSuffix.razor

@@ -8,7 +8,7 @@
         </EndTemplate>
     </FluentTextInput>
 
-    <FluentTextInput Label="Email" TextFieldType="TextInputType.Email" @bind-Value="@Sometext2" Style="width: 300px;">
+    <FluentTextInput Label="Email" TextInputType="TextInputType.Email" @bind-Value="@Sometext2" Style="width: 300px;">
         <StartTemplate>
             <FluentIcon Value="@(new Icons.Regular.Size20.Mail())" />
         </StartTemplate>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputTypes.razor

@@ -0,0 +1,17 @@
+<FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+	<FluentTextInput Label="Text" Placeholder="Text" @bind-Value="@Value" TextInputType="TextInputType.Text" />
+	<FluentTextInput Label="Email" Placeholder="Email" @bind-Value="@Value" TextInputType="TextInputType.Email" />
+	<FluentTextInput Label="Password" Placeholder="Password" @bind-Value="@Value" TextInputType="TextInputType.Password" />
+	<FluentTextInput Label="Telephone" Placeholder="Telephone" @bind-Value="@Value" TextInputType="TextInputType.Telephone" />
+	<FluentTextInput Label="Url" Placeholder="Url" @bind-Value="@Value" TextInputType="TextInputType.Url" />
+	<FluentTextInput Label="Color" Width="50px" Placeholder="Color" @bind-Value="@Value" TextInputType="TextInputType.Color" />
+	<FluentTextInput Label="Search" Placeholder="Search" @bind-Value="@Value" TextInputType="TextInputType.Search" />
+	<FluentTextInput Label="Number" Placeholder="Number" @bind-Value="@Value" TextInputType="TextInputType.Number" />
+</FluentStack>
+
+<FluentLabel>Value = @Value</FluentLabel>
+
+@code
+{
+	string Value = "";
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md

@@ -112,6 +112,13 @@ You can also use these extra parameters to customize the masking behavior:
 All these parameters must be defined when the component is first rendered.
 You cannot modify them dynamically.
 
+## TextInput types
+
+You can set the `TextInputType` property to define the type of the text input. This relies on browser supplied support for the different types and can therefore vary between browsers.
+
+
+{{ TextInputTypes }}
+
 ## API FluentTextInput
 
 {{ API Type=FluentTextInput }}

src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor

@@ -17,7 +17,6 @@
             <FluentTextInput Id="width"
                              @bind-Value="@_width"
                              Style="width: 100%;"
-                             TextFieldType="TextInputType.Text"
                              InputMode="TextInputMode.Numeric"
                              Immediate="true"
                              ImmediateDelay="200"

src/Core/Components/TextInput/FluentTextInput.razor

@@ -23,7 +23,7 @@
                        slot="@FluentSlot.FieldInput"
                        spellcheck="@Spellcheck"
                        control-size="@Size.ToAttributeValue()"
-                       type="@TextFieldType.ToAttributeValue()"
+                       type="@TextInputType.ToAttributeValue()"
                        value="@CurrentValueAsString"
                        @onfocusout="@FocusOutHandlerAsync"
                        @onchange="@ChangeHandlerAsync"

src/Core/Components/TextInput/FluentTextInput.razor.cs

@@ -129,10 +129,11 @@ public FluentTextInput(LibraryConfiguration configuration) : base(configuration)
     public string? Width { get; set; }
 
     /// <summary>
-    /// Gets or sets the text filed type. See <see cref="Components.TextInputType"/>
+    /// Gets or sets the text input type. See <see cref="Components.TextInputType"/>
+    /// This relies on browser support for different input types and can therefore vary between browsers.
     /// </summary>
     [Parameter]
-    public TextInputType? TextFieldType { get; set; }
+    public TextInputType? TextInputType { get; set; }
 
     /// <summary>
     /// Gets or sets the size of the input. See <see cref="Components.TextInputSize"/>

src/Core/Enums/TextInputType.cs

@@ -39,5 +39,23 @@ public enum TextInputType
     /// A text field that is used for URL input.
     /// </summary>
     [Description("url")]
-    Url
+    Url,
+
+    /// <summary>
+    /// A text field that is used for color input (hexadecimal color value).
+    /// </summary>
+    [Description("color")]
+    Color,
+
+    /// <summary>
+    /// A text field that is used to search for a value. (accessibility)
+    /// </summary>
+    [Description("search")]
+    Search,
+
+    /// <summary>
+    /// A text field that is used for number input.
+    /// </summary>
+    [Description("number")]
+    Number,
 }

tests/Core/Components/TextInput/FluentTextInputTests.razor

@@ -72,11 +72,14 @@
     [InlineData(TextInputType.Password, "password")]
     [InlineData(TextInputType.Telephone, "tel")]
     [InlineData(TextInputType.Url, "url")]
-    public void FluentInputText_TextFieldType(TextInputType type, string expectedAttribute)
+	[InlineData(TextInputType.Color, "color")]
+	[InlineData(TextInputType.Search, "search")]
+	[InlineData(TextInputType.Number, "number")]
+    public void FluentInputText_TextInputType(TextInputType type, string expectedAttribute)
     {
         // Arrange && Act
         using var context = new IdentifierContext(i => "myId");
-        var cut = Render(@<FluentTextInput TextFieldType="@type" />);
+        var cut = Render(@<FluentTextInput TextInputType="@type" />);
 
         // Assert
         cut.Find("fluent-text-input")
@@ -92,7 +95,7 @@
     public void FluentInputText_Size(TextInputSize? size)
     {
         // Arrange && Act
-        
+
         var cut = Render(@<FluentTextInput Size="@size" />);
 
         // Assert