Update activeIndicatorLine to grow with content

.changeset/bright-ravens-jog.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update active indicators for ActionList & FilteredActionList to follow content height

e2e/components/FilteredActionList.test.ts

@@ -0,0 +1,34 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-filteredactionlist--default',
+  },
+  {
+    title: 'With Long Items',
+    id: 'components-filteredactionlist-examples--with-long-items',
+  },
+] as const
+
+test.describe('FilteredActionList', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test(`default @vrt ${theme}`, async ({page}) => {
+          await visit(page, {
+            id: story.id,
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          await expect(page).toHaveScreenshot(`FilteredActionList.${story.title}.${theme}.png`)
+        })
+      }
+    })
+  }
+})

packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css

@@ -1,9 +1,9 @@
 @define-mixin activeIndicatorLine {
   position: absolute;
-  top: calc(50% - var(--base-size-12));
+  top: var(--base-size-4);
   left: calc(-1 * var(--base-size-8));
   width: var(--base-size-4);
-  height: var(--base-size-24);
+  height: calc(100% - var(--base-size-8));
   content: '';
   /* stylelint-disable-next-line primer/colors */
   background: var(--borderColor-accent-emphasis);

packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx

@@ -0,0 +1,53 @@
+import type {Meta} from '@storybook/react-vite'
+import React, {useMemo} from 'react'
+import {FilteredActionList} from '../FilteredActionList'
+import classes from './FilteredActionList.stories.module.css'
+
+const meta: Meta = {
+  title: 'Components/FilteredActionList/Examples',
+  component: FilteredActionList,
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+}
+export default meta
+
+export function WithLongItems() {
+  const [filter, setFilter] = React.useState('')
+
+  const items = useMemo(() => {
+    return [
+      {
+        text: 'enhancement with a very long label that might wrap. enhancement with a very long label that might wrap. enhancement with a very long label that might wrap. ',
+        id: 1,
+      },
+      {
+        text: 'bug with an excessively verbose description that goes on and on. bug with an excessively verbose description that goes on and on. bug with an excessively verbose description that goes on and on.',
+        id: 2,
+      },
+      {
+        text: 'good first issue that is intended to be approachable for newcomers',
+        id: 3,
+      },
+      {
+        text: 'design related task that involves multiple stakeholders and considerations',
+        id: 4,
+      },
+    ].filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  }, [filter])
+
+  return (
+    <>
+      <h1>Filtered Action List with Long Items</h1>
+      <div>Please select labels that describe your issue:</div>
+      <FilteredActionList
+        placeholderText="Filter Labels"
+        onFilterChange={setFilter}
+        items={items}
+        className={classes.FilteredActionListContainer}
+      />
+    </>
+  )
+}