Pro 6 Beta 1 - Components

[urchindesign]

Finally getting to fiddle a bit more with the components and parameters. These are going to be amazing.

I’m not sure if this is a bug or just a use case I haven’t thought of. Seems like there is stuff going on that shouldn’t be but… perhaps there is a reason behind it?

I’ve followed along and created a button component with several buttons. I’ve fiddled with parameters and added a few custom parameters which I’ve mapped to various buttons successfully.

If I right click and click “manage” I can edit the parameters within my component which makes sense.

If I add the button to a page. If I right click the button and click manage I would expect to see the settings / parameters from my button component. At this point I am confronted with a contextual menu which is essentially the same as when I create a new component. i.e. everything is empty. This is where it doesn’t make sense to me. Should this be empty? What use case is there for having it empty and allowing us to add new parameters or rename the label etc.

If I give the element/component on the page a new label it saves it with the new label which makes it seem like it is separated from the component but it isn’t. It is then saved on the page with the new label which is a bit confusing.

If at this point I add new parameters I get a second tab of parameters. Again not sure if there is a use case or if this is a bug? This does however seem to then break my parameters. But perhaps because they have the same names.

Finally if I am working in the “Manage Element” or “Parameters” dialogs / pop ups and I switch tabs rather than shutting the dialogs / pop ups I am left with them being open stating nothing is selected and I need to shut them down. It would be better if they were closed automatically.

[kory]

Howdy, @urchindesign! Thanks for writing in, perhaps I can clear some things up / provide some context on these matters.

When you build out a Component and export it, and then later drag it onto a Page or some other asset, you do not have to right-click on it or go into the Manager to see your settings / parameters from the Component you built. The Parameters that you mapped to your Component in the Component Builder will show up as the only available settings to adjust when you are working on your Component Instance. For an example of how this should look, see the image below from the Draft Release Notes post, which shows the usage of a Button Component on a Page that had a couple Parameters mapped to it to update the label and href, notice how these are immediately seen within the Inspector Workspace:

If you open the Element Manager on a Component Instance on a Page for example, you will see much of the same options you saw within the Component Builder.

Yes, you can rename a Component Instance on a Page, Post, et cetera. This is helpful because if you’ve designed your “Primary Button” and “Secondary Button” and used these dozens of times throughout a page, you might lose track of which one you’re working on. You may wish to prefix, suffix, or rename entirely a Component Instance to something more helpful based on the situation you’re using it in. This does not separate it from the Master Component, it just allows you to make a contextually relevant change if / when needed.

If you add additional Parameters to a Component Instance, yes, it will add a new “Params” tab on the instance of that Component for you to use locally to that instance. Remember, Parameters do not only have to be used on Component Exports…you could use them on Standard Elements from the Element Library if you choose. For example, you might build out a very complex Section with lots of involved layout mechanics going on and wish to “surface” some of the control values you need to change more readily. You can easily do this on a standalone instance of an Element, and you can also do it on a standalone instance of a Component. These Parameters do not overwrite your “core” Parameters mapped on the Component Export. Rather, they augment them, allowing you to add contextual Parameters as you need them. This likely doesn’t make much sense on a simple Button Component, but I’m sure you can imagine situations where perhaps a much more complex Component Export might benefit from these contextual additions in certain situations.

As for the popups maintaining their state as you navigate between tabs, we have noted this down and are looking into it. It is a bug, as all of these should be closed out when you move from tab to tab.

Thank you, and hopefully that helps to provide a bit more context!

[urchindesign]

Thanks for the response. I’m still not sure this is correct or working as expected.

@kory

When you build out a Component and export it, and then later drag it onto a Page or some other asset, you do not have to right-click on it or go into the Manager to see your settings / parameters from the Component you built.

I am aware that you don’t need to however there are a ton of reasons why a person right clicks and obviously fiddling around now when right clicking you are given the option to click “manage”.

@kory

Yes, you can rename a Component Instance on a Page, Post, et cetera. This is helpful because if you’ve designed your “Primary Button” and “Secondary Button” and used these dozens of times throughout a page, you might lose track of which one you’re working on. You may wish to prefix, suffix, or rename entirely a Component Instance to something more helpful based on the situation you’re using it in. This does not separate it from the Master Component, it just allows you to make a contextually relevant change if / when needed.

This makes sense although I think there needs to be a reference somewhere to the Component. If you build a site and come back several weeks, months or years later and you’ve changed the name you aren’t going to necessarily remember the component this element may belong to.

@kory

If you add additional Parameters to a Component Instance, yes, it will add a new “Params” tab on the instance of that Component for you to use locally to that instance.

If I add additional parameters to a component I get a parameters tab but (1) it doesn’t actually add the parameters I created and (2) if it did how would I use them? I get that you can add parameters to any element but perhaps in the instance of a component this should either not be possible or something is not quite right. In the screenshot you can see my additional parameter “bgColor” but in the params tab it shows “Text” & “Link”. Even after a refresh this is the case.

[kory]

@urchindesign:

1. Yes, users might right-click while working on Elements and click “Manage,” and if they do, those are the options that are available to them to use to manage things.
2. I can appreciate the concern here, but renaming Elements has always been a core mechanic of working in the builder. You can also rename your “Button” Element “My Cool Call to Action” and come back to that weeks later and maybe not immediately know what it is, but you will come back to it after you start working with it. Also, in the new Inspector when you rename an Element the “type” is shown in the line above it. So if you don’t rename a “Button” Element it says “Inspector” up top, while renaming it shows “Button” up top to give you context to what the thing you’re working on is. Additionally, Component have a “Component” label up top with a link back to the Component Set where you setup your Export, allowing you to update the base Component if needed. There are many contextual clues provided here if you happen to rename something.
3. Noted, this is a bug that needs to be addressed. This was working at one point during build out but appears to be broken. The basic mechanic is you would add a Parameter to the instance, it would show up under the new “Params” tab on the instance, and then you could wire up that Parameter into a custom Parameter control set under your “Primary” tab, which was already wired up on the base Component instance.