From dc15763c733994ea9baa3475139b9bf3c2111e5b Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 28 Sep 2021 14:05:35 -0700
Subject: [PATCH] AvatarStack no longer accepts styled props (#1468)

* Removes styled system props from AvatarStack.

* fixup

* changeset and snapshotg

* docgen

* skip as in tests

* Update .changeset/selfish-deers-change.md

Co-authored-by: Cole Bemis <colebemis@github.com>

* manual prop docs for now

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 .changeset/selfish-deers-change.md |  5 +++++
 docs/content/AvatarStack.mdx       | 22 ++++++++--------------
 src/AvatarStack.tsx                | 14 ++++++--------
 src/__tests__/AvatarStack.tsx      |  6 +++++-
 4 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/selfish-deers-change.md

diff --git a/.changeset/selfish-deers-change.md b/.changeset/selfish-deers-change.md
new file mode 100644
index 00000000000..a25110d0439
--- /dev/null
+++ b/.changeset/selfish-deers-change.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+AvatarStack no longer accepts styled props or DOM props
diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx
index 1b1ee21728d..1d471f0f602 100644
--- a/docs/content/AvatarStack.mdx
+++ b/docs/content/AvatarStack.mdx
@@ -2,6 +2,9 @@
 title: AvatarStack
 ---
 
+import {Props} from '../src/props'
+import {AvatarStack} from '@primer/components'
+
 AvatarStack is used to display more than one Avatar in an inline stack.
 
 ### Default example
@@ -26,18 +29,9 @@ AvatarStack is used to display more than one Avatar in an inline stack.
 </AvatarStack>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-AvatarStack components get `COMMON` system props, AvatarStack.Item components do not get any system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
-## AvatarStack Component props
+## Props
 
-| Name       | Type    | Default | Description                       |
-| :--------- | :------ | :-----: | :-------------------------------- |
-| alignRight | Boolean |         | Creates right aligned AvatarStack |
+| Name       | Type              | Default | Description                          |
+| :--------- | :---------------- | :-----: | :----------------------------------- |
+| alignRight | Boolean           |         | Creates right aligned AvatarStack    |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component |
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index 70ee203bf6f..e97063f6f00 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -1,15 +1,13 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import {Box} from '.'
 import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
 
 type StyledAvatarStackWrapperProps = {
   count?: number
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
   display: flex;
@@ -125,7 +123,6 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     }
   }
 
-  ${COMMON}
   ${sx};
 `
 const transformChildren = (children: React.ReactNode) => {
@@ -140,9 +137,10 @@ const transformChildren = (children: React.ReactNode) => {
 
 export type AvatarStackProps = {
   alignRight?: boolean
-} & ComponentProps<typeof AvatarStackWrapper>
+  children: React.ReactNode
+} & SxProp
 
-const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
+const AvatarStack = ({children, alignRight, sx: sxProp}: AvatarStackProps) => {
   const count = React.Children.count(children)
   const wrapperClassNames = classnames({
     'pc-AvatarStack--two': count === 2,
@@ -150,7 +148,7 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
     'pc-AvatarStack--right': alignRight
   })
   return (
-    <AvatarStackWrapper count={count} className={wrapperClassNames} {...rest}>
+    <AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
       <Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
         {transformChildren(children)}
       </Box>
diff --git a/src/__tests__/AvatarStack.tsx b/src/__tests__/AvatarStack.tsx
index 460b7968e71..c3408303850 100644
--- a/src/__tests__/AvatarStack.tsx
+++ b/src/__tests__/AvatarStack.tsx
@@ -25,7 +25,11 @@ const rightAvatarComp = (
 )
 
 describe('Avatar', () => {
-  behavesAsComponent({Component: AvatarStack, toRender: () => avatarComp})
+  behavesAsComponent({
+    Component: AvatarStack,
+    toRender: () => avatarComp,
+    options: {skipAs: true}
+  })
 
   checkExports('AvatarStack', {
     default: AvatarStack