From d326d183771211ee8281a435af914c25d6ee6646 Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:01:23 -0800
Subject: [PATCH 1/5] update prop names, counter as prop

---
 docs/content/ActionMenu.mdx                   |  8 +++---
 docs/content/Button.mdx                       | 21 ++++++----------
 src/Button/Button.features.stories.tsx        | 18 ++++++-------
 src/Button/Button.stories.tsx                 |  8 +++---
 src/Button/ButtonBase.tsx                     | 25 +++++++++++++------
 src/Button/ButtonCounter.tsx                  | 17 -------------
 src/Button/LinkButton.features.stories.tsx    |  4 +--
 src/Button/LinkButton.stories.tsx             |  8 +++---
 src/Button/index.ts                           |  5 +---
 src/Button/types.ts                           |  4 +--
 src/PageHeader/PageHeader.stories.tsx         |  2 +-
 src/PageHeader/examples.stories.tsx           |  4 +--
 src/UnderlineNav2/styles.ts                   |  2 +-
 src/__tests__/Button.types.test.tsx           |  4 +--
 src/drafts/MarkdownEditor/_Footer.tsx         |  4 +--
 src/drafts/MarkdownEditor/_ViewSwitch.tsx     |  2 +-
 src/stories/ActionMenu/examples.stories.tsx   | 10 ++++----
 src/stories/ActionMenu/fixtures.stories.tsx   |  4 +--
 src/stories/Overlay.stories.tsx               |  2 +-
 src/stories/deprecated/ActionMenu.stories.tsx |  2 +-
 20 files changed, 68 insertions(+), 86 deletions(-)
 delete mode 100644 src/Button/ButtonCounter.tsx

diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
index 937a06a07d2..78654d5ac89 100644
--- a/docs/content/ActionMenu.mdx
+++ b/docs/content/ActionMenu.mdx
@@ -182,7 +182,7 @@ const fieldTypes = [
   {icon: NumberIcon, name: 'Number'},
   {icon: CalendarIcon, name: 'Date'},
   {icon: SingleSelectIcon, name: 'Single select'},
-  {icon: IterationsIcon, name: 'Iteration'}
+  {icon: IterationsIcon, name: 'Iteration'},
 ]
 
 const Example = () => {
@@ -191,7 +191,7 @@ const Example = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
+      <ActionMenu.Button aria-label="Select field type" leadingVisual={selectedType.icon}>
         {selectedType.name}
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
@@ -275,7 +275,7 @@ render(
         </ActionList.Item>
       </ActionList>
     </ActionMenu.Overlay>
-  </ActionMenu>
+  </ActionMenu>,
 )
 ```
 
@@ -368,7 +368,7 @@ render(
     stableApi: true,
     addressedApiFeedback: false,
     hasDesignGuidelines: true,
-    hasFigmaComponent: true
+    hasFigmaComponent: true,
   }}
 />
 
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index 75de1bd279f..549e6379137 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -66,11 +66,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>
 </>
@@ -96,17 +96,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
@@ -142,12 +137,12 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
   />
   <PropsTableRow name="block" type="boolean" description="Full width button fills the parent container" />
   <PropsTableRow
-    name="leadingIcon"
+    name="leadingVisual"
     type="Component"
     description="provide an octicon. It will be placed before the button text"
   />
   <PropsTableRow
-    name="trailingIcon"
+    name="trailingVisual"
     type="Component"
     description="provide an octicon. It will be placed after the button text"
   />
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index c3cacf1472d..c789a4eb72f 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -16,16 +16,15 @@ export const Invisible = () => <Button variant="invisible">Invisible</Button>
 
 export const Outline = () => <Button variant="outline">Outline</Button>
 
-export const LeadingVisual = () => <Button leadingIcon={HeartIcon}>Leading visual</Button>
+export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading visual</Button>
 
-export const TrailingVisual = () => <Button trailingIcon={EyeIcon}>Trailing visual</Button>
+export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
 
 export const TrailingCounter = () => {
   const [count, setCount] = useState(0)
   return (
-    <Button onClick={() => setCount(count + 1)}>
+    <Button onClick={() => setCount(count + 1)} count={count}>
       Watch
-      <Button.Counter>{count}</Button.Counter>
     </Button>
   )
 }
@@ -47,23 +46,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="invisible">
+      <Button variant="invisible" 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>
     </div>
   )
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index ca84096b269..1975469b573 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -35,8 +35,8 @@ export default {
         type: 'boolean',
       },
     },
-    leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
-    trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingAction: OcticonArgType([TriangleDownIcon]),
     trailingVisualCount: {
       control: {
@@ -50,8 +50,8 @@ export default {
     disabled: false,
     variant: 'default',
     alignContent: 'center',
-    trailingIcon: null,
-    leadingIcon: null,
+    trailingVisual: null,
+    leadingVisual: null,
     trailingAction: null,
     trailingVisualCount: undefined,
   },
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index f31fffa79e4..947fe7e6803 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -6,15 +6,17 @@ import {useTheme} from '../ThemeProvider'
 import {ButtonProps, StyledButton} from './types'
 import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
+import CounterLabel from '../CounterLabel'
 declare let __DEV__: boolean
 
 const defaultSxProp = {}
 const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
   ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     const {
-      leadingIcon: LeadingIcon,
-      trailingIcon: TrailingIcon,
+      leadingVisual: LeadingVisual,
+      trailingVisual: TrailingVisual,
       trailingAction: TrailingAction,
+      trailingVisualCount: trailingVisualCount,
       variant = 'default',
       size = 'medium',
       alignContent = 'center',
@@ -61,20 +63,29 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
         ref={innerRef}
         data-component={block ? 'block' : null}
         data-size={size === 'small' || size === 'large' ? size : undefined}
-        data-no-visuals={!LeadingIcon && !TrailingIcon && !TrailingAction ? true : undefined}
+        data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
       >
         <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
-          {LeadingIcon && (
+          {LeadingVisual && (
             <Box as="span" data-component="leadingVisual" sx={{...iconWrapStyles}}>
-              <LeadingIcon />
+              <LeadingVisual />
             </Box>
           )}
           {children && <span data-component="text">{children}</span>}
-          {TrailingIcon && (
+          {TrailingVisual && (
             <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
-              <TrailingIcon />
+              <TrailingVisual />
             </Box>
           )}
+          {trailingVisualCount !== undefined ? (
+            <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
+              <CounterLabel data-component="ButtonCounter">{trailingVisualCount}</CounterLabel>
+            </Box>
+          ) : TrailingVisual ? (
+            <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
+              <TrailingVisual />
+            </Box>
+          ) : null}
         </Box>
         {TrailingAction && (
           <Box as="span" data-component="trailingAction" sx={{...iconWrapStyles}}>
diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx
deleted file mode 100644
index bc386530d08..00000000000
--- a/src/Button/ButtonCounter.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import {SxProp} from '../sx'
-import CounterLabel from '../CounterLabel'
-
-export type CounterProps = {
-  children: number
-} & SxProp
-
-const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
-  return (
-    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
-      {children}
-    </CounterLabel>
-  )
-}
-
-export {Counter}
diff --git a/src/Button/LinkButton.features.stories.tsx b/src/Button/LinkButton.features.stories.tsx
index a6ef0c35987..f3e0e390ac4 100644
--- a/src/Button/LinkButton.features.stories.tsx
+++ b/src/Button/LinkButton.features.stories.tsx
@@ -37,13 +37,13 @@ export const Outline = () => (
 )
 
 export const LeadingVisual = () => (
-  <Button as="a" href="/" leadingIcon={HeartIcon}>
+  <Button as="a" href="/" leadingVisual={HeartIcon}>
     Leading visual
   </Button>
 )
 
 export const TrailingVisual = () => (
-  <Button as="a" href="/" trailingIcon={EyeIcon}>
+  <Button as="a" href="/" trailingVisual={EyeIcon}>
     Trailing visual
   </Button>
 )
diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx
index 5ca0dcab065..ee611880bf7 100644
--- a/src/Button/LinkButton.stories.tsx
+++ b/src/Button/LinkButton.stories.tsx
@@ -30,8 +30,8 @@ export default {
         type: 'boolean',
       },
     },
-    leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
-    trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingAction: OcticonArgType([ChevronRightIcon]),
     trailingVisualCount: {
       control: {
@@ -45,8 +45,8 @@ export default {
     size: 'medium',
     variant: 'default',
     alignContent: 'center',
-    trailingIcon: null,
-    leadingIcon: null,
+    trailingVisual: null,
+    leadingVisual: null,
     href: '/',
   },
 } as Meta<typeof Button>
diff --git a/src/Button/index.ts b/src/Button/index.ts
index d0519b22e70..85c1d2bb2bf 100644
--- a/src/Button/index.ts
+++ b/src/Button/index.ts
@@ -1,10 +1,7 @@
 import {ButtonComponent} from './Button'
-import {Counter} from './ButtonCounter'
 import {IconButton} from './IconButton'
 import {LinkButton} from './LinkButton'
 export type {ButtonProps, IconButtonProps} from './types'
 export {IconButton, LinkButton}
 
-export const Button = Object.assign(ButtonComponent, {
-  Counter,
-})
+export const Button = Object.assign(ButtonComponent)
diff --git a/src/Button/types.ts b/src/Button/types.ts
index f746de8b775..50f8d6a4f9d 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -49,11 +49,11 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index c781473185d..219321ecc9b 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -203,7 +203,7 @@ const Template: Story = args => (
         </PageHeader.ContextBar>
 
         <PageHeader.ContextAreaActions hidden={!args.hasContextAreaAction}>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
diff --git a/src/PageHeader/examples.stories.tsx b/src/PageHeader/examples.stories.tsx
index f84411de157..9fad6bd7c62 100644
--- a/src/PageHeader/examples.stories.tsx
+++ b/src/PageHeader/examples.stories.tsx
@@ -127,7 +127,7 @@ export const PullRequestPage = () => (
 
           <Hidden on={['narrow']}>
             <Button>Edit</Button>
-            <Button leadingIcon={CodeIcon}>Code</Button>
+            <Button leadingVisual={CodeIcon}>Code</Button>
           </Hidden>
         </PageHeader.Actions>
       </PageHeader.TitleArea>
@@ -182,7 +182,7 @@ export const FilesPage = () => (
       <PageHeader.ContextArea>
         <PageHeader.ParentLink>Files</PageHeader.ParentLink>
         <PageHeader.ContextAreaActions>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts
index cf39342086f..b26b8a52e3b 100644
--- a/src/UnderlineNav2/styles.ts
+++ b/src/UnderlineNav2/styles.ts
@@ -72,7 +72,7 @@ export const moreBtnStyles = {
   boxShadow: 'none',
   paddingY: 1,
   paddingX: 2,
-  '& > span[data-component="trailingIcon"]': {
+  '& > span[data-component="trailingVisual"]': {
     marginLeft: 0,
   },
 }
diff --git a/src/__tests__/Button.types.test.tsx b/src/__tests__/Button.types.test.tsx
index 5509e866d18..6229d249a10 100644
--- a/src/__tests__/Button.types.test.tsx
+++ b/src/__tests__/Button.types.test.tsx
@@ -10,8 +10,8 @@ export function ShouldAcceptKnownButtonPropsAndDomProps() {
   return (
     <Button
       ref={buttonEl}
-      leadingIcon={() => <></>}
-      trailingIcon={() => <></>}
+      leadingVisual={() => <></>}
+      trailingVisual={() => <></>}
       size="medium"
       variant="primary"
       disabled
diff --git a/src/drafts/MarkdownEditor/_Footer.tsx b/src/drafts/MarkdownEditor/_Footer.tsx
index 077b418598f..8b94cc5a295 100644
--- a/src/drafts/MarkdownEditor/_Footer.tsx
+++ b/src/drafts/MarkdownEditor/_Footer.tsx
@@ -64,7 +64,7 @@ const FileUploadButton = memo(({fileDraggedOver, ...props}: Partial<ButtonProps>
   return (
     <Button
       variant="invisible"
-      leadingIcon={ImageIcon}
+      leadingVisual={ImageIcon}
       size="small"
       sx={{color: 'fg.default', fontWeight: fileDraggedOver ? 'bold' : 'normal', px: 2}}
       onMouseDown={(e: React.MouseEvent) => {
@@ -88,7 +88,7 @@ const MarkdownSupportedHint = memo(() => {
 
   return (
     <LinkButton
-      leadingIcon={MarkdownIcon}
+      leadingVisual={MarkdownIcon}
       variant="invisible"
       size="small"
       sx={{color: 'inherit', fontWeight: 'normal', px: 2}}
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index 34c4f757a63..9cc5db365a8 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -47,7 +47,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
       {condensed ? (
         <IconButton {...sharedProps} disabled={disabled} icon={icon} label={label} />
       ) : (
-        <Button {...sharedProps} leadingIcon={icon} disabled={disabled}>
+        <Button {...sharedProps} leadingVisual={icon} disabled={disabled}>
           {label}
         </Button>
       )}
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 975e7e13a27..c1b2596a615 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -89,7 +89,7 @@ export function SingleSelection(): JSX.Element {
       <p>This pattern has a single section with the selected value shown in the button</p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
+        <ActionMenu.Button aria-label="Field type" leadingVisual={selectedType.icon} alignContent="start">
           {selectedType.name}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -122,7 +122,7 @@ export function SingleSelectionWithPlaceholder(): JSX.Element {
       <p>This pattern has a placeholder in menu button when no value is selected yet</p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
+        <ActionMenu.Button aria-label="Field type" leadingVisual={selectedType.icon} alignContent="start">
           {selectedType.name || 'Pick a field type'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -158,7 +158,7 @@ export function GroupsAndDescription(): JSX.Element {
             aria-label="Milestone"
             aria-describedby="selected-milestone"
             variant="invisible"
-            trailingIcon={GearIcon}
+            trailingVisual={GearIcon}
           >
             Milestone
           </ActionMenu.Button>
@@ -243,7 +243,7 @@ export function MultipleSelection(): JSX.Element {
 
       <Box sx={{width: 200}}>
         <ActionMenu>
-          <ActionMenu.Button variant="invisible" trailingIcon={GearIcon}>
+          <ActionMenu.Button variant="invisible" trailingVisual={GearIcon}>
             Assignees
           </ActionMenu.Button>
           <ActionMenu.Overlay>
@@ -294,7 +294,7 @@ export function MixedSelection(): JSX.Element {
       </p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Group by" leadingIcon={selectedOption && selectedOption.icon}>
+        <ActionMenu.Button aria-label="Group by" leadingVisual={selectedOption && selectedOption.icon}>
           {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index b0bf0b445cc..70701010381 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -64,7 +64,7 @@ export function ActionsStory(): JSX.Element {
       <h1>Actions</h1>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Open Actions Menu" trailingIcon={null}>
+        <ActionMenu.Button aria-label="Open Actions Menu" trailingVisual={null}>
           <ServerIcon />
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -548,7 +548,7 @@ export function MemexAddColumn(): JSX.Element {
           <TextInput defaultValue="Estimate" aria-label="Field Name" sx={{mb: 2}} />
         </FormControl>
         <ActionMenu>
-          <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
+          <ActionMenu.Button aria-label="Field type" leadingVisual={selectedType.icon} alignContent="start">
             {selectedType.name}
           </ActionMenu.Button>
           <ActionMenu.Overlay width="medium">
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
index d26b57ab871..fac71ecdd70 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -306,7 +306,7 @@ export const NestedOverlays = () => {
               variant="invisible"
               ref={secondaryButtonRef}
               sx={{px: 2, mx: 2, display: 'flex'}}
-              leadingIcon={PlusIcon}
+              leadingVisual={PlusIcon}
               onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}
             >
               Create list
diff --git a/src/stories/deprecated/ActionMenu.stories.tsx b/src/stories/deprecated/ActionMenu.stories.tsx
index c269dd642e8..ed4b2b98343 100644
--- a/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/src/stories/deprecated/ActionMenu.stories.tsx
@@ -196,7 +196,7 @@ export function ComplexListStory(): JSX.Element {
               groupId: '1',
               renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
               trailingText: '⌘S', // backward compatible
-              trailingIcon: ArrowRightIcon, // backward compatible
+              trailingVisual: ArrowRightIcon, // backward compatible
             },
             {
               leadingVisual: NoteIcon,

From 660374662b712b2a15284aa2cbb3ffd02220efb2 Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:29:11 -0800
Subject: [PATCH 2/5] remove outline variant

---
 docs/content/Button.mdx                    |  8 ----
 src/Button/Button.features.stories.tsx     |  2 -
 src/Button/LinkButton.features.stories.tsx |  6 ---
 src/Button/styles.ts                       | 43 ----------------------
 src/Button/types.ts                        |  2 +-
 5 files changed, 1 insertion(+), 60 deletions(-)

diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index 549e6379137..d8284b7623d 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -29,14 +29,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.
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index c789a4eb72f..532d166161f 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -14,8 +14,6 @@ export const Danger = () => <Button variant="danger">Danger</Button>
 
 export const Invisible = () => <Button variant="invisible">Invisible</Button>
 
-export const Outline = () => <Button variant="outline">Outline</Button>
-
 export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading visual</Button>
 
 export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
diff --git a/src/Button/LinkButton.features.stories.tsx b/src/Button/LinkButton.features.stories.tsx
index f3e0e390ac4..e01f73112a4 100644
--- a/src/Button/LinkButton.features.stories.tsx
+++ b/src/Button/LinkButton.features.stories.tsx
@@ -30,12 +30,6 @@ export const Invisible = () => (
   </Button>
 )
 
-export const Outline = () => (
-  <Button as="a" href="/" variant="outline">
-    Invisible
-  </Button>
-)
-
 export const LeadingVisual = () => (
   <Button as="a" href="/" leadingVisual={HeartIcon}>
     Leading visual
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 55f82740a3c..42e9b32a331 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -131,49 +131,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.text',
       },
     },
-    outline: {
-      color: 'btn.outline.text',
-      boxShadow: `${theme?.shadows.btn.shadow}`,
-      borderColor: 'btn.border',
-      backgroundColor: 'btn.bg',
-
-      '&:hover:not([disabled])': {
-        color: 'btn.outline.hoverText',
-        backgroundColor: 'btn.outline.hoverBg',
-        borderColor: 'btn.outline.hoverBorder',
-        boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
-        '[data-component=ButtonCounter]': {
-          backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'inherit',
-        },
-      },
-      '&:active:not([disabled])': {
-        color: 'btn.outline.selectedText',
-        backgroundColor: 'btn.outline.selectedBg',
-        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
-        borderColor: 'btn.outline.selectedBorder',
-      },
-
-      '&:disabled': {
-        color: 'btn.outline.disabledText',
-        backgroundColor: 'btn.outline.disabledBg',
-        borderColor: 'btn.border',
-        '[data-component=ButtonCounter]': {
-          backgroundColor: 'btn.outline.disabledCounterBg',
-          color: 'inherit',
-        },
-      },
-      '[data-component=ButtonCounter]': {
-        backgroundColor: 'btn.outline.counterBg',
-        color: 'btn.outline.text',
-      },
-      '&[aria-expanded=true]': {
-        color: 'btn.outline.selectedText',
-        backgroundColor: 'btn.outline.selectedBg',
-        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
-        borderColor: 'btn.outline.selectedBorder',
-      },
-    },
   }
   return style[variant]
 }
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 50f8d6a4f9d..61406888446 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -9,7 +9,7 @@ export const StyledButton = styled.button<SxProp>`
   ${sx};
 `
 
-export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger'
 
 export type Size = 'small' | 'medium' | 'large'
 

From c081858ad5407fa0de0840ddf70d024c3cd8fddc Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:31:22 -0800
Subject: [PATCH 3/5] Create cyan-needles-melt.md

---
 .changeset/cyan-needles-melt.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/cyan-needles-melt.md

diff --git a/.changeset/cyan-needles-melt.md b/.changeset/cyan-needles-melt.md
new file mode 100644
index 00000000000..50ba08cfec0
--- /dev/null
+++ b/.changeset/cyan-needles-melt.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.

From c53a94acb35774c168d8be9a04469ead90fc562b Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:36:15 -0800
Subject: [PATCH 4/5] fix counter

---
 src/Button/Button.features.stories.tsx | 8 ++++----
 src/Button/ButtonBase.tsx              | 4 +++-
 src/Button/styles.ts                   | 3 ---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index 532d166161f..36d3ee6bd1a 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -21,7 +21,7 @@ export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing vi
 export const TrailingCounter = () => {
   const [count, setCount] = useState(0)
   return (
-    <Button onClick={() => setCount(count + 1)} count={count}>
+    <Button onClick={() => setCount(count + 1)} trailingVisualCount={count}>
       Watch
     </Button>
   )
@@ -50,13 +50,13 @@ export const InvisibleVariants = () => {
       <Button variant="invisible" trailingAction={TriangleDownIcon}>
         Button
       </Button>
-      <Button variant="invisible" count={count}>
+      <Button variant="invisible" trailingVisualCount={count}>
         Button
       </Button>
-      <Button variant="invisible" leadingVisual={EyeIcon} count={count}>
+      <Button variant="invisible" leadingVisual={EyeIcon} trailingVisualCount={count}>
         Button
       </Button>
-      <Button variant="invisible" leadingVisual={EyeIcon} trailingAction={TriangleDownIcon} count={count}>
+      <Button variant="invisible" leadingVisual={EyeIcon} trailingAction={TriangleDownIcon} trailingVisualCount={count}>
         Button
       </Button>
     </div>
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 947fe7e6803..84243010490 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -63,7 +63,9 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
         ref={innerRef}
         data-component={block ? 'block' : null}
         data-size={size === 'small' || size === 'large' ? size : undefined}
-        data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
+        data-no-visuals={
+          !LeadingVisual && !TrailingVisual && !TrailingAction && !trailingVisualCount ? true : undefined
+        }
       >
         <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
           {LeadingVisual && (
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 42e9b32a331..0d43a3a3683 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -127,9 +127,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&[data-no-visuals]': {
         color: 'accent.fg',
       },
-      '&:has([data-component="ButtonCounter"])': {
-        color: 'btn.text',
-      },
     },
   }
   return style[variant]

From 674e54d14ef3bd092d3eb86020dc02edb7d7ed24 Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:53:55 -0800
Subject: [PATCH 5/5] snaps

---
 src/__tests__/__snapshots__/Button.test.tsx.snap    |  4 ----
 src/__tests__/__snapshots__/TextInput.test.tsx.snap | 12 ------------
 2 files changed, 16 deletions(-)

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index d81764ef5c2..814dd347e38 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1608,10 +1608,6 @@ exports[`Button styles invisible button appropriately 1`] = `
   color: accent.fg;
 }
 
-.c0:has([data-component="ButtonCounter"]) {
-  color: btn.text;
-}
-
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 4b72e6ebeb5..b73523e31ab 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1426,10 +1426,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: #0969da;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
 .c4[data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
@@ -2053,10 +2049,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   color: #0969da;
 }
 
-.c3:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
 .c3[data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
@@ -2441,10 +2433,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: #0969da;
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
 .c4[data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);