Add BitSpinButton features to BitNumberField (#9973) #10214
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update refactors the BitNumberField component and its demo to enhance configurability and styling. In the component, conditional rendering has been introduced to allow for a hidden or visible input based on a new property, while new parameters (like DecrementTitle, IncrementTitle, IsInputReadOnly, and Mode) provide additional configuration options. CSS styles have been updated with renamed and new classes. In the demos, example sections have been reorganized, legacy parameters removed, and new examples added. A related SpinButton demo now accepts a nullable Label value. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant BNF as BitNumberField
participant H as HiddenInput
participant V as VisibleInput
participant IB as IncrementButton
participant DB as DecrementButton
U->>BNF: Render component
alt HideInput enabled
BNF->>H: Render hidden input with attributes
else HideInput disabled
BNF->>V: Render visible input with focus & change events
U->>V: Focus on input
V->>BNF: Trigger input change event
end
alt Spin button mode active
U->>BNF: Click Increment
BNF->>IB: Process pointer event
U->>BNF: Click Decrement
BNF->>DB: Process pointer event
end
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor(5 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs(6 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss(9 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberFieldClassStyles.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor(8 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs(5 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.samples.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (47)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberFieldClassStyles.cs (1)
65-68: Good property rename for consistency!The change from
InputWrappertoInputContainerimproves consistency in terminology throughout the component. The documentation has been appropriately updated to reflect this change.src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss (15)
9-9: Good addition of consistent spacingAdding column gap at the component level ensures consistent spacing between elements.
20-25: Appropriate class name updateThe class has been renamed from
.bit-nfl-wrpto.bit-nfl-cntto match the property rename in the C# class. This maintains consistency between the code and styles.
49-51: Appropriate class name update in error stateUpdated the class reference from
.bit-nfl-wrpto.bit-nfl-cntin the invalid state styling.
54-56: Appropriate class name update in focused stateUpdated the class reference from
.bit-nfl-wrp::afterto.bit-nfl-cnt::afterfor the focus state styling.
68-76: Well-structured label position classesThe new classes for label positioning (
.bit-nfl-ltp,.bit-nfl-lbt) use descriptive naming and appropriate flex properties to control layout.
78-84: Well-structured label position classes for inline layoutsThe new classes for horizontal label positioning (
.bit-nfl-lst,.bit-nfl-led) use consistent naming patterns and appropriate flex properties.
110-119: Appropriate container stylingThe class renamed from
.bit-nfl-wrpto.bit-nfl-cntmaintains all necessary styling properties for the container.
144-146: Good addition of text centering classThe
.bit-nfl-cinclass for center-aligned input text supports the new layout options.
154-167: Comprehensive button stylesUpdated to include styles for spin buttons (
.bit-nfl-sbn), maintaining consistency with existing button styling while extending for new modes.
179-181: Fixed height for upper buttonSetting a specific height percentage ensures consistent button sizing in the stacked layout.
184-187: Fixed height for lower buttonSetting a specific height percentage ensures consistent button sizing in the stacked layout.
189-191: Good side button stylingThe specific width for side buttons (
.bit-nfl-sbn) ensures consistent sizing across different modes.
210-213: Good icon sizing for spin buttonsThe
.bit-nfl-sbiclass provides appropriate sizing for the spin button icons.
215-222: Appropriate class name update in pseudo-elementUpdated the class reference from
.bit-nfl-wrp::afterto.bit-nfl-cnt::afterfor the focus indicator.
252-259: Appropriate class name update in required stateUpdated the class reference from
.bit-nfl-wrp::beforeto.bit-nfl-cnt::beforefor the required indicator.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs (1)
123-126: Good enhancement for Label parameterMaking the Label parameter nullable (
string?with default valuenull) improves flexibility by allowing explicit absence of a label, rather than just an empty string.src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor (7)
41-43: Property name update and HideInput integration
- Updated style and class attributes to use
InputContainerinstead ofInputWrapper- Added conditional class for hidden input support
These changes properly reflect the updated property names and provide visual support for the hidden input mode.
59-78: Well-implemented Spread mode decrement buttonThe decrement button in Spread mode is correctly implemented with:
- Proper event handlers for pointer interactions
- Accessibility attributes (aria-label, title)
- Appropriate styling classes
- Disabled state handling
This provides a good user experience with screen reader support.
80-104: Hidden input implementationWhen HideInput is true, a hidden input is rendered with all necessary attributes and ARIA properties, maintaining form functionality while hiding the visual input element.
105-139: Visible input implementationWhen HideInput is false, a fully functional visible input is rendered with:
- Event handlers for focus, blur, key presses and value changes
- Conditional styling for different modes
- All necessary accessibility attributes
This provides a complete and accessible number input experience.
141-182: Enhanced Compact mode with accessibility improvementsAdded title attributes to buttons for tooltips, improving accessibility for users who hover over controls before interacting with them.
183-220: Well-implemented Inline modeThe new Inline mode places increment and decrement buttons side by side with:
- Proper event handlers
- Accessibility attributes
- Consistent styling classes
- Appropriate icon handling
This provides another layout option that might be preferable for certain UIs.
221-240: Well-implemented Spread mode increment buttonThe increment button in Spread mode complements the earlier decrement button, maintaining consistency in implementation and behavior.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.samples.cs (1)
1-244: Comprehensive demos showcasing BitNumberField capabilitiesThis new file provides an excellent range of examples that thoroughly demonstrate the BitNumberField component's features. The examples are well-organized, progressing from basic usage to more advanced configurations, and include all the new features like different spin button modes and the HideInput functionality.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor (6)
14-14: Added SubEnums property to DemoPage componentGood addition to display the BitLabelPosition and BitSpinButtonMode enumerations in the demo documentation.
36-42: Updated label position demonstrationsThe examples now clearly show all label position options (Top, Start, End, Bottom) with consistent naming.
61-80: Added examples for different SpinButton modesThese examples effectively demonstrate the new Mode property with various configurations (Compact, Inline, Spread) along with custom icon combinations.
143-154: Added HideInput demo sectionGood addition showing how to hide the input field while still allowing value changes through spin buttons. This clearly demonstrates the new HideInput feature.
193-222: Enhanced styling examplesThe expanded styling section provides comprehensive examples of custom styling through both direct styles and CSS classes, which is helpful for users who need to customize the component's appearance.
224-224: Updated RTL section numberingCorrectly updated the RTL section ID to maintain sequential ordering after adding new sections.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs (6)
65-71: Added DecrementTitle parameter documentationGood addition that provides tooltips for the decrement button, enhancing usability and accessibility.
80-85: Added HideInput parameter documentationClearly explains the purpose of the new HideInput property for scenarios where only the spin buttons are needed.
115-120: Added IncrementTitle parameter documentationMatches the DecrementTitle parameter for balanced functionality, providing tooltips for the increment button.
130-139: Added IsInputReadOnly parameter and updated LabelPosition documentationThe IsInputReadOnly property allows greater control over input behavior, and the LabelPosition parameter properly replaces the previous InlineLabel boolean with a more flexible enum.
159-166: Added Mode parameter documentationClearly describes the new Mode parameter for controlling spin button rendering, with a helpful link to the enum documentation.
478-478: Added hideInputValue fieldGood addition of the backing field for the HideInput example.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs (10)
18-18: Added _inputMode field with smart initializationGood implementation that sets the input mode based on the value type, improving numerical input handling on mobile devices.
Also applies to: 41-41
90-93: Added DecrementTitle parameterGood addition for improving usability with tooltip on hover for the decrement button.
100-103: Added HideInput parameterThis parameter enables more flexible UI configurations where only the spin buttons are needed.
108-108: Updated IconAriaLabel to be nullableGood change for better null handling of the aria label.
125-128: Added IncrementTitle parameterComplements the DecrementTitle parameter for consistent UX on both buttons.
130-133: Added IsInputReadOnly parameterUseful addition that allows the input to be visible but read-only, enhancing component flexibility.
135-139: Replaced InlineLabel with LabelPosition enum parameterGood enhancement that provides more flexibility for label positioning beyond just inline/not-inline.
144-144: Updated Label to be nullableImproves null handling for the label property.
165-168: Added Mode parameterImportant addition that enables different spin button rendering modes (Compact, Inline, Spread).
264-270: Updated RegisterCssClasses method for LabelPositionGood implementation that applies the appropriate CSS classes based on the LabelPosition enum value.
...it.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs
Outdated
Show resolved
Hide resolved
This closes #9973
Summary by CodeRabbit
New Features
Style & UI Improvements
Demo Enhancements