Hotfixes for 0.41.0 RC (#801)

.changeset/light-eyes-talk.md

@@ -1,5 +1,25 @@
 ---
+'@primer/brand-primitives': minor
 '@primer/react-brand': patch
 ---
 
 Fixed issue where `Button` component would reflow and break over multiple lines when its text content exceeded the viewport width.
+
+:warning: Breaking changes to the following design tokens:
+
+```diff
+- --brand-control-medium-paddingBlock
++ --brand-control-medium-paddingBlock-normal
+```
+
+```diff
+- --brand-control-large-paddingBlock
++ --brand-control-large-paddingBlock-normal
+```
+
+Additional tokens added:
+
+```diff
++ --brand-control-medium-paddingBlock-condensed
++ --brand-control-large-paddingBlock-condensed
+```

.changeset/lovely-rocks-bathe.md

@@ -2,4 +2,4 @@
 '@primer/react-brand': patch
 ---
 
-Improves spacing of RiverBreakout content
+Improves spacing of `RiverBreakout` content

.changeset/sweet-waves-matter.md

@@ -2,5 +2,7 @@
 '@primer/react-brand': patch
 ---
 
-- Update the order of River children to ensure an acccessible markup strucuture.
+- Update the order of River children to ensure an accessible markup structure.
 - On narrow viewports, the content and visuals are now flipped, with the visuals always placed first to enhance visual hierarchy.
+
+  > :warning: This may introduce a visual breaking change, whereby the visual is now displayed earlier in the page than originally intended. Please manually review content adjacent to the `River` components for correctness.

packages/design-tokens/src/tokens/functional/size/size.json

@@ -41,7 +41,12 @@
         "value": "{base.size.16}"
       },
       "paddingBlock": {
-        "value": "{base.size.16}"
+        "condensed": {
+          "value": "{base.size.6}"
+        },
+        "normal": {
+          "value": "{base.size.16}"
+        }
       },
       "paddingInline": {
         "condensed": {
@@ -67,7 +72,12 @@
         "value": "{base.size.20}"
       },
       "paddingBlock": {
-        "value": "{base.size.20}"
+        "condensed": {
+          "value": "{base.size.12}"
+        },
+        "normal": {
+          "value": "{base.size.20}"
+        }
       },
       "paddingInline": {
         "condensed": {

packages/react/src/ActionMenu/ActionMenu.module.css

@@ -125,7 +125,8 @@
 }
 
 .ActionMenu__item--medium {
-  padding: var(--brand-control-medium-paddingBlock) var(--brand-control-medium-paddingInline-normal);
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);
+  min-height: var(--brand-control-medium-size);
 }
 
 .ActionMenu__item--small {

packages/react/src/Button/Button.features.stories.tsx

@@ -4,6 +4,7 @@ import {userEvent, waitFor, within} from '@storybook/test'
 
 import {Button} from '.'
 import {HeartFillIcon, MarkGithubIcon, PlayIcon} from '@primer/octicons-react'
+import {Grid} from '../Grid'
 
 export default {
   title: 'Components/Button/Features',
@@ -255,3 +256,13 @@ export const WithVisualsAndDisabled = () => (
   </Button>
 )
 WithVisualsAndDisabled.storyName = 'With visuals and disabled'
+
+export const WithLongerText = () => (
+  <Grid>
+    <Grid.Column span={2}>
+      <Button hasArrow={false}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+      </Button>
+    </Grid.Column>
+  </Grid>
+)

packages/react/src/Button/Button.module.css

@@ -168,12 +168,12 @@
 
 .Button--size-medium {
   min-height: var(--brand-control-medium-size);
-  padding-inline: var(--brand-control-medium-paddingInline-spacious);
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);
 }
 
 .Button--size-large {
   min-height: var(--brand-control-large-size);
-  padding-inline: var(--brand-control-large-paddingInline-spacious);
+  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);
 }
 
 .Button--size-large .Button__icon-visual,

packages/react/src/Button/Button.visual.spec.ts

@@ -206,4 +206,13 @@ test.describe('Visual Comparison: Button', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
+
+  test('Button / With Longer Text', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-button-features--with-longer-text&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })

packages/react/src/forms/TextInput/TextInput.module.css

@@ -40,13 +40,13 @@
 .TextInput--medium {
   font-weight: var(--brand-text-weight-100);
   font-size: var(--brand-text-size-100);
-  padding: var(--brand-control-medium-paddingBlock) var(--brand-control-medium-paddingInline-condensed);
+  padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);
 }
 
 .TextInput--large {
   font-weight: var(--brand-text-weight-200);
   font-size: var(--brand-text-size-200);
-  padding: var(--brand-control-large-paddingBlock) var(--brand-control-large-paddingInline-condensed);
+  padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);
 }
 
 .TextInput-wrapper--large {

packages/react/src/forms/Textarea/Textarea.module.css

@@ -56,13 +56,13 @@
 .Textarea--medium {
   font-weight: var(--brand-text-weight-100);
   font-size: var(--brand-text-size-100);
-  padding: var(--brand-control-medium-paddingBlock) var(--brand-control-medium-paddingInline-condensed);
+  padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);
 }
 
 .Textarea--large {
   font-weight: var(--brand-text-weight-200);
   font-size: var(--brand-text-size-200);
-  padding: var(--brand-control-large-paddingBlock) var(--brand-control-large-paddingInline-condensed);
+  padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);
 }
 
 /*