Hi. someone try enlighten me on this. Why does uxp input element add a padding top inside it’s input component and the inner background is slightly drained outside the border left and right . Technically I understand that all html input forms have an outline when on focus and this is for the accessibility issues but this with uxp is totally different and makes styling harder. The following images illustrate.
1)uxp without styling notice the left and right overflow
2)uxp with inner background set to white. notice the top and bottom padding.
- normal html input taken from w3schools.
how do I achieve number 3 using uxp
Can’t really answer your question, but I use the <sp-textfield> element and it seems to work as expected for gathering user input.
You do use that on a react-environment?
<sp-textfield> element works in vanilla JavaScript. Don’t know about React.
const textFieldValue = document.getElementById("textFieldID").value;
would love to know how to work that out on a react environment. on vanilla environment like the above, you just using without installing anything. Like it works direct from the box like other html native elements?
Yes, it works as long as your HTML has a matching element like the one below
<sp-textfield size="m" quiet type="text" id="textFieldID" placeholder="Text Field..." </sp-textfield>
you have a link to the documentation? I see like 4 documentations on adove spectrum and am not sure which one is the official one for these
I just used the Kitchen Sink example.
oh okay thank you. Let me check it out
Oh I get it now. from this blog I think it tries to explain more. Despite the fact some of the things might be outdated or better improved, the core idea on the spectrum css is still relevant. Adobe UXP: Things you need to know! #9 Adobe Spectrum | Davide Barranca — Photoshop, etc.
Spectrum components are a confusing topic 
As documentation, you’d better off referring mostly to this.
There are two flavours now, one is UXP widgets (stuff you can use in UXP without importing a single thing, just stick a <sp-textfield> in there and hope for the best) or UXP Spectrum Web Components (aka SWC: will need a manifest flag, and their support is still in its infancy).
You’ll may have more luck in terms of customisation with SWC, because UXP Widgets are mostly just bricks.
In the grand scheme of things, UXP SWC will comply with the kind of SWC you can read the documentation of here, while UXP Widgets have lived in isolation long enough to be their own species, in terms of API.
The good thing is that you can mix UXP Widgets and UXP SWC, but I haven’t been able to use SWC in React so far (I’m waiting for the new version’s docs) and the supports in terms of number of components is still very thin.
when is the new version doc coming out ?
You can follow the progress here (which SWC is available)
Each supported component should comply with the respective, official SWC documentation here, provided the version matches.
