The order of Components in the Element Library

Beta
#1

Components in the Element Library aren’t in the order I’d like them to be. If for instance there are several button Components then it would be nice to control the order in which they appear.

#2

Good point here. We’ve actually talked about adding another layer of organization. For example, you might have a bunch of smaller elements like buttons and typography that you want categorized together, while larger pieces like whole sections might need to go together. Definitely on our radar to explore further. We did make the decision to put all components first in the element library (before Standard) since if you’re taking the time to curate your own little element library, it is probably more helpful to see those first.

#3

Nice, I like the idea of being able to group Components like you describe. And it indeed makes sense that Components are shown before Standard Elements in the library. Components are at the bottom of the library right now though.

It would be great if there were controls to set the order in which individual Components appear. For instance I’ve created 2 button styles and each style has 3 variants (small, normal, large). Currently they show mixed in the library. I’d like to group each style together and display them from small to large, does that make sense?
So there would have to be a way to manually set the element order in the library to logically group elements that should go together in a particular order.

#4

Hi @JvP,

While we’re likely going to be adding a way to group them, they’ll aways be sorted alphabetically. You may just need to be more structured with how they’re named to get them in a certain order like:

  • Button (Primary- Large)
  • Button (Primary - Normal)
  • Button (Primary - Small)
  • Button (Outlined- Large)
  • Button (Outlined - Normal)
  • Button (Outlined - Small)

Or, with some creative Parameters and element CSS you could make some of the variances part of the component. This might not work in your example, but here’s an idea of making a font size tied to leveled options vs a direct input.

{
  "size": {
    "type": "select",
    "initial": "20px",
    "options": [
      { "value": "10px", "label": "Small" },
      { "value": "20px", "label": "Normal" },
      { "value": "40px", "label": "Large" }
    ]
  }
}

$el {
  font-size: var('{{dc:param:size}}')
}

If it was based on font size you could probably just put that in the main font size control though.

1 Like
Component ordering in builder
#5

I’ll keep that in mind when naming Components.

Interesting, I wasn’t aware this is possible. Once the UI is in for Paramaters, will that include creating options like that?

#6

The UI will make it easier to define parameters, but you can still do it with the current JSON version. Another interesting idea would be to do something like this:

  • Add a Div, and a select parameter with different options for each button style. Let’s say we call this Parameter buttonStyle
  • Inside the Div, add several Button elements - one for each style
  • On each button, add an element condition that checks a Dynamic Content expression like {{dc:param:buttonStyle}} == primary.
  • Export the Div as a Component

When you drag that component in, you’ll be able to use the select to pick your variant. It will output the correct button and ignore the rest.

2 Likes
#7

Thanks for that. I’ll try it.

#8

Ok, sounds good!