Create FormLayout component
#93
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
adamkudrna
commented
Jun 2, 2020
| @@ -19,7 +20,7 @@ const CardList = (props) => { | |||
| className={styles.root} | |||
| {...other} | |||
| > | |||
| {React.Children.map(children, (child) => { | |||
| {flattenChildren(children).map((child) => { | |||
There was a problem hiding this comment.
Fragments are not traversed with React.children.map() [1][2] so I'm using the react-keyed-flatten-children bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts.
[1] https://reactjs.org/docs/react-api.html#reactchildrenmap
[2] reactjs/rfcs#61 (comment)
adamkudrna
commented
Jun 2, 2020
| name="Vertical Form Layout" | ||
| component={( | ||
| <FormLayout> | ||
| <> |
There was a problem hiding this comment.
This is an example of React.Fragment that we need to be able to traverse for the Form Layout to work even with form fields nested in fragments.
bedrich-schindler
approved these changes
Jun 3, 2020
|
Nobody noticed the tests were missing? Shame on you! 🙂 |
Updates:
|
bedrich-schindler
approved these changes
Jun 5, 2020
Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
FormLayoutcomponent and make form fields ready for itCardListandFormLayoutCloses #44.
Vertical Form Layout
With FF grid inspector on:
Horizontal Form Layout
Firefox – Subgrid Solution (auto-sized column with labels)
https://caniuse.com/#feat=css-subgrid
With FF grid inspector on:
Webkit – Fallback Solution (fixed-width column with labels)
Edge Cases
Label width is limited to 50 % of available horizontal space.