diff --git a/.changeset/bright-ravens-jog.md b/.changeset/bright-ravens-jog.md new file mode 100644 index 00000000000..11d9760c1fe --- /dev/null +++ b/.changeset/bright-ravens-jog.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update active indicators for ActionList & FilteredActionList to follow content height diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..2c4c64998d4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..a8055b225b8 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b6fdd6b02d9 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-linux.png new file mode 100644 index 00000000000..2c4c64998d4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2c4c64998d4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..b7df613ebcc Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..f14dc2e410b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-linux.png new file mode 100644 index 00000000000..b7df613ebcc Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..b7df613ebcc Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..3be599e791a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..2a0c92733cc Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ed0399c2041 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-linux.png new file mode 100644 index 00000000000..3be599e791a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3be599e791a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..7d754d8c808 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..bc80a3a13f1 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-linux.png new file mode 100644 index 00000000000..7d754d8c808 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..7d754d8c808 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Long-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png index 10cb0e6922f..25e2c29d73e 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png index 47a386849af..f93fb3d9d1e 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png index c1977dded37..081a404d3d3 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png index 10cb0e6922f..25e2c29d73e 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png index 10cb0e6922f..25e2c29d73e 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png index 30b5aa6d3d5..4436f336cbb 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png index 2e47c1bc233..862d7ecd8e6 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png index 30b5aa6d3d5..7400eeea8c5 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png index 30b5aa6d3d5..4436f336cbb 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-full-screen-on-narrow--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-full-screen-on-narrow--true-linux.png index 888a740b4d0..2cb2a1245b1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-full-screen-on-narrow--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-full-screen-on-narrow--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png index 251bdf7087c..683f8197519 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png index 6fac60caf08..e324268c1a1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png index bf45e1226c3..5e9c373a35b 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png index fb4d0512fe7..683f8197519 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png index 251bdf7087c..683f8197519 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png index 4d4830e063c..eca8312bcc9 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png index da466339da2..a575b5a7b36 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png index 4d4830e063c..446898dbd66 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png index 3a858176f50..446898dbd66 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png differ diff --git a/e2e/components/FilteredActionList.test.ts b/e2e/components/FilteredActionList.test.ts new file mode 100644 index 00000000000..fd6eab58e54 --- /dev/null +++ b/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`) + }) + } + }) + } +}) diff --git a/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css b/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css index 515947bacc7..a8aa1bb6ec4 100644 --- a/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css +++ b/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); diff --git a/packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx b/packages/react/src/FilteredActionList/FilteredActionList.examples.stories.tsx new file mode 100644 index 00000000000..ba890e414c7 --- /dev/null +++ b/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 ( + <> +

Filtered Action List with Long Items

+
Please select labels that describe your issue:
+ + + ) +}