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

added a Text component #18495

Merged
merged 24 commits into from Jan 7, 2020
Merged

added a Text component #18495

merged 24 commits into from Jan 7, 2020

Conversation

@jameslnewell
Copy link
Contributor

jameslnewell commented Nov 14, 2019

Description

Added a Text mixin and component to @wordpress/components which provides typography styles in-line with the wp-admin-iterations experiment.

This addition provides a text mixin (e.g. text({ variant: 'body.small' })) that can be consumed in other components which are also using emotion (probably focussed more on internal usage) in addition to a Text component (e.g. <Text variant="body.small">).

This component is usable on web AND mobile, including styles.

To keep this PR small and easily reviewable I haven't included the following additions that I'll attempt to add in a future PR:

  • additional props for the Text component e.g. color, textAlign, margin, padding etc etc
  • start to compose the text mixin into other components in order to improve the consistency of typography across the components

Related PR: #18244

How has this been tested?

I've written a few tests for web and react-native and manually tested the web component in storybook. I'm not sure what the best approach is to manually test in react native before the package is published??

Screenshots

See the storybook.

Types of changes

New feature - mixins and a component for reusing/composing typography consistently

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards. - Yes, I think the biggest concern is the consuming developer using a semantic element which they can choose via the as prop
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
package.json Show resolved Hide resolved
@jameskoster

This comment has been minimized.

Copy link

jameskoster commented Nov 14, 2019

Exciting!

in-line with the wp-admin-iterations experiment

I'm not 100% sure, but I think it might be better to use the type scale proposal that was submitted here.

There have been a couple of minor iterations, and it's pretty close to what you have. Latest Figma here and codepen here.

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Nov 14, 2019

@jameslnewell Thank you so much for adding this! 🎉 I left a couple of comments for you.

I am incredibly excited for this particular component. Something that renders text may seem trivial.. but there are many benefits as we start using this throughout the system. The folks within the native mobile world have already enjoyed the benefits of this.

In the future, I could see us enhancing this primitive with features like ellipsizeMode and perhaps common colour variants (e.g. muted).

@jameslnewell

This comment has been minimized.

Copy link
Contributor Author

jameslnewell commented Nov 14, 2019

@jameskoster I've updated the styles to match the code-pen. Can you please confirm they're current. 🙏

@jameslnewell

This comment has been minimized.

Copy link
Contributor Author

jameslnewell commented Nov 14, 2019

In the future, I could see us enhancing this primitive with features like ellipsizeMode and perhaps common colour variants (e.g. muted).

@ItsJonQ since the mobile variant is a Text it should already support ellipsizeMode???

Colors is something I definitely want to add in a followup PR! 👇

To keep this PR small and easily reviewable I haven't included the following additions that I'll attempt to add in a future PR:

  • additional props for the Text component e.g. color, textAlign, margin, padding etc etc
  • start to compose the text mixin into other components in order to improve the consistency of typography across the components
@jameslnewell jameslnewell force-pushed the jameslnewell:typography branch from 370f115 to 76c162c Nov 17, 2019
@jameslnewell jameslnewell requested a review from gziolo Nov 18, 2019
@jameslnewell jameslnewell requested a review from youknowriad Nov 20, 2019
@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Nov 21, 2019

Including Storybook screenshot for context:

Screen Shot 2019-11-21 at 9 33 12 AM

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Nov 21, 2019

@ItsJonQ since the mobile variant is a Text it should already support ellipsizeMode???

@jameslnewell Oh yes, I was talking about adding that feature for the web version of <Text /> 😉

@jameslnewell jameslnewell force-pushed the jameslnewell:typography branch from 1e8f97b to 614a8ab Jan 7, 2020
@ItsJonQ
ItsJonQ approved these changes Jan 7, 2020
Copy link
Contributor

ItsJonQ left a comment

@jameslnewell Looks great! Thank you for working on this!

@ItsJonQ ItsJonQ merged commit 023c43e into WordPress:master Jan 7, 2020
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@ellatrix ellatrix added this to the Gutenberg 7.3 milestone Jan 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.