Improve text field input

[W1W1-M]

Hi @sindresorhus This PR is a first draft for issue #3 Validate text fields

I first tried a border color for the hex text field but it interfered with blue border when the text field is focused. Instead I added a SF symbol image that switches depending if the field is valid.

The implemented colorChecker class uses ObservedObject and the onChange modifier to run on user input, it also trims unwanted characters.

The code still needs to be implemented for hsl, rgb & lch text inputs. Also needs cleaning, optimizing & testing but I wanted an initial 👍 before going ahead.

Regards

PS : I have more experience with iOS app development, this is helping me get to grips with Mac app development 😄

[sindresorhus]

Thanks for working on this. I don't think this is the right approach though.

Here's what I'm thinking:

1. Abstract all of the hexColorView type views into a single (general) view that can be reused for each of the color inputs.
2. The validation logic is already implemented, if let newColor = NSColor(hexString: hexColor.trimmingCharacters(in: .whitespaces)) succeeds, it means the color is valid. If not, you can show the invalid state.

I'm also not a big fan of the symbols. We don't need a success indication, just a failure one. So I think just coloring the text red if it's invalid is enough.

[W1W1-M]

1. Abstract all of the hexColorView type views into a single (general) view that can be reused for each of the color inputs.

Ok, I'll work on that and update accordingly

2. The validation logic is already implemented, if let newColor = NSColor(hexString: hexColor.trimmingCharacters(in: .whitespaces)) succeeds, it means the color is valid. If not, you can show the invalid state.

I didn't realize all the logic was already there 😅 Thanks for pointing this out !

I'm also not a big fan of the symbols. We don't need a success indication, just a failure one. So I think just coloring the text red if it's invalid is enough.

Ok, simple and straightforward is good 😄 I'll update accordingly

[W1W1-M]

So this is still WIP, but some feedback to know if this is more inline with the proposed approach would be nice 😃

As for hex codes: they are limited to a small set of characters and also in length, I've added some code to filter and trim hex inputs (ex: #123456, FFFFFF, etc). This helps users input only valid hex codes but also makes the input rigid and removes the need to indicate (in red) an invalid input. Maybe a compromise of just trimming excess characters without filtering is a good balance ?

[sindresorhus]

So this is still WIP, but some feedback to know if this is more inline with the proposed approach would be nice 😃

Yes, it's the correct direction.

[sindresorhus]

This helps users input only valid hex codes but also makes the input rigid

Trimming whitespace is ok, but I don't think we should prevent some characters. Users will not understand that it's because it's not valid Hex. I think it's better to just make it red in that case.

[W1W1-M]

On user color input, updateColorsFromPanel method needs to be called to update other color codes. This method is currently in ColorPickerScreen. In order to be able to call it from each ColorInputView I believe it needs to be moved to AppState EnvironmentObject or some other class, along with required properties (as @Published properties) ? Or maybe there is smarter way to call it ? Or does it need a bigger rethink as the existing comment indicates:

TODO: Find a better way to handle this.

What's your opinion on this @sindresorhus ?

[sindresorhus]

Closing for lack of activity.