feat!: Refactor TextInput for better accessibility

[aversini]

• dropped the prop "fullWidth" -> it's now ON all the time
• dropped the prop "kind" -> it's now "dark" all the time

Summary by CodeRabbit

• Documentation

  • Updated the TextInput component documentation to reflect new property names and usage.

• New Features

  • Introduced new color tokens for light-themed error states in UI components.

• Refactor

  • Renamed properties in TextInput component for clarity: kind to focusKind, focus to borderKind, and border to errorKind.
  • Removed the fullWidth property from TextInput to streamline component options.

• Style

  • Adjusted label and helper text positioning in form input components for better visual alignment.

• Tests

  • Updated test assertions to align with the new light-themed error styling in TextInput component tests.

[coderabbitai]

Walkthrough

The updates across various files reflect a refactoring and enhancement of a UI component library, specifically targeting the TextInput component. The changes streamline the component's API by renaming props to more accurately reflect their purpose, removing the fullWidth prop, and introducing a consistent naming convention for kind properties. Additionally, there's a shift in the error message styling from a dark to a light theme, and adjustments to label and helper text positioning for improved UI consistency.

Changes

File Path	Change Summary
.../TextInput.stories.tsx	Updated meta object and argTypes to reflect new prop names; added div in Basic render function.
.../lib/tokens.ts	Introduced errorColorLight and border-error-light variables; updated colors object.
.../src/components/TextInput/TextInput.tsx	Renamed props to focusKind, borderKind, errorKind; removed fullWidth prop.
.../TextInput/TextInputTypes.d.ts	Updated TextInputProps type with new prop names and removed fullWidth.
.../TextInput/__tests__/TextInput.test.tsx	Updated class name assertions in tests from dark to light error message styling.
.../TextInput/utilities.ts	Refactored helper functions to use new prop names and removed fullWidth.
.../components/index.css	Adjusted label and helper text transform properties for better positioning.

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	assets/index.js	5.51KB (+53B +0.95%)	10KB

Unchanged files (2)

Status	Path	Size	Limits
✅	assets/style.css	3.26KB	4KB
✅	index.html	316B	2KB

Total files change +61B +0.66%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 02aec86 and 887d9bf.

Files selected for processing (7)

• packages/documentation/src/stories/TextInput.stories.tsx (3 hunks)
• packages/ui-components/lib/tokens.ts (2 hunks)
• packages/ui-components/src/components/TextInput/TextInput.tsx (2 hunks)
• packages/ui-components/src/components/TextInput/TextInputTypes.d.ts (1 hunks)
• packages/ui-components/src/components/TextInput/tests/TextInput.test.tsx (2 hunks)
• packages/ui-components/src/components/TextInput/utilities.ts (1 hunks)
• packages/ui-components/src/components/index.css (2 hunks)

Files skipped from review due to trivial changes (1)

• packages/ui-components/src/components/index.css

Additional comments: 16

packages/ui-components/src/components/TextInput/TextInput.tsx (2)

• 10-15: The default values for focusKind, borderKind, and errorKind have been set to "light", "dark", and "light" respectively. Verify that these defaults align with the intended design and theming after the removal of the kind prop and that they are consistent with the rest of the application's design system.

• 30-38: The getTextInputClasses function is being called with the new prop names focusKind, borderKind, and errorKind. Ensure that the getTextInputClasses function has been updated to handle these new argument names correctly and that it no longer expects a fullWidth argument.

packages/documentation/src/stories/TextInput.stories.tsx (3)

• 13-20: The args object has been updated to reflect the new prop names focusKind, borderKind, and errorKind. However, ensure that all instances where TextInput is used throughout the project are updated to use these new prop names.

• 34-51: The argTypes object has been correctly updated to match the new prop names and provide the appropriate controls for Storybook. This will allow users to interact with the new props in the Storybook UI.

• 58-69: The addition of a wrapping div element in the Basic story provides a structured layout for the TextInput component. This change enhances the visual presentation in Storybook and does not affect the functionality of the component.

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

• 30-34:
  The test correctly checks for the updated error message class name following the theme change from dark to light.

• 86-92:
  The test correctly checks for the updated error message class name and ARIA attributes, ensuring the component remains accessible after the refactor.

packages/ui-components/lib/tokens.ts (2)

• 1-4: The introduction of errorColorLight is consistent with the pull request's goal of enhancing accessibility and theming. However, ensure that all references to the old errorColorDark or any other dark-themed error colors are updated across the entire codebase to use errorColorLight where appropriate.

• 29-48: The renaming of color tokens to include -light and -dark suffixes is a good practice for clarity and maintainability. However, it's important to verify that all references to these tokens in the codebase have been updated to reflect the new naming convention.

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

• 4-12:
  The changes to the TextInputProps type are consistent with the pull request summary and reflect the new API design. Ensure that all instances where TextInput is used are updated to use the new prop names and that the removal of the fullWidth prop is accounted for in the styling.

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

• 10-19:
  The interface has been correctly updated to match the new API changes. Ensure that all usages of this interface are updated accordingly.

• 34-48:
  The function has been updated to use the new focusKind and errorKind properties correctly.

• 51-65:
  The function has been updated to use the new noBorder, error, borderKind, and errorKind properties correctly.

• 68-85:
  The function has been updated to use the new disabled, raw, error, and errorKind properties correctly.

• 88-102:
  The function has been updated to use the new error, raw, and errorKind properties correctly.

• 105-147:
  The function has been refactored to use the new parameters and the removal of the fullWidth prop has been accounted for. Ensure that all usages of this function are updated to pass the correct parameters.