Json import export of a ui component "design" / UI Components Gallery

[aderici]

Hi,

I have recently found myself in a project where i need a little bit more than just functionality. I need to make things beautiful in the UI! But faced 2 challenges :

• I really dont have a good eye for aesthetics,
• Budibase frontend builder is also focused on functionality first and as i read, people are using different css tricks and hacks to build simple needs like making a container clickable (by absolute positioning a transparent button on top),

So here is my request :

• as a user, i should be able to select a "container" in the UI builder and copy the underlying json definition so that i can share this with other people in the community. And the receiving user should be able to copy paste this json into their ui to create the same container in their environment.

I believe this should help people share their "design" and css.

[aptkingston]

Hey @aderici. First, thanks for the suggestion!

I would disagree that we focus on functionality first though, because we have a full set of components following the accessible and clean "Spectrum" design by Adobe. We want to minimize the amount of custom CSS you have to write, and we don't want you to need to do things like create custom clickable containers, because all of those require more time and effort to build. They're also more likely to not be fully accessible. We want to provide a good looking and functional default, which you can customise with design settings.

That's why we have things like our Card component (which can be fully clickable), which would be a great candidate if you'd like to display a list of clickable items.

Custom CSS is always an escape hatch if you need it, but we don't want you to need it. If there are components, or style settings, that are missing, then please let us know and we can think about adding them.

Clickable containers is something that we do actually have PR up for, so it will likely be released at some point. I would challenge you to think about why you want a custom clickable container though, because it's an easy way to accidentally make something that's confusing to the user. Buttons (or things like cards) are first class candidates for clickable items. There's always a use case for things like this though - so I'm not discrediting your reasoning - but just encouraging you to think if you could achieve the same effect with components like buttons and cards.

[aderici]

Hi @aptkingston!

I'm super happy about the fact that i can interact with actual project members and budibase is really helping me achieve some of my objectives really fast,

I shouldn't have assumed you are prioritizing one thing over the other. I'll accept the challenge and try to describe what i'd like to achieve :

Here are some button examples :

This is the github issue close icon button on this page i'm writing this :

So how do i achieve this with budibase? I could just create a small container with an icon and a text. But then neither you allow me to make it clickable nor you allow me to use an icon with a card

This is from the spectrum design web page which is way closer to what i'd like to achieve :

But again, i'd like to be able to do that with an icon instead. I could be ok with converting icons to image and using them in cards, but card component wouldnt even allow me to upload my image, where am i expected to host my image and provide the url for you?

I hope i was able to express my sittuation clearly. So that you can maybe offer what is the budibase preferred way of doing a typical button with an icon or a card button with an icon,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity.