Sp-menu backround clipping

InDesign
1

I’m trying to build a UXP panel for both Photoshop and InDesign. Most elements look and behave similar but the sp-menu behaves differently.

In Photoshop, the overlay menu works fine:
Photoshop_tBZdAiQcEo

But in InDesign, the same menu lacks a background:
InDesign_zQ0U6A8qhm

So I tried to manually set a background color in CSS, now it’s clipping/flashing:
InDesign_7BjV0GYHuZ

Any ideas? And is it possible to find documentation about what differs between Photoshop UXP and InDesign UXP? Isn’t the whole point about “unified” that things should look and feel the same across products?

I’m using an sp-overlay containing an sp-actionbutton and a sp-popover with embedded sp-menu.

Thanks,

2

Yes, there are, sigh, differences between the rendering of things. I was told once during a group meeting with Adobe staff that they handled that separately, but nobody explained why.
This isn’t the only place where there are differences. Here is a text field with the invalid flag in Adobe Photoshop:
Photoshop text field invalid
And now the same thing in Adobe InDesign:
InDesign text field invalid

And while this isn’t CSS controlled, it definitely is something where the UI remains different between these two applications.

jsw

3

Too bad these things are not documented. Maybe If Adobe shipped sources with the built in UXP widgets one could possibly identify, compare and fix some of the disparities.

Do you know any good sources for updates, like a dev news letter or something? The release changelogs are for product features only, not UXP/API

4

The built-in widgets are deprecated and no longer updated.

The idea is that one should use the Spectrum Web Components instead. Unfortunately these come with issues of their own. They are fully open source though.

5

Yeah @dspice, we’re moving to the Spectrum Web Components. Just not sure when or how painful that is going to be. I’m sure it gets more painful the longer we wait, however.

jsw

6

I tried installing and referencing sp-menu (through the corresponding SWC wrapper/version), these should then take precedence over the built in sp-menu I assume?

Unfortunately it looks and behaves exactly as before, with the the built in menu widget.

7

This bare-bones code works for me with NO clipping/flashing when you roll the mouse over the menu.

<!DOCTYPE html>
<html>
<head>
	<script src="main.js"></script>
	<style>
		sp-action-button {
			position: absolute; /* for demo to position top right in panel */
			top: 16px;
			right: 16px;
		}
		sp-menu {
			width: 100px; /* fixed width required */
			background-color: gray; /* else transparent by default */
		}
	</style>
</head>
<body>
	<sp-overlay>
		<sp-action-button size="s" slot="trigger">Click Me</sp-action-button>
		<sp-popover offset="0" placement="bottom" alignment="left" appearance="none" slot="click">
			<sp-menu size="s">
				<sp-menu-item>One</sp-menu-item>
				<sp-menu-item>Two</sp-menu-item>
				<sp-menu-item>Three</sp-menu-item>
			</sp-menu>
		</sp-popover>
	</sp-overlay>
</body>
</html>

Producing this:

image
image730×842 8.01 KB

(You’ll have to take my word for it that it doesn’t flash when I roll the mouse over it – I don’t know how you’ve done your fancy screen recording :wink:).

Latest InDesign; latest UXP; vanilla javascript (not react); built-in widgets (not spectrum web components); tested on Mac and Windows.

Makes me think that the clipping/flashing you are seeing might not be inherent to the widgets but caused by something else in your code.

Philip

8

Thanks a lot Philip for verifying. Indeed it looks like one of the SWC components I use (sp-card) has dependencies on and pulls in its own version of sp-menu, probably causing conflicts with the built in one.

9

Putting this out here as a solution of sorts; sp-menu along with sp-card (I think), needs to have background color and border manually set/overriden in CSS. Something like this fixes the background missing and/or flashing:

sp-menu,
sp-action-menu {
  background-color: var(--uxp-grey);
  border: 1px solid var(--uxp-darker-grey);
}

sp-menu-item {
  background-color: var(--uxp-grey);
}
1 Like