Extend input with file type & update icons

[skrobek]

PR Type

enhancement

---

Description

• Enhanced the Input component to support file input type with appropriate styling.
• Added new CSS classes for file input elements to improve styling and user interaction.
• Introduced new icons to the icon set for better UI representation.
• Updated the package version to 0.11.6 to reflect these changes.

---

Changes walkthrough 📝

	Relevant files
Enhancement	style.css Add and enhance styles for file input elements                      style.css Added styles for .file-input class including dimensions, padding, and border properties. Introduced styles for .file-input::file-selector-button with transitions and animations. Added styles for .file-input-bordered, .file-input-primary, and .file-input-disabled states. Enhanced focus and disabled states for file input elements. +112/-0  types.ts Add new icons to the ICONS export                                                src/components/ui/icon/types.ts Added new icons: RiUploadLine, RiDownloadLine, RiToolsLine, and RiFileLine. +8/-0      input.tsx Extend Input component with file type support                        src/components/ui/input/input.tsx Added type prop to Input component with default value 'text'. Updated input styles to conditionally apply classes based on type. Enhanced file input styling with new classes. +19/-3
Configuration changes	package.json Bump package version to 0.11.6                                                      package.json Updated package version from 0.11.5 to 0.11.6. +1/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Redundant Code There are multiple instances of redundant line-height and transition-property declarations in the .file-input::file-selector-button class. This could lead to confusion and maintenance issues. Consider removing the redundant declarations to keep the CSS clean and maintainable. Prop Types Handling The Input component's props are not fully validated for types, especially for the new type prop which defaults to 'text'. This could lead to potential bugs if incorrect types are passed. Consider adding prop type validation or TypeScript interfaces to ensure correct usage.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Correctly handle the type attribute to ensure proper styling and functionality across different input types Ensure that the type attribute is handled correctly for all input types to avoid rendering issues or unexpected behavior. src/components/ui/input/input.tsx [57-68] type={type} -type !== 'file' && 'px-3.5 py-2.5', -type === 'file' && 'file-input file-input-bordered file-input-primary', +className={cn( + type !== 'file' ? 'px-3.5 py-2.5' : 'file-input file-input-bordered file-input-primary', + 'h-[38px] min-h-[38px] rounded-lg gap-2 w-full border-box', + 'text-sm font-normal', + 'shadow border border-slate-300 text-black placeholder:text-slate-400', + 'focus:outline-0 focus:border focus:border-blue-500', + 'disabled:bg-slate-50 disabled:text-slate-300', + prefixIcon && 'pl-8', + suffixIcon && 'pr-8', + hasError && 'border-red-500 focus:border-red-500', + className +)} Suggestion importance[1-10]: 9 Why: The suggestion correctly addresses the handling of the type attribute to ensure that inputs are styled appropriately based on their type, which is crucial for UI consistency and functionality.	9
Maintainability	Consolidate duplicate CSS properties to improve code maintainability Consolidate duplicate transition-property declarations into a single property to clean up the code and avoid potential conflicts. style.css [1228-1230] -transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; -transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; Suggestion importance[1-10]: 8 Why: Consolidating the transition-property declarations into a single, comprehensive declaration avoids redundancy and potential conflicts, enhancing maintainability.	8
Enhancement	Remove duplicate CSS properties to enhance code clarity and consistency Remove duplicate line-height properties to avoid confusion and ensure consistent rendering across browsers. style.css [1199-1200] -line-height: 2; line-height: 1.5rem; Suggestion importance[1-10]: 7 Why: Removing duplicate line-height properties improves the clarity and consistency of the CSS, ensuring more predictable rendering.	7
	Standardize transition timing functions for consistent animation behavior Ensure that the transition-timing-function property is consistently set to avoid visual inconsistencies during transitions. style.css [1231-1232] transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -transition-timing-function: cubic-bezier(0, 0, 0.2, 1); Suggestion importance[1-10]: 6 Why: Standardizing the cubic-bezier values for transition-timing-function ensures consistent animation effects across the application.	6