Merge branch 'main' into chore/update-docs-site-to-react-18

e2e/components/InlineAutocomplete.test.ts

@@ -0,0 +1,117 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('InlineAutocomplete', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Custom Rendering', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete-features--custom-rendering',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Custom Rendering.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete-features--custom-rendering',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Single Line', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete-features--single-line',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Single Line.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-forms-inlineautocomplete-features--single-line',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

e2e/components/StyledOcticon.test.ts

@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('StyledOcticon', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-styledocticon--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-styledocticon--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-styledocticon--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-styledocticon--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

script/generate-e2e-tests.js

@@ -573,6 +573,29 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'InlineAutocomplete',
+    {
+      stories: [
+        {
+          id: 'components-forms-inlineautocomplete--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-forms-inlineautocomplete--playground',
+          name: 'Playground',
+        },
+        {
+          id: 'components-forms-inlineautocomplete-features--custom-rendering',
+          name: 'Custom Rendering',
+        },
+        {
+          id: 'components-forms-inlineautocomplete-features--single-line',
+          name: 'Single Line',
+        },
+      ],
+    },
+  ],
   [
     'Label',
     {
@@ -1094,6 +1117,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'StyledOcticon',
+    {
+      stories: [
+        {
+          id: 'components-styledocticon--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-styledocticon--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'Text',
     {

src/Octicon/StyledOcticon.stories.tsx → src/StyledOcticon/StyledOcticon.stories.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import {Meta, ComponentStory} from '@storybook/react'
-import Octicon from './Octicon'
+import StyledOcticon from './StyledOcticon'
 import {HeartFillIcon} from '@primer/octicons-react'
 
 export default {
-  title: 'Components/Octicon',
-  component: Octicon,
-} as Meta<typeof Octicon>
+  title: 'Components/StyledOcticon',
+  component: StyledOcticon,
+} as Meta<typeof StyledOcticon>
 
-export const Default = () => <Octicon icon={HeartFillIcon} size={32} />
+export const Default = () => <StyledOcticon icon={HeartFillIcon} size={32} />
 
-export const Playground: ComponentStory<typeof Octicon> = args => <Octicon icon={HeartFillIcon} {...args} />
+export const Playground: ComponentStory<typeof StyledOcticon> = args => <StyledOcticon icon={HeartFillIcon} {...args} />
 
 Playground.args = {
   ariaLabel: 'Heart',

src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx

@@ -0,0 +1,107 @@
+import React, {useState} from 'react'
+import {Meta} from '@storybook/react'
+import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '../..'
+import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
+
+export default {
+  title: 'Components/Forms/InlineAutocomplete/Features',
+  component: InlineAutocomplete,
+} as Meta<typeof InlineAutocomplete>
+
+interface User {
+  login: string
+  name: string
+  avatar: string
+  type: 'user' | 'organization'
+}
+
+const sampleUsers: User[] = [
+  {login: 'monalisa', name: 'Monalisa Octocat', avatar: 'https://avatars.githubusercontent.com/github', type: 'user'},
+  {login: 'primer', name: 'Primer', avatar: 'https://avatars.githubusercontent.com/primer', type: 'organization'},
+  {login: 'github', name: 'GitHub', avatar: 'https://avatars.githubusercontent.com/github', type: 'organization'},
+]
+
+const filteredUsers = (query: string) =>
+  sampleUsers.filter(
+    user =>
+      user.login.toLowerCase().includes(query.toLowerCase()) || user.name.toLowerCase().includes(query.toLowerCase()),
+  )
+
+export const SingleLine = ({loading, tabInserts}: ArgProps) => {
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  const onShowSuggestions = (event: ShowSuggestionsEvent) => {
+    if (loading) {
+      setSuggestions('loading')
+      return
+    }
+
+    setSuggestions(filteredUsers(event.query).map(user => user.login))
+  }
+
+  return (
+    <FormControl>
+      <FormControl.Label>Inline Autocomplete Demo</FormControl.Label>
+      <FormControl.Caption>Try typing &apos;@&apos; to show user suggestions.</FormControl.Caption>
+      <InlineAutocomplete
+        triggers={[{triggerChar: '@'}]}
+        suggestions={suggestions}
+        onShowSuggestions={onShowSuggestions}
+        onHideSuggestions={() => setSuggestions(null)}
+        tabInsertsSuggestions={tabInserts}
+      >
+        <TextInput sx={{lineHeight: 1.2}} />
+      </InlineAutocomplete>
+    </FormControl>
+  )
+}
+
+const UserSuggestion = ({user, ...props}: {user: User} & ActionListItemProps) => (
+  <ActionList.Item {...props}>
+    <ActionList.LeadingVisual>
+      <Avatar src={user.avatar} square={user.type === 'organization'} />
+    </ActionList.LeadingVisual>
+    {user.name} <ActionList.Description>{user.login}</ActionList.Description>
+  </ActionList.Item>
+)
+
+type ArgProps = {
+  loading: boolean
+  tabInserts: boolean
+}
+
+export const CustomRendering = ({loading, tabInserts}: ArgProps) => {
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  const onShowSuggestions = (event: ShowSuggestionsEvent) => {
+    if (loading) {
+      setSuggestions('loading')
+      return
+    }
+
+    setSuggestions(
+      filteredUsers(event.query).map(user => ({
+        value: user.login,
+        render: props => <UserSuggestion user={user} {...props} />,
+      })),
+    )
+  }
+
+  const onHideSuggestions = () => setSuggestions(null)
+
+  return (
+    <FormControl>
+      <FormControl.Label>Inline Autocomplete Demo</FormControl.Label>
+      <FormControl.Caption>Try typing &apos;@&apos; to show user suggestions.</FormControl.Caption>
+      <InlineAutocomplete
+        triggers={[{triggerChar: '@'}]}
+        suggestions={suggestions}
+        onShowSuggestions={onShowSuggestions}
+        onHideSuggestions={onHideSuggestions}
+        tabInsertsSuggestions={tabInserts}
+      >
+        <Textarea />
+      </InlineAutocomplete>
+    </FormControl>
+  )
+}