diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageMultipleConditions.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageMultipleConditions.razor index 27919b31d8..4fa04b3004 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageMultipleConditions.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/Examples/FieldMessageMultipleConditions.razor @@ -1,5 +1,5 @@  + diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputTypes.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputTypes.razor new file mode 100644 index 0000000000..834eb7b337 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputTypes.razor @@ -0,0 +1,17 @@ + + + + + + + + + + + +Value = @Value + +@code +{ + string Value = ""; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md index 4b7c0e715d..765a86f989 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md +++ b/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 }} diff --git a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor index 75f4761fa6..844fa02616 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor @@ -17,7 +17,6 @@ - /// Gets or sets the text filed type. See + /// Gets or sets the text input type. See + /// This relies on browser support for different input types and can therefore vary between browsers. /// [Parameter] - public TextInputType? TextFieldType { get; set; } + public TextInputType? TextInputType { get; set; } /// /// Gets or sets the size of the input. See diff --git a/src/Core/Enums/TextInputType.cs b/src/Core/Enums/TextInputType.cs index 26751f7131..f4a1420f70 100644 --- a/src/Core/Enums/TextInputType.cs +++ b/src/Core/Enums/TextInputType.cs @@ -39,5 +39,23 @@ public enum TextInputType /// A text field that is used for URL input. /// [Description("url")] - Url + Url, + + /// + /// A text field that is used for color input (hexadecimal color value). + /// + [Description("color")] + Color, + + /// + /// A text field that is used to search for a value. (accessibility) + /// + [Description("search")] + Search, + + /// + /// A text field that is used for number input. + /// + [Description("number")] + Number, } diff --git a/tests/Core/Components/TextInput/FluentTextInputTests.razor b/tests/Core/Components/TextInput/FluentTextInputTests.razor index 588478885d..a478da0a3f 100644 --- a/tests/Core/Components/TextInput/FluentTextInputTests.razor +++ b/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(@); + var cut = Render(@); // Assert cut.Find("fluent-text-input") @@ -92,7 +95,7 @@ public void FluentInputText_Size(TextInputSize? size) { // Arrange && Act - + var cut = Render(@); // Assert