added a Text component

[jameslnewell]

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. .

[jameskoster]

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]

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

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

[jameslnewell]

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

[ItsJonQ]

Including Storybook screenshot for context:

[ItsJonQ]

@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 /> 😉

[youknowriad]

I have some questions here.

How are we planning to use this component?
Are we planning a Refactor to existing components?
Should we do it in one PR or iteratively?
When working on several components, how do we choose whether to use this component or just a regular div or p or whatever?
Do we foresee any performance impact if we start using this component everywhere?

[gziolo]

In the period with lots of time off, I completely forgot about this PR.

I think, this one is in good shape and it's an important bit leading towards validation of the CSS in JS approach. Let's get it in and see how it all works.

[ItsJonQ]

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