[Brand Refactor] River and RiverAccordion updates

.changeset/quiet-otters-dance.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': minor
+---
+
+⚠️ Breaking change: Removed the `imageBackgroundColor` prop from `River.Visual`.
+
+The `gridline` variant now applies the full-bleed visual background layout by default. Remove `imageBackgroundColor="subtle"` from `River.Visual` when using `River variant="gridline"`.
+
+Updated the River `gridline` variant tablet layout with a `618px` max-width and lateral gridlines.

.changeset/silver-pandas-draw.md

@@ -0,0 +1,5 @@
+---
+"@primer/react-brand": patch
+---
+
+Improve RiverAccordion gridline layout on tablet viewports and update its accordion toggle icon from chevrons to triangles.

apps/next-docs/content/components/River/react.mdx

@@ -68,7 +68,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
 
 ### GridLine variant
 
-The `gridline` variant adds lateral padding to the River component, making it suitable for use within bordered grid layouts.
+The `gridline` variant adds lateral padding to the River component and applies a full-bleed visual background by default, making it suitable for use within bordered grid layouts.
 
 ```jsx live
 <Stack style={{width: '100%'}}>
@@ -95,38 +95,6 @@ The `gridline` variant adds lateral padding to the River component, making it su
 </Stack>
 ```
 
-### Visual with background
-
-Use the `imageBackgroundColor` prop on `River.Visual` to create a full-bleed container with a background color and the image/video centered inside with padding. This is intended for use with the `gridline` variant.
-
-```jsx live
-<Stack style={{width: '100%'}}>
-  <River variant="gridline">
-    <River.Visual imageBackgroundColor="subtle">
-      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
-    </River.Visual>
-    <River.Content>
-      <Heading>Visual with background</Heading>
-      <Text>
-        The imageBackgroundColor prop creates a full-bleed container with a subtle background, centering the media with
-        padding around it.
-      </Text>
-      <Link href="#">Call to action</Link>
-    </River.Content>
-  </River>
-  <River variant="gridline" align="end">
-    <River.Visual imageBackgroundColor="subtle">
-      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
-    </River.Visual>
-    <River.Content>
-      <Heading>Visual with background (end)</Heading>
-      <Text>The imageBackgroundColor prop works with all alignment options.</Text>
-      <Link href="#">Call to action</Link>
-    </River.Content>
-  </River>
-</Stack>
-```
-
 ### Image to text ratio
 
 ```jsx live
@@ -263,16 +231,15 @@ Use the `imageBackgroundColor` prop on `River.Visual` to create a full-bleed con
 
 ### River.Visual and RiverBreakout.Visual <Label>Required</Label>
 
-| Name                   | Type                    | Default | Description                                                                                                                                                                               |
-| :--------------------- | :---------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fillMedia`            | `boolean`               |  true   | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.                                             |
-| `children`             | `ReactElement`          |         | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                                                                  |
-| `imageBackgroundColor` | `'default'`, `'subtle'` |         | Applies a background color with padding around the media. Use `'subtle'` to create a full-bleed container with the image/video centered inside. Intended for use with `gridline` variant. |
-| `hasShadow`            | `boolean`               | `false` | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                                                                        |
-| `className`            | `string`                |         | Sets a custom class on the root element                                                                                                                                                   |
-| `id`                   | `string`                |         | Sets a custom id                                                                                                                                                                          |
-| `ref`                  | `React.RefObject`       |         | Forward a Ref to the underlying DOM node                                                                                                                                                  |
-| `rounded`              | `boolean`               | `true`  | Toggle visually rounded corners. Enabled by default.                                                                                                                                      |
+| Name        | Type              | Default | Description                                                                                                                                   |
+| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fillMedia` | `boolean`         |  true   | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements. |
+| `children`  | `ReactElement`    |         | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                      |
+| `hasShadow` | `boolean`         | `false` | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                            |
+| `className` | `string`          |         | Sets a custom class on the root element                                                                                                       |
+| `id`        | `string`          |         | Sets a custom id                                                                                                                              |
+| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node                                                                                                      |
+| `rounded`   | `boolean`         | `true`  | Toggle visually rounded corners. Enabled by default.                                                                                          |
 
 ### River.Content and RiverBreakout.Content <Label>Required</Label>
 

packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx

@@ -187,7 +187,6 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 ref={element => {
                   riverImageRefs.current[0] = element
                 }}
-                imageBackgroundColor="subtle"
               >
                 <picture>
                   <source
@@ -212,7 +211,6 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 ref={element => {
                   riverImageRefs.current[1] = element
                 }}
-                imageBackgroundColor="subtle"
               >
                 <picture>
                   <source
@@ -237,7 +235,6 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
                 ref={element => {
                   riverImageRefs.current[2] = element
                 }}
-                imageBackgroundColor="subtle"
               >
                 <picture>
                   <source

packages/react/src/river/River/River.examples.stories.tsx

@@ -50,7 +50,7 @@ function GridLineWithBackgroundExample({align}: {align: 'start' | 'end'}) {
   return (
     <Section>
       <River variant="gridline" align={align}>
-        <River.Visual ref={visualRef} imageBackgroundColor="subtle">
+        <River.Visual ref={visualRef}>
           <picture>
             <source srcSet={placeholderImageCropped} media="(max-width: 47.99rem)" />
             <img src={placeholderImage} alt="GitHub Copilot agent mode in VS Code" />
@@ -60,7 +60,7 @@ function GridLineWithBackgroundExample({align}: {align: 'start' | 'end'}) {
           <EyebrowText>Feature</EyebrowText>
           <Heading>GridLine with custom background</Heading>
           <Text>
-            The imageBackgroundColor prop creates a full-bleed container that can be enhanced with a custom animated
+            The gridline variant creates a full-bleed visual container that can be enhanced with a custom animated
             background using the ref prop on River.Visual.
           </Text>
           <Link href="#">Learn more</Link>
@@ -82,7 +82,7 @@ function GridLineWithBackgroundVideoExample() {
   return (
     <Section>
       <River variant="gridline" align="start">
-        <River.Visual ref={visualRef} imageBackgroundColor="subtle">
+        <River.Visual ref={visualRef}>
           <VideoPlayer title="GitHub media player" poster={posterImage}>
             <VideoPlayer.Source src="./example.mp4" type="video/mp4" />
             <VideoPlayer.Track src="./example.vtt" default />
@@ -92,7 +92,7 @@ function GridLineWithBackgroundVideoExample() {
           <EyebrowText>Video</EyebrowText>
           <Heading>GridLine with video</Heading>
           <Text>
-            The imageBackgroundColor prop also works with video content. The video is centered within the full-bleed
+            The gridline visual background works with video content. The video is centered within the full-bleed
             container with padding around it.
           </Text>
           <Link href="#">Watch the video</Link>

packages/react/src/river/River/River.gridline.stories.tsx

@@ -31,8 +31,8 @@ export const GridLine: Story = {
         <River.Content>
           <Heading>GridLine Variant</Heading>
           <Text>
-            The gridline variant adds lateral padding and borders to the River component, making it suitable for use
-            within bordered grid layouts.
+            The gridline variant adds lateral padding and borders to the River component, and applies a full-bleed
+            visual background by default for use within bordered grid layouts.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -79,19 +79,27 @@ export const GridLineCenter: Story = {
   ),
 }
 
+export const GridLineTablet: Story = {
+  name: 'GridLine variant (tablet)',
+  globals: {
+    viewport: {value: 'ipad10p'},
+  },
+  render: GridLine.render,
+}
+
 export const GridLineWithBackground: Story = {
-  name: 'GridLine variant (with background)',
+  name: 'GridLine variant (default background)',
   render: () => (
     <Section>
       <River variant="gridline" align="start">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine with Background</Heading>
+          <Heading>GridLine with default background</Heading>
           <Text>
-            Using imageBackgroundColor on River.Visual creates a full-bleed container with a subtle background color and
-            the image/video centered inside with padding.
+            The gridline variant creates a full-bleed container with a subtle background color and the image/video
+            centered inside with padding.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -101,18 +109,17 @@ export const GridLineWithBackground: Story = {
 }
 
 export const GridLineWithBackgroundEnd: Story = {
-  name: 'GridLine variant (with background, end)',
+  name: 'GridLine variant (default background, end)',
   render: () => (
     <Section>
       <River variant="gridline" align="end">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine with Background (End)</Heading>
+          <Heading>GridLine with default background (End)</Heading>
           <Text>
-            The imageBackgroundColor prop can be combined with different alignment options. This example shows end
-            alignment.
+            The gridline visual background works with different alignment options. This example shows end alignment.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -122,16 +129,16 @@ export const GridLineWithBackgroundEnd: Story = {
 }
 
 export const GridLineWithBackgroundCenter: Story = {
-  name: 'GridLine variant (with background, centered)',
+  name: 'GridLine variant (default background, centered)',
   render: () => (
     <Section>
       <River variant="gridline" align="center">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine with Background (Centered)</Heading>
-          <Text>The imageBackgroundColor prop works with centered alignment as well.</Text>
+          <Heading>GridLine with default background (Centered)</Heading>
+          <Text>The gridline visual background works with centered alignment as well.</Text>
           <Link href="#">Call to action</Link>
         </River.Content>
       </River>
@@ -182,7 +189,7 @@ export const GridLineContentAlignBlockEnd: Story = {
   render: () => (
     <Section>
       <River variant="gridline" align="start">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <img
             src={placeholderImage}
             alt="placeholder, blank area with a gray background color"
@@ -260,16 +267,16 @@ export const GridLine6040Center: Story = {
 }
 
 export const GridLine6040WithBackground: Story = {
-  name: 'GridLine variant (60:40, with background)',
+  name: 'GridLine variant (60:40, default background)',
   render: () => (
     <Section>
       <River variant="gridline" align="start" imageTextRatio="60:40">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine 60:40 with Background</Heading>
-          <Text>The 60:40 ratio combined with subtle background color.</Text>
+          <Heading>GridLine 60:40 with default background</Heading>
+          <Text>The 60:40 ratio combined with the default gridline visual background.</Text>
           <Link href="#">Call to action</Link>
         </River.Content>
       </River>
@@ -278,16 +285,16 @@ export const GridLine6040WithBackground: Story = {
 }
 
 export const GridLine6040WithBackgroundEnd: Story = {
-  name: 'GridLine variant (60:40, with background, end)',
+  name: 'GridLine variant (60:40, default background, end)',
   render: () => (
     <Section>
       <River variant="gridline" align="end" imageTextRatio="60:40">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine 60:40 with Background (End)</Heading>
-          <Text>The 60:40 ratio with end alignment and subtle background.</Text>
+          <Heading>GridLine 60:40 with default background (End)</Heading>
+          <Text>The 60:40 ratio with end alignment and the default gridline visual background.</Text>
           <Link href="#">Call to action</Link>
         </River.Content>
       </River>
@@ -296,16 +303,16 @@ export const GridLine6040WithBackgroundEnd: Story = {
 }
 
 export const GridLine6040WithBackgroundCenter: Story = {
-  name: 'GridLine variant (60:40, with background, centered)',
+  name: 'GridLine variant (60:40, default background, centered)',
   render: () => (
     <Section>
       <River variant="gridline" align="center" imageTextRatio="60:40">
-        <River.Visual imageBackgroundColor="subtle">
+        <River.Visual>
           <PlaceholderImage />
         </River.Visual>
         <River.Content>
-          <Heading>GridLine 60:40 with Background (Centered)</Heading>
-          <Text>The 60:40 ratio with centered alignment and subtle background.</Text>
+          <Heading>GridLine 60:40 with default background (Centered)</Heading>
+          <Text>The 60:40 ratio with centered alignment and the default gridline visual background.</Text>
           <Link href="#">Call to action</Link>
         </River.Content>
       </River>

packages/react/src/river/River/River.test.tsx

@@ -393,11 +393,11 @@ describe('River', () => {
     expect(visualEl).not.toHaveClass('River__visual--has-background')
   })
 
-  it('optionally renders visual with subtle background color', () => {
+  it('renders gridline visual with background by default', () => {
     const visualId = 'visual-el'
     const {getByTestId} = render(
       <River variant="gridline">
-        <River.Visual data-testid={visualId} imageBackgroundColor="subtle">
+        <River.Visual data-testid={visualId}>
           <MockImage />
         </River.Visual>
         <River.Content>
@@ -410,11 +410,11 @@ describe('River', () => {
     expect(visualEl).toHaveClass('River__visual--has-background')
   })
 
-  it('does not apply background class when imageBackgroundColor is default', () => {
+  it('preserves custom visual className when applying gridline background', () => {
     const visualId = 'visual-el'
     const {getByTestId} = render(
       <River variant="gridline">
-        <River.Visual data-testid={visualId} imageBackgroundColor="default">
+        <River.Visual data-testid={visualId} className="custom-visual">
           <MockImage />
         </River.Visual>
         <River.Content>
@@ -424,7 +424,8 @@ describe('River', () => {
     )
 
     const visualEl = getByTestId(visualId)
-    expect(visualEl).not.toHaveClass('River__visual--has-background')
+    expect(visualEl).toHaveClass('custom-visual')
+    expect(visualEl).toHaveClass('River__visual--has-background')
   })
 
   it('renders content with center alignment by default', () => {