[Experimental][styled-components] Add button primitive #19069
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
withstyled-components
to create a primitive Button component that could be used in web and mobile and could be styled via props.A
andbutton
components since both of them are used in@components/Button
. They acceptclassName
as a prop to be backward compatibility ( we need to support already existing themes ) and all style props that are supported bystyled-system
Box
component to replacediv
#17614 )@components/Button
(after that all buttons uses the primitives)BlockBreadcrumbButton
components that use primitives instead of@components/Button
just to demonstrate.How has this been tested?
BlockBreadcrumbButton
looks correct with and without hover/focusScreenshots
Types of changes
Experimenting with
styled-components
andstyled-system
Checklist: