search

ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Flex, HStack, FontSizePicker: Improve responsive rendering for longer translation labels #252

Closed ItsJonQ closed 3 years ago

ItsJonQ commented 3 years ago

This update improves Flex-based layout rendering for potentially longer translation labels.

This is achieved by enhancing how Flex handles wrap rendering. Previously, Flex only provided margin gaps on one axis (either x for horizontal, or y for vertical). With the updated <Flex wrap />, the gap value is now applied on both x and y to accommodate wrapped content.

This solution seems to work well. However, it involves quite a bit of manual CSS for the individual children of HStack.

The FontSizeControl how uses HStack instead of Grid for inner UI rendering.

Screen Shot 2021-02-01 at 11 15 51 AM

(Screenshot of Google translated German labels)

Screen Shot 2021-02-01 at 11 21 47 AM

(Original English labels)

FontSizeControl

The changes made to this FontSizeControl need to be ported to Gutenberg. We technically don't need to update FontSizeControl here. I mostly did it for reference to make the updating easier in Gutenberg.

Resolves https://github.com/ItsJonQ/g2/issues/251

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/itsjonq/g2/kbjmtuwun
✅ Preview: https://g2-git-update-flex-wrap-font-size-control.itsjonq.vercel.app