Merge branch 'main' into bs/fix-underlinenav-default-story

.changeset/happy-rivers-attend.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": minor
+---
+
+Updates link styles to support underline link preferences.
+
+<!-- Changed components: ActionList, BranchName, Breadcrumbs, Button, Button2, Heading, Link -->

e2e/components/BranchName.test.ts

@@ -39,5 +39,19 @@ test.describe('BranchName', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-branchname--default',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('BranchName.Default.light.forcedUnderlines.png')
+      })
+    })
   })
 })

e2e/components/Breadcrumbs.test.ts

@@ -43,5 +43,19 @@ test.describe('Breadcrumbs', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-breadcrumbs--default',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('Breadcrumbs.Default.light.forcedUnderlines.png')
+      })
+    })
   })
 })

e2e/components/Link.test.ts

@@ -43,6 +43,20 @@ test.describe('Link', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-link--default',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('Link.Default.light.forcedUnderlines.png')
+      })
+    })
   })
 
   test.describe('Muted', () => {
@@ -85,6 +99,20 @@ test.describe('Link', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-link-features--muted',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('Link.Muted.light.forcedUnderlines.png')
+      })
+    })
   })
 
   test.describe('Underline', () => {
@@ -127,5 +155,19 @@ test.describe('Link', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-link-features--underline',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('Link.Underline.light.forcedUnderlines.png')
+      })
+    })
   })
 })

e2e/components/LinkButton.test.ts

@@ -137,6 +137,20 @@ test.describe('LinkButton', () => {
         })
       })
     }
+
+    test.describe('with forced underlines', () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-linkbutton-features--invisible',
+          globals: {
+            colorScheme: 'light',
+            prefersLinkUnderlines: 'true',
+          },
+        })
+
+        expect(await page.screenshot()).toMatchSnapshot('LinkButton.Invisible.light.forcedUnderlines.png')
+      })
+    })
   })
 
   test.describe('Large', () => {

e2e/test-helpers/storybook.ts

@@ -28,7 +28,7 @@ export async function visit(page: Page, options: Options) {
     let params = ''
     for (const [key, value] of Object.entries(globals)) {
       if (params !== '') {
-        params += '&'
+        params += ';'
       }
       params += `${key}:${value}`
     }