Text align property isn't working within flex container

scottrepreneur commented 1 month ago

Describe the bug

Edit: this appears to be specifically when the containing Box is set to display='flex'

Appears to occur on both Text and Heading components.

I am adding align to a Text component, but it is not being [centered] accordingly, ~~similar to the Heading component~~. Applying textAlign='center' on the parent works for Text but doesn't seem to affect Heading in my experience (works, if consistent here).

Link to Minimal Reproducible Example

will try to add

Steps To Reproduce

Add Heading and Text component into a Box using display='flex'
Use align='center', text is not aligned
Use textAlign='center' on the parent Box, text is aligned.

Frog Version

0.11.x

TypeScript Version

5.4.5

Check existing issues

[X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

dalechyn commented 1 month ago

I believe that adding display='flex' would shrink elements width to it's min-content, thus the Box size would equal Text/Heading. Does it happen if you add grow prop to Box?

github-actions[bot] commented 1 month ago

Hello @scottrepreneur.

Please provide a minimal reproduction using StackBlitz, TypeScript Playground (for type issues), or a separate minimal GitHub repository.

Minimal reproductions are required as they save us a lot of time reproducing your config & environment, and trying to reproduce your issue. See Why reproductions are required.

Please reopen this issue when a reproduction is added.

wevm / frog