DWilliames / paddy-sketch-plugin

Automated padding, spacing and alignment for your Sketch layers
MIT License
2.17k stars 61 forks source link

[Bug] Group Shifting Out of Artboard #96

Open chsWeb opened 6 years ago

chsWeb commented 6 years ago

Bug report

Expected behavior:

I name a 375pt wide background layer bg [16 16 16 16; width>=375], then place a text layer over the background layer. I move the text layer 16pt from the left edge of my 375pt wide artboard. I expect the text layer and background layer to stay where they are.

Actual behavior:

What happens instead is, the layer group shifts -135pts to the left, off of the artboard. When putting the background layer back to x:0, the text layer shifts into the center of the group.

Steps to reproduce:

  1. Create a group
  2. Add a background layer shape to the group
  3. Add a text layer over the background layer in the group
  4. Position the background layer to X:0, Y:24
  5. Position the text layer to be centered in the background layer, and X: 0
  6. Rename the background layer bg [16 16 16 16; width>=375]
  7. The group shifts, the rearranging the layers results in an endless loop of moving stuff

GIF Demonstration

paddybug-shiftingleft

DWilliames commented 6 years ago

Ah cool. Thanks @chsWeb. Yeah I think I know what this is. In a lot of cases where people would have minimum widths, they wanted the content to be centred. So I made sure that the content would centre itself. However that breaks it for cases like this. 🤔

Trying to think what the behaviour should be to work for everyone. Perhaps, if the group, in this case 'Top Bar' had alignment to the left e.g. Top Bar [l]; then it would know that when applying the padding to have the minimum width by keeping all the content to the left.

What's your thoughts?

Raghav789 commented 6 years ago

this happened to me as well can't we leverage sketch pining system? since minimum background width is 375 and padding is 16, the maximum width of text layer will become 343 so if we set 343 as text layer width it will work! and pining the text layer to the left and right will increase the width of the text layer automatically when the group resizes.

equinusocio commented 6 years ago

Same issue here

chsWeb commented 6 years ago

@DWilliames if we could also apply alignment, with a width and padding, that would be ideal.

It would be great if we could use all of Paddy's attributes in any layer, separating them with a semicolon: Layer Name [{variable};{variable};{variable};]

Layer Name [16 16 16 16; width>=375; left]

chsWeb commented 6 years ago

@Raghav789 i tried playing what your idea and got some strange results, rounding errors and not quite what I expected - see attached if you want to test it out. paddyTest-appBar.sketch.zip

Raghav789 commented 6 years ago

Strange, I made it work but, not sure why it wasn't working I swapped the font icon with a real icon, changed the text to auto and simplified the folder structure.take a look although for app bar I wouldn't use paddy anyway. paddyTest-appBar_re.sketch.zip

equinusocio commented 6 years ago

@Raghav789 By thihs way we can't use text with auto size :(