Merge branch 'next-major' into remove-pagelayout-pane-position-prop

primer · Jun 12, 2023 · 1bd8fbc · 1bd8fbc
2 parents 5c47222 + 98ea43f
commit 1bd8fbc
Show file tree

Hide file tree

Showing 99 changed files with 143 additions and 286 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/....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/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/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",

diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -30,7 +30,7 @@ export const GroupsAndDescriptions = () => {
 
   return (
     <ActionMenu open>
-      <ActionMenu.Button variant="default" trailingIcon={GearIcon}>
+      <ActionMenu.Button variant="default" trailingVisual={GearIcon}>
         Milestone
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
@@ -201,7 +201,7 @@ export const MixedSelection = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button leadingIcon={selectedOption ? selectedOption.icon : undefined}>
+      <ActionMenu.Button leadingVisual={selectedOption ? selectedOption.icon : undefined}>
         {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">

diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
@@ -11,23 +11,20 @@ export const InvisibleVariants = () => {
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
       <Button variant="invisible">Button</Button>
-      <Button variant="invisible" leadingIcon={SearchIcon}>
+      <Button variant="invisible" leadingVisual={SearchIcon}>
         Button
       </Button>
       <Button variant="invisible" trailingAction={TriangleDownIcon}>
         Button
       </Button>
-      <Button variant="primary">
+      <Button variant="primary" count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon}>
+      <Button variant="invisible" leadingVisual={EyeIcon} count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
+      <Button variant="invisible" leadingVisual={EyeIcon} trailingAction={TriangleDownIcon} count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
       <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" />
     </div>
@@ -67,7 +64,7 @@ export const TestSxProp = () => {
       >
         Pink
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
+      <Button leadingVisual={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
         Pink
       </Button>
       <Button
@@ -89,9 +86,8 @@ export const TestSxProp = () => {
       <Button size="small" block variant="invisible" sx={{width: 320}}>
         Overriden Block
       </Button>
-      <Button>
+      <Button sx={{fontSize: 32}} count={count}>
         Watch
-        <Button.Counter sx={{fontSize: 32}}>{count}</Button.Counter>
       </Button>
     </div>
   )

diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json
@@ -11,6 +11,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'",
@@ -49,22 +55,5 @@
   "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"
-        }
-      ]
-    }
-  ]
-}
+  }
+}