Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile][Experimental][styled-components] Add button primitive #19180

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Dec 16, 2019

Description

This is an exploration of x-platform style system. wordpress-mobile/gutenberg-mobile#1411
This is the second iteration on wordpress-mobile/gutenberg-mobile#1386

In this PR I used styled-system with styled-components to create a primitive Button component that can be used in web and mobile and can be styled via props. That PR contains the mobile part.

  • I added the button primitive component (TouchableOpacity) that can be used with styled-system
  • I added the theme provider and theme values (they can be a bit outdated since I took them from my previous PR [Experimental] Cross platform Box component to replace div  #17614 )
  • I used created primitive in @components/Button
  • I added isSmall, isLarge and isPrimary props and set button style related to them (just to demonstrate)
  • I used Button primitive in breadcrumbs
  • I set isLarge and isPrimary to @components/Button in ButtonBlockAppender component to demonstrate they work :)

How has this been tested?

  • Run gutenberg-mobile app
  • All buttons should look the same as before
  • Check if breadcrumbs are rendered properly
  • Check if block appender has blue background and additional padding (because of isLarge and isPrimary)

Screenshots

without isLarge and isPrimary

Simulator Screen Shot - iPhone X - 2019-12-16 at 12 06 35

with isLarge and isPrimary

Simulator Screen Shot - iPhone X - 2019-12-16 at 13 52 30

Types of changes

Experimenting with styled-components and styled-system

@dratwas
Copy link
Contributor Author

dratwas commented Feb 11, 2020

Closing since we use emotion

@dratwas dratwas closed this Feb 11, 2020
@aristath aristath deleted the rnmobile/experimental/button/styled-system/styled-components branch November 10, 2020 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant