Plugin UI submission checklist is nearly impossible to achieve

Photoshop
1

IMHO most must cases in the plugin submission checklist needs to be loosened and changed to should, because now, until UXP matures, it’s nearly impossible to normally achieve responsiveness and adaptiveness in the panel. Lots of at least a year old CSS is not supported at all…

  • For panel plugins, no content should be clipped when the plugins panel is at minimum width.
  • For panel plugins, the plugin’s UI content must adapt appropriately when the panel width is increased.
  • For panel plugins, the plugin’s UI content must adapt appropriately when the panel width is decreased.
  • The plugin must be functional when the host app application window is at maximum size.
  • The plugin UI must scroll when all content is not visible on the screen.
  • UI elements in the plugin must not overlap or truncate.
  • UI content must wrap or adapt as necessary to accommodate the available width of the UI.

None of the gap forms is supported (nor margin-inline/block). text-overflow: ellipsis is not supported. When panel height is decreased, default scroll is not there. It’s simply inventing the wheel - you have to write custom media queries and lots of CSS for usually already for years supported features out of the box in all the browsers (including mobile; and yes, I know UXP is not a browser)

Currently I’m trying to make a panel with a row of buttons, which have icon and text. It’s as simple as it gets and usually it would take half an hour at most, but not with UXP. Spent at least a day and I’m still nowhere near finish. Resizing panel makes a mess and I’m so frustrated…

Using sp-action-button instead of the button in this example

I could make two separate panels (row and column), but that would be just ridiculous and in no way it would satisfy the all musts of the panel. Especially the last bullet point - requirement is there, but no tools provided to achieve it…

Exact same HTML and CSS:

image
image489×106 4.87 KB

image

I would love if Adobe provided a sample plugin with a really fully adaptive UI

2

@kerrishotts, you’ve been lots of help when it comes to UI, thought maybe I could get some advice here? :frowning: At least with text-overflow - I would make gaps work with margins (although it would make panel not so compact) :thinking: I can also use overflow: hidden on a button itself, but that’s just ugly when no padding left on the right of the button :frowning:

3

I can confirm that text-overflow: ellipsis behaves kind of weird and unpredictable.
It works in some cases, but not in all. Using it inside the sp-action-button did weird things, for example it sometimes would only show the ... after I mouseover the button. Before the mouseover, the fontSize just got a bit smaller kind of.

Speaking of fontSize, making the text slightly larger also worked to show the ..., but of course that’s not always what you want visually.

Not sure what is happening to the gap property. When I copy pasted your code from jsfiddle to a panel, it worked fine. Only changing the button to an sp-action-button broke the gap-feature.
As you said, margins are a workaround and I don’t see any problems with that. You can get the exact same result, if you simply add a negative margin to the parent container.

Media queries should be working fine as long as you only have one panel. For multiple panels, I’ve described a workaround here.

1 Like
4

I couldn’t get ... to appear no matter how I tried (only Win10 maybe) :frowning: Always the result as shown in screenshots. Also a good tip on negative margins, but I so wanted to avoid them :thinking:

Thank you so much for this informative answer (and a link to multi-panel workaround - might need this in future). Still need to think of what to do with button labels :confused:

5

Finally managed to solve the ellipsis not appearing issue (found this SO post). The key basically was to use <div> instead of <span> for label. Final CSS for buttons looks like this:

.buttons-holder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: -2.5px;
}

sp-action-button {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-grow:1;
    flex-basis:0;
    min-width: 32px;
    max-width: max-content;
    margin: 2.5px;
    white-space: nowrap;
}

sp-action-button .label {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1em;
    font-weight: inherit;
}

But now there’s another issue - the color of ellipsis always turns black when text won’t fit at all :frowning:
image

Of course it looks fine on light themes
image

Created a separate topic for this as a bug