Skip to content

adobe/swc-uxp-wrappers

Spectrum Web Components UXP Wrappers

What is this effort?

The opensource Spectrum Web Components(SWC) UI library (hereafter referred to as SWC) targets the modern browser as a platform, replete with support for almost all CSS properties, layout models and Web APIs conforming to the latest standards. UXP never intends to be an all-encompassing browser and thus doesn't support a considerable section of these aforementioned APIs and properties. To bridge this chasm, the UXP team has decided to supplant some of the CSS properties and layout models with other UXP-supported properties in an attempt to achieve UI parity with that of SWC on web. This wrapper is an implementation of this approach.

What does this repository contain?

This repository contains, as the name implies, wrappers over the opensource SWC components so that these components can be used in a UXP context, utilizing CSS properties etc. that are compatible with the UXP library.

How does this approach work?

UXP doesn't re-create the entire SWC repository but rather extends from the existing components and (currently) only overrides the CSS styles to address the gaps between UXP and that of a modern web browser. An example to illustrate this is wherein the display: grid property which indicates the usage of a Grid layout is replaced with display: flex (Flex layout model) and other appurtenant changes in CSS styles to achieve parity with Grid layout.

This approach allows us to

  • override the css styles to make the component work properly in UXP
  • lock the underlying spectrum web component version to be compatible with UXP, insulating UXP wrappers from frequent changes in the SWC library

Supported SWC components

Components Supported SWC version Unsupported variants/Known issues
Action Bar 0.37.0 Known issues
Action Button 0.37.0
Action Group 0.37.0
Asset 0.37.0 Known issues
Avatar 0.37.0
Banner 0.37.0
Button 0.37.0
Button Group 0.37.0
Card 0.37.0 Known issues
Checkbox 0.37.0 Known issues
Dialog 0.37.0
Divider 0.37.0
Field Group 0.37.0
Field Label 0.37.0
Help Text 0.37.0
Illustrated Message 0.37.0
Link 0.37.0 Known issues
Menu 0.37.0 Known issues
Meter 0.37.0 Known issues
Number Field 0.37.0 Known issues
Overlay 0.37.0 Known issues
Picker Button 0.37.0
Popover 0.37.0
Quick Actions 0.37.0
Radio 0.37.0
Search 0.37.0 Known issues
Sidenav 0.37.0 Known issues
Swatch 0.37.0
Switch 0.37.0 Known issues
Table 0.37.0 Known issues
Tags 0.37.0 Known issues
Texfield 0.37.0 Known issues
Toast 0.37.0
Tooltip 0.37.0
Utils 2.0.1
⚠️ The components which work out of the box (like Icon , Icons, Icons UI, Icons Workflow, Iconset ) and the ones required for an SWC app (Base , theme , styles,shared,reactive-controllers) are included in the @swc-uxp-wrappers/utils package. Therefore these do not need to be loaded explicitly and uxp-wrappers/utils becomes a prerequisite for building the swc-uxp-app.

Quickstart

For the boiler plate code, you can use the templates as

Template for vanilla js

Template for react context js

Contributing

We'd be very grateful if you contributed to the project! Check out our contribution guidelines for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.