search

snaha / diete.design

https://diete.design
MIT License
0 stars 0 forks source link

feat: update Input component to Diete v5 #115

Closed hlavkat closed 4 months ago

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
diete-design ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 13, 2024 2:09pm
agazso commented 4 months ago

That being said, we should discuss if the control buttons (+ & -) should not be Snippets that are passed to the component instead. That means we can pass in any Button and the logic would be outside of the Input component. It would make the input more generic (we could have any button there). Not sure if this is what we want though @agazso @david-gauquelin any thoughts?

Considering there are at least 10 different types of textual input fields in HTML alone (number, tel, search, url etc), I would focus on just to have a simple text input field that can be later extended with functionality (buttons, validation etc.). Or if that makes it too complex, just keep it as a simple text input and later we can add more input types (for example numeric).

agazso commented 4 months ago

I can see the numeric spinners behind the EUR label in the numeric input fields on Firefox. Here is a way to remove them: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box

gnome-shell-screenshot-dprafe

vojtechsimetka commented 4 months ago

Should now work in Firefox correctly. Thanks for the link!

david-gauquelin commented 4 months ago

A bit late to the party sorry, but I would like to add my thoughts here and explain how I thought about this when designing them.

I tried to think about a flexible system, so in my view the input field is generic and the buttons are basically just separate components attached to it. This means that they can be focused, and behave just as the other buttons. By the way, this is how it's built in Figma, these are nested instances of the existing buttons (with some minor changes on the stroke and rounded corners in order to be attached properly to the input).

As you certainly saw, I used a similar system for 3 other input components: search (with delete and optional search button), date (with calendar button) and color picker (with palette button).

So these are a few examples that we can build "by default" but on top, I plan to document this "aggregating" system in order to allow more combinations. Potentially even beyond the inputs, maybe we can aggregate other type of components together. I have to explore this soon as I will start working on "Layout components".