DRAFT [dev-v5] FluentNumber

[dvoituron]

[dev-v5] FluentNumber

The FluentNumber component enables a user to enter and edit numeric values.
It supports both integer and decimal numbers, with configurable Min, Max, and Step constraints.

Value can be one of the following Numeric Types:
byte, sbyte, short, ushort, int, uint, long, ulong, float, double, decimal.

Use the StepButtons parameter to control the visibility of the up/down step buttons.
It accepts a NumberStepVisibility value:

• Visible: The step buttons are always visible.
• Hidden: The step buttons are always hidden.
• Auto (default): The step buttons are shown only when the user hovers over the input or when it has focus.

Culture and Decimal Separator

Use the Culture parameter to control how numbers are formatted and parsed, including the decimal separator, group separator, and number of decimal digits. By default, the component uses the FluentNumberCultureInfo class (dot . as decimal separator). You can pass any CultureInfo instance (e.g. fr, de, ja) to match the user's locale.

peek_1.mp4

TODO

• Unit Tests
• <input value must be InvariantCulture
• An issue when the Culture is FR and the text content is "9999" (group separator is not correctly used)

[github-actions]

Unit Tests

• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Message", attributeValue: "my-message", htmlAttribute: null, htmlValue: null, extraCondition: "Add_MessageCondition_AlwaysTrue")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Margin='10px'", html: "style='margin: 10px;*'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "LabelWidth", attributeValue: "150px", htmlAttribute: null, htmlValue: "width: 150px;", extraCondition: "Set_LabelPosition_Before")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Padding='my-padding'", html: "class='my-padding'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Autofocus", attributeValue: True, htmlAttribute: "autofocus", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "AriaLabel", attributeValue: "my-aria-label", htmlAttribute: "aria-label", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_TooltipInterface_CorrectRendering
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Name", attributeValue: "my-name", htmlAttribute: "name", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Label", attributeValue: "my-label", htmlAttribute: null, htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Padding='10px'", html: "style='padding: 10px;*'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Required", attributeValue: True, htmlAttribute: "required", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "LabelPosition", attributeValue: Before, htmlAttribute: "label-position", htmlValue: "before", extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "Disabled", attributeValue: True, htmlAttribute: "disabled", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Id='id='My-Specific-ID'", html: "id='My-Specific-ID'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "ReadOnly", attributeValue: True, htmlAttribute: "readonly", htmlValue: null, extraCondition: null)
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "LostFocus", attributeValue: "input", htmlAttribute: null, htmlValue: null, extraCondition: "Check_LostFocus")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "extra-attribute='My-Specific-Attribute'", html: "extra-attribute='My-Specific-Attribute'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Class='My-Specific-Item'", html: "class='My-Specific-Item'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Style='My-Specific-Style'", html: "style='My-Specific-Style'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "MessageState", attributeValue: Success, htmlAttribute: null, htmlValue: "color: var(--success);", extraCondition: "Add_MessageCondition_AlwaysTrue")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.ComponentBaseTests.ComponentBase_DefaultProperties(blazor: "Margin='my-margin'", html: "class='my-margin'")
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Base.InputBaseTests.InputBase_DefaultProperties(attributeName: "InputSlot", attributeValue: "input", htmlAttribute: null, htmlValue: "slot="input"", extraCondition: null)

Details on your Workflow / Core Tests page.