Skip to content

Conversation

@Hell1213
Copy link

@Hell1213 Hell1213 commented Oct 23, 2025

Description

This PR implements hex color validation with real-time error feedback in the ColorPicker component, addressing issue #9527.

Changes Made

  • ✅ Added and utility functions
  • ✅ Implemented real-time validation in ColorInput component
  • ✅ Added visual error styling with red borders and error messages
  • ✅ Created comprehensive test suite for validation functions
  • ✅ Improved UX by providing immediate feedback instead of silent failures

Error Messages

  • Invalid length: "Hex code must be 3, 4, 6, or 8 characters (excluding #)"
  • Invalid characters: "Invalid characters in hex code"

Testing

  • All existing tests pass
  • New test suite covers edge cases and validation scenarios
  • Manual testing confirms error messages appear for invalid inputs like 'white2', '123456789', 'gggggg'

Screenshots/Demo

When typing invalid hex codes like 'black2d' or '123456789', users now see:

  • Red border around input field
  • Clear error message explaining the issue
  • Error clears on blur for clean UX
image

Fixes #9527

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • Tests added for new functionality
  • All tests pass
  • No breaking changes
  • Accessible implementation with proper ARIA labels

- Add isValidHexColor() and getHexColorValidationError() functions
- Display real-time validation errors for invalid hex codes
- Show specific error messages for invalid length and characters
- Add visual styling with red borders for error states
- Include comprehensive tests for validation functions
- Improve UX by providing immediate feedback instead of silent failures

Fixes excalidraw#9527
@vercel
Copy link

vercel bot commented Oct 23, 2025

@Hell1213 is attempting to deploy a commit to the Excalidraw Team on Vercel.

A member of the Team first needs to authorize it.

@Hell1213
Copy link
Author

hey @dwelle I have created this pr for issue hex color validation now it has been resolved just waiting for your review .
The pr is ready for review

@Hell1213
Copy link
Author

hey @excalibot , @dwelle this PR fixes #9527 (hex color validation). Ready for review whenever you have time

@Hell1213
Copy link
Author

Hell1213 commented Oct 24, 2025

hey @ryan-di , @zsviczian PR fixes #9527(hex color validation) is ready for review ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve Feedback: Display Error Message for Invalid Hexadecimal Color Codes

1 participant