ItemGroup: experimenting with chevron icon #36654
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
ciampo
added
[Type] Enhancement
|
Size Change: +190 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
|
Oh nice, thanks for the PR and the video. Just at a glance this seems like a decent solution in both enabling a longer text label by default, while still showing the chevron when in the context of moving into the property. The chevron part of the ItemGroup component is not one I've a deep understanding of. @pablohoneyhoney I think you've put thought into this: from the video above, what are your thoughts? Thanks both! |
Just to clarify — with this PR, the chevron is not part of the More context in #36653 |
|
Sounds good to me on a high level. Coming at it mostly from looking at where these behaviors could/would be used, my instinct goes towards global styles, where the inspector slides right in waterfall behavior — that could benefit from the chevron. Whereas when the ItemGroup is used for colors in the post editor, for example it would not slide the inspector, but just immediately go to an overlay — in that case, a right pointing chevron would not be as useful. So it seems good to enable both. Mockup from #35093
|
|
Nice! The notes above by @jasmussen make a lot of sense.
Not sure if this would be considered the same component, but it's a similar case than last.
As far as the cases of the arrow appearing in larger texts (which we should recommend against anyways, so perhaps there's a cap or a tip showing if that's the case), the video above looks good. |
|
Thank you @jasmussen and @pablohoneyhoney for your feedback!
Glad to see that the examples that I created seem to cover all cases where a chevron icon would be useful. Just to be clear, the approach that we'd be taking with this PR is to add an example to Storybook of how the chevron icon could be added to an We discussed this approach and its alternatives in #36653
I don't think that the area clicked to open the color picker in this example is an |
mirka
approved these changes
Nov 23, 2021
Nice! I'll go ahead and merge this. We can always iterate over whatever approach we decided taking in #36653 |
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.
Description
This PR adds a couple of Storybook examples about how a chevron icon (">") could be displayed within the
Itemcomponent (in theItemGroup"family") — see #36653 for more context.How has this been tested?
Visit the "Complex Layouts" example in the
ItemGroup's StorybookScreenshots
itemgroup-chevron-1.mp4
Types of changes
Enhancement / new feature
Checklist:
*.native.jsfiles for terms that need renaming or removal).