Merge branch 'next-major' into mp/deprecate-old-filter-components

primer · Jun 19, 2023 · aa55f25 · aa55f25
2 parents 9de8956 + 98ea43f
commit aa55f25
Show file tree

Hide file tree

Showing 133 changed files with 235 additions and 2,019 deletions.
diff --git a/.changeset/flat-onions-sort.md b/.changeset/flat-onions-sort.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+- Changes `leadingIcon` and `trailingIcon` to `leadingVisual` and `trailingVisual`
+- Removes `Button.Counter` as a child component, replacing it with a `count` prop. This change allows us to use the `trailingVisual` slot for counters.
+- Removes the `outline` button variant as we wish to only support `invisible` buttons.
diff --git a/.changeset/great-spies-deliver.md b/.changeset/great-spies-deliver.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated `extralarge` variant from `Token` and `TextInputWithToken` component
diff --git a/.changeset/nasty-bottles-draw.md b/.changeset/nasty-bottles-draw.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update minimum version for react and react-dom to v18
diff --git a/.changeset/popular-rivers-warn.md b/.changeset/popular-rivers-warn.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `activeClassName` for Breadcrumb, SubNav, TabNav, UnderlineNav
diff --git a/.changeset/weak-jokes-chew.md b/.changeset/weak-jokes-chew.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -54,10 +54,6 @@ jobs:
         run: npm run lint:md
 
   test:
-    strategy:
-      fail-fast: false
-      matrix:
-        react: [17, 18]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -69,30 +65,16 @@ jobs:
           node-version: 18
           cache: 'npm'
 
-      - name: Set React version
-        run: node script/set-react-version.js ${{ matrix.react }}
-
-      - name: Install dependencies
-        if: ${{ matrix.react == 17 }}
-        run: npm install --legacy-peer-deps
-
       - name: Install dependencies
-        if: ${{ matrix.react == 18 }}
         run: npm ci
 
       - name: Build
         run: npm run build
 
       - name: Test
         run: npm run test -- --coverage
-        env:
-          REACT_VERSION_17: ${{ matrix.react == 17 }}
 
   type-check:
-    strategy:
-      fail-fast: false
-      matrix:
-        react: [17, 18]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -104,15 +86,7 @@ jobs:
           node-version: 18
           cache: 'npm'
 
-      - name: Set React version
-        run: node script/set-react-version.js ${{ matrix.react }}
-
-      - name: Install dependencies
-        if: ${{ matrix.react == 17 }}
-        run: npm install --legacy-peer-deps
-
       - name: Install dependencies
-        if: ${{ matrix.react != 17 }}
         run: npm ci
 
       - name: Type check

diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png
diff --git a/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png
diff --git a/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/...components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/...ots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png
diff --git a/...ponents/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/...ponents/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png
diff --git a/.../snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png b/.../snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/...components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/...omponents/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/...onents/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png
diff --git a/...snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png b/...snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/...omponents/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png b/...ts/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png b/...s/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
diff --git a/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png b/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png
diff --git a/...omponents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png b/...omponents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png
diff --git a/...ts/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png b/...ts/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png
diff --git a/...shots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png b/...shots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png
diff --git a/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png b/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png
diff --git a/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png b/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png
diff --git a/...s/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png b/...s/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png
diff --git a/...hots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png b/...hots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png
diff --git a/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png b/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png
diff --git a/...utton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png b/...utton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...tton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png b/...tton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png
diff --git a/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png b/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png
diff --git a/...geHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png b/...geHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png
diff --git a/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png b/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png
diff --git a/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png b/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -190,7 +190,7 @@ const Example = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button leadingIcon={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
+      <ActionMenu.Button leadingVisual={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single">
           {fieldTypes.map((type, index) => (

diff --git a/docs/content/Breadcrumbs.mdx b/docs/content/Breadcrumbs.mdx
@@ -18,11 +18,6 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 - Do not have a section-level navigation
 - May need the ability to quickly go back to the previous (parent) page
 
-To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 ## Examples
 
 ```jsx live

diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
@@ -31,14 +31,6 @@ The `danger` variant of `Button` is used to warn users about potentially destruc
 <Button variant="danger">Danger</Button>
 ```
 
-### Outline button
-
-The `outline` variant of `Button` is typically used as a secondary button
-
-```jsx live
-<Button variant="outline">Outline</Button>
-```
-
 ### Invisible button
 
 The `invisible` variant of `Button` indicates that the action is a low priority one.
@@ -68,11 +60,11 @@ It is recommended to use an octicon here.
 
 ```jsx live
 <>
-  <Button leadingIcon={SearchIcon}>Search</Button>
-  <Button trailingIcon={SearchIcon} sx={{mt: 2}}>
+  <Button leadingVisual={SearchIcon}>Search</Button>
+  <Button trailingVisual={SearchIcon} sx={{mt: 2}}>
     Search
   </Button>
-  <Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>
+  <Button leadingVisual={SearchIcon} trailingVisual={CheckIcon} sx={{mt: 2}}>
     Search
   </Button>
 </>
@@ -98,17 +90,12 @@ A separate component called `IconButton` is used if the action shows only an ico
 </>
 ```
 
-### Counter component
+### Button with counter
 
-A common use case for primer is a button with a counter component which shows the child count value.
-We provide `Button.Counter` as a composite component which requires you to provide a number as child.
-The counter will match the `variant` styles of the parent button.
+To show a count value as a trailing visual inside `Button`, pass a value to the `count` prop. The counter will match the `variant` styles of the parent button.
 
 ```jsx live
-<Button>
-  Watch
-  <Button.Counter>1</Button.Counter>
-</Button>
+<Button count="1">Watch</Button>
 ```
 
 ### Block button

diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
@@ -12,20 +12,18 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele
 
 ```javascript live noinline
 function getColorCircle(color) {
-  return function () {
-    return (
-      <Box
-        borderWidth="1px"
-        borderStyle="solid"
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-      />
-    )
-  }
+  return (
+    <Box
+      borderWidth="1px"
+      borderStyle="solid"
+      bg={color}
+      borderColor={color}
+      width={14}
+      height={14}
+      borderRadius={10}
+      margin="auto"
+    />
+  )
 }
 
 const items = [

diff --git a/docs/content/SubNav.mdx b/docs/content/SubNav.mdx
@@ -6,13 +6,6 @@ status: Alpha
 
 import data from '../../src/SubNav/SubNav.docs.json'
 
-Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
-
-To use SubNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`.
 
 ## Examples

diff --git a/docs/content/TabNav.mdx b/docs/content/TabNav.mdx
@@ -6,11 +6,6 @@ status: Alpha
 
 import data from '../../src/TabNav/TabNav.docs.json'
 
-To use TabNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`.
 
 ## Examples

diff --git a/docs/content/UnderlineNav.mdx b/docs/content/UnderlineNav.mdx
@@ -12,11 +12,6 @@ Use the UnderlineNav component to style navigation with a minimal underlined sel
 
 UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See [the draft UnderlineNav's docs](/drafts/UnderlineNav2) for more details.
 
-To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.
 
 ## Examples

diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
@@ -125,7 +125,7 @@ import {PageHeader} from '@primer/react/drafts'
     <PageHeader.Actions>
       <IconButton aria-label="Workflows" icon={WorkflowIcon} />
       <IconButton aria-label="Insights" icon={GraphIcon} />
-      <Button variant="primary" trailingIcon={TriangleDownIcon}>
+      <Button variant="primary" trailingVisual={TriangleDownIcon}>
         Add Item
       </Button>
       <IconButton aria-label="Settings" icon={GearIcon} />
@@ -212,7 +212,7 @@ import {PageHeader} from '@primer/react/drafts'
     <PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>
 
     <PageHeader.ContextAreaActions>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -241,7 +241,7 @@ import {PageHeader} from '@primer/react/drafts'
     </PageHeader.ContextBar>
 
     <PageHeader.ContextAreaActions>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -274,7 +274,7 @@ import {PageHeader} from '@primer/react/drafts'
     </PageHeader.ContextBar>
 
     <PageHeader.ContextAreaActions hidden={false}>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />

diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
@@ -275,40 +275,6 @@ test.describe('Button', () => {
     }
   })
 
-  test.describe('Outline', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Button.Outline.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
   test.describe('Primary', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts
@@ -241,40 +241,6 @@ test.describe('LinkButton', () => {
     }
   })
 
-  test.describe('Outline', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-linkbutton-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Outline.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-linkbutton-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
   test.describe('Primary', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

diff --git a/generated/components.json b/generated/components.json
@@ -884,6 +884,12 @@
           "type": "React.ReactNode",
           "description": "The content of the button."
         },
+        {
+          "name": "count",
+          "required": true,
+          "type": "number | string",
+          "description": "For counter buttons, the number to display."
+        },
         {
           "name": "variant",
           "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
@@ -922,24 +928,7 @@
       "passthrough": {
         "element": "button",
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
-      },
-      "subcomponents": [
-        {
-          "name": "Button.Counter",
-          "props": [
-            {
-              "name": "children",
-              "required": true,
-              "type": "number",
-              "description": "The counter value."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
+      }
     },
     "icon_button": {
       "id": "icon_button",