Hit area of some components spans the whole row

Adobe XD UXP Plugin API
,
#1

Issue

When adding some components to a row the hit area for the component spans the whole row.

Steps to reproduce

Add the following to create checkboxes and labels on the same row:

let spacerWidth = 42;
let elementDialogLabelWidth = 120;

h("label", { class: "row", style: { alignItems:"center" } },
	h("span", { style: { width: elementDialogLabelWidth } }, ""),
	h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Horizontally"),
	h("input", { type: "checkbox", checked: false,
	onchange(e) { }}),
	h("span", { style: { width: spacerWidth } }, ""),
	h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Vertically"),
	h("input", { type: "checkbox", checked: false,
	onchange(e) { }}),
)

Click on the first checkbox.

Click to the left and right of it of the first checkbox.

Expected Behavior

When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the labels nothing should happen since they do not have event handlers.

Actual Behavior

When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the checkbox is toggled on and off.

Additional information

video

#2

The cause of this is from the use of Label as a container. I’ve switched to using div as a workaround.

Update:
Not a bug. Apparently label is both a singleton element (how I knew it) and a container element.

Used as a singleton:

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

Used as a container:

<div class="preference">
    <label>Do you like peas?
      <input type="checkbox" name="peas">
    </label>
</div>
#3

So the expected pattern for labels in XD is this:

<label class="row" style="align-items:center"> <!-- style is optional, and coming by default in a future release -->
    <input type="checkbox"/>
    <span>Do you like peas?</span>
</label>

Which renders as such:

image
image.png794×134 2.09 KB

When you want to group two side-by-side, use the following pattern:

<div class="row">
  <label class="row" style="align-items:center"> <!-- style is optional, and coming by default in a future release -->
    <input type="checkbox"/>
    <span>Center Horizontally</span>
  </label>
  <label class="row" style="align-items:center">
    <input type="checkbox"/>
    <span>Center Vertically</span>
  </label>
</div>

Which will render as follows:

image

Clicks on one won’t have an effect on the other.

3 Likes
#4

The examples work great! :slight_smile: Is there a style guide for checkboxes? What I mean is it recommended to put the checkbox first and label after?

style is optional, and coming by default in a future release

Does this mean style is not supported on tags now? Or in the future labels will have align-center style by default?

#5

Here’s the UI guidelines on checkboxes: https://adobexdplatform.com/plugin-docs/reference/ui/elements/checkboxes.html#anatomy

It’s not explicitly called out that labels align to the right of the checkbox, but that’s the usual pattern on both macOS and Windows.

1 Like
#6

Oh, as to style – just means that the row class will have the align-center by default in the future so that you don’t have to specify it yourself to get the layout to appear centered. But for now, continue to apply it, since I don’t know exactly when that change will drop.

1 Like