Primer Brand v0.24 - Technical Preview

[rezrah]

The Primer Brand team is excited to preview a host of improvements and new features that are shipping in the next version of @primer/react-brand.

This technical preview will cover:

• What's new
• How to try it yourself today
• Release timeline

Overview

Primer Brand libraries (both React and Figma) are currently undergoing a major visual refactoring process, whereby foundational aspects to the system - like typography - are being completely overhauled. This has inevitably led to wholesale visual changes across all components.

These changes are being rolled out to help make our patterns more accessible and aligned with our future art direction.

Important

This technical preview is intended to provide advance notice for various upcoming breaking changes. Please read carefully to understand how this may impact you.

🔧 Try it today

You can try v0.24.0 RC today

npm install @primer/react-brand@next

This release candidate is available for preview and feedback purposes only. We don’t recommend using this in production.

📆 Release schedule

15 August	Public beta for `v0.24.0` on the "next" release channel
17 August	Close public beta
18 August	General availability on the "Latest" release channel

✨ New in 0.24.0

• River breakout component (coming soon)
• Emphasis support in large testimonials (coming soon)
• Video player (coming soon)

⚠️ Updates and breaking changes

Summary of changes

v0.24.0 will contain a handful of visual and API breaking changes.

Are you using any of the components below? Skip to the relevant section below to learn about what's changing.

Skip to:

• Heading
• Text
• River
• SectionIntro
• Label

🔗 Heading

• extra-bold font weight no longer default.
• New display size added, which is the new largest heading size.
• New subhead-large and subhead-medium sizes added, which are the new smallest heading sizes.
• All headings now use either bold or semi-bold.

Before	After
import { Heading } from '@primer/react-brand'; <> <Heading size="1">1</Heading> <Heading size="2">2</Heading> <Heading size="3">3</Heading> <Heading size="4">4</Heading> <Heading size="5">5</Heading> <Heading size="6">6</Heading> </>	import { Heading } from '@primer/react-brand'; <> <Heading size="display">Display</Heading> <Heading size="1">1</Heading> <Heading size="2">2</Heading> <Heading size="3">3</Heading> <Heading size="4">4</Heading> <Heading size="5">5</Heading> <Heading size="6">6</Heading> <Heading size="subhead-large">Subhead large</Heading> <Heading size="subhead-medium">Subhead medium</Heading> </>

🔗 Text

• Base text size now 200 (previously 300), which corresponds to 16px (previously 18px).
• All text sizes now use 450 weight instead of 400

Before	After
import { Text } from '@primer/react-brand'; <Text size="300">Prev. default text size</Text>	import { Text } from '@primer/react-brand'; <Text size="200">New default text size</Text>

🔗 River

• River visuals now automatically apply rounded corners
• Shadows are now turned off by default
• Text size now 16px (new default)
• Link size reduced to medium
• Smaller heading size

Restore shadows and non-rounded corners using rounded and hasShadow props:

import { River } from '@primer/react-brand';

<River>
  <River.Visual rounded={false} hasShadow={true}>
    <img />
  </River.Visual>
  <River.Content />
</River>

🔗 Section intro

• Section intro heading now 40px by default
• Label updated to small size
• Description text now 16px and default text color
• Duotone support added using <em>

import { SectionIntro } from '@primer/react-brand';

<SectionIntro>
  <SectionIntro.Heading>
    <em>Expressive headline</em> about an exclusive set of features.
  </SectionIntro.Heading>
</SectionIntro>

🔗 Label

• small size has been removed, leaving only medium and large options.

🔗 FAQ

• FAQ heading weights reduced
• FAQ group spacing bug fixed
• FAQ.Heading size prop values have been replaced with Heading defaults for more granular control and consistency.

Before	After
<> <FAQ.Heading size="medium">medium (default)</FAQ.Heading> <FAQ.Heading size="large">large</FAQ.Heading> </>	<> <FAQ.Heading size="2">2</FAQ.Heading> <FAQ.Heading>new default ("3")</FAQ.Heading> <FAQ.Heading size="4">4</FAQ.Heading> <FAQ.Heading size="5">5</FAQ.Heading> <FAQ.Heading size="6">6</FAQ.Heading> </>

Reporting issues

Found a bug or problem while trying v0.24.0? Please raise an issue here.

Thanks for reading this technical preview. We look forward to shipping this release soon 🚀

[Agony23]

☢️Terms