Add FileInput and DragAndDropFileInput components with documentation#1293
Merged
Conversation
Introduced a new FileInput component to the Blazor Bootstrap library, supporting file selection via click or drag-and-drop. - Added validation for file size, count, and extensions. - Enabled multiple file selection and hint text display. - Styled the component with CSS for drop zones and file lists. - Updated navigation menus and routing constants for the new demo. - Created demo pages showcasing various FileInput features. - Added documentation detailing parameters and events.
Added `file-input.mdx` to document the Blazor Bootstrap `FileInput` component. Included metadata, parameters, events, and accessibility details. Provided usage examples for drag-and-drop, validation, multiple file selection, and styling. Linked to relevant demos for better understanding.
Refactored `FileInput` to separate drag-and-drop functionality into a new `DragAndDropFileInput` component. Introduced `FileInputBase` to centralize shared logic and properties. Simplified `FileInput.razor` to focus on basic file input handling. Added drag-and-drop-specific logic and styles to `DragAndDropFileInput.razor` and `DragAndDropFileInput.razor.css`. Enhanced accessibility with ARIA attributes and improved maintainability by separating concerns between components.
Introduced a new `DragAndDropFileInput` component to support drag-and-drop file selection and touch file-picker functionality. - Updated layouts to include `DragAndDropFileInput` in navigation. - Added routes for the new component in `DemoRouteConstants` and `DocsRouteConstants`. - Created documentation and demos for `DragAndDropFileInput`. - Refined `FileInput` to focus on standard Bootstrap file control. - Removed `BackgroundColor` from `FileInputBase` and added it to `DragAndDropFileInput`. - Updated `Index.razor` to link to new demos.
Added a "Form validation" section to `DragAndDropFileInputDocumentation.razor` and `FileInputDocumentation.razor` to demonstrate `FilesChanged` usage. Introduced a `Size` parameter in `FileInput.razor.cs` and removed it from `FileInputBase.cs` for better encapsulation. Updated `DragAndDropFileInput.razor.css` to use `::deep` for proper CSS scoping. Refined `file-input.mdx` and created `drag-and-drop-file-input.mdx` to enhance documentation with examples, parameters, and accessibility details. Added new form validation examples in `DragAndDropFileInput_Demo_03_Form_Validation.razor` and `FileInput_Demo_06_Form_Validation.razor`. Improved accessibility and clarified usage of `DragAndDropFileInput`.
Removed unused `using` directives from `DragAndDropFileInput.razor.cs`, `FileInput.razor.cs`, and `FileInputBase.cs` to improve code maintainability and reduce unnecessary dependencies.
Replaced custom classes in FileInput.razor with Bootstrap classes for `<ul>` and `<li>` elements to improve styling consistency. Removed unused CSS styles for `.bb-file-input__files` and `.bb-file-input__file` from FileInput.razor.css.
Replaced custom classes with Bootstrap classes for styling in `DragAndDropFileInput.razor` and `FileInput.razor`. Updated `ul` and `li` elements to use `list-group` classes. Replaced validation error `div` with `text-danger`. Removed unused CSS styles.
Replaced hardcoded validation messages with customizable templates and tokens. Added private constants for default message templates and a helper method `FormatValidationMessage` for dynamic message generation. Updated methods to use the new templates, improving maintainability and flexibility.
Enhanced `DragAndDropFileInput` and `FileInput` components with new properties for customizable validation messages. Updated documentation and examples to demonstrate usage of tokens like `{FileName}`, `{MaxFileSize}`, `{AllowedFileTypes}`, and `{MaxFileCount}`. Improved user feedback for file type, size, and count validations.
Added a "Drag and Drop File Input" section with a link to `@DemoRouteConstants.Demos_URL_DragAndDropFileInput`, including an icon and a "New" badge. Added a "File Input" section with a link to `@DemoRouteConstants.Demos_URL_FileInput`, also including an icon and a "New" badge.
Centralized validation styles into `blazor.bootstrap.css` using new CSS variables for outlines and messages. Removed inline styles from `.razor` files and replaced them with the new centralized classes. Updated `SortableList.razor` to use a new class `sortable-list-group-item` for better styling control. Adjusted related templates and CSS to reflect this change.
Replaced hardcoded validation color values with dynamic `rgba` values based on Bootstrap's `--bs-success-rgb`, `--bs-danger-rgb`, and the new `--bs-text-opacity` variable. This enhances consistency and supports easier theme customization.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds new demos and documentation for the
FileInputandDragAndDropFileInputcomponents, integrating them into the navigation, home page, and documentation sections of the Blazor Bootstrap demo application. The changes introduce comprehensive usage examples, validation scenarios, and form integration for both components.Navigation and Home Page Integration:
File InputandDrag and Drop File Inputnavigation items to the main, demos, and docs layouts, making these demos easily accessible from the sidebar menus.Drag and Drop File Inputas a new component on the home page with a "New" badge.Demos for File Input Components:
FileInput, covering basic usage, multiple file selection and removal, different sizes, validation, form validation, and unrestricted extension scenarios.DragAndDropFileInput, including basic usage, validation, and form validation, with code examples for each scenario.Documentation Updates:
FileInputandDragAndDropFileInput, including parameter and event tables, and cross-links to the corresponding demos.These changes provide users with clear guidance and interactive examples for using the new file input components in forms, including validation and integration with Blazor's form model.