Merge branch 'main' of github.com:primer/react into mp/inactive-actio…

…nlist-item

.changeset/selfish-beans-cheat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Link: Add `inline` prop to tag links inside a text block, underlined with accessibility setting `[data-a11y-link-underlines]`

.github/workflows/assign_release_conductor.yml

@@ -26,7 +26,7 @@ jobs:
           token: ${{ secrets.PAGERDUTY_API_KEY_SID }}
       - run: echo ${{ steps.pagerduty.outputs.user }} is release conductor
       - name: Add user as assignee and reviewer
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         env:
           PR_NUMBER: ${{ github.event.inputs.pull-request || github.event.pull_request.number }}
           RELEASE_CONDUCTOR: ${{ steps.pagerduty.outputs.user }}

.github/workflows/environment.yml

@@ -19,7 +19,7 @@ jobs:
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         with:
           github-token: ${{ steps.generate_token.outputs.token }}
           script: |

.github/workflows/pull_request.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: 18
 
       - name: Get or Create Comment
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/release-schedule.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Install packages for github-script
         run: npm i date-fns
       - name: Create Release Issue
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         env:
           RELEASE_CONDUCTOR: ${{ steps.pagerduty.outputs.user }}
           SCHEDULE_START: ${{ steps.pagerduty.outputs.start }}

.github/workflows/update-snapshots.yml

@@ -21,7 +21,7 @@ jobs:
       number: ${{ steps.pr.outputs.number }}
     steps:
       - name: 'Get Pull Request'
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         with:
           script: |
             const fs = require('fs');
@@ -43,7 +43,7 @@ jobs:
       - run: |
           mkdir PR
           unzip PR.zip -d PR
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         id: pr
         with:
           script: |
@@ -75,7 +75,7 @@ jobs:
           ref: ${{ github.event.workflow_run.head_branch }}
           token: ${{ steps.generate_token.outputs.token }}
       - name: 'Download artifact'
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         with:
           script: |
             const fs = require('fs');
@@ -122,7 +122,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Remove label
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         with:
           script: |
             const fs = require('fs');

docs/content/overriding-styles.mdx

@@ -36,20 +36,60 @@ This example demonstrates applying a bottom border to `Heading`, a component tha
 
 ## Responsive values
 
-Just like [values passed to system props](https://styled-system.com/responsive-styles), values in the `sx` prop can be provided as arrays to provide responsive styling.
+Values in the `sx` prop can be provided as arrays to provide responsive styling.
 
 ```jsx live
 <Box
   sx={{
-    display: ['flex', 'flex', 'block', 'block'],
+    backgroundColor: [
+      'open.emphasis', // default
+      'done.emphasis', // small       (min-width: 544px)
+      'accent.emphasis', // medium    (min-width: 768px)
+      'danger.emphasis', // large     (min-width: 1012px)
+      'attention.emphasis', // xlarge (min-width: 1280px)
+    ],
+    padding: [2, 2, 4],
+    color: 'fg.onEmphasis',
     borderRadius: 2,
-    padding: 2,
   }}
 >
-  Responsive background color
+  Resize window to see responsive background color
 </Box>
 ```
 
+This generates the following CSS:
+
+```css
+.Box-hsdYAF {
+  background-color: var(--bgColor-open-emphasis); /* default */
+  padding: 8px;
+  color: var(--fgColor-onEmphasis);
+  border-radius: 6px;
+}
+@media screen and (min-width: 544px /* small */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-done-emphasis);
+    padding: 8px;
+  }
+}
+@media screen and (min-width: 768px /* medium */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-accent-emphasis);
+    padding: 16px;
+  }
+}
+@media screen and (min-width: 1012px /* large */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-danger-emphasis);
+  }
+}
+@media screen and (min-width: 1280px /* xlarge */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-attention-emphasis);
+  }
+}
+```
+
 ## Nesting, pseudo-classes, and pseudo-elements
 
 The `sx` prop also allows for declaring styles based on media queries, pseudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability:

e2e/components/Link.test.ts

@@ -128,4 +128,38 @@ test.describe('Link', () => {
       })
     }
   })
+
+  test.describe('Dev: Inline', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Link.Inline.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

package.json

@@ -263,7 +263,7 @@
     "unist-util-find-before": "4.0.0",
     "unist-util-flat-filter": "2.0.0",
     "webpack": "5.88.2",
-    "yaml": "2.2.2"
+    "yaml": "2.3.4"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

src/Link/Link.dev.stories.tsx

@@ -0,0 +1,83 @@
+import Link from '.'
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ComponentProps} from '../utils/types'
+
+export default {
+  title: 'Components/Link/DevOnly',
+  component: Link,
+} as Meta<ComponentProps<typeof Link>>
+
+export const Inline = () => (
+  <div>
+    <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="true">
+      [data-a11y-link-underlines=true] (inline always underlines)
+      <Link href="#">inline: undefined, underline: undefined</Link>
+      <Link underline={true} href="#">
+        inline: undefined, underline: true
+      </Link>
+      <Link underline={false} href="#">
+        inline: undefined, underline: false
+      </Link>
+      <br />
+      <Link inline={true} href="#">
+        inline: true, underline: undefined
+      </Link>
+      <Link inline={false} href="#">
+        inline: false, underline: undefined
+      </Link>
+      <br />
+      <Link inline={true} underline={true} href="#">
+        inline: true, underline: true
+      </Link>
+      <Link inline={true} underline={false} href="#">
+        inline: true, underline: false
+      </Link>
+      <Link inline={false} underline={true} href="#">
+        inline: false, underline: true
+      </Link>
+      <Link inline={false} underline={false} href="#">
+        inline: false, underline: false
+      </Link>
+      <br />
+      <Link muted={true} inline={true} href="#">
+        inline: true, muted: true
+      </Link>
+    </div>
+    <br />
+    <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="false">
+      [data-a11y-link-underlines=false] (inline does nothing)
+      <Link href="#">inline: undefined, underline: undefined</Link>
+      <Link underline={true} href="#">
+        inline: undefined, underline: true
+      </Link>
+      <Link underline={false} href="#">
+        inline: undefined, underline: false
+      </Link>
+      <br />
+      <Link inline={true} href="#">
+        inline: true, underline: undefined
+      </Link>
+      <Link inline={false} href="#">
+        inline: false, underline: undefined
+      </Link>
+      <br />
+      <Link inline={true} underline={true} href="#">
+        inline: true, underline: true
+      </Link>
+      <Link inline={true} underline={false} href="#">
+        inline: true, underline: false
+      </Link>
+      <Link inline={false} underline={true} href="#">
+        inline: false, underline: true
+      </Link>
+      <Link inline={false} underline={false} href="#">
+        inline: false, underline: false
+      </Link>
+      <br />
+      <Link muted={true} inline={true} href="#">
+        inline: true, muted: true
+      </Link>
+    </div>
+  </div>
+)

src/Link/Link.docs.json

@@ -17,6 +17,12 @@
       "defaultValue": "false",
       "description": "Uses a less prominent shade for Link color, and the default link shade on hover"
     },
+    {
+      "name": "inline",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Tag link inside a text block"
+    },
     {
       "name": "underline",
       "type": "boolean",
@@ -44,4 +50,4 @@
     }
   ],
   "subcomponents": []
-}
+}

src/Link/Link.features.stories.tsx

@@ -19,3 +19,11 @@ export const Underline = () => (
     Link
   </Link>
 )
+
+export const Inline = () => (
+  <div data-a11y-link-underlines="true">
+    <Link inline={true} href="#">
+      Link
+    </Link>
+  </div>
+)

src/Link/Link.stories.tsx

@@ -14,6 +14,7 @@ Playground.args = {
   href: '#',
   muted: false,
   underline: false,
+  inline: false,
 }
 
 export const Default = () => <Link href="#">Link</Link>

src/Link/Link.tsx

@@ -11,6 +11,8 @@ type StyledLinkProps = {
   hoverColor?: string
   muted?: boolean
   underline?: boolean
+  // Link inside a text block
+  inline?: boolean
 } & SxProp
 
 const hoverColor = system({
@@ -22,7 +24,19 @@ const hoverColor = system({
 
 const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
-  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
+
+  /* By default, Link does not have underline */
+  text-decoration: none;
+
+  /* You can add one by setting underline={true} */
+  text-decoration: ${props => (props.underline ? 'underline' : undefined)};
+
+  /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */
+  /* Note: setting underline={false} does not override this */
+  [data-a11y-link-underlines='true'] &[data-inline='true'] {
+    text-decoration: underline;
+  }
+
   &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
@@ -72,6 +86,7 @@ const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
   return (
     <StyledLink
       as={Component}
+      data-inline={props.inline}
       {...props}
       // @ts-ignore shh
       ref={innerRef}