@primer/react-brand 0.81.0-rc.5999e7a6 → 0.81.0-rc.a8121ac0

package/docs/components/AnchorNav/index.md

@@ -21,7 +21,7 @@ import {AnchorNav} from '@primer/react-brand'
 ### Basic
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#basic-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#basic-section2">Section two</AnchorNav.Link>
@@ -35,6 +35,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -44,6 +45,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -53,6 +55,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -62,6 +65,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-green-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 4
@@ -71,6 +75,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-teal-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 5
@@ -83,7 +88,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` can also feature secondary actions. When two actions are present, the first will be presented as the `primary` variant.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -96,6 +101,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -105,6 +111,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -114,6 +121,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -126,7 +134,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` implementations with fewer than `5` links, will automatically align links to the `start`.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -138,6 +146,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -147,6 +156,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -156,6 +166,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3

package/docs/components/BreakoutBanner/react.md

@@ -116,7 +116,7 @@ The content alignment can be changed using the `align` prop on the root `Breakou
 ### Optional background color
 
 ```jsx
-<BreakoutBanner backgroundColor="var(--base-color-scale-blue-0)">
+<BreakoutBanner backgroundColor="var(--brand-color-success-subtle)">
   <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
   <BreakoutBanner.Description>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis

package/docs/components/MinimalFooter/index.md

@@ -17,7 +17,9 @@ import {MinimalFooter} from '@primer/react-brand'
 ### Default
 
 ```jsx
-<MinimalFooter />
+<div style={{width: '100%'}}>
+  <MinimalFooter />
+</div>
 ```
 
 ### Footer links
@@ -25,35 +27,39 @@ import {MinimalFooter} from '@primer/react-brand'
 Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footnotes
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Footnotes>
-    <Text>
-      <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
-      enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
-      receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
-      based on your GitHub profile and any additional information provided in the sign-up form. If you change your mind,
-      you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on how
-      GitHub uses your personal information, please see the{' '}
-      <InlineLink
-        href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
-        target="_blank"
-      >
-        GitHub Privacy Statement
-      </InlineLink>
-      .
-    </Text>
-  </MinimalFooter.Footnotes>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Footnotes>
+      <Text>
+        <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
+        enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
+        receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
+        based on your GitHub profile and any additional information provided in the sign-up form. If you change your
+        mind, you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on
+        how GitHub uses your personal information, please see the{' '}
+        <InlineLink
+          href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
+          target="_blank"
+        >
+          GitHub Privacy Statement
+        </InlineLink>
+        .
+      </Text>
+    </MinimalFooter.Footnotes>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footer social links
@@ -61,7 +67,7 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 `MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx
-<Stack>
+<Stack style={{width: '100%'}}>
   Hide all social links:
   <MinimalFooter socialLinks={false} />
   <br />
@@ -75,18 +81,20 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
 
 ```jsx
-<MinimalFooter
-  centerComponent={
-    <Stack direction="horizontal" gap="condensed" padding="none">
-      <Text size="200" variant="muted">
-        Status:
-      </Text>
-      <InlineLink href="https://www.githubstatus.com" size="200">
-        All systems operational
-      </InlineLink>
-    </Stack>
-  }
-/>
+<div style={{width: '100%'}}>
+  <MinimalFooter
+    centerComponent={
+      <Stack direction="horizontal" gap="condensed" padding="none">
+        <Text size="200" variant="muted">
+          Status:
+        </Text>
+        <InlineLink href="https://www.githubstatus.com" size="200">
+          All systems operational
+        </InlineLink>
+      </Stack>
+    }
+  />
+</div>
 ```
 
 ### Back to top
@@ -96,9 +104,11 @@ Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls
 After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
 
 ```jsx
-<MinimalFooter socialLinks={false}>
-  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter socialLinks={false}>
+    <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+  </MinimalFooter>
+</div>
 ```
 
 ## Component props

package/docs/components/PricingOptions/index.md

@@ -392,15 +392,17 @@ automatically generated label:
 ```jsx
 function FeatureWithCustomContent({customContent}) {
   return (
-    <PricingOptions.FeatureListItem
-      infoTooltip="Interact with Copilot using natural language."
-      infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
-    >
-      <>
-        Chat in IDE and Mobile
-        {customContent ? <Text>Custom footnote</Text> : null}
-      </>
-    </PricingOptions.FeatureListItem>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem
+        infoTooltip="Interact with Copilot using natural language."
+        infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
+      >
+        <>
+          Chat in IDE and Mobile
+          {customContent ? <Text>Custom footnote</Text> : null}
+        </>
+      </PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
   )
 }
 ```

package/docs/components/Prose/index.md

@@ -48,7 +48,7 @@ import {Prose} from '@primer/react-brand'
     <h4>Heading level  4</h4>
     <p>
       Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities
-      before they reach production. <a href="/#">Learn more here.</a>
+      before they reach production. <a href="https://github.com/security/advanced-security/code-security">Learn more about GitHub Code Security.</a>
     </p>
     <h5>Heading level 5</h5>
     <ol>

package/docs/components/River/react.md

@@ -9,7 +9,7 @@ storybook: '/brand/storybook/?path=/story/components-river--default'
 ---
 
 ```js
-import {River, RiverBreakout} from '@primer/react-brand'
+import {MinimalVideoPlayer, River, RiverBreakout} from '@primer/react-brand'
 ```
 
 ## Examples
@@ -150,11 +150,8 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
 ```jsx
 <River style={{width: '100%'}} imageTextRatio="60:40">
   <River.Visual hasShadow={false}>
-    <video
-      loop
-      playsInline
-      autoPlay
-      muted
+    <MinimalVideoPlayer
+      title="Break issues into actionable tasks"
       poster="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress-placeholder.png"
     >
       <source
@@ -165,7 +162,7 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
         type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
         src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.h264.mp4"
       />
-    </video>
+    </MinimalVideoPlayer>
   </River.Visual>
   <River.Content>
     <Heading>Break issues into actionable tasks</Heading>

package/docs/components/Tabs/index.md

@@ -92,7 +92,7 @@ function CustomPanels() {
   }, [])
 
   return (
-    <Stack alignItems="center">
+    <Stack alignItems="center" style={{width: '100%'}}>
       <Tabs onChange={handleTabChange} aria-label="Lifecycle tabs">
         <Tabs.Item id="tab-1" aria-controls="panel-1">
           Code

package/docs/components/Testimonial/react.md

@@ -32,7 +32,7 @@ import {Testimonial} from '@primer/react-brand'
 For an alternative visual appearance and layout, without altering semantic meaning.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="none">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="none">
   <Testimonial variant="default">
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
@@ -90,7 +90,7 @@ Use `size` to alternate the text size. Available options are `small` (default) a
 Use `Stack` to help position multiple, adjacent Testimonials alongside one another.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="spacious">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
   <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.81.0-rc.5999e7a6)
+# Primer Brand docs (v0.81.0-rc.a8121ac0)
 
-These docs are bundled with `@primer/react-brand@0.81.0-rc.5999e7a6` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.81.0-rc.a8121ac0` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.