@Timothy_Bennett @Jarda When you are referring to inadequate documentation, are you referring to the SWC documentation, something that’s not owned by the UXP team? If that’s the case, please feel free to file issues in the SWC repo and the UXP or SWC team can take it up. Also, we shall discuss with the SWC team on whether it’s possible to support smaller components for the ones that don’t support any S variant.
@Timothy_Bennett I too would like to know where the existing sp- components have been claimed as deprecated. As is clearly outlined in the UXP Spectrum documentation, a plugin can incorporate either of SWC components, Spectrum widgets, and basic HTML elements as well as combine them.Quoting from the documentation
you can mix and match these three offerings to suit your use case.
A short while ago I posted a bit of a whine about a lack of clarity re: CSS, which I’ll note nobody from Adobe addressed, even just to diplomatically clarify things (weirdly there was a massive uptick in engagement from Adobe staff on all other posts , lol)
If you could repeat that, I’ll take a stab at it to answer it as diplomatically as possible 
I am referring to this page: https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-spectrum/swc/ it has quite some details but some important steps are only nested here in samples: https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/swc-uxp-starter
So the question is… should you also add it into docs page? Or create sub-page? Or add visible red text that another important necessary info is in the Readme of those samples?
We don’t intend to add the steps in the docs page and instead add the links to the starter templates mentioned in this post since that’s what we’d like developers to start with going forward. We shall also add some additional documentation on how to add SWC to an existing plugin since not everyone’s starting from scratch. These updates shall be available in a couple of weeks.
2 Likes
I’ve searched through the forum and I can’t find where I got that idea - I’m happy to stand corrected if you’re saying that the basic sp- elements are here to stay.
Re: wider points about SWC - I’ve been doing a deep dive and building a kitchen sink example of all SWC React components highlighting instances where they are not working as expected in regard to either UXP and SWC docs. I hoped to finish it today but I’m only about 75% done.
1 Like
if you’re saying that the basic
sp-elements are here to stay.
Yes, you can quote me on that 
. We don’t have any intention to remove them in the foreseeable future.
2 Likes
That is a huge relief 
@indranil can popover in SW get behind the panel bounds? It did not work for me. Or can anything in SWC get out of panel bounds? That would improve my UI a lot.
Also, I tried to add popover into dependencies and it is confusing to me. This time I looked into table and found two different version first I figured out is for react component. But second I though it is for wrapper but wrapper does not need specific version.
Also working with yarn is confusing to me. I should use yarn version 2+ but e.g. yarn 4 is not listed in npm and I could not find it anywhere and also yarn wasn’t recognized command. So I had to install yarn version 1 globaly and then within yarn 1 use its own cli to switch to yarn 4?! yarn set version stable
I tried S size for checkbox within M sized component and it worked.
Also I can’t find sp-slider here? https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-spectrum/swc/
That one always causes me some trouble… usually is too big even in S size so I could shape it in SWC.
It would help to add here also components that are in non-SWC only so I would know it is not there.
There’s no SWC component that can extend beyond panel bounds since none of them actually use a native <popover>. Also sp-slider is still pending due to an internal dependency which is why it’s missing from that list. I’m guessing the existing <sp-slider> as part of Spectrum UXP doesn’t fit the bill for your UI.
It’s great knowing you got the S size working for the checkbox!
Can I use native popover and put anything or SWC components in it? How would I do that?
Here a React component (popover appears on hover the i-icon) that I implemented.
It’s using the built in Spectrum UXP widgets.
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
Is there something extra you are doing to get this to work? e.g. a web component wrapper? It doesn’t do anything for me.
I can’t for the life of me get sp-overlay to work - I’m also intrigued to where it’s documented as I can’t see it here (or sp-popover for that matter).
Your example doesn’t look like the SWC component syntax either, so I’m doubly confused.
I had issues as well, for me this “slot=trigger” on the button or element was what I was missing.
Is there something extra you are doing to get this to work? e.g. a web component wrapper? It doesn’t do anything for me.
No, there is nothing extra. As @JasonM mentioned such things as slot="trigger" are important.
I can’t for the life of me get
sp-overlayto work - I’m also intrigued to where it’s documented as I can’t see it here (orsp-popoverfor that matter).
Yes, this is not documented. I’m not sure where I got the idea for the code. I think @kerrishotts posted some snippets here in the forum.
I went back to first principles and forked the SWC React starter and lo and behold your code and this example worked as expected.
I’ve spent the last three hours trying to figure out why they don’t in my build and I’m pretty sure I’ve nailed it down to this:
If you import the matching SWC component it stops the sp- component from working.
This also seems to be the case with some others - so far I’ve found that ActionBar negates sp-popover or sp-overlay (or both, I haven’t tested that far yet).
I’ve only tested React SWC so I don’t know if this applies to vanilla SWC.
It’s pretty disappointing that neither sp-overlay or sp-popover appear to be documented anywhere despite apparently being valid in UXP for at least 18 months or so.
Ok, reading back I can see that you have already mentioned this behaviour here but I don’t believe this is documented anywhere else? At least I think that’s what you mean, it’s confusing as you use sp-button throughout but I guess you’re referring to the native SWC name rather than the SWC wrapper name e.g. Button.
Thanks for bringing this up. We shall add the documentation for sp-overlay and sp-popover for Spectrum UXP widgets in our next doc update.
1 Like
I use <sp-button> because the same tag is common to both Spectrum UXP widgets and Spectrum Web Components. What you are referring to as Button is the React wrapper around SWC <sp-button>. That’s the reason I called out that importing SWC components supersedes the native Spectrum UXP widget. I’ve taken a note to call this out in the actual documentation here. Thank you again for your inputs!