Set padding specs on container background instead of text?

[ixley]

I've been using this plugin for a while now and find it incredibly useful. It offers functionality that I think should be way better supported natively by Sketch but am thankful for the plugin ecosystem and your contributions!

There are a couple contexts that make it harder to use this plugin consistently and some of it seems like it might be addressed by a subtle shift in how values are passed/read. A couple are:

1. With support for symbols (which is primarily how I want to use buttons and the like), relying on a text layer name means that it becomes the label for the symbol text. This means if I want to swap in a different button symbol with different padding, the text label does not persist. It also means that I can't use semantic labels for dynamic symbol text, which is functionally less important, but still relevant when trying to maintain a library of symbols for a team.
2. If I want to include something like an icon next to button text that will affect the spacing, I need to change the text layer name to accommodate for the extra space needed (e.g. 10:[10 + space for icon]:10:10).

Proposed solution: What seems like it would be a solution is to set the padding specs on the BG layer instead of the text layer. I actually noticed similar functionality in the Modulizer plugin but it doesn't seem like it's as robust or well-supported. The functionality is very similar to Dynamic Button though and feels a bit more flexible in taking this approach. This would give the plugin the ability to set padding on any number of different 'container' types by calculating spacing from the children nearest to each edge. The Modulizer plugin also includes a prompt for values when you first trigger it rather than assigning default padding, which is quite helpful too.

Any thoughts on this? I understand it wouldn't be a trivial change, and that you may have already considered this and tradeoffs I'm not aware of, but I'd love to hear your thoughts either way. I know this is also a side project for you, so I doubly appreciate all your efforts!

[fuggfuggfugg]

Hi Jeff,
Apologies for the delay in response and thanks for the kind words.

Allow me answer point 2 first: This plugin is not limited to text layer only. For your case above, you can easily group your text layer and icon together and put the padding on the group name and cmd+j on the group layer should create the button around it.
Gif in action

Hope this answers your question.

As for point 1: I'm not sure I completely understand. Can you elaborate more on this, or even a gif if possible.

I looked at the modulizer code, it almost similar to my code in that it needs to know the dimensions (x, y, width and height) of a layer + desired padding to apply to the BG layer. In modulizer, it puts all the children into a group, gets its dimensions and the applies to the the BG layer. I do the same, the only difference is that it will build the BG around the selected layer you run the command on. As I mentioned above, this layer can be anything. Also, this approach is not something I came up. My plugin is forked from the original dynamic button which was abandoned after v3.5. Given the popularity of the original plugin, I want to keep it as vanilla as possible.

Can I also suggest trying out a different plugin that @mwhite05 is being working on lately. Looks promising, see if this works.

Do elaborate on point 1, I'll see what I can do to address once I understand.

[ixley]

So there are a couple issues...

1. What I meant was that when I turn this into a symbol, the override label takes its name from the layer label. But if I have sizing set to the text layer, that becomes the override label.
   
   Not a huge deal, but now if I try to switch this symbol to a different button style with different padding settings, Sketch doesn't recognize it as the same layer. If I call it 'Text' and try to wrap it inside of a folder with the padding settings, it works as a regular layer folder, but not as a symbol. In fact, if you try to apply this plugin to a symbol with the padding set on a folder layer instead of a text or shape layer, it doesn't read the folder padding and instead creates a new container folder with default padding settings (not what anyone wants!). This might get to a larger issue of the plugin not working that well with symbols, and ultimately I wish this were native functionality that Sketch supported.
2. This option would work as you point out, but again, it does not work with symbols. Maybe this is something worth addressing separately? I don't know how difficult it is to fix this, but if you try to create the same behavior with a symbol, you'll see how it breaks down.

I hope that context is useful even if this isn't something that's reasonable for this plugin. Thanks again for your work!