Merge pull request #1031 from primer/cb/ts-avatar-pair

Migrate AvatarPair to TypeScript
primer · Feb 9, 2021 · 0f0aa9c · 0f0aa9c · vercel · Feb 9, 2021
2 parents d757a81 + ef25d01
commit 0f0aa9c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/sharp-lobsters-march.md b/.changeset/sharp-lobsters-march.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `AvatarPair` to TypeScript
diff --git a/src/AvatarPair.js → src/AvatarPair.tsx b/src/AvatarPair.js → src/AvatarPair.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {Relative} from './Position'
+import {Relative, RelativeProps} from './Position'
 import Avatar from './Avatar'
 import theme from './theme'
 
@@ -11,8 +11,12 @@ const ChildAvatar = styled(Avatar)`
   bottom: -9%;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
 `
-const AvatarPair = ({children, ...rest}) => {
+
+export type AvatarPairProps = RelativeProps
+
+const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
+    if (!React.isValidElement(child)) return child
     return i === 0 ? React.cloneElement(child, {size: 40}) : <ChildAvatar bg="white" {...child.props} size={20} />
   })
   return (