Add missing screenshots of the components in the documentation.

[Trancever]

Couple components are missing the screenshots in the documentation. We should provide nice-looking screenshots that will improve the developer experience.

The first part of the ticket is to find out which components are missing screenshots.
The second part is to create them.

[cmargieson]

Showing the component rather than a screenshot could be another approach.

Perhaps using something like react-native-web

Screenshot List

• ActivityIndicator

• Appbar

• Appbar.Action

• Appbar.BackAction

• Appbar.Content

• Appbar.Header

• Avatar

• Avatar.Icon

• Avatar.Image

• Avatar.Text

• Badge

• Banner

• BottomNavigation

• Button

• Card

• Card.Actions

• Card.Content

• Card.Cover

• Card.Title

• Checkbox

• Checkbox.Android

• Checkbox.IOS

• Chip

• DataTable

• DataTable.Cell

• DataTable.Header

• DataTable.Pagination

• DataTable.Row

• DataTable.Title

• Dialog

• Dialog.Actions

• Dialog.Content

• Dialog.ScrollArea

• Dialog.Title

• Divider

• Drawer

• Drawer.Item

• Drawer.Section

• Fab

• FAB.Group

• HelperText

• IconButton

• TouchableRipple

• List

• List.Accordion

• List.AccordionGroup

• List.Icon

• List.Item

• List.Section

• List.Subheader

• Menu

• Menu.Item

• Modal

• Portal

• Portal.Host

• ProgressBar

• RadioButton

• RadioButton.Android

• RadioButton.Group

• RadioButton.IOS

• RadioButton.Item

• Searchbar

• Snackbar

• Surface

• Switch

• TextInput

• ToggleButton

• ToggleButton.Group

• ToggleButton.Row

• Typography

• Text

• Subheading

• Title

• Paragraph

• Headline

• Caption

[Trancever]

@cmargieson Yeah, I agree. Ideally, we would like to have a "live preview", but this requires a lot more work and we don't have that much capacity at this moment. That's why we want to provide missing screenshots for now.

And thanks for making the list, it's really helpful <3

[potatowave]

I was going to make a new thread, but thought I might as well tack on to this issue.

The documentation states

Both icon and avatar cannot be specified.

However the image above shows Chips with both avatars and icons. I consider that the Icon's in the avatar Chip's may simple be nested icons, however the documentation could better articulate this by providing an example as per the included pictures.

[cmargieson]

Thanks for the feedback @Trancever, I'm glad the list us useful!

I'd like to see how live previews could be implemented. Do you mind if I try to come up with a PR?

[mMajch]

I've created a PR with screenshots that I find missing in docs. For some components, I've decided not to add a new screenshot, as there is another image in the given section that already presents the component.

[Trancever]

@cmargieson Yeah, we are always happy to accept PRs from external contributors!

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.