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(typography): heading component #149

Merged
merged 40 commits into from Oct 31, 2019
Merged

feat(typography): heading component #149

merged 40 commits into from Oct 31, 2019

Conversation

@richbachman
Copy link
Collaborator

richbachman commented Oct 23, 2019

  • Move Paragraph to separate component
  • Refactored Heading component
  • Refactored font-size tokens to sync with design
  • Adjusted font-size of Paragraph to match refactored tokens
  • Adjust any font-size tokens used in Paste components, utilities, and primitives
  • Adjust any font-size tokens used in website
  • Import Heading and Paragraph into Typography component
@now

This comment has been minimized.

Copy link

now bot commented Oct 23, 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/ls5w6ec0z
🌍 Preview: https://paste-git-refactor-heading.twilio-dsys.now.sh

const headingStyleValue = select('headingStyle', headingStyleOptions, 'headingStyle50') as HeadingStyle;
return (
<Heading as={asOptions} headingStyle={headingStyleValue}>
I am a Very Large Heading

This comment has been minimized.

Copy link
@TheSisb

TheSisb Oct 24, 2019

Collaborator

Can you add an example with an icon in the heading or some other component? (To the tests too)

This comment has been minimized.

Copy link
@richbachman

richbachman Oct 25, 2019

Author Collaborator

We may need to work with design a little on how to handle icons in the headers, i.e. size restrictions for the icons. Did you have another component in mind to use as an example here? Anchor?

This comment has been minimized.

Copy link
@TheSisb

TheSisb Oct 30, 2019

Collaborator

Maybe just a Text then with italics styling? This is just for testing purposes, we don't need to add this to our guidelines.

This comment has been minimized.

Copy link
@richbachman

richbachman Oct 30, 2019

Author Collaborator

I added a couple more tests to Paragraph and Heading.

  • italics and bold children in Paragraph
  • italics children in Heading
comment: "Constant typography token for font size 90"
font-size-100:
value: "{!font-size-100}"
comment: "Constant typography token for font size 100"

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Oct 24, 2019

Collaborator

🎉 Unification 🎉

@now now bot had a problem deploying to staging Oct 29, 2019 Failure
Copy link
Collaborator

SiTaggart left a comment

Apart from that default display property, I think this is good to go

Copy link
Collaborator

TheSisb left a comment

lgtm after the comment

@TheSisb

This comment has been minimized.

Copy link
Collaborator

TheSisb commented Oct 31, 2019

🚢

@richbachman richbachman merged commit 4e033e6 into master Oct 31, 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! (2 changes found)
Details
tests/applitools All visual tests passed! (25 tests)
Details
@richbachman richbachman deleted the refactor-heading branch Oct 31, 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.