Borders in POS UI Extensions

Is it possible to have borders around POS UI extension elements? Specifically for target pos.home.modal.render. Like this:

I know the Box component has a border property, but apparently not the POS UI version of the Box: Box . And Section components also used to have borders, but not anymore.

Hey @felix_wu

Right now, the Section component no longer has a border as of POS version 10.0.0 (more info on this here). The newer Polaris web components should support borders on <s-box>, if you wanted it use it for something similar. Something like border="base subdued solid" should work. You can see the s-box docs and examples here, which shows some syntax for creating a bordered container.

Just to confirm though, are you referencing that divider line between the two different elements there or the border around the Box container? Hope to hear from you soon/hope this helps.

I meant the border around the box container, not the divider line between the elements.

Unfortuantely, the Box you mentioned is on Admin Extensions only.

I’m working on POS UI Extensions, where s-box even in it’s newest version doesn’t have a border: Box

@Felix_Wu - thanks for checking that, and sorry for the incorrect link. You’re right, it does look like there’s no border property in the POS UI Extensions version of s-box. I’ll look into this to confirm expected behaviour for you and loop back.

Hi again @Felix_Wu

This is indeed a gap - it’s on the teams radar to address but there’s no ETA to share right now.

1 Like