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

[Exploration] Make @wordpress/components/Button cross-platform using styled-system #1411

Open
pinarol opened this issue Oct 4, 2019 · 1 comment

Comments

@pinarol
Copy link
Contributor

pinarol commented Oct 4, 2019

This is the second iteration on #1386

If preferred this work can be based on the existing experiment branch: WordPress/gutenberg#17614

We want to refactor Button component in a way that uses styled-system similar to what we did for Box here in this PR.
gutenberg/packages/components/src/button/index.js

The aim is being able to test that we can apply its styles using props. But we should be careful about keeping it backward compatible. What does it mean to keep it backward compatible? Well, currently themes rely on tag names as well as class names to be able to override existing styles we use. So we shouldn't cause unwanted regressions on themes. In order this to happen we should keep classes applied as the same way. Fortunately this is looks easy, styled-components allow it and we already demonstrated how to inject the already existing css into it here.

1st iteration(only effects web version):

  • Allow passing style via props to Button on gutenberg repo
  • Refactor a few places Button is used and pass the style via props, 3 sample cases would be fine.
  • Remove unused css from .scss files but keep the class names applied to Button as themes might be using those
  • Other Button instances should keep on working the same

2nd iteration:
Another PR to demonstrate that the Button API works on mobile too. Currently the props on mobile and web are pretty different. At this point choose some props that mobile doesn't support, like isDefault, isLink, add mobile side implementation in button/index.native.js for them. Currently there's no use case on mobile using these props so you can create a new test block(or add them to an existing simple block) just to demonstrate them using the example app.

@pinarol
Copy link
Contributor Author

pinarol commented Oct 14, 2019

Re-opening this, since this was referenced by the wrong PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants