Add size and weight props to Text

[langermank]

Extend Text to support size and weight props.

Changelog

New

• size prop
• weight prop

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: aa0efb7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	96.2 KB (+0.15% 🔺)
packages/react/dist/browser.umd.js	96.46 KB (+0.18% 🔺)

[iansan5653]

Hi! I think the implementation of this PR looks great, but as someone who's been working in the CSS Modules space for the last couple of weeks, I have strong reservations about the concept here.

On the surface it looks like a convenient API, but I am concerned that both usability and maintainability will suffer if we add yet another way to accomplish the same styling task. Primer has long suffered from the challenges of maintaining several different ways to accomplish the same thing -- particularly when it comes to styling.

Having another way to control font size creates ambiguity around the 'correct' approach to change font size. Is it better to use CSS Modules or is it better to use props? How do I keep track of which styling is done via props or via CSS? How do I apply this styling to non-Text elements?

As a simple example, say I need to render a Button with larger text. What's the best way to do that? With CSS Modules as the only option, the answer is obvious and easy to remember:

<Button className={styles.myButton}>...</Button>

Extending Text adds more choices, neither of which are preferable to className but both of which might feel 'more correct' since props are generally preferred to styling:

• Wrapping the button or its content in another element adds more DOM nodes, which impacts performance: <Button><Text size="large">...</Text></Button>
• Using as significantly increases code complexity (also, as is provided by styled-components so it may not be supported in the future): <Button as={Text} size="large">...</Button>

For these simple cases like font size, I think we have a lot to gain from universally aligning on CSS Modules as the only available solution. If we take advantage of it, the CSS Modules investment gives us a unique opportunity to make styling fast, simple, easy to learn, and universally consistent.