Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass some layout props to panel's content container #1974

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

cnrudd
Copy link
Member

@cnrudd cnrudd commented Jun 25, 2020

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.

  • Caught up with develop branch as of last change.
  • Added CHANGELOG entry, or determined not required.
  • Reviewed for breaking changes: CHANGES SO FAR ARE NOT BREAKING CHANGES
  • Updated doc comments / prop-types, or determined not required.
  • Reviewed and tested on Mobile, or determined not required.
  • Created Toolbox branch / PR, or determined not required.

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.

Pull request reviewers: when merging this P/R, please consider using a squash commit to
collapse multiple intermediate commits into a single commit representing the overall feature
change. This helps keep the commit log clean and easy to scan across releases. PRs containing a
single commit should be rebased when possible.

@amcclain amcclain self-assigned this May 26, 2021
@amcclain amcclain marked this pull request as draft August 4, 2021 17:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants