Have you tried using Spectrum Web Components yet to build your plugin UI?

Photoshop UXP Plugin API
,
32

Here a React component (popover appears on hover the i-icon) that I implemented.
It’s using the built in Spectrum UXP widgets.

scr
scr870×869 85.4 KB

const InfoIconWithOverlay = (props) => {
    return (
        <sp-overlay style={props.style}>
            <div style={{ color: "var(--uxp-host-text-color-secondary)" }} slot="trigger">
                <sp-icon name="ui:InfoSmall"></sp-icon>
            </div>
            <sp-popover
                offset="8"
                placement="right"
                alignment="right"
                appearance="none"
                slot="hover"
                style={{ borderRadius: "5px" }}
            >
                <sp-body style={{ padding: "5px 8px", width: "150px", fontSize: "10px", margin: 0 }}>
                    {props.text}
                </sp-body>
            </sp-popover>
        </sp-overlay>
    );
};

export default InfoIconWithOverlay;

I have not tested whether I can place Spectrum Web Components in it. But I think it might work.

I encountered a problem when I used the popopver in a modal dialog (it flickers). I reported this bug about a year ago.

6 Likes