docs: add screenshots of FAB, Paper, ProgressBar and Switch components #227
Conversation
src/components/Switch.js
Outdated
| * <div class="screenshots"> | ||
| * <div> | ||
| * <img src="screenshots/switch-android.png" /> | ||
| * <span>Android</span> |
There was a problem hiding this comment.
We should add some CSS for captions
There was a problem hiding this comment.
What style do you suggest? Perhaps italics, smaller font?
There was a problem hiding this comment.
Let's copy from here https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage :p
src/components/FAB.js
Outdated
| @@ -39,6 +39,10 @@ type Props = { | |||
| /** | |||
| * A floating action button represents the primary action in an application | |||
| * | |||
| * <div class="screenshots"> | |||
| * <img src="screenshots/fab.png" /> | |||
There was a problem hiding this comment.
I think we should split items into separate screenshots. For example, paper and switch look noisy with many screenshots in a small dimension https://281-71323749-gh.circle-artifacts.com/0/docs/paper.html
There was a problem hiding this comment.
So, for the switch examples you prefer 8 screenshots with all states, or should I drop some states from snapshots?
There was a problem hiding this comment.
I think 3 screenshots with 2 items in each of them should be fine!
| .screenshots > img { | ||
| width: 280px; | ||
| .screenshots img { | ||
| max-width: 280px; |
There was a problem hiding this comment.
Using max-width makes the screenshot sizes non-deterministic. For example you can see that the switch and paper screenshots look smaller than the button screenshots. Let's change it back to absolute width.
There was a problem hiding this comment.
I can't see what you see :/
There was a problem hiding this comment.
Oh, I think it looks that way because of the small font size in some screenshots. Have you resized them? I kept the size 1:1 when creating the screenshots.
There was a problem hiding this comment.
I updated the screenshots with Pixel 2 emulator (for Android). Now they should look more similar to the button ones.
| flex-direction: column; | ||
| } | ||
|
|
||
| .screenshots > * { | ||
| margin: 4px; |
There was a problem hiding this comment.
The margin in button screenshots and switch screenshots seem different. Can you check that?
There was a problem hiding this comment.
The only difference I see a margin between the screenshots and the paragraph above. Where do you see the difference?
There was a problem hiding this comment.
Yes, that's the margin I'm talking about
There was a problem hiding this comment.
That was caused by change to the "Usage" label below. I updated that labels now.
| @@ -31,7 +31,7 @@ export default Paragraph; | |||
|
|
|||
| const styles = StyleSheet.create({ | |||
| text: { | |||
| fontSize: 14, | |||
| fontSize: 20, | |||
There was a problem hiding this comment.
No, it wasn't. Reverted now.
No description provided.