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

feat: update types package to styled-system v5 format #154

merged 10 commits into from Oct 30, 2019


Copy link

TheSisb commented Oct 29, 2019

Styled-system v5 has a new grouping of css properties ( Composing these groupings is more performant. For simplicity in development, I wanted to modify our types exports so that rather than importing any types from the styled-system package, we only import types from our package. The benefit is that it is much easier to copy types you would ordinarily use in styled-system, but supercharged with our token typings.

I've also updated Box and Text to use the new typings, and in the process updated them to the v5 approach.

Text changes

Text now takes some layout options and typography which adds the following under Layout:

  verticalAlign?: VerticalAlign;
  overflow?: Overflow;
  overflowX?: OverflowX;
  overflowY?: OverflowY;

and these under Typography

  fontFamily?: FontFamily;
  fontSize?: FontSize;
  fontWeight?: FontWeight;
  lineHeight?: LineHeight;
  letterSpacing?: LetterSpacing;
  textAlign?: TextAlign;
  fontStyle?: FontStyle;
  // Our custom addition
  textColor?: TextColor;
  textDecoration?: TextDecoration;
  textOverflow?: TextOverflow;
  whiteSpace?: WhiteSpace;

Box changes

Box now is boxSizing: border-box by default.
It takes space, layout, flexbox, background, backgroundColor, border, borderColor, boxShadow, and position props.

This adds all the flex properties, position, top, right, bottom, left, overflow(x/y), verticalAlign, and size.


I opened a PR trying to gain some insight on how the bucketing props were selected and potentially improving alignment with styled-system in the future styled-system/styled-system#922

@TheSisb TheSisb added the Status: WIP label Oct 29, 2019

This comment has been minimized.

Copy link

now bot commented Oct 29, 2019

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect:
🌍 Preview:

Copy link

SiTaggart left a comment

Other than removing layout for Text, this is super great


This comment has been minimized.

Copy link

SiTaggart Oct 29, 2019


So yeah, re: slack, I don't think we need layout for Text right now.

@TheSisb TheSisb merged commit 117c41e into master Oct 30, 2019
8 checks passed
8 checks passed
Semantic Pull Request ready to be squashed
ci/circleci: applitools Your tests passed on CircleCI!
ci/circleci: build Your tests passed on CircleCI!
ci/circleci: prettier Your tests passed on CircleCI!
ci/circleci: test Your tests passed on CircleCI!
now Deployment has completed
scm/applitools No baseline conflicts found! (0 changes found)
tests/applitools No visual tests ran, see "Details" for help
@TheSisb TheSisb deleted the types/refactored-types branch Oct 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.