Enhance ContentItem component with flexed layout option and update Picker API #3633
Conversation
| { | ||
| "background": "#E8ECF0", | ||
| "flexed": true, | ||
| "snippet": "<View bg-$backgroundDefault padding-20><Picker label='Label' placeholder='Select' fieldType='settings'/></View>" |
There was a problem hiding this comment.
I think you need to remove the bg from the view, it looks off especially when adding the background color to the table cell (could be redundant too)
There was a problem hiding this comment.
Isn't <Picker padding-20 label='Label' placeholder='Select' fieldType='settings'/> better than adding the wrapper View?
There was a problem hiding this comment.
I doesn't look good when it's without the view, the View represent some sort of a list item the user can wrap it with
I think it's important to show a usage that make sense and visually more appealing
At the end the user can understand what to do with it (if they don't want to the wrapping view)
There was a problem hiding this comment.
Since you flexed the container, removing the wrapper View and the component rendered fine (minus the padding, that can be added from the Picker), no? It did to me...
If the wrapper view is not the one flexing the component this example seems misleading and just adding a strange bg color that is not a part of the picker component...
There was a problem hiding this comment.
Im adding the View for the white background not the flex
Unlike the other Picker example that looks good, in this case, without the background it just looks like two texts elements
There was a problem hiding this comment.
nvm I removed the wrapping View and used Picker's containerStyle instead
| }; | ||
| type ContentItemProps = { | ||
| item: Item; | ||
| componentName: string; | ||
| showCodeButton?: boolean; | ||
| isIncubator: boolean; |
There was a problem hiding this comment.
Why not pass category instead and check isIncubator here?
| "content": [ | ||
| { | ||
| "flexed": true, | ||
| "snippet": "<Picker preset='outline' placeholder='select' leadingAccessory={<Icon source={Assets.icons.general.favorite}/>} items={[{label: 'Selected Value', value: 1}]} value={1}/>" |
There was a problem hiding this comment.
This snippet not rendering...
|
I also updated the examples now to add the chevronDown trailing accessory because I see it wasn't included in the component itself |
Description
flexedbehavior for ContentItem (relevant for code snippets) - it allows to stretch the components (default is centered)Changelog
N/A
Additional info