It seems like sections are not inheriting the style of the page, resulting in sections that stand out and look quite bad.
A <s-section/> placed on the thank you page has no border or padding even though all the automatic sections (order confirmed map, order details, etc.) have borders and padding.
Conversely, a <s-section/> placed on the order status page has a border even though all the automatic sections have no borders.
Sure. Here’s a screenshot of the order status example. The code is copy and pasted from the section docs. As you can see, the topmost “rewards” section (which uses the section web component) has a border while none of the other automatically generated sections do.
The problem exists on thank you page as well, but manifests slightly differently. There, sections lack padding and border when they should have both.
Hey @aaron_barbieri - thanks for flagging this, and thanks for the screenshot too, that helps a lot.
Just to help with the investigation on our end here, could you share a couple more details?
Which extension targets are you using for the thank you page and order status page? (e.g. purchase.thank-you.block.render, customer-account.order-status.block.render, etc.)
Are you using the same code/component for both pages or are these separate extensions?
My understanding is that the s-section component is supposed to adapt its styling based on context, so if it’s not matching the native sections that does seem like something potentially isn’t right. I just want to make sure I have the full picture before I dig into this further on our end.
Extension targets: purchase.thank-you.block.render and customer-account.order-status.block.render
They are different extensions in the sense that module points to two different files (because the hooks i get access two with each target are slightly different). but the UI code is re-used across both with both using <s-section/>
One quick update, the border issue on the order status target was fixed sometime after i posted, but the padding and lack of border on the thank you page target still exists and is definitely the worse offender! Specifically, the section lacks a border when it should have one, and lacks padding when it should have base level padding.
please let me know when this is fixed because it will actually break production UI for us! (sections will have double borders until i remove the manual border/padding that we added with a <s-box/>)
