From 31562310bae31e5e28524017b4614d78a22a4181 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Jan 2025 13:29:16 -0500
Subject: [PATCH 1/2] Add `underline` prop to `BranchName` component

---
 .../react/src/BranchName/BranchName.docs.json |  6 ++++
 .../BranchName.features.stories.tsx           |  8 +++++
 .../src/BranchName/BranchName.module.css      |  4 +++
 packages/react/src/BranchName/BranchName.tsx  | 31 +++++++++++++++----
 .../src/Hidden/Hidden.examples.stories.tsx    | 26 ++++++++++------
 5 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/BranchName/BranchName.docs.json b/packages/react/src/BranchName/BranchName.docs.json
index 585a62d2720..0e47c7e6dfe 100644
--- a/packages/react/src/BranchName/BranchName.docs.json
+++ b/packages/react/src/BranchName/BranchName.docs.json
@@ -16,6 +16,12 @@
   ],
   "importPath": "@primer/react",
   "props": [
+    {
+      "name": "inline",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Set to true for when `BranchName` is a link and adjacent to text, underlining them for clear visibility and improved accessibility."
+    },
     {
       "name": "ref",
       "type": "React.RefObject<HTMLAnchorElement>"
diff --git a/packages/react/src/BranchName/BranchName.features.stories.tsx b/packages/react/src/BranchName/BranchName.features.stories.tsx
index 2beec07a049..0fdfe0cec7b 100644
--- a/packages/react/src/BranchName/BranchName.features.stories.tsx
+++ b/packages/react/src/BranchName/BranchName.features.stories.tsx
@@ -20,3 +20,11 @@ export const WithBranchIcon = () => (
 )
 
 export const NotALink = () => <BranchName as="span">branch_name_as_span</BranchName>
+
+export const WithUnderline = () => (
+  <div data-a11y-link-underlines="true">
+    <BranchName href="#" inline>
+      branch_name
+    </BranchName>
+  </div>
+)
diff --git a/packages/react/src/BranchName/BranchName.module.css b/packages/react/src/BranchName/BranchName.module.css
index 66e9abc2d50..9b227c08a8e 100644
--- a/packages/react/src/BranchName/BranchName.module.css
+++ b/packages/react/src/BranchName/BranchName.module.css
@@ -11,4 +11,8 @@
   &:is(:not(a)) {
     color: var(--fgColor-muted);
   }
+
+  [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
+    text-decoration: underline;
+  }
 }
diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx
index 46b239865d7..f72d887d9c0 100644
--- a/packages/react/src/BranchName/BranchName.tsx
+++ b/packages/react/src/BranchName/BranchName.tsx
@@ -20,37 +20,56 @@ const StyledBranchName = styled.a<SxProp>`
   &:is(:not(a)) {
     color: var(--fgColor-muted);
   }
+  [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
+    text-decoration: underline;
+  }
   ${sx};
 `
 
+type ElementProps =
+  | {
+      inline?: never
+    }
+  | {
+      as?: 'a'
+      inline?: boolean
+    }
+
 type BranchNameProps<As extends React.ElementType> = {
   as?: As
 } & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> &
-  SxProp
+  SxProp &
+  ElementProps
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function BranchName<As extends React.ElementType>(props: BranchNameProps<As>, ref: ForwardedRef<any>) {
-  const {as: BaseComponent = 'a', className, children, sx, ...rest} = props
+  const {as: BaseComponent = 'a', className, children, inline, sx, ...rest} = props
   const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
   if (enabled) {
     if (sx) {
       return (
-        <Box {...rest} ref={ref} as={BaseComponent} className={clsx(className, classes.BranchName)} sx={sx}>
+        <Box
+          {...rest}
+          ref={ref}
+          as={BaseComponent}
+          data-inline={inline}
+          className={clsx(className, classes.BranchName)}
+          sx={sx}
+        >
           {children}
         </Box>
       )
     }
 
     return (
-      <BaseComponent {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
+      <BaseComponent {...rest} ref={ref} data-inline={inline} className={clsx(className, classes.BranchName)}>
         {children}
       </BaseComponent>
     )
   }
 
   return (
-    <StyledBranchName {...rest} as={BaseComponent} ref={ref} className={className} sx={sx}>
+    <StyledBranchName {...rest} as={BaseComponent} ref={ref} className={className} data-inline={inline} sx={sx}>
       {children}
     </StyledBranchName>
   )
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index 42c1d21c4de..a344cd56b93 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -60,15 +60,23 @@ export const PullRequestPage = () => (
       </PageHeader.TitleArea>
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
-        <Hidden when={['narrow']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
-            <Link href="#" muted sx={{fontWeight: 'bold'}}>
-              broccolinisoup
-            </Link>{' '}
-            wants to merge 3 commits into <BranchName href="#">main</BranchName> from{' '}
-            <BranchName href="#">broccolinisoup/add-hidden-component</BranchName>
-          </Text>
-        </Hidden>
+        <div data-a11y-link-underlines="true">
+          <Hidden when={['narrow']}>
+            <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+              <Link inline href="#" muted sx={{fontWeight: 'bold'}}>
+                broccolinisoup
+              </Link>{' '}
+              wants to merge 3 commits into{' '}
+              <BranchName inline href="#">
+                main
+              </BranchName>{' '}
+              from{' '}
+              <BranchName inline href="#">
+                broccolinisoup/add-hidden-component
+              </BranchName>
+            </Text>
+          </Hidden>
+        </div>
         <Hidden when={['regular', 'wide']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <BranchName href="#">main</BranchName>

From a8d3b25c5786903b1e6e0475195b26f6db663d52 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Jan 2025 13:41:43 -0500
Subject: [PATCH 2/2] Add changeset

---
 .changeset/strange-squids-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strange-squids-happen.md

diff --git a/.changeset/strange-squids-happen.md b/.changeset/strange-squids-happen.md
new file mode 100644
index 00000000000..4c2081af78d
--- /dev/null
+++ b/.changeset/strange-squids-happen.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+BranchName: Adds new prop `inline` that adds underlines to `BranchName` when it is used as a link