All Component Controls Review

[Bill]

I spent most of the day going through the component controls so I’m reporting similar bugs & small improvements here: [Updated for brevity]

All Components: Could we get a tooltip on hover? - there are many times where an explanation of more than a couple words is necessary to explain use of a control. And this is great because it’s hidden till the user wants more info.

If they don’t have subtitle, I think that would be very helpful for all elements.

Noticed some components used ‘id’ and some use ‘property’, would prefer them all to be property for uniformity

I would suggest that examples of component code only show the object for that code, as it will make it easier to copy/paste.

---

Text: remove comma from end of subtitle line

Text Area: subtitle is not showing up in control, add comma at end of default line, remove comma from end of subtitle line

Number: add comma at end of default line, remove comma from end of subtitle line

Resource: not sure if this is for template file paths, etc. need some more doc explanation

Segmented: When you have time a good explanation of base/sm/md/etc and how they are written and applied would be good in docs. Not sure but apppears some classes are not being deleted when switching between tabs so might need to check that.

Slider: (see all)

Switch: does this have a property to target it?

Border: does this have a property to target it?

Radius: does this have a property to target it?

Color: does this have a property to target it?, need more doc explanation on what the 300 means in ‘text-black-300’

Font: does this have a property to target it?, can’t figure out how to set default font for various sizes, can it have a subtitle?

Spacing: (see all)
Gap should just have a hor. & a vert. control & need full code example
Transition should have all properties & need full code example
Position should have all properties & need full code example

BoxShadow: Shouldn’t this have default x/y/blur & color settings?

TextSize: does this have a property to target it?

[trinube (Kim)]

@Bill

Could we get a tooltip on hover? - there are many times where an explanation of more than a couple words is necessary to explain use of a control.

Could I suggest an alternative to tooltips?

In a couple of apps I use (Xojo and FMP) they have small description areas which details what various library items do. It is incredibly helpful when you’re using apps with many dozens of items and commands.

Here is Xojo’s implementation:

and here is FMP’s in the scripts area:

The description field could be fixed at the bottom of the Components list and every time something is selected it displays more complete information regarding the use of the element.

This would be a great place to point people towards using the correct element.
Eg. Clicking on Image Element: “Use the image element when you want to place a picture somewhere. If you are tying to have a picture as a background you should consider using a container instead and select picture as the background type.”

I hope that makes sense…

[Bill]

Yup, I see what you are saying, but keep in mind, with many controls, a fixed description area at the bottom wouldn’t even be seen most of the time as it would be out of view - that’s why tooltips fit the situation so well

[trinube (Kim)]

@Bill

I see what you are saying, but keep in mind, with many controls, a fixed description area at the bottom wouldn’t even be seen most of the time as it would be out of view

Sorry I’m not following why it would be out of view. A small area anchored at the bottom of the components panel (just above he search field) would always be visible when clicking on an element. Just like the search field is always visible.

[Bill]

Oh I see what your thinking, it’s not a component that you would have further descriptions on, but on each individual control in the component inspector on the right. You definitely don’t want to have it in a different panel.

[Flash]

Maybe put the description in a horizontal line across the whole bottom of the app window? Not pretty but accessible.

[trinube (Kim)]

@Bill

it’s not a component that you would have further descriptions on, but on each individual control in the component inspector on the right.

I was thinking on the left, below the components:

If RealMac were to want a gold star, they could change the information to a global preview when a global is selected as there doesn’t appear to be any way to preview globals. I think they’ll be used a lot and it won’t always be easy to name them in a clear manner:

Of course if globals were to become part of a floating library they could be previewed in the library window. I believe the sharing of globals across projects will be important.

[bon]

Hi Bill,

thanks for the feedback

@Bill

does this have a property to target it?

Could you expand on what you mean with this. I’m not following

[Bill]

Ok, so on any component I said ‘does this have a property to target it?’ I meant:

I noticed that there isn’t a ‘property’ attribute to use to custom target it. If there’s an ‘id’ property and if that’s what we are supposed to use to target it, then please change it to ‘property’ for consistency. I’m still not clear if some of these w/ ‘id’ is for the js name of a property or not. At any rate, ‘property’ is needed to target it properly when there’s more than one of a control.

[bon]

The property key will not be supported and id should be used as the identifier for each Component property.

To be clear: id is the key used to reference your property in your templates.

Hope that clears things up?