feat(TextInput): adding size prop

[aversini]

Summary by CodeRabbit

• New Features

  • Introduced a new size property for the TextInput component, allowing users to select from multiple size options: "xs," "sm," "md," "lg," and "xl."
  • Default size is set to "md" if not specified.

• Bug Fixes

  • Enhanced rendering tests for the TextInput component to ensure proper styling based on selected size.

• Documentation

  • Updated documentation to reflect the new size property and its options.

[coderabbitai]

Walkthrough

The pull request introduces a new size property to the TextInput component, allowing it to accept size variants: "xs", "sm", "md", "lg", and "xl", with a default value of "md". This change is reflected across multiple files, including story definitions, component props, type definitions, and utility functions. Additionally, a new test suite is added to verify the rendering of the TextInput component based on the specified size.

Changes

Files	Change Summary
packages/documentation/src/Form/TextInput.stories.tsx	Added size property with default value "md" and updated argTypes to include size options with control type set to radio.
packages/ui-textinput/src/components/TextInput/TextInput.tsx	Introduced size as a default parameter in the TextInput component's props, ensuring it is utilized in the component's rendering process.
packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts	Added new type Size and included it as an optional property in CommonTextInputProps. Updated interfaces to manage size exclusively within CommonTextInputProps, omitting it from React.InputHTMLAttributes<HTMLInputElement>.
packages/ui-textinput/src/components/TextInput/tests/TextInput.test.tsx	Added a test suite for rendering the TextInput component with different size properties, verifying the presence of specific CSS classes based on size. Removed a debug statement from an existing test case.
packages/ui-textinput/src/components/TextInput/utilities.ts	Updated getTextInputClassesProps to include size property. Modified getTextInputClasses function to assign specific height and padding classes based on the value of size.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Bundle Size (components)

Status	File	Size (Gzip)	Limits
✅	style.css	7.34 KB	8 KB
✅	index.js	10.89 KB (+1 B +0.01%)	12 KB
✅	vendor.js	66.06 KB	67 KB

Overall bundle size: 84.29 KB (+1 B 0.00%)
Overall status: ✅

Bundle Size (fingerprint)

Status	File	Size (Gzip)	Limits
✅	index.js	3.94 KB	4 KB
✅	vendor.js	44.34 KB	45 KB

Overall bundle size: 48.28 KB
Overall status: ✅

Bundle Size (form components)

Status	File	Size (Gzip)	Limits
✅	index.js	5.53 KB (+91 B +1.63%)	20 KB
✅	vendor.js	44.46 KB	67 KB

Overall bundle size: 49.99 KB (+91 B +0.18%)
Overall status: ✅

Bundle Size (system)

Status	File	Size (Gzip)	Limits
✅	style.css	3.96 KB	8 KB
✅	index.js	1.93 KB (+1 B +0.05%)	3 KB
✅	vendor.js	44.46 KB	46 KB

Overall bundle size: 50.35 KB (+1 B 0.00%)
Overall status: ✅

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

packages/documentation/src/Form/TextInput.stories.tsx (1)

34-37: LGTM: Size options added to argTypes with appropriate control.

The addition of the size property to argTypes with options "xs", "sm", "md", "lg", and "xl" provides a good range of size variants. The use of a radio control type is appropriate for this selection.

Consider adding a brief description for each size option to help users understand the visual differences:

 size: {
   options: ["xs", "sm", "md", "lg", "xl"],
   control: { type: "radio" },
+  description: "Size of the TextInput: xs (extra small), sm (small), md (medium), lg (large), xl (extra large)",
 },

packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts (1)

54-57: Enhance JSDoc comment for the size property.

The size property is well-defined and correctly typed. However, the JSDoc comment could be more specific about the default value.

Consider updating the JSDoc comment to explicitly mention the default value:

 /**
- * Controls input height and horizontal padding, 'md' by default
+ * Controls input height and horizontal padding.
+ * @default "md"
  */
 size?: Size;

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between c2f4564 and 17ae33f.

📒 Files selected for processing (5)

• packages/documentation/src/Form/TextInput.stories.tsx (2 hunks)
• packages/ui-textinput/src/components/TextInput/TextInput.tsx (2 hunks)
• packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts (4 hunks)
• packages/ui-textinput/src/components/TextInput/tests/TextInput.test.tsx (1 hunks)
• packages/ui-textinput/src/components/TextInput/utilities.ts (4 hunks)

🔇 Additional comments (14)

packages/documentation/src/Form/TextInput.stories.tsx (2)

23-23: LGTM: Size property added with appropriate default value.

The addition of the size property with a default value of "md" aligns well with the PR objective. This provides a good starting point for users to customize the TextInput component size.

---

Line range hint 1-68: Overall assessment: Changes are well-implemented and align with PR objectives.

The addition of the size property to both the default export object and the argTypes object provides a comprehensive setup for testing and demonstrating the new size variants of the TextInput component. The implementation is consistent and follows best practices for Storybook story definitions.

packages/ui-textinput/src/components/TextInput/TextInputTypes.d.ts (4)

3-3: LGTM: New Size type is well-defined.

The Size type definition is clear, concise, and provides a good range of size options. It follows TypeScript best practices for defining union types.

---

59-59: LGTM: Proper handling of size property collision.

The modification to omit the size property from React.InputHTMLAttributes<HTMLInputElement> is a good practice. It prevents conflicts between the custom size property and the native HTML size attribute, ensuring type safety and avoiding potential runtime issues.

---

68-68: LGTM: Simplified type definitions for TextInputProps and TextInputMaskProps.

The modifications to TextInputProps and TextInputMaskProps interfaces are appropriate. By extending only CommonTextInputProps, the type definitions are simplified and redundancy is reduced. This change is consistent with the modification made to CommonTextInputProps and maintains type safety.

Also applies to: 86-86

---

Line range hint 1-86: Overall assessment: Well-implemented changes with minor improvement suggested.

The introduction of the Size type and its integration into the TextInput component's type definitions are well-implemented. The changes follow TypeScript best practices and maintain type safety. The only suggestion is a minor improvement to the JSDoc comment for the size property. These changes provide a solid foundation for implementing size variants in the TextInput component.

packages/ui-textinput/src/components/TextInput/TextInput.tsx (3)

33-33: LGTM: Addition of size prop

The size prop has been correctly added with a default value of "md". This aligns with the PR objectives and enhances the component's flexibility.

---

Line range hint 1-138: Suggestion: Update tests and documentation

The changes to add the size prop look good overall. However, to ensure completeness:

1. Please verify that the component's test suite has been updated to include tests for the new size prop and its various values.
2. Ensure that the component's documentation (if any) has been updated to reflect this new prop and its usage.

Run the following script to check for potential test and documentation files:

#!/bin/bash
# Description: Check for test and documentation files related to TextInput

# Test: Search for test files
echo "Potential test files:"
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts TextInput

# Test: Search for documentation files
echo "Potential documentation files:"
fd -e md -e mdx TextInput

---

53-53: Verify getTextInputClasses implementation

The size prop is correctly passed to the getTextInputClasses function. This is necessary for applying size-specific styles.

Please ensure that the getTextInputClasses function in the utilities file has been updated to handle the new size prop. Run the following script to verify:

packages/ui-textinput/src/components/TextInput/utilities.ts (4)

10-10: LGTM: Import of Size type

The import of the Size type from ./TextInputTypes is correctly added to support the new size property in getTextInputClassesProps.

---

19-19: LGTM: Addition of size property

The size property of type Size has been correctly added to the getTextInputClassesProps type. This addition aligns with the PR objective of adding a size prop to the TextInput component.

---

156-156: LGTM: Addition of size parameter

The size parameter has been correctly added to the destructured parameters of the getTextInputClasses function. This change is consistent with the new size property in getTextInputClassesProps and aligns with the PR objective.

---

167-193: LGTM: Implementation of size-based class assignment

The implementation of size-based class assignment is well-structured and comprehensive:

1. A switch statement correctly handles all possible size values: "xs", "sm", "md" (default), "lg", and "xl".
2. Each size is assigned appropriate height and padding classes.
3. The default case corresponds to the "md" size, which is consistent with the PR objective.
4. The sizeClass is correctly incorporated into the input class string.

This implementation effectively fulfills the requirement of adding a size prop to the TextInput component.

packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx (1)

13-79: LGTM! Comprehensive test suite for TextInput sizes.

The new test suite thoroughly covers all size variants of the TextInput component. The use of parameterized testing with it.each is an excellent approach for testing multiple scenarios efficiently.

A few suggestions for improvement:

1. Consider using an object map instead of a switch statement for determining height and padding classes. This can make the code more maintainable and easier to extend in the future.

2. Add a test case for the default size behavior when no size prop is provided.

Here's a suggested refactor for the size-specific logic:

const sizeClasses = {
  xs: { height: "h-8", padding: "px-2" },
  sm: { height: "h-10", padding: "px-3" },
  md: { height: "h-12", padding: "px-4" },
  lg: { height: "h-14", padding: "px-4" },
  xl: { height: "h-16", padding: "px-4" },
};

const { height: heightClass, padding: paddingClass } = sizeClasses[size] || sizeClasses.md;

This approach eliminates the need for a switch statement and makes it easier to add or modify size variants in the future.

To ensure we're not missing any size variants, let's verify the TextInput component's prop types: