diff --git a/.changeset/nasty-boxes-float.md b/.changeset/nasty-boxes-float.md
new file mode 100644
index 000000000..2605eab92
--- /dev/null
+++ b/.changeset/nasty-boxes-float.md
@@ -0,0 +1,8 @@
+---
+'@primer/react-brand': patch
+---
+
+Visual spacing updates to `RiverBreakout`
+
+- Reduced vertical gap between the main text and link.
+- Applied a maximum width to the main text.
diff --git a/.changeset/strong-eels-wink.md b/.changeset/strong-eels-wink.md
new file mode 100644
index 000000000..0d330f4f2
--- /dev/null
+++ b/.changeset/strong-eels-wink.md
@@ -0,0 +1,9 @@
+---
+'@primer/brand-primitives': patch
+---
+
+Added new token for river breakout vertical spacing:
+
+```
+--brand-River-spacing-innerY
+```
diff --git a/packages/design-tokens/src/tokens/functional/components/river/river.json b/packages/design-tokens/src/tokens/functional/components/river/river.json
index a7dd85ed3..dd27b983e 100644
--- a/packages/design-tokens/src/tokens/functional/components/river/river.json
+++ b/packages/design-tokens/src/tokens/functional/components/river/river.json
@@ -12,6 +12,17 @@
}
}
},
+ "innerY": {
+ "value": "var(--base-size-24)",
+ "responsive": {
+ "768px": {
+ "value": "var(--base-size-24)"
+ },
+ "1280px": {
+ "value": "var(--base-size-32)"
+ }
+ }
+ },
"outer": {
"value": "var(--base-size-36)",
"responsive": {
diff --git a/packages/react/src/Footnotes/Footnotes.visual.spec.ts-snapshots/Visual-Comparison-Footnotes-Footnotes-Rivers-With-Citations-1-linux.png b/packages/react/src/Footnotes/Footnotes.visual.spec.ts-snapshots/Visual-Comparison-Footnotes-Footnotes-Rivers-With-Citations-1-linux.png
index 554e47901..8f621e941 100644
Binary files a/packages/react/src/Footnotes/Footnotes.visual.spec.ts-snapshots/Visual-Comparison-Footnotes-Footnotes-Rivers-With-Citations-1-linux.png and b/packages/react/src/Footnotes/Footnotes.visual.spec.ts-snapshots/Visual-Comparison-Footnotes-Footnotes-Rivers-With-Citations-1-linux.png differ
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png
index fb6d0b0ea..f9bb5aff8 100644
Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png differ
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png
index 20b889965..cd437b6c8 100644
Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png differ
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png
index 465a1fb3a..607cd2ba3 100644
Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png differ
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png
index 5eb15a39b..651248ea2 100644
Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png differ
diff --git a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png
index 0f4db11f3..b99842bef 100644
Binary files a/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png and b/packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.visual.spec.ts-snapshots/Visual-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png differ
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx b/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx
index 3c25eb85e..cc2b4c5c3 100644
--- a/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx
+++ b/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx
@@ -1,13 +1,21 @@
import React from 'react'
import {Meta, StoryFn} from '@storybook/react'
import {RiverBreakout} from '.'
-import {Link, Text, Timeline} from '../../'
-import {Container} from '../../component-helpers'
+import {Grid, Link, Text, Timeline} from '../../'
import placeholderImage from '../../fixtures/images/placeholder-600x400.png'
export default {
title: 'Components/RiverBreakout',
component: RiverBreakout,
+ decorators: [
+ Story => (
+
+
+
+
+
+ ),
+ ],
} as Meta
const TrailingTimeline = () => (
@@ -26,55 +34,49 @@ const PlaceholderImage = () => (
)
export const Default: StoryFn = () => (
-
-
- Accelerate workflows
-
-
-
-
-
- Accelerate your workflows and scale your business fast with access to millions of open source projects on
- GitHub, the largest source code host.
-
- Call to action
-
-
-
+
+ Accelerate workflows
+
+
+
+
+
+ Accelerate your workflows and scale your business fast with access to millions of open source projects on
+ GitHub, the largest source code host.
+
+ Call to action
+
+
)
export const HighlightedPortion: StoryFn = () => (
-
-
- River breakout highlight
-
-
-
-
-
- This first sentence is a river breakout headline. And this is where the body copy starts. Remember to
- keep these nice and succinct.
-
- Call to action
-
-
-
+
+ River breakout highlight
+
+
+
+
+
+ This first sentence is a river breakout headline. And this is where the body copy starts. Remember to
+ keep these nice and succinct.
+
+ Call to action
+
+
)
export const WithoutTrailingComponent: StoryFn = () => (
-
-
- Accelerate workflows
-
-
-
-
-
- Accelerate your workflows and scale your business fast with access to millions of open source projects on
- GitHub, the largest source code host.
-
- Call to action
-
-
-
+
+ Accelerate workflows
+
+
+
+
+
+ Accelerate your workflows and scale your business fast with access to millions of open source projects on
+ GitHub, the largest source code host.
+
+ Call to action
+
+
)
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Default-1-linux.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Default-1-linux.png
index 8bc14b187..ec8f423d4 100644
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Default-1-linux.png and b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Default-1-linux.png differ
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Highlighted-Portion-1-linux.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Highlighted-Portion-1-linux.png
index b2b3fffa5..2a38081b2 100644
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Highlighted-Portion-1-linux.png and b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Highlighted-Portion-1-linux.png differ
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Without-Trailing-Component-1-linux.png b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Without-Trailing-Component-1-linux.png
index 701d00dc0..32178e0cf 100644
Binary files a/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Without-Trailing-Component-1-linux.png and b/packages/react/src/river/RiverBreakout/RiverBreakout.visual.spec.ts-snapshots/Visual-Comparison-RiverBreakout-RiverBreakout-Without-Trailing-Component-1-linux.png differ
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
index dcb439f36..49622a923 100644
--- a/packages/react/src/river/river-shared.module.css
+++ b/packages/react/src/river/river-shared.module.css
@@ -140,6 +140,7 @@
}
.RiverBreakout .River__text {
+ max-width: 37.5rem; /* 600px */
color: var(--brand-color-text-default);
font-size: var(--brand-text-size-500);
font-weight: var(--brand-heading-weight-500);
@@ -176,6 +177,7 @@
.RiverBreakout .River__content {
display: grid;
gap: var(--brand-River-spacing-inner);
+ row-gap: var(--brand-River-spacing-innerY);
grid-template-areas:
'text trailingComponent'
'cta trailingComponent';