Pass some layout props to panel's content container #1974
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.
Toolbox branch: https://github.com/xh/toolbox/tree/paddingOnPanel
Toolbox PR: xh/toolbox#415
This PR resolves issue #1971 . I found that in addition to 'padding' it made sense to pass the following style keys to the content container:
'overflow', 'alignItems', 'alignContent', 'justifyContent'
If others don't share my enthusiasm for all of these, I could back down on 'alignItems', 'alignContent', 'justifyContent', but 'padding' and 'overflow' are great.
I was pleasantly surprised by how many cleanups were possible in Toolbox (see PR) by using this change.
The one disadvantage to this is that the app's standard padding value --xh-pad-px is not available to the JS when using panel({padding: 10}). This could be resolved by creating a js version of the value on the appModel or some other central location, but leaving that for discussion.
Another solution could be creating a prop called contentClassname that takes a css class(s) and passes it on to the content container. This would save the dev from having to always write .panelClass > .xh-vframe { ... to style the content.
Also wondering if it is worth documenting on Panel.js what style props are accepted and placed where. 'width', 'height', 'flex', etc... have all been accepted and working but not documented clearly. Now with some style props being applied differently, it might be worth putting in the docs which apply where.
Hoist P/R Checklist
Pull request authors: Review and check off the below. Items that do not apply can also be
checked off to indicate they have been considered. If unclear if a step is relevant, please leave
unchecked and note in comments.
develop
branch as of last change.If your change is still a WIP, please use the "Create draft pull request" option in the split
button below to indicate it is not ready yet for a final review.