Merge branch 'main' into dependabot/npm_and_yarn/next-14.2.15

primer · Dec 26, 2024 · 53374fe · 53374fe
2 parents 743f7a6 + 6d70d1b
commit 53374fe
Show file tree

Hide file tree

Showing 222 changed files with 7,533 additions and 3,141 deletions.
diff --git a/.changeset/brave-penguins-clap.md b/.changeset/brave-penguins-clap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Corrects horizontal padding of `<Button>` when the button only contains an icon and a counter label (no button text label).
diff --git a/.changeset/dirty-nails-applaud.md b/.changeset/dirty-nails-applaud.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ActionList, ActionList sub components and NavList to CSS Modules
diff --git a/.changeset/few-coins-kick.md b/.changeset/few-coins-kick.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Deprecate use of sx prop by deprecating the `SxProp` type definition
diff --git a/.changeset/gentle-stingrays-search.md b/.changeset/gentle-stingrays-search.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update FormControl to use CSS Modules behind feature flag
diff --git a/.changeset/proud-phones-repeat.md b/.changeset/proud-phones-repeat.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+chore(deps): update @primer/octicons-react to 19.13.0
diff --git a/.changeset/purple-pants-sit.md b/.changeset/purple-pants-sit.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Box usage in Autocomplete to CSS modules behind feature flag
diff --git a/.changeset/selfish-flowers-approve.md b/.changeset/selfish-flowers-approve.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update Table to use CSS Modules behind feature flag
diff --git a/.changeset/shaggy-comics-whisper.md b/.changeset/shaggy-comics-whisper.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Header
diff --git a/.changeset/thirty-wasps-sleep.md b/.changeset/thirty-wasps-sleep.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS module feature flag from Skeleton
diff --git a/.changeset/violet-tables-eat.md b/.changeset/violet-tables-eat.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Select
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,7 +1,7 @@
 {
   "name": "Primer React",
   "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:22",
-  "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "DavidAnson.vscode-markdownlint"],
+  "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "DavidAnson.vscode-markdownlint", "hex-ci.stylelint-plus"],
   "forwardPorts": [8000],
   "onCreateCommand": ["/bin/bash", "-c", "npm run setup"],
   "remoteUser": "node",

diff --git a/...tionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png
diff --git a/...nts/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png b/...nts/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png
diff --git a/...omponents/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png b/...omponents/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Simple-List-dark-high-contrast-linux.png b/...ctionList.test.ts-snapshots/ActionList-Simple-List-dark-high-contrast-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-Simple-List-light-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Simple-List-light-high-contrast-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Single-Divider-dark-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Single-Divider-dark-high-contrast-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Single-Divider-light-high-contrast-linux.png b/...nList.test.ts-snapshots/ActionList-Single-Divider-light-high-contrast-linux.png
diff --git a/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png b/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png
diff --git a/...ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png b/...ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png
diff --git a/...ist.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png b/...ist.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png b/...onents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png
diff --git a/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png b/...onList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png
diff --git a/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png b/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png
diff --git a/...st.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png b/...st.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png b/...nents/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png
diff --git a/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png b/...nList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png
diff --git a/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-colorblind-linux.png b/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-colorblind-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Heading-with-Classname-dark-dimmed-linux.png b/...nents/ActionList.test.ts-snapshots/Heading-with-Classname-dark-dimmed-linux.png
diff --git a/...ctionList.test.ts-snapshots/Heading-with-Classname-dark-high-contrast-linux.png b/...ctionList.test.ts-snapshots/Heading-with-Classname-dark-high-contrast-linux.png
diff --git a/...s/components/ActionList.test.ts-snapshots/Heading-with-Classname-dark-linux.png b/...s/components/ActionList.test.ts-snapshots/Heading-with-Classname-dark-linux.png
diff --git a/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-tritanopia-linux.png b/...s/ActionList.test.ts-snapshots/Heading-with-Classname-dark-tritanopia-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-colorblind-linux.png b/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-colorblind-linux.png
diff --git a/...tionList.test.ts-snapshots/Heading-with-Classname-light-high-contrast-linux.png b/...tionList.test.ts-snapshots/Heading-with-Classname-light-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/Heading-with-Classname-light-linux.png b/.../components/ActionList.test.ts-snapshots/Heading-with-Classname-light-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/Heading-with-Classname-light-tritanopia-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/Link-Item-Options-dark-colorblind-linux.png b/...onents/ActionList.test.ts-snapshots/Link-Item-Options-dark-colorblind-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/Link-Item-Options-dark-dimmed-linux.png b/...components/ActionList.test.ts-snapshots/Link-Item-Options-dark-dimmed-linux.png
diff --git a/...nts/ActionList.test.ts-snapshots/Link-Item-Options-dark-high-contrast-linux.png b/...nts/ActionList.test.ts-snapshots/Link-Item-Options-dark-high-contrast-linux.png
diff --git a/...pshots/components/ActionList.test.ts-snapshots/Link-Item-Options-dark-linux.png b/...pshots/components/ActionList.test.ts-snapshots/Link-Item-Options-dark-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/Link-Item-Options-dark-tritanopia-linux.png b/...onents/ActionList.test.ts-snapshots/Link-Item-Options-dark-tritanopia-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Link-Item-Options-light-colorblind-linux.png b/...nents/ActionList.test.ts-snapshots/Link-Item-Options-light-colorblind-linux.png
diff --git a/...ts/ActionList.test.ts-snapshots/Link-Item-Options-light-high-contrast-linux.png b/...ts/ActionList.test.ts-snapshots/Link-Item-Options-light-high-contrast-linux.png
diff --git a/...shots/components/ActionList.test.ts-snapshots/Link-Item-Options-light-linux.png b/...shots/components/ActionList.test.ts-snapshots/Link-Item-Options-light-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/Link-Item-Options-light-tritanopia-linux.png b/...nents/ActionList.test.ts-snapshots/Link-Item-Options-light-tritanopia-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-colorblind-linux.png b/.../ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-colorblind-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-dimmed-linux.png b/...ents/ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-dimmed-linux.png
diff --git a/...tionList.test.ts-snapshots/Visuals-with-Classnames-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/Visuals-with-Classnames-dark-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-linux.png b/.../components/ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-linux.png
diff --git a/.../ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/Visuals-with-Classnames-dark-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/Visuals-with-Classnames-light-colorblind-linux.png b/...ActionList.test.ts-snapshots/Visuals-with-Classnames-light-colorblind-linux.png
diff --git a/...ionList.test.ts-snapshots/Visuals-with-Classnames-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/Visuals-with-Classnames-light-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/Visuals-with-Classnames-light-linux.png b/...components/ActionList.test.ts-snapshots/Visuals-with-Classnames-light-linux.png
diff --git a/...ActionList.test.ts-snapshots/Visuals-with-Classnames-light-tritanopia-linux.png b/...ActionList.test.ts-snapshots/Visuals-with-Classnames-light-tritanopia-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-colorblind-linux.png b/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-colorblind-linux.png
diff --git a/...ponents/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-dimmed-linux.png b/...ponents/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-dimmed-linux.png
diff --git a/.../Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-high-contrast-linux.png b/.../Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-high-contrast-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-linux.png b/...ots/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-tritanopia-linux.png b/...nts/Button.test.ts-snapshots/Trailing-Counter-No-Text-dark-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-colorblind-linux.png
diff --git a/...Button.test.ts-snapshots/Trailing-Counter-No-Text-light-high-contrast-linux.png b/...Button.test.ts-snapshots/Trailing-Counter-No-Text-light-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-linux.png b/...ts/components/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Trailing-Counter-No-Text-light-tritanopia-linux.png
diff --git a/...ts/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png b/...ts/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png
diff --git a/...pshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png b/...pshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png
diff --git a/...components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png b/...components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png b/...ght/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png
diff --git a/...ts/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png b/...ts/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png
diff --git a/...s/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png b/...s/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png
diff --git a/...omponents/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png b/...omponents/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png b/...ht/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png
diff --git a/...s/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png b/...s/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png
diff --git a/...mponents/NavList.test.ts-snapshots/NavList-With-Group-dark-colorblind-linux.png b/...mponents/NavList.test.ts-snapshots/NavList-With-Group-dark-colorblind-linux.png
diff --git a/...s/components/NavList.test.ts-snapshots/NavList-With-Group-dark-dimmed-linux.png b/...s/components/NavList.test.ts-snapshots/NavList-With-Group-dark-dimmed-linux.png
diff --git a/...nents/NavList.test.ts-snapshots/NavList-With-Group-dark-high-contrast-linux.png b/...nents/NavList.test.ts-snapshots/NavList-With-Group-dark-high-contrast-linux.png
diff --git a/...napshots/components/NavList.test.ts-snapshots/NavList-With-Group-dark-linux.png b/...napshots/components/NavList.test.ts-snapshots/NavList-With-Group-dark-linux.png
diff --git a/...mponents/NavList.test.ts-snapshots/NavList-With-Group-dark-tritanopia-linux.png b/...mponents/NavList.test.ts-snapshots/NavList-With-Group-dark-tritanopia-linux.png
diff --git a/...ponents/NavList.test.ts-snapshots/NavList-With-Group-light-colorblind-linux.png b/...ponents/NavList.test.ts-snapshots/NavList-With-Group-light-colorblind-linux.png
diff --git a/...ents/NavList.test.ts-snapshots/NavList-With-Group-light-high-contrast-linux.png b/...ents/NavList.test.ts-snapshots/NavList-With-Group-light-high-contrast-linux.png
diff --git a/...apshots/components/NavList.test.ts-snapshots/NavList-With-Group-light-linux.png b/...apshots/components/NavList.test.ts-snapshots/NavList-With-Group-light-linux.png
diff --git a/...ponents/NavList.test.ts-snapshots/NavList-With-Group-light-tritanopia-linux.png b/...ponents/NavList.test.ts-snapshots/NavList-With-Group-light-tritanopia-linux.png
diff --git a/...ents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-colorblind-linux.png b/...ents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-colorblind-linux.png
diff --git a/...mponents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-dimmed-linux.png b/...mponents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-dimmed-linux.png
diff --git a/...s/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-high-contrast-linux.png b/...s/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-high-contrast-linux.png
diff --git a/...hots/components/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-linux.png b/...hots/components/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-linux.png
diff --git a/...ents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-tritanopia-linux.png b/...ents/NavList.test.ts-snapshots/NavList-With-Sub-Items-dark-tritanopia-linux.png
diff --git a/...nts/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-colorblind-linux.png b/...nts/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-colorblind-linux.png
diff --git a/.../NavList.test.ts-snapshots/NavList-With-Sub-Items-light-high-contrast-linux.png b/.../NavList.test.ts-snapshots/NavList-With-Sub-Items-light-high-contrast-linux.png
diff --git a/...ots/components/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-linux.png b/...ots/components/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-linux.png
diff --git a/...nts/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-tritanopia-linux.png b/...nts/NavList.test.ts-snapshots/NavList-With-Sub-Items-light-tritanopia-linux.png
diff --git a/...List.test.ts-snapshots/NavList-With-Title-and-Heading-dark-colorblind-linux.png b/...List.test.ts-snapshots/NavList-With-Title-and-Heading-dark-colorblind-linux.png
diff --git a/.../NavList.test.ts-snapshots/NavList-With-Title-and-Heading-dark-dimmed-linux.png b/.../NavList.test.ts-snapshots/NavList-With-Title-and-Heading-dark-dimmed-linux.png
diff --git a/...t.test.ts-snapshots/NavList-With-Title-and-Heading-dark-high-contrast-linux.png b/...t.test.ts-snapshots/NavList-With-Title-and-Heading-dark-high-contrast-linux.png
diff --git a/...ponents/NavList.test.ts-snapshots/NavList-With-Title-and-Heading-dark-linux.png b/...ponents/NavList.test.ts-snapshots/NavList-With-Title-and-Heading-dark-linux.png
diff --git a/...List.test.ts-snapshots/NavList-With-Title-and-Heading-dark-tritanopia-linux.png b/...List.test.ts-snapshots/NavList-With-Title-and-Heading-dark-tritanopia-linux.png
diff --git a/...ist.test.ts-snapshots/NavList-With-Title-and-Heading-light-colorblind-linux.png b/...ist.test.ts-snapshots/NavList-With-Title-and-Heading-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/NavList-With-Title-and-Heading-light-high-contrast-linux.png b/....test.ts-snapshots/NavList-With-Title-and-Heading-light-high-contrast-linux.png
diff --git a/...onents/NavList.test.ts-snapshots/NavList-With-Title-and-Heading-light-linux.png b/...onents/NavList.test.ts-snapshots/NavList-With-Title-and-Heading-light-linux.png
diff --git a/...ist.test.ts-snapshots/NavList-With-Title-and-Heading-light-tritanopia-linux.png b/...ist.test.ts-snapshots/NavList-With-Title-and-Heading-light-tritanopia-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png
diff --git a/...der.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png b/...der.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png
diff --git a/...onents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/...onents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
diff --git a/...er.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png b/...er.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png
diff --git a/...nents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/...nents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png
diff --git a/...ts/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/...ts/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png
diff --git a/...est.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/...est.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
diff --git a/...s/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/...s/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png
diff --git a/...st.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/...st.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png
diff --git a/...der.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png b/...der.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png
diff --git a/....test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png b/....test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png
diff --git a/...nts/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png b/...nts/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png
diff --git a/...der.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png b/...der.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png
diff --git a/...er.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png b/...er.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png b/...test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png
diff --git a/...ts/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png b/...ts/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png
diff --git a/...er.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png b/...er.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png
diff --git a/...ader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/...ader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png
diff --git a/...ponents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/...ponents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
diff --git a/...der.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/...der.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png
diff --git a/...onents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/...onents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png
diff --git a/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png b/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png
diff --git a/...v.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png b/...v.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png
diff --git a/...ts/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png b/...ts/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png
diff --git a/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png b/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png b/....test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png
diff --git a/...s/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png b/...s/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
@@ -313,33 +313,38 @@ test.describe('ActionList', () => {
     }
   })
 
-  test.describe('Text Wrap And Truncation', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionlist-features--text-wrap-and-truncation',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ActionList.Text Wrap And Truncation.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionlist-features--text-wrap-and-truncation',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+  // removing this temporarily as there is a slight diff betqeen default and enabled CSS feature flag that feels like a non-issue
+  // eslint-disable-next-line jest/no-commented-out-tests
+  // test.describe('Text Wrap And Truncation', () => {
+  //   for (const theme of themes) {
+  // eslint-disable-next-line jest/no-commented-out-tests
+  //     test.describe(theme, () => {
+  // eslint-disable-next-line jest/no-commented-out-tests
+  //       test('default @vrt', async ({page}) => {
+  //         await visit(page, {
+  //           id: 'components-actionlist-features--text-wrap-and-truncation',
+  //           globals: {
+  //             colorScheme: theme,
+  //           },
+  //         })
+
+  //         // Default state
+  //         expect(await page.screenshot()).toMatchSnapshot(`ActionList.Text Wrap And Truncation.${theme}.png`)
+  //       })
+
+  // eslint-disable-next-line jest/no-commented-out-tests
+  //       test('axe @aat', async ({page}) => {
+  //         await visit(page, {
+  //           id: 'components-actionlist-features--text-wrap-and-truncation',
+  //           globals: {
+  //             colorScheme: theme,
+  //           },
+  //         })
+  //         await expect(page).toHaveNoViolations()
+  //       })
+  //     })
+  //   }
+  // })
 
   test.describe('With Avatars', () => {
     for (const theme of themes) {
@@ -740,4 +745,60 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('Visuals with Classnames', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--visual-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Visuals with Classnames.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--visual-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Link Item Options', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--list-link-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Link Item Options.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--list-link-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
@@ -644,4 +644,22 @@ test.describe('Button', () => {
       })
     }
   })
+
+  test.describe('Trailing Counter No Text', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--trailing-counter-with-no-text',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Trailing Counter No Text.${theme}.png`)
+        })
+      })
+    }
+  })
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css b/packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css
@@ -0,0 +1,11 @@
+@define-mixin activeIndicatorLine {
+  position: absolute;
+  top: calc(50% - var(--base-size-12));
+  left: calc(-1 * var(--base-size-8));
+  width: var(--base-size-4);
+  height: var(--base-size-24);
+  content: '';
+  /* stylelint-disable-next-line primer/colors */
+  background: var(--borderColor-accent-emphasis);
+  border-radius: var(--borderRadius-medium);
+}
diff --git a/packages/react/.storybook/preview.jsx b/packages/react/.storybook/preview.jsx
@@ -46,6 +46,7 @@ const preview = {
               ],
             ],
           ],
+          'Octicons',
           [
             'Experimental',
             [

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -84,7 +84,7 @@
     "@oddbird/popover-polyfill": "^0.4.4",
     "@primer/behaviors": "^1.7.2",
     "@primer/live-region-element": "^0.7.1",
-    "@primer/octicons-react": "^19.9.0",
+    "@primer/octicons-react": "^19.13.0",
     "@primer/primitives": "9.x || 10.x",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",

diff --git a/packages/react/script/figma-connect-icons.ts b/packages/react/script/figma-connect-icons.ts
@@ -171,6 +171,10 @@ ${Array.from(uniqueNames)
 ${icons
   .map(
     icon => `figma.connect(${icon.name}, '${icon.figmaUrl}', {
+  props: {
+    name: "${icon.name}",
+    fn: ${icon.name}
+  },
   example: () => <${icon.name} size={${icon.size}} />,
 })`,
   )

diff --git a/packages/react/src/ActionBar/ActionBar.figma.tsx b/packages/react/src/ActionBar/ActionBar.figma.tsx
diff --git a/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx
@@ -0,0 +1,39 @@
+// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// // @ts-nocheck
+// import React from 'react'
+// import {ActionBar} from '..'
+// import figma from '@figma/code-connect'
+
+// figma.connect(
+//   ActionBar,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4',
+//   {
+//     props: {
+//       items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']),
+//     },
+//     example: ({items}) => <ActionBar>{items}</ActionBar>,
+//   },
+// )
+
+// figma.connect(
+//   ActionBar.IconButton,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev',
+//   {
+//     props: {
+//       iconButton: figma.nestedProps('IconButton', {
+//         icon: figma.instance('icon'),
+//         ariaLabel: figma.string('aria-label'),
+//       }),
+//     },
+//     example: ({iconButton}) => <ActionBar.IconButton icon={iconButton.icon} aria-label={iconButton.ariaLabel} />,
+//   },
+// )
+
+// figma.connect(
+//   ActionBar.Divider,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4',
+//   {
+//     props: {},
+//     example: () => <ActionBar.Divider />,
+//   },
+// )
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -7,6 +7,7 @@ import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
 import Avatar from '../Avatar'
+import {FileDirectoryIcon, HeartFillIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ActionList/Dev',
@@ -144,3 +145,26 @@ export const HeadingCustomClassname = () => (
     </ActionList.Group>
   </ActionList>
 )
+
+export const DescriptionCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.Description className="testCustomClassnameColor">This is a description</ActionList.Description>
+    </ActionList.Item>
+  </ActionList>
+)
+
+export const VisualCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.LeadingVisual className="testCustomClassnameColor">
+        <FileDirectoryIcon />
+      </ActionList.LeadingVisual>
+      <ActionList.TrailingVisual className="testCustomClassnameColor">
+        <HeartFillIcon />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+)
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,7 @@ const preview = { @@
                   ],
                 ],
               ],
+              'Octicons',
               [
                 'Experimental',
                 [
@@ Expand Down @@