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.
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.
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.
- 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
| 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.
For the boiler plate code, you can use the templates as
We'd be very grateful if you contributed to the project! Check out our contribution guidelines for more information.
This project is licensed under the Apache V2 License. See LICENSE for more information.