feat(collapsible-panel): add prop to set alignment of header controls #1101
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
jonnybel
added
💅 Type: Enhancement
tdeekens
reviewed
Oct 15, 2019
| const baseStyles = css` | ||
| display: flex; | ||
| flex: 1; | ||
| align-items: center; | ||
| list-style-type: none; | ||
| justify-content: space-between; | ||
| justify-content: ${headerControlsAlignment === 'left' |
There was a problem hiding this comment.
I like the fact that alignment encapsulates the fact that flexbox is used instead of exposing all justify-content options through the prop.
|
Looks reasonable to me |
|
Kind of annoying we can't really rely on our VRTs because of the new prop |
montezume
approved these changes
Oct 15, 2019
jonnybel
removed
👨🎨 Status: UI/UX Review
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.
Summary
This PR proposes adding a prop to set the alignment of the
headerControlsofCollapsiblePanel.Why?
We have a bunch of these
CollapsiblePanelcomponents in our MC which have a input/control on the left side of header. Currently, our component allows setting aheaderControlsbut it’s always aligned to the right and there is no way to override that positioning.This example in the image is achieved by setting the input in the
headerprop, and we need to add a wrapper to make sure clicking on the input/control doesn’t trigger the collapsing of the panel. This seems unnecessary because theheaderControlsprop already does this for you, but we can’t use it because of the inflexible alignment.To-do
If this accepted, I'll add the VRTs and update the readme.☑️