feat: Added 'maxCharacters' prop to TextField#1200
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a new helperTextRight prop to the TextField component that displays helper text aligned to the right side of the field. The text is styled with tertiary color and positioned absolutely to align with the existing left-aligned helper text.
Key changes:
- Added
helperTextRightoptional prop to TextFieldProps - Implemented dynamic width measurement and margin adjustment to prevent overlap between left and right helper texts
- Added Storybook story and documentation for the new feature
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/molecules/TextField/TextField.tsx | Added helperTextRight prop, state management for width calculation, styled component for right-aligned helper text, and conditional rendering logic |
| src/molecules/TextField/TextField.stories.tsx | Added argType control for the new prop and a story with interaction test to demonstrate the feature |
| src/molecules/TextField/TextField.docs.mdx | Added documentation section showcasing the HelperTextRight story |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mariush2
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Azure DevOps links
User story
Description
Adding new
maxCharactersprop to Textfield, this will always have the tertiary color (for now)