Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components): add textbox component #53

Merged
merged 45 commits into from
Aug 6, 2024
Merged

feat(components): add textbox component #53

merged 45 commits into from
Aug 6, 2024

Conversation

desmondinho
Copy link
Contributor

@desmondinho desmondinho commented Aug 6, 2024

Description

Add the textbox, a component representing an input field for entering/editing string values, and the debounced input, a base class for input components with debounced value updates, to the component library.

Closes #48

What's been done?

Added the components mentioned above with the following abilities:

TextBox: A component representing an input field for entering/editing string values

Parameter Type Description
StartContent RenderFragment? Gets or sets content to be rendered at the start of the textbox.
EndContent RenderFragment? Gets or sets content to be rendered at the end of the textbox.
Label string? Gets or sets the label for the textbox.
Placeholder string? Gets or sets the placeholder for the textbox.
Description string? Gets or sets the description for the textbox.
ErrorMessage string? Gets or sets the error message for the textbox. This message is displayed only when the textbox is invalid.
Type InputType Gets or sets the input type of the textbox. The default value is InputType.Text
Variant InputVariant Gets or sets the variant for the textbox. The default value is InputVariant.Flat
Behavior InputBehavior Gets or sets the input behavior, specifying when the textbox updates its value and triggers validation. The default value is InputBehavior.OnChange
Radius Radius? Gets or sets the border radius of the textbox.
LabelPlacement LabelPlacement Gets or sets the placement of the label for the textbox. The default value is LabelPlacement.Inside
FullWidth bool Gets or sets a value indicating whether the textbox is full-width.
Clearable bool Gets or sets a value indicating whether the textbox should have a clear button.
OnCleared EventCallback Gets or sets a callback that is fired when the value in the textbox is cleared.
Classes TextBoxSlots? Gets or sets the CSS class names for the textbox slots.

DebounceInputBase: A base class for input components with debounced value updates

Parameter Type Description
DebounceDelay int Gets or sets the delay, in milliseconds, for debouncing input events.

Introduced new enum types to configure textbox's behavior:

InputBehavior: Specifies when the input component updates its value and triggers validation.

Options Description
OnInput Updates the value and triggers validation on each input event (e.g., when the user types in the input field).
OnChange Updates the value and triggers validation on change events (e.g., when the input field loses focus or the user presses enter).

InputVariant: Specifies the different variants for an input component.

Options Description
Flat A flat variant input.
Outlined An outlined variant input.
Underlined An underlined variant input.

InputType: Specifies the different types of input elements.

Options Description
Text A text input field.
Password A password input field.
Email An email input field.
Hidden A hidden input field.
Number A number input field.
Search A search input field.
Telephone A telephone input field.
Url A URL input field.
Color A color input field.
Date A date input field.
DateTimeLocal A date-time input field (local time).
Month A month input field.
Time A time input field.
Week A week input field.

LabelPlacement: Specifies the placement options for the label of an input component.

Options Description
Inside Places the label inside the input component.
Outside Places the label outside the input component.

Checklist

  • My code follows the project's coding style and guidelines.
  • I have included inline docs for my changes, where applicable.
  • I have added, updated or removed tests according to my changes.
  • All tests are passing.
  • There's an open issue for the PR that I am making.

@desmondinho desmondinho added the 📦 Scope: Components Improvements or additions to components label Aug 6, 2024
@desmondinho desmondinho self-assigned this Aug 6, 2024
@desmondinho desmondinho linked an issue Aug 6, 2024 that may be closed by this pull request
1 task
Copy link

codecov bot commented Aug 6, 2024

Codecov Report

Attention: Patch coverage is 96.92308% with 4 lines in your changes missing coverage. Please review.

Project coverage is 98.16%. Comparing base (dd016bb) to head (6f72825).
Report is 3 commits behind head on main.

Files Patch % Lines
...umexUI/Components/Bases/LumexDebouncedInputBase.cs 94.12% 0 Missing and 2 partials ⚠️
src/LumexUI/Components/Bases/LumexInputBase.cs 85.71% 1 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #53      +/-   ##
==========================================
- Coverage   98.23%   98.16%   -0.07%     
==========================================
  Files          55       58       +3     
  Lines        1074     1198     +124     
  Branches      107      131      +24     
==========================================
+ Hits         1055     1176     +121     
- Misses         12       13       +1     
- Partials        7        9       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@desmondinho desmondinho merged commit 6b9b85c into main Aug 6, 2024
3 checks passed
@desmondinho desmondinho deleted the feat/textbox branch August 6, 2024 21:00
@desmondinho desmondinho added the ✨ Type: Enhancement New feature or request label Aug 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 Scope: Components Improvements or additions to components ✨ Type: Enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: Add textbox component
1 participant