Hello,
With the new web-components, paragraph and heading can’t be centered. Interestingly, the patterns example are showing centered text in an empty state (which should definitely have its own specialized component), but if the text goes over two lines, you will see that it is actually not centered (it will be left aligned).
I think that both s-heading and s-paragraph should have an align=“start | center | end” property.
Thanks for the feedback @bakura10.
We currently don’t support this as the different Polaris Surfaces currently do not use center or end aligned typography for Heading and Paragraph.
Was there an example of what you are trying to build and why this would be important to have? Is there another way to achieve this with layout components?
Yes, there are various places where it is important. For instance, the empty state:
Here, the problem is not visible because the content is short. If you make the text slightly longer so that it goes over two lines, you will see the problem.
Another example are the footer help, that are available throughout the admin and that are not currently achievable due to lack of text centering:
I think that when designing this you were thinking that you could just use grid and justify items to center, but this does not work as soon as you have multi-lines text.
You can still use the style property, that’s how I’ve done it on my app:
<s-text style="text-align: center">
Your very long text
</s-text>
Great idea. Although it feels this should be part of Polaris.