Et 683 extend modal and input components

[sharlotta93]

User description

• extend modal component to allow full screen
• extend input component to allow override of label className

---

PR Type

Enhancement

---

Description

• Extended the Input component by adding a labelClassName prop, allowing users to override the label's className.
• Enhanced the Modal component by introducing a fullScreen prop, enabling full-screen mode with dynamic style adjustments.
• Updated the package version to 0.12.19 in package.json.

---

Changes walkthrough 📝

	Relevant files
Enhancement	input.tsx Add `labelClassName` prop to Input component                          src/components/ui/form/input/input.tsx Added a new labelClassName prop to the Input component to allow overriding the label's className. Updated the label rendering logic to include the new labelClassName prop. +3/-1      Modal.tsx Add `fullScreen` prop to Modal component                                  src/components/ui/modal/Modal.tsx Added a new fullScreen prop to the Modal component to enable full-screen mode. Updated modal rendering logic to adjust styles dynamically based on the fullScreen prop. +25/-3
Configuration changes	package.json Bump package version to 0.12.19                                                    package.json Updated the package version from 0.12.18 to 0.12.19. +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: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Smell The labelClassName prop is added to allow overriding the label's className, but the default className label is hardcoded. Consider making this more flexible or documenting the expected usage to avoid potential conflicts. Possible Bug The fullScreen prop dynamically adjusts styles, but the hardcoded dimensions (w-[1024px] h-[500px] and h-[600px]) might conflict with the full-screen behavior. Ensure these styles are tested across different screen sizes.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Security	Validate or sanitize dynamic class names to prevent potential security risks Ensure that the labelClassName is properly sanitized or validated to prevent potential injection of malicious class names. src/components/ui/form/input/input.tsx [52] -<div className={cn('label', labelClassName)}> +<div className={cn('label', sanitizeClassName(labelClassName))}> Suggestion importance[1-10]: 9 Why: The suggestion addresses a potential security risk by ensuring that dynamic class names are sanitized, which is crucial to prevent injection attacks. This is a high-impact improvement for the safety and robustness of the code.	9
General	Validate the fullScreen prop to prevent layout issues from invalid values Add a fallback or validation for the fullScreen prop to ensure it does not cause unintended layout issues if set incorrectly. src/components/ui/modal/Modal.tsx [45] -'w-full h-full': fullScreen +'w-full h-full': typeof fullScreen === 'boolean' && fullScreen Suggestion importance[1-10]: 7 Why: Adding validation for the fullScreen prop ensures that only valid boolean values are used, preventing potential layout issues. This is a useful enhancement for code reliability and maintainability.	7

[skrobek]

Thanks for changes!