Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add underline prop to BranchName component #5577

Closed
wants to merge 3 commits into from
Closed

Add underline prop to BranchName component #5577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3156231
Add `underline` prop to `BranchName` component
TylerJDev Jan 21, 2025
a8d3b25
Add changeset
TylerJDev Jan 21, 2025
2b5dadf
Merge branch 'main' into tylerjdev/add-underline-to-branchname
TylerJDev Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strange-squids-happen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

BranchName: Adds new prop `inline` that adds underlines to `BranchName` when it is used as a link
6 changes: 6 additions & 0 deletions packages/react/src/BranchName/BranchName.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand Down
8 changes: 8 additions & 0 deletions packages/react/src/BranchName/BranchName.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
4 changes: 4 additions & 0 deletions packages/react/src/BranchName/BranchName.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,8 @@
&:is(:not(a)) {
color: var(--fgColor-muted);
}

[data-a11y-link-underlines='true'] &:where([data-inline='true']) {
text-decoration: underline;
}
}
31 changes: 25 additions & 6 deletions packages/react/src/BranchName/BranchName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
26 changes: 17 additions & 9 deletions packages/react/src/Hidden/Hidden.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading