[Toolpad Editor] Fix : text component alignment rendering

[rohanprasadofficial]

Fixes #2071

This PR targets to fix the alignment issues when rendering the text component on the canvas. It was also showing the correct alignment state on the left panel.

The typography was taking full width not allowing the text to align to correct position.
Made the typography alignment as 'auto' to fix the issue.

After Fix

text.alignment.fix.mov

• I've read and followed the contributing guide on how to create great pull requests.
• I've updated the relevant documentation for any new or updated feature
• I've linked relevant GitHub issue with "Closes #"
• I've added a visual demonstration under the form of a screenshot or video

[apedroferreira]

Simple and effective, thank you!
Suggesting a possible improvement just in case it also works.

[Janpot]

I'd think I'd like to add some visual regression tests before we merge this with

1. text that overflows the width
2. a single word that overflows the width

[rohanprasadofficial]

I'd think I'd like to add some visual regression tests before we merge this with

1. text that overflows the width
2. a single word that overflows the width

@Janpot is this configured internally or i can do that ? If yes can you point me to any docs for same ?

[Janpot]

I'm adding a test here. Once that one is merged we can add some tests for alignment as well.

I don't know if you've noticed, but this PR causes a visual regression test to fail around resizing columns: https://app.argos-ci.com/mui/mui-toolpad/builds/668/56635162

[Janpot]

This causes a regression in https://app.argos-ci.com/mui/mui-toolpad/builds/668/56635162

[apedroferreira]

This causes a regression in https://app.argos-ci.com/mui/mui-toolpad/builds/668/56635162

Oh, in the test showing grid while resizing elements I had the wrong assumption that the edges of the text are the same as the edges of the container that are used to resize columns.
So the test will probably work if instead of Text components that page uses components that take up the full width of their container, such as full-width text fields.
Let me know if you'd like me to add this fix in this PR, as it's an issue that I introduced.

[apedroferreira]

This causes a regression in https://app.argos-ci.com/mui/mui-toolpad/builds/668/56635162

Oh, in the test showing grid while resizing elements I had the wrong assumption that the edges of the text are the same as the edges of the container that are used to resize columns. So the test will probably work if instead of Text components that page uses components that take up the full width of their container, such as full-width text fields. Let me know if you'd like me to add this fix in this PR, as it's an issue that I introduced.

I've added a PR for handle the visual test regression here: #2610

[Janpot]

Can you just add a short text for each alignment in the visual regression tests? You can start them with

yarn run toolpad dev test/visual/components/fixture --dev

You can just drag three more text components to the bottom of this page and configure their alignment. The screenshot will update accordingly.

[Janpot]

Looking good, thank you!

https://app.argos-ci.com/mui/mui-toolpad/builds/760/57152531

[Janpot]

@rohanprasadofficial This PR broke the text loading indicator: #2631