Those will make very useful additions to the documentation and will hopefully save future devs from a lot of head scratching.
As previously mentioned, I’m working on an SWC kitchen sink plugin - so far I’ve found a load of what I believe to be SWC components that do not confirm to specifications as denoted in the UXP compatibility table, but I figure it’s best to deliver all my findings in one go rather than piecemeal. I will update once finished.
@indranil I remember someone in UXP team mentioned that SWC flag allows you to see rejected promises as errors… Do you have an example of how to set this up? It would save us a ton of time.
That’s not available yet since there are some very weird ramifications of having it enabled by default as it keeps throwing up errors in the Debugger console due to how CDT works.
Is ComboBox support coming at some point?
Could you share the link to this component? I don’t see any such component on this page. I hope you’re not referring to the React Spectrum ComboBox component. This discussion is about the support of Spectrum Web Components, not the React Spectrum UI library(something that UXP doesn’t intend to support).
combobox is pending in SWC according to the documentation for sp-picker-button
I talk about ComboBox from Spectrum specification: Spectrum, Adobeâs design system
There is an implementation in react-spectrum, and honestly my preference would be to use that, not just pure SWC. Or at least there should be an option to have full flexibility of react implementation
As @indranil stated, the only options in UXP are the baked-in sp-elements, SWC, and React SWC wrappers.
Of the latter two only a sub-set of the full SWC library has been ported to UXP.
For combobox to be in consideration for UXP it needs to be in SWC first (which at least is allegedly pending).
I imagine it’ll be a long wait, if at all
I tried popover with Alchemist and finally dropdown works the way I always wanted to.
But for search field within the popover… I can’t get any events when user types into field. Also, the backspace and arrows are not working. I will need to move it outside. Unless there is chance to fix it.
Where can I find an overview of sp-story-decorator and how to use it?
Looking at the SWC Storybook, there is a Reduce Motion setting. I would like to enable this.
Reading the code, it seems that is controlled by the attribute reduce-motion in sp-story-decorator. However, there doesn’t seem to be any specific information other than README on GitHub.
What you’re referring to is mostly related to animation and since UXP doesn’t support animation, that setting shall end up being a no-op.
Oh, understood. Thank you for your answer @indranil.
I am also publishing Adobe Express add-ons and would like to reduce the sp-picker animations, especially in the Express theme. Therefore if you know about sp-story-decorator, I would be grateful you let me know.
If that is off-topic and you can’t tell me, you don’t have to answer.
NOTE FOR OTHERS: THIS IS OFF-TOPIC AND NOT RELATED TO UXP, JUST FOR SUPPORT!
Well sp-story-decorator is an internal component, not meant for public consumption and there’s no public API to achieve the effect of reduced animation for an SWC component. The CSS that gets applied upon toggling that switch is here.
--spectrum-global-animation-duration-100: 0ms;
--spectrum-global-animation-duration-200: 0ms;
--spectrum-global-animation-duration-300: 0ms;
--spectrum-global-animation-duration-400: 0ms;
--spectrum-global-animation-duration-500: 0ms;
--spectrum-global-animation-duration-600: 0ms;
--spectrum-global-animation-duration-700: 0ms;
--spectrum-global-animation-duration-800: 0ms;
--spectrum-global-animation-duration-900: 0ms;
--spectrum-global-animation-duration-1000: 0ms;
--spectrum-global-animation-duration-2000: 0ms;
--spectrum-global-animation-duration-4000: 0ms;
--spectrum-animation-duration-0: 0ms;
--spectrum-animation-duration-100: 0ms;
--spectrum-animation-duration-200: 0ms;
--spectrum-animation-duration-300: 0ms;
--spectrum-animation-duration-400: 0ms;
--spectrum-animation-duration-500: 0ms;
--spectrum-animation-duration-600: 0ms;
--spectrum-animation-duration-700: 0ms;
--spectrum-animation-duration-800: 0ms;
--spectrum-animation-duration-900: 0ms;
--spectrum-animation-duration-1000: 0ms;
--spectrum-animation-duration-2000: 0ms;
--spectrum-animation-duration-4000: 0ms;
--spectrum-coachmark-animation-indicator-ring-duration: 0ms;
--swc-test-duration: 1ms;
See if setting these CSS variables in your Express Add-on helps achieve the desired effect.
Thanks. I tried overriding that CSS in DevTool for the time being and it actually worked.
@indranil I am trying to understand the reason why the spectrum component is hidden in SWC. The SWC checkbox is made from elements as a nice UI and at the same time, there is an invisible spectrum checkbox as a duplicate.
I am thinking of creating my own checkbox from scratch and wonder whether I should use a similar approach or not.
I’m not quite sure which hidden component are you referring to. Could you please share a snapshot/debugger output of it?
The sp-checkbox with opacity set to 0.005 inside the shadow component making it focusable I guess.
Don’t go down that route since Photoshop doesn’t support opacity. It just treats all non-zero values as 1. As for why it’s there, the SWC team probably required the actual events on the native Input widget and then created their own UI over it, backed by the native platform widget and then hiding it.
Hello everyone,
I used the solution from Jarda to create an autocomplete combobox. LAizypainter/src/components/comboBox/comboBox.comp.tsx at main · DimaChaichan/LAizypainter · GitHub
The whole thing works on Mac, but not on Windows. Which is quite annoying. Before I rebuild everything I wanted to know if there is any news? The problem is that a texffield does not fire an event and some keys (backspace, esc, etc.) do not work.
Best regards.
Hi @ElSpeedy,
Welcome to the forum!
Please start a new thread since this is a new topic.
I’ve had a request to lock this thread from further posts.