Reconsider Adobe Spectrum?

[richardolsson]

Having recently started implementing more complex UI using Spectrum, we've run into some issues. Let's collect concerns here, and then reevaluate whether we should stick with Spectrum or migrate ASAP to something else.

[richardolsson]

Please share your thoughts here going forward, @nehahirve

[ghost]

The biggest hurdle I'm having so far is that it doesn't seem to obviously enable media queries, or custom layout changes depending on the screen width.

But this is maybe a SSR problem rather than a spectrum issue?

[ghost]

I am using <ul> and <li> elements instead of ListBox for a list of links, since I can’t make it work with links — that component doesn’t seem to be designed for a list of links, rather a list of options that can be selected.

Doesn't seem to have a separate List component, or if it's needed.

[ghost]

The search drawer is proving difficult to implement using the out of the box spectrum components -- they provide us with Dialog and DialogContainers for overlays, which is 1. not really what the search drawer is, and b. is limited in terms of positioning

[ghost]

The data picker component in spectrum is pre-alpha and not included in the published package -- as such there is no out of the box way to make a calendar w React spectrum

https://github.com/adobe/react-spectrum/tree/main/packages/@react-spectrum/datepicker

[richardolsson]

Accidental close, sorry!

[ghost]

difficult to test layout things in unit tests. Cannot find any documentation or plugins or discussion as to how to integrate spectrum w/ Cypress for unit testing, ended up using inline styles to test DOM layout

[kristofferlarberg]

The Tabs component does not make possible displaying content above the tab options, which would have been perfect in terms of the UI for /my*. The component only allows for display below and to the right and is not something that seemed possible to quickly modify. However, there is a new version (release candidate) out now, which has a slightly different structure.

Another thing that would need to be modified if using Tabs is how it collapses into a Picker when there is not enough vw.

[kristofferlarberg]

The Button offers five different variations. These variations mainly entail different colors and can be used with the isQuiet prop which removes border and background color (only shown on hover). In my opinion this is too limited and would have been great with an easy way of changing for instance border-radius and padding in other ways than regular css.

The structure in general is very solid, which is a good thing if you don't need to many custom modifications. In terms of responsiveness it's as mentioned above tricky to make custom variations. It would have been optimal to be able to decide sizing for certain elements at different screen widths, but maybe also to be able to change certain component props when width changes.

Adding your own color to an element doesn't go so well with the dark/light mode functionality of the theme (which otherwise is quite nice) since the custom color wont change with the theme switching between dark/light (is there an easy way of achieving this?).

Here's a demo of /my* and some quick fixes I did before handing in the degree project for review:
https://www.dropbox.com/s/sxpj3ptlwx07rw4/zetkin-mypage-demo-720.mov?dl=0

[ghost]

The action button does not have a way to add padding -- it provides correct padding when i pass in a string directly but not when I put in a Msg component

[richardolsson]

I've created issues #192 and #193 to test Material UI as an alternative in two different scenarios.

[richardolsson]

This rich-text editor for Material UI seems really nice: https://github.com/niuware/mui-rte

(An RTE will be necessary for call assignment, notes and other things)

EDIT: More good examples exist here: mui/mui-x#513

[richardolsson]

We decided to migrate to MUI.