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
merged 10 commits into from Oct 30, 2019

Conversation

@TheSisb
Copy link
Collaborator

TheSisb commented Oct 29, 2019

Styled-system v5 has a new grouping of css properties (https://styled-system.com/api/). 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.

Notes

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
@now

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: https://zeit.co/twilio-dsys/paste/ogkz6pzn7
🌍 Preview: https://paste-git-types-refactored-types.twilio-dsys.now.sh

Copy link
Collaborator

SiTaggart left a comment

Other than removing layout for Text, this is super great

textColor,
textDecoration,
typography
layout,

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Oct 29, 2019

Collaborator

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
Details
ci/circleci: applitools Your tests passed on CircleCI!
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: prettier Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
now Deployment has completed
Details
scm/applitools No baseline conflicts found! (0 changes found)
Details
tests/applitools No visual tests ran, see "Details" for help
Details
@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
Projects
None yet
3 participants
You can’t perform that action at this time.