Skip to content

Styled System exploration for Cross Platform components #1386

@pinarol

Description

@pinarol

Let's explore styled-system to see how it can be useful for designing cross platform primitives.

For this exploration we can use a CSS-in-JS library such as Styled Components. Although it is optional and if there's a better one feel free to use that one.

What should be done?

  • Introduce a Box component to replace div/View.
  • Layout and styling of the Box component should be possible via props. We shouldn't pass className to it, instead all the CSS will be hidden inside Box.
  • Replace div usages in gutenberg/packages/block-library/src/gallery/gallery-image.js with Box keeping the same look.
  • Lastly remove unused CSS lines.

Here's a branch with some already done work, let's checkout a new branch from this branch and keep working based on this: WordPress/gutenberg@rnmobile/master...experimental/styled-system-poc the branch still uses old way of getting up the development environment so npm run dev will still work for now. If at some point we need to update it from master we should refer to the updated guidelines.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions