Paragraphs in dialogs default to `white-space: pre`

Adobe XD UXP Plugin API
,
1

Issue

The whitespace of text within a <p> tag is significant and is reflected in the UI by default. Setting the white-space: normal changes this behavior to the default browser behavior.

Steps to reproduce

  • Create a <dialog> and place a <p> inside it with multi-line text

Expected Behavior

Whitespace not to be visible in the UI.

Actual Behavior

Whitespace is visible in the browser, similarly to when we use white-space: pre in the browser.

2

I believe this is a known issue @kerrishotts can confirm this. Thanks for reporting it - we are working on getting as close to browser standards as possible soon!

3

What host.minVersion are you using in your plugin?

4

"minVersion": "20.0" @kerrishotts

5

For the latest prerelease (and XD 21), switch to minVersion: 21. This will use the newer, more standard layout (ignoring whitespace)

6

@kerrishotts the white-space: pre is fixed in v21.
Unrelated to the white-space, I’m seeing two issues in v21:

  1. The width and height attributes of an img are ignored. E.g., <img width="25" height="44">. Using style="width: 25px; height: 44px" sets the image dimensions as expected.
  2. Anchors’ color (e.g., color: #fff) can no longer be set with css. Setting it via style="color: #fff" works. This is an issue for anchors on a dark background, where the default blue doesn’t have enough contrast to be accessible.
7

@nemtsov:

  1. I’m updating the known issues to include this. This is a casualty of our extra unit support and width is actually directly translated to style = "width". That’s not technically correct, but that’s the current situation.
  2. We changed how the anchor color is applied so that it only applies if an href is supplied. Use a[href] { color: #fff } as the selector to override it. I’m adding this to the known issues as well.
1 Like