Changes in padding/margins?

Photoshop
6

I think you’d see this behavior in PS 22.5 as well; the layout for controls changed slightly when the ability to specify control sizes was enabled as this brought in new metrics from the Spectrum design language. IIRC, this ended up increasing the padding around checkboxes and radio buttons to better align with Spectrum text.

Checkbox

For the checkbox, you can eliminate the mis-alignment by using align-items: baseline or align-items: middle in div.label_category. However, I’d actually suggest a different structure entirely to reduce the amount of layout you’re having to build.

If you can live with the checkbox on the left (instead of the right), you could do this instead:

<sp-checkbox class="label_category" size="s">Watermark</sp-checkbox>

with this CSS:

sp-checkbox.label_category {
  background-color: #756f67;
  padding: 0px 12px;
  border-radius: 6px;
  transform: translate(8px,50%);
  color: white;
}

This will result in:

image
image498×262 8.2 KB

Due to the transform, the size of this element is free to vary, but it’ll always remain centered on the container border.

It also means that the user can click on “Watermark” to toggle the checkbox – easier to target than the checkbox itself.

Radio Button Group

You can use a similar trick to reposition the radio buttons using transform:

sp-radio-group#input_watermarkposition sp-radio {
    /* your other styles... */
    transform: translate(0,-75%);
}

Compatibility with previous PS versions

You could add the UXP version to the document’s body tag and target it with CSS:

const regex = /([0-9]+)\.([0-9]+)\.([0-9]+)/;
const [fullVersion, major, minor, patch] = regex.exec(require("uxp").versions.uxp) || ["", 0, 0, 0];
document.body.classList.add("uxp" + major + "-" + minor);

Then, in CSS:

.uxp5-5 sp-radio-group#input_watermarkposition sp-radio {
  transform: translate(0,-75%);
}

However, the change in Spectrum controls came in UXP 5.1 (part of PS 22.5), so you may want to do this instead:

if (major === "5" && minor >= "1") {
    document.body.classList.add("spectrum-size-fixes");
}

… and target with this CSS:

.spectrum-size-fixes sp-radio-group#input_watermarkposition sp-radio {
  transform: translate(0,-75%);
}

This way you can continue supporting the fixed layout for new PS versions without breaking layout for older PS versions.

1 Like