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.

Sign up for GitHub

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

Jump to bottom

[RNMobile] Introduce a common API to style Button from both web and mobile #19179

Closed
wants to merge 4 commits into from
Closed

[RNMobile] Introduce a common API to style Button from both web and mobile #19179

wants to merge 4 commits into from

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Dec 16, 2019 •
edited
Loading

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

Gutenberg-mobile PR - wordpress-mobile/gutenberg-mobile#1684

In this PR I used styled-system with emotion to create a primitive Button component that could be used in web and mobile and could 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 emotion and styled-system

@dratwas dratwas mentioned this pull request Dec 18, 2019
Closed
@dratwas dratwas marked this pull request as ready for review December 18, 2019 09:52
dratwas
dratwas commented Feb 21, 2020
View reviewed changes
packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -27,8 +28,9 @@ const BlockBreadcrumb = ( {
} ) => {
return (
<View style={ styles.breadcrumbContainer }>
<TouchableOpacity
style={ styles.button }
<PrimitiveButton
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes are only for demonstrating how to style component usingstyled-system props

dratwas
dratwas commented Feb 21, 2020
View reviewed changes
packages/block-editor/src/components/button-block-appender/index.native.js
@@ -38,6 +38,8 @@ function ButtonBlockAppender( {
rootClientId={ rootClientId }
renderToggle={ ( { onToggle, disabled, isOpen } ) => (
<Button
isLarge
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For demonstrating that isPrimary and isLarge works

@pinarol
Copy link
Contributor

pinarol commented Feb 26, 2020

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 :)

Just to confirm, this PR doesn't include real implementations of these props. But just demonstrates a way about how to use such props to customize style.

@pinarol pinarol changed the title [RNMobile][Experimental][emotion] Add button primitive [RNMobile] Introduce a common API to style Button from both web and mobile Feb 26, 2020
@dratwas dratwas mentioned this pull request Feb 26, 2020
Closed
15 tasks
@gziolo gziolo added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Nov 14, 2020
@gziolo gziolo added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Nov 28, 2020
@gziolo
Copy link
Member

gziolo commented Nov 28, 2020

Just to confirm, this PR doesn't include real implementations of these props. But just demonstrates a way about how to use such props to customize style.

This PR is quite old, and it has unclear status. Do you plan to work on it further or can it be closed?

@dratwas dratwas closed this Jan 18, 2021
@gziolo gziolo deleted the rnmobile/experimental/button/styled-system/emotion branch January 18, 2021 10:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@talldan talldan Awaiting requested review from talldan

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees
No one assigned
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dratwas @pinarol @gziolo