search

ItsJonQ / g2

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

ControlGroup: Make it easier to customize layout (width) for items #152

Closed ItsJonQ closed 4 years ago

ItsJonQ commented 4 years ago

This update makes it easier to customize layout (width) rendering for control items within ControlGroup.

ControlGroup now accepts a templateColumns prop, which accepts CSS grid-template-columns values. Passing templateColumns into ControlGroup will render the component with a Grid vs a Flex.

Screen Shot 2020-11-20 at 11 53 06 AM

For example, here is the code to render the Grid-based layout seen in the above screenshot:

<ControlGroup templateColumns="auto 1fr 1fr auto">
  <Select options={[{ label: 'Ms.', value: 'ms' }]} />
  <TextInput placeholder="First name" />
  <TextInput placeholder="Last name" />
  <Button variant="primary">Submit</Button>
</ControlGroup>

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

vercel[bot] commented 4 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/7gefxtygh
✅ Preview: https://g2-git-update-control-group-item-layout-rendering.itsjonq.vercel.app

ItsJonQ commented 4 years ago

Merging it up 😊