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

[Experimental][styled-components] Add button primitive #19069

Closed

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Dec 11, 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 could be used in web and mobile and could be styled via props.

  • I added A and button components since both of them are used in @components/Button. They accept className as a prop to be backward compatibility ( we need to support already existing themes ) and all style props that are supported by styled-system
  • I added the theme provider and theme values (they could be a bit outdated since I took them from my previous PR [Experimental] Cross platform Box component to replace div  #17614 )
  • I used created primitives in @components/Button (after that all buttons uses the primitives)
  • I passed styles via props instead of CSS in the Inserter button.
  • In addition, I created BlockBreadcrumbButton components that use primitives instead of @components/Button just to demonstrate.

How has this been tested?

  • Run Gutenberg web
  • All buttons should look the same as before
  • Check if BlockBreadcrumbButton looks correct with and without hover/focus
  • Check if Inserter button looks correct

Screenshots

Screenshot 2019-12-17 at 12 59 33

Screenshot 2019-12-17 at 12 59 43

Screenshot 2019-12-17 at 13 01 47

Screenshot 2019-12-17 at 13 02 02

Types of changes

Experimenting with styled-components and styled-system

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .

@dratwas dratwas changed the title [Experimental] button - styled system with styled components [Experimental][styled-components] Add button primitive Dec 16, 2019
@dratwas dratwas marked this pull request as ready for review December 18, 2019 09:48
@dratwas
Copy link
Contributor Author

dratwas commented Feb 11, 2020

Closing since we use emotion instead

@dratwas dratwas closed this Feb 11, 2020
@aristath aristath deleted the 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