Release tracking

[primer]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@primer/react-brand@0.67.0

Minor Changes

• #1315 fae6e70 Thanks @rezrah! - Added new Token component, which is typically used for showing a collection of related metadata.

  <Token as="a" href="#">
    As a link
  </Token>
  <Token>
    As non-interactive text
  </Token>

  🔗 See Token documentation for more usage examples

• #1320 35fe61f Thanks @rezrah! - Visual refinements to the Testimonial expressive variant:

  • Set the quote line-height to var(--brand-text-lineHeight-400) (1.4) and font-weight to normal for improved monospace readability.
  • Increased spacing between the quote and caption area on wider viewports.
  • Increased vertical spacing between Testimonial.Name and Testimonial.Position in the caption.
  • Testimonial.Name is now uppercased, larger and appears in monospace for all variants.
  • Testimonial.Position no longer uses monospace.

• #1311 fe2589d Thanks @rezrah! - ⚠️ Breaking change: SectionIntro.Label no longer forwards props from the Label component, such as size and color.

  • SectionIntro.Label now appears as muted text with a green cursor icon for visual parity with Hero.Label.
    • An optional animate prop is available to enable streaming cursor effect.

  Hero.Label has minor adjustments to line height. Now uses the same EyebrowText component as River.

• #1315 fae6e70 Thanks @rezrah! - - Updated Icon with hasBackground to use a medium border radius instead of a full radius.

• #1315 fae6e70 Thanks @rezrah! - ⚠️ Breaking changes to the Card component.

  • Removed the torchlight Card variant.

    - <Card variant="torchlight" />
    + <Card />

  • Card.Label now renders a Token by default and supports token and accent-text variants. Use variant="accent-text" to render accent-styled eyebrow text above the heading. The legacy size and color props are no longer supported.

    - <Card.Label variant="accent">GitHub Copilot</Card.Label>
    + <Card.Label variant="accent-text">GitHub Copilot</Card.Label>
    
    - <Card.Label color="blue-purple">Beta</Card.Label>
    + <Card.Label>Beta</Card.Label>

  • Added new ctaVariant prop with text, arrow, and none options to control how the card's primary action is rendered. Center-aligned CTA links now wrap correctly and omit the trailing arrow so the action remains visually centered.

  • Added backgroundColor prop with default, subtle, and none options to control the card background color. minimal cards default this prop to none to preserve their transparent appearance unless explicitly overridden.

  • Added leadingVisual prop for rendering a logo or brand mark above the card content. Note that leadingVisual and Card.Icon cannot be used together.

  • Added Card.Tokens for rendering metadata before or after the main copy, with position="block-start" and position="block-end" options.

• #1314 9783702 Thanks @rezrah! - Major updates to PricingOptions with new features, layout fixes, and design refinements.

  [!WARNING]
  Breaking changes in this release

  • PricingOptions.Label is no longer a wrapper around the Label component. It now renders as plain text in a dedicated header row above the pricing columns. Props like size and color are no longer supported.

   <PricingOptions.Item>
  -  <PricingOptions.Label size="medium" color="green">Recommended</PricingOptions.Label>
  +  <PricingOptions.Label>Recommended</PricingOptions.Label>
     <PricingOptions.Heading>Pro</PricingOptions.Heading>
   </PricingOptions.Item>

  Other new features:

  • infoTooltip prop on PricingOptions.FeatureListItem: Adds an info icon with tooltip. See usage example.
  • PricingOptions.ActionsMessage can be used to add supplemental information to the CTA area.
  • PricingOptions.MenuAction sub-component: A wrapper for rendering ActionMenu inside the actions area. See With Menu Action story.
  • PricingOptions.testIds.menuAction: PricingOptions.MenuAction now exposes a dedicated default test id instead of sharing PricingOptions__primaryAction.
  • style prop on PricingOptions can now be forwarded to the PricingOptions root element.

• #1309 fc6cfe9 Thanks @rezrah! - Added RiverBreakoutTabs component, which is designed to aid storytelling sections where multiple related messages need to live in one high-impact module, without requiring users to scroll through several full-width sections.

  Usage example:

  <RiverBreakoutTabs>
    <RiverBreakoutTabs.A11yHeading>Plan, review, and ship with Copilot</RiverBreakoutTabs.A11yHeading>
  
    <RiverBreakoutTabs.Item>
      <RiverBreakoutTabs.Heading>Plan from your backlog</RiverBreakoutTabs.Heading>
      <RiverBreakoutTabs.Content>
        <Text>Break large issues into practical implementation steps.</Text>
        <Link href="#">Learn more</Link>
      </RiverBreakoutTabs.Content>
      <RiverBreakoutTabs.Visual imageBackgroundColor="subtle">
        <img src="/images/placeholder-1.png" alt="Planning workflow in editor" />
      </RiverBreakoutTabs.Visual>
    </RiverBreakoutTabs.Item>
  </RiverBreakoutTabs>

  🔗 See the documentation for more usage examples

Patch Changes

• #1309 fc6cfe9 Thanks @rezrah! - Add a stable data-video-player-container hook to the VideoPlayer root. This allows you to override the container styles using CSS.

• #1317 4bf692a Thanks @copilot-swe-agent! - Fixed SubNav accessibility issue where dropdown submenus on large viewports could contain focusable links while marked aria-hidden. The collapsed submenu is now made inert, removing it from tab order and the accessibility tree without affecting layout or the open/close transition.

• #1309 fc6cfe9 Thanks @rezrah! - Force Link colors to always apply and prevent specificity-based overriding by parents.

• #1315 fae6e70 Thanks @rezrah! - Refined the Card arrow CTA variant so the revealed label remains decorative, does not block the card-wide link target, and better matches the intended hover and focus motion.

  Also exposed these ExpandableArrow CSS variables so its motion can be tuned by parent components:

  --ExpandableArrow-duration: 200ms;
  --ExpandableArrow-easing: ease;

• #1306 3c08fc1 Thanks @rezrah! - Update RiverBreakout.Visual image to appear bottom-aligned when hasBackground is set.

• #1309 fc6cfe9 Thanks @rezrah! - Update RiverBreakout gridline tablet appearance to be visually consistent with other gridline components by centering the container and applying side borders at non-wide breakpoints.

@primer/brand-primitives@0.67.0

Patch Changes

• #1314 9783702 Thanks @rezrah! - Added --brand-color-canvas-invert design token, which is the inverse of --brand-color-canvas-default. Resolves to black in light mode and white in dark mode.

@primer/brand-css@0.67.0

@primer/brand-docs@0.67.0

@primer/brand-storybook@0.67.0

@primer/brand-e2e@0.67.0

@primer/brand-fonts@0.67.0

@primer/brand-config@0.67.0

[github-actions]

❗ Pre-merge checklist

Please ensure these items are checked before merging.

✅ Preliminary checks

• All CI checks pass on this pull request
• Docs and Storybook previews open in a browser

🔌 Integration smoke tests

Dotcom

• Performed successful integration test with github/github-ui, as a primary consumer of Primer Brand
  • Install RC: npm install @primer/react-brand@{RC_VERSION} -w @github-ui/swp-core
  • Run development server
  • Manually verify release-specific bugfixes and/or features on the following pages:
    • /home
    • /features/copilot
    • /features/copilot/plans
    • /features/copilot/tutorials
    • /features/preview
    • /enterprise
    • /enterprise/contact
    • /security/advanced-security
    • /education
    • /mobile
    • /about/diversity
    • /newsroom
    • /resources/articles
    • /resources/articles/software-development
    • /resources/articles/software-development/what-is-cloud-native
    • /resources/whitepapers
    • /resources/whitepapers/how-the-c-suite-can-lead-ai-innovation
    • /solutions
    • /solutions/use-case/
    • /solutions/use-case/devops
    • /contentful-lp-tests/flex-example-dark (requires a flag)
    • /contentful-lp-tests/flex-example-light (requires a flag)
  • Manually compare production site to local instance for any non-release specific regressions

Subdomain sites

• Performed successful integration test with githubuniverse.com, as a Tier 1 consumer of Primer Brand outside of the monolith.

  • Run development server and verify no new console warnings or regressions are found
  • Run local build to verify the release compiles correctly
  • Manually performed side-by-side comparison with production

• Performed successful integration test with https://resources.github.com/, as a Tier 1 consumer of Primer Brand outside of the monolith.

  • Run development server and verify no new console warnings or regressions are found
  • Run local build to verify the release compiles correctly
  • Manually performed side-by-side comparison with production

Sandboxes

• Works in CodeSandbox or StackBlitz
  • New components render successfully
  • (optional) Tested in both SPA and SSR apps if release contains build changes

🤔 Cross-check (aka sanity test)

• Release notes accurately describe the changes made
• All bugfixes in this release have resolved their corresponding issues
• The issues for reverted PRs have been re-opened and commented on with a link to the reverted PR
• No noticeable regressions or side-effects have not been introduced as a result of changes in this release.
  • If they have, determine severity of the issue and consider hotfixing

After tests

• Add report summary of your findings, including any images. Use following template as a guide:

  #### Smoke test results
  
  - Feature 1 🟢 🟡 🔴 (choose one, depending on success levels)
  
    {insert screenshot}
  
  Release testing status: Ready to release 🟢 | Paused 🟡 🔴 (choose one and provide reason)

🚢 After merge

• Issue release comms in primer brand Slack channel
• Add the preview deployment's link to releases as a way of permalinking to old version's docs. Example

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

Smoke test results

This is a very large release (15+ changes), so we won't itemize each new addition.

Instead I'll offer a summary of the process:

• There were multiple smoke tests conducted throughout the week.
• Biggest changes are to Card and SectionIntro presentation
• Other changes are net-new
• Multiple hotfixes were opened to address release regressions:
  • Add pricing options message #1330
  • Token and Card.Label updates #1329
  • Update Token variants #1326
  • Increase z-index on accent border #1325
  • Fix PricingOptions items and header labels backgrounds #1323
  • Add backgroundColor prop to Card and fix text wrapping #1322
• At this point, we are feeling confident about the regression risks but there may stil be further problems that haven't been accounted for
• To unblock the release we will ship 0.67.0 as-is, and continue further smoke testing in downstream integration points, with any new bugs addressed in a subsequent patch release.

Release testing status: Ready to release 🟢