Added variant prop to SubNav.Link

Author: rezrah

.changeset/slimy-snakes-turn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+`SubNav.Link` now supports `variant="default"` to help increase text contrast and legibility with non-standard backgrounds.

apps/docs/content/components/SubNav.mdx

@@ -129,10 +129,11 @@ Submenus appear as a dropdown by default.
 
 ### SubNav.Link <Label>Required</Label>
 
-| name           | type     | default | required | description                                     |
-| -------------- | -------- | ------- | -------- | ----------------------------------------------- |
-| `aria-current` | `string` |         | `true`   | Required for indicating the current active link |
-| `href`         | `string` |         | `true`   | URL of the page the link goes to                |
+| name           | type                                                            | default | required | description                                                          |
+| -------------- | --------------------------------------------------------------- | ------- | -------- | -------------------------------------------------------------------- |
+| `aria-current` | `string`                                                        |         | `true`   | Required for indicating the current active link                      |
+| `href`         | `string`                                                        |         | `true`   | URL of the page the link goes to                                     |
+| `variant`      | <PropTableValues values={['default', 'muted']} addLineBreaks /> | `muted` | `false`  | Alternative idle text appearance. Recommended for improving contrast |
 
 ### SubNav.Action
 

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

@@ -235,3 +235,28 @@ NarrowAnchorNavVariantMenuOpen.play = async ({canvasElement}) => {
   const firstLink = within(overlayMenu).getAllByRole('link')[0]
   expect(firstLink).toHaveFocus()
 }
+
+export const AnchorNavDefaultLinkVariant = args => (
+  <SubNav {...args}>
+    <SubNav.Heading href="#">Heading</SubNav.Heading>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Link href="#" variant="default">
+      Link
+    </SubNav.Link>
+    <SubNav.Action href="#">Primary CTA</SubNav.Action>
+  </SubNav>
+)

packages/react/src/SubNav/SubNav.tsx

@@ -15,7 +15,7 @@ import React, {
   type ReactNode,
   type RefObject,
 } from 'react'
-import {Button, ButtonSizes, ButtonVariants, Text, ThemeProvider, useWindowSize} from '..'
+import {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'
 
 import {default as clsx} from 'clsx'
 import {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'
@@ -341,13 +341,14 @@ const SubNavHeading = ({href, children, className, 'data-testid': testID, ...pro
 type SubNavLinkProps = {
   href: string
   'data-testid'?: string
-  _variant?: SubMenuVariants
+  variant?: TextProps['variant']
+  _subMenuVariant?: SubMenuVariants
 } & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &
   BaseProps<HTMLAnchorElement>
 
 const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
   (
-    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _variant, ...props},
+    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},
     forwardedRef,
   ) => {
     const submenuId = useId()
@@ -397,7 +398,7 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
             size="200"
             weight="semibold"
             className={styles['SubNav__link-label']}
-            variant={ariaCurrent === 'page' ? 'default' : 'muted'}
+            variant={ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted'}
           >
             {label}
           </Text>
@@ -462,13 +463,13 @@ const SubNavLink = forwardRef<HTMLAnchorElement | HTMLDivElement, SubNavLinkProp
         <SubNavLinkWithSubmenu
           {...props}
           ref={ref as RefObject<HTMLDivElement>}
-          _variant={isAnchorVariantSubMenu ? 'anchor' : undefined}
+          _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}
         />
       </li>
     )
   }
 
-  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, ...rest} = props
+  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props
 
   return (
     <li>
@@ -490,7 +491,7 @@ const SubNavLink = forwardRef<HTMLAnchorElement | HTMLDivElement, SubNavLinkProp
           size="100"
           weight="semibold"
           className={styles['SubNav__link-label']}
-          variant={ariaCurrent === 'page' ? 'default' : 'muted'}
+          variant={ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted'}
         >
           {children}
         </Text>

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

@@ -117,4 +117,12 @@ test.describe('Visual Comparison: SubNav', () => {
       expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
     })
   })
+  test('SubNav / Anchor Nav Default Link Variant', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-subnav-features--anchor-nav-default-link-variant&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })