Update components to use properties

[stackingsaunter]

Hi there!

I propose utilising more properties within the guide, which I guess will affect mostly buttons but can be also in other components like lists or dropdowns, etc. I recorded a quick video about this.

In short, using more properties instead of variants will:

• make it easier and quicker to edit components
• make it easier and quicker to use components, modify variants depending on a case
• will allow for more flexible usage with less variants
• (supposedly) is more suitable for handoff

[GBKS]

Already on it, sir. The last version of the UI Kit published on July 29 already has most components updated to use properties. There were a few nice effects like needing much fewer variants for certain components, as showing/hiding could be done via Boolean properties.

[stackingsaunter]

Sweet! I still see a lot of possibilities to improve what I see in that file, I'd be happy to help with these

[GBKS]

Great. Would love to know what you'd change.

[stackingsaunter]

So first of all there is a button component as I laid out in the video. In case we really want to show all possible states of the component we can show them separately like here (I used Propstar plugin to generate that table):

Label component can be done into one (maybe two) highly adjustable components, with each of the element having the possibility to be turned off/on, and adding Copy property

Lot's of those can be merged

Inputs can be expanded into more states (active, filled, focused, error, maybe confirmed (positive feedback)

I see some space for expansion of new elements, like toast messages for example, or other classic UI elements that are missing.

Let me know what you think! I'd happily work on those

[GBKS]

Thanks for this. Some quick responses:

• Yes, the "List item" component can be removed. There already is a new component just called "Item", I just haven't gone through the file and done the clean-up yet.
• Something I've been wanting to clean up is the uneven spacing in buttons. Since icons have some white space around them, the space on the side of the icon is wider than on the side of the label. With a boolean property, we could also toggle an invisible spacer to balance this out.
• As you pointed out, now that some elements can be hidden, the component itself becomes simpler, but you need this extra display to showcase all the options for designers. Weird how that turned out.
• Field states are something we should add.
• As far as new elements go, I've only been adding ones I actually end up needing during design work. That has helped keep things efficient.

[stackingsaunter]

Another thing is buttons states., there's no hover and focused one. We can add them alongside with field ones

[GBKS]

Going to close this issue as it's gone stale. The states have their separate issue via #18.