How to use Spectrum components in UXP plugin?

[Velara]

I’m trying to convert an older plugin to spectrum components and they are not displaying correctly for me.

I did a simple test by using this example code from here:

<sp-action-menu selects="single">
    <span slot="label">Available shapes</span>
    <sp-menu-item value="shape-1-square">Square</sp-menu-item>
    <sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
    <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
    <sp-menu-item value="shape-4-star">Star</sp-menu-item>
    <sp-menu-item value="shape-5-hexagon">Hexagon</sp-menu-item>
    <sp-menu-item value="shape-6-circle" disabled>Circle</sp-menu-item>
</sp-action-menu>

But it doesn’t look correct in the plugin. Is there anything else I need to do? I don’t see any CSS when inspecting the elements.

Here’s the CSS from the element on the Spectrum website:

When I tried importing the library it throws an error:

import { ActionMenu } from '@spectrum-web-components/action-menu';

SyntaxError: Cannot use import statement outside a module

Do I need to change anything in the manifest?

[Lichhuun]

Look like you did not install the package on node_modules folder.

[Velara]

IIRC spectrum is supposed to be built in to UXP but maybe not? I’ll try that!

[Velara]

On the github side I don’t see anything about NPM install

GitHub - adobe/spectrum-web-components: Spectrum Web Components

On the npm site when I search, I see 88 packages on specific component types but I don’t see anything that would install the entire library but maybe I missed it?

Welp! I might have found the library:

@spectrum-web-components/bundle

[Lichhuun]

Did you check this link: Spectrum, Adobe’s design system

[Velara]

The part I’m confused on is how to get it to work in UXP. If I create a sp-switch component it shows up correctly. But if I try some other components they don’t. From what I’ve read Spectrum is built in, meaning I don’t have to import anything. But the example above didn’t work for me and I can’t find how to use it. I did download the node module bundle to my project.

The links to the Spectrum mention adding theme settings to the body tag but UXP sets the body tag up automatically and IIUC the plugin author simply adds their UI components to it.

In another post, it was mentioned that UXP doesn’t support all of the Spectrum components so I think that that might be the issue but that was a while ago.

[Karmalakas]

I think XD might have exact same issue as Ps - Spectrum Web Components (WC) might actually be not supported. I believe you saw my post about theme awareness, but that’s not the main issue.

• Both Ps and XD have the same docs, that you can use Spectrum WC
• Also both Ps and XD have separate docs on Spectrum UXP (not to mix up with Spectrum WC)

I tried to make WC work on Ps, but failed miserably. Also, not only failed to make WC work, it seems that what actually is supported in Ps, is not Spectrum UXP either. Some supported components is a mix of UXP and WC. Very good example is sp-picker:

• Docs say that sp-dropdown is supported in Spectrum UXP
• Docs don’t even have sp-picker as supported component in Spectrum UXP
• sp-picker is a pure Spectrum WC
• Ps however supports sp-picker with a mixed inner HTML syntax of sp-dropdown
• Ps does not work with sp-dropdown as one would expect

So basically Spectrum is a mess (at least in Photoshop) and I couldn’t make WC properly work there at all. Almost all sp-... elements for me were trial and error to achieve what I want.

Figured I’d share this experience, even if it’s for Ps

[Velara]

From the documentation it looks like only a few components are supported. I don’t recall seeing that document before.

So if they aren’t supported natively they should be able to be imported manually but it looks like that’s not supported either.

I npm installed the spectrum bundle and tried to import the library and getting error on startup:

import {
    Tabs,
    Tab,
    TabPanel
} from '@spectrum-web-components/tabs';

Console message:

Cannot use import statement outside a module

I tried to use require syntax like so

const {
    Tabs,
    Tab,
    TabPanel
} = require('@spectrum-web-components/tabs');

and got one:

Plugin Error: Error loading plugin from path: /Users/user/Documents/plugin/
Plugin Error: Module not found: @***************************** Parent module folder was: “/”.
at e.exports._throwModuleNotFound (uxp://uxp-internal/runtime_scripts_loader.js:2:17492)

[Erin_Finnegan]

Early in 2022 I helped @pkrishna with a UXP survey for developers to gauge interest in Spectrum Web Components…

I think that support is on the way, but perhaps not in place just yet. I believe it’s coming soon.

[indranil]

To add to what @Erin_Finnegan mentioned, I’d like to clarify a few things. Spectrum Web Components and Spectrum support in UXP are fundamentally different, in that, native Spectrum Widgets are in-built in UXP and don’t require any external imports. UXP only supports the ones listed here under Typography and User Interface. These native Spectrum Widgets are implementations of Spectrum guidelines and expose a subset of the functionality of the corresponding Spectrum Web Components but are not built atop web components. UXP has added initial support for Web Components commencing with v6.5 and should be rolling out support for the usage of a limited set of Spectrum Web Components (the ones listed here) with v7.0.

[medium_jon]

Thanks @indranil ! I’m looking forward to having more of it available. I do wish that the web pages for both could include a blurb about the differences between them as per @Karmalakas experience.