[BUG] Can't set proper full border radius for button

Photoshop
21

I NEVER use sp components, they are SO limited in terms of styling. All my UI is based on pure divs which they are still limited like opacity can only be 0 or 1 lol but can’t be something in between… But divs are the way if you want more customizable UI in your UXP plugins.

In fact, I don’t use HTML or CSS, I use pure javascript as the .CSS seems to be limited aswell and some features are available through JS but not through CSS. If you want “full” custom UI you should go with pure JS.

1 Like
22

Can you name few of them please?

23

I’m not sure i understand :thinking: You’d still need to render HTML and styles to show some UI, wouldn’t you? How do you have UI without any HTML or CSS?

24

Can’t really remember what sorry If I can’t help with that feedback… I was when UXP starting to be a thing and I switched right away to pure JS styling. I also tried to use in JS element.className("my_class") and didn’t work, I don’t know if it is still not working but I remember I used only JS and created HTML elements with JS without the use of the index.html.

25

What I meant is that I don’t use an index.html as the main source in my manifest, I use a main.js, I do use CSS styling and HTML elements but everything created
through Javascript.

26

I have the same - no index.html :man_shrugging: But it’s exactly the same result as if you had it with the same structure HTML and styles. I don’t really see how it helps.

But anyway, styling divs from scratch to make them look like Ps buttons and then trying to replicate all the interaction seems like overkill

27

Depends on the size of the project. I did the same for one company flag ship plugin. You don’t need to duplicate all components with all variants and all features. But only those used. It takes a while but then you have full control over almost everything and saves a lot of time later on.

28

Unless Adobe changes Ps design :smiley:
But on a serious note, it still wouldn’t solve my problem, because DIVs have exact same issue :man_shrugging:

29

I don’t try to match PS UI. So no problem on that side :smiley:

30

As I mentioned I use pure JS because some features (which I don’t remember) didn’t work straight in CSS and worked calling them from JS so I stick with that since then.

I built my own JS UI library for my plugins styling so is easy for me to build new ones that look alike all my software. So, do it once well and work faster after.

31

I still don’t understand what you mean by that. Could give an example of what calling them from JS means? :face_with_monocle:

32

CSS ( I don’t use this )

.div-style {
   background-color: red;
   width: 100px;
   height: 100px;
}

JS ( This is what I mean by calling them (properties) from JS )

const div = document.createElement('div');
div.style.backgroundColor = "red";
div.style.width = "100px";
div.stytle.height = "100px";
33

Oh, I see… It’s quite strange the former in some cases wouldn’t work. It’s still basically the same styling. But I don’t think this approach would be viable in my case - my CSS is quite complex and deep nesting heavily depends on CSS variables :disappointed:

34

I feel your pain… I had it like that with CEP but now with UXP is another story. Maybe ChatGPT can help to write a NodeJS function to migrate your CSS into JS :smiley: ?