@primer/components 31.2.1-rc.7fa29a87 → 32.0.0-rc.7200a6a6

package/src/LabelGroup.tsx

@@ -1,10 +1,9 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const LabelGroup = styled.span<SystemCommonProps & SxProp>`
-  ${COMMON}
+const LabelGroup = styled.span<SxProp>`
   & * {
     margin-right: ${get('space.1')};
   }

package/src/Link.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import {system} from 'styled-system'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -8,9 +8,7 @@ type StyledLinkProps = {
   hoverColor?: string
   muted?: boolean
   underline?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
+} & SxProp
 
 const hoverColor = system({
   hoverColor: {
@@ -37,8 +35,6 @@ const Link = styled.a<StyledLinkProps>`
     border: 0;
     appearance: none;
   }
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 

package/src/Overlay.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 import React, {ReactElement, useEffect, useRef} from 'react'
-import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
-import {ComponentProps} from './utils/types'
 import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
+import {get} from './constants'
+import {AriaRole, Merge} from './utils/types'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'
@@ -16,7 +16,7 @@ type StyledOverlayProps = {
   maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
   visibility?: 'visible' | 'hidden'
   anchorSide?: AnchorSide
-}
+} & SxProp
 
 const heightMap = {
   xsmall: '192px',
@@ -52,7 +52,7 @@ function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y
   return {x: 0, y: 0}
 }
 
-const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp>`
+const StyledOverlay = styled.div<StyledOverlayProps>`
   background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;
@@ -77,22 +77,25 @@ const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp
   :focus {
     outline: none;
   }
-  ${COMMON};
   ${sx};
 `
-export type OverlayProps = {
+type BaseOverlayProps = {
   ignoreClickRefs?: React.RefObject<HTMLElement>[]
   initialFocusRef?: React.RefObject<HTMLElement>
   returnFocusRef: React.RefObject<HTMLElement>
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
   visibility?: 'visible' | 'hidden'
-  [additionalKey: string]: unknown
-  top: number
-  left: number
+  'data-test-id'?: unknown
+  top?: number
+  left?: number
   portalContainerName?: string
   preventFocusOnOpen?: boolean
-} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
+  role?: AriaRole
+  children?: React.ReactNode
+}
+
+export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
@@ -180,7 +183,6 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
             {
               top: `${top || 0}px`,
               left: `${left || 0}px`,
-              ...rest.style,
               '--styled-overlay-visibility': visibility
             } as React.CSSProperties
           }

package/src/Pagehead.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const Pagehead = styled.div<SystemCommonProps & SxProp>`
+const Pagehead = styled.div<SxProp>`
   position: relative;
   padding-top: ${get('space.4')};
   padding-bottom: ${get('space.4')};
   margin-bottom: ${get('space.4')};
   border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON};
   ${sx};
 `
 

package/src/Pagination/Pagination.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
-import {COMMON, get} from '../constants'
-import sx from '../sx'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
 import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
@@ -103,8 +103,6 @@ const Page = styled.a`
       );
     }
   }
-
-  ${COMMON};
 `
 
 type UsePaginationPagesParameters = {
@@ -148,7 +146,7 @@ function usePaginationPages({
   return children
 }
 
-const PaginationContainer = styled.nav`
+const PaginationContainer = styled.nav<SxProp>`
   margin-top: 20px;
   margin-bottom: 15px;
   text-align: center;

package/src/Popover.tsx

@@ -1,7 +1,6 @@
 import classnames from 'classnames'
 import styled from 'styled-components'
-import Box from './Box'
-import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -23,10 +22,7 @@ type StyledPopoverProps = {
   caret?: CaretPosition
   relative?: boolean
   open?: boolean
-} & SystemCommonProps &
-  SystemLayoutProps &
-  SystemPositionProps &
-  SxProp
+} & SxProp
 
 const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
   return {
@@ -36,14 +32,10 @@ const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
   position: ${props => (props.relative ? 'relative' : 'absolute')};
   z-index: 100;
   display: ${props => (props.open ? 'block' : 'none')};
-
-  ${COMMON};
-  ${LAYOUT};
-  ${POSITION};
   ${sx};
 `
 
-const PopoverContent = styled(Box)`
+const PopoverContent = styled.div<SxProp>`
   border: 1px solid ${get('colors.border.default')};
   border-radius: ${get('radii.2')};
   position: relative;
@@ -53,9 +45,6 @@ const PopoverContent = styled(Box)`
   padding: ${get('space.4')};
   background-color: ${get('colors.canvas.overlay')};
 
-  ${COMMON};
-  ${LAYOUT};
-
   // Carets
   &::before,
   &::after {

package/src/SelectMenu/SelectMenu.tsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 import useKeyboardNav from './hooks/useKeyboardNav'
@@ -32,9 +31,8 @@ const wrapperStyles = `
   }
 `
 
-const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
+const StyledSelectMenu = styled.details<SxProp>`
   ${wrapperStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuDivider.tsx

@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -13,9 +13,8 @@ const dividerStyles = css`
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 `
 
-const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
+const SelectMenuDivider = styled.div<SxProp>`
   ${dividerStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -1,17 +1,16 @@
 import React, {forwardRef, useContext, useEffect, useRef} from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import TextInput, {TextInputProps} from '../TextInput'
 import {ComponentProps} from '../utils/types'
 import {MenuContext} from './SelectMenuContext'
 
-const StyledForm = styled.form<SystemCommonProps & SxProp>`
+const StyledForm = styled.form<SxProp>`
   padding: ${get('space.3')};
   margin: 0;
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
   background-color: ${get('colors.canvas.overlay')};
-  ${COMMON};
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding: ${get('space.2')};

package/src/SelectMenu/SelectMenuFooter.tsx

@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -16,9 +16,8 @@ const footerStyles = css`
   }
 `
 
-const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
+const SelectMenuFooter = styled.footer<SxProp>`
   ${footerStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -19,13 +19,11 @@ const SelectMenuTitle = styled.h3`
   }
 `
 
-const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
+const StyledHeader = styled.header<SxProp>`
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
   border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
-  ${COMMON}
-  ${TYPOGRAPHY}
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding-top: ${get('space.2')};

package/src/SelectMenu/SelectMenuItem.tsx

@@ -1,7 +1,7 @@
 import {CheckIcon} from '@primer/octicons-react'
 import React, {forwardRef, useContext, useRef} from 'react'
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import StyledOcticon from '../StyledOcticon'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
@@ -92,9 +92,8 @@ export const listItemStyles = css`
 
 const StyledItem = styled.a.attrs(() => ({
   role: 'menuitemcheckbox'
-}))<SystemCommonProps & SxProp>`
+}))<SxProp>`
   ${listItemStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuList.tsx

@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -30,9 +30,8 @@ const listStyles = css`
   }
 `
 
-const SelectMenuList = styled.div<SystemCommonProps & SxProp>`
+const SelectMenuList = styled.div<SxProp>`
   ${listStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuLoadingAnimation.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import Spinner from '../Spinner'
+import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
-const Animation = styled.div<SystemCommonProps>`
+const Animation = styled.div<SxProp>`
   padding: ${get('space.6')} ${get('space.4')};
   text-align: center;
   background-color: ${get('colors.canvas.overlay')};
-  ${COMMON}
+  ${sx}
 `
 
 export type SelectMenuLoadingAnimationProps = ComponentProps<typeof Animation>

package/src/SelectMenu/SelectMenuModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, {css, keyframes} from 'styled-components'
 import {width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -11,8 +11,7 @@ type StyledModalProps = {
 
 type StyledModalWrapperProps = {
   align?: 'left' | 'right'
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const animateModal = keyframes`
   0% {
@@ -92,7 +91,6 @@ const Modal = styled.div<StyledModalProps>`
 
 const ModalWrapper = styled.div<StyledModalWrapperProps>`
   ${modalWrapperStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuTab.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, {useContext, useEffect} from 'react'
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 import {MenuContext} from './SelectMenuContext'
@@ -43,9 +43,8 @@ const tabStyles = css`
   }
 `
 
-const StyledTab = styled.button<SystemCommonProps & SxProp>`
+const StyledTab = styled.button<SxProp>`
   ${tabStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuTabPanel.tsx

@@ -1,14 +1,13 @@
 import React, {useContext} from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 
-const TabPanelBase = styled.div<SystemCommonProps & SxProp>`
+const TabPanelBase = styled.div<SxProp>`
   border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  ${COMMON}
   ${sx};
 `
 

package/src/SelectMenu/SelectMenuTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
@@ -23,9 +23,8 @@ const tabWrapperStyles = css`
   }
 `
 
-const SelectMenuTabsBase = styled.div<SystemCommonProps & SxProp>`
+const SelectMenuTabsBase = styled.div<SxProp>`
   ${tabWrapperStyles}
-  ${COMMON}
   ${sx};
 `
 

package/src/SideNav.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-namespace
 import * as History from 'history'
 
-import {COMMON, get} from './constants'
+import {get} from './constants'
 import styled, {css} from 'styled-components'
 
 import Box from './Box'
@@ -9,37 +9,36 @@ import {ComponentProps} from './utils/types'
 import Link from './Link'
 import React from 'react'
 import classnames from 'classnames'
-import sx from './sx'
+import sx, {SxProp} from './sx'
 
 type SideNavBaseProps = {
   variant?: 'lightweight' | 'normal'
   bordered?: boolean
-} & ComponentProps<typeof Box>
+  className?: string
+  children?: React.ReactNode
+  'aria-label'?: string
+}
 
-function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
+function SideNavBase({variant, className, bordered, children, 'aria-label': ariaLabel}: SideNavBaseProps) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
   const newClassName = classnames(className, `variant-${variantClassName}`)
 
-  if (!bordered) {
-    props = {...props, borderWidth: 0}
-  }
-
   return (
     <Box
-      borderWidth="1px"
+      borderWidth={bordered ? '1px' : 0}
       borderStyle="solid"
       borderColor="border.default"
       borderRadius={2}
       as="nav"
       className={newClassName}
-      {...props}
+      aria-label={ariaLabel}
     >
       {children}
     </Box>
   )
 }
 
-const SideNav = styled(SideNavBase)`
+const SideNav = styled(SideNavBase)<SxProp>`
   background-color: ${get('colors.canvas.subtle')};
 
   ${props =>
@@ -53,7 +52,6 @@ const SideNav = styled(SideNavBase)`
       }
     `}
 
-  ${COMMON};
   ${sx};
 `
 type StyledSideNavLinkProps = {
@@ -85,7 +83,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   } else {
     return {}
   }
-})<StyledSideNavLinkProps>`
+})<StyledSideNavLinkProps & SxProp>`
   position: relative;
   display: block;
   ${props =>

package/src/StateLabel.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import StyledOcticon from './StyledOcticon'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
@@ -77,8 +77,7 @@ const sizeVariants = variant({
 type StyledStateLabelBaseProps = {
   variant?: 'small' | 'normal'
   status?: keyof typeof octiconMap
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   display: inline-flex;
@@ -90,7 +89,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   border-radius: ${get('radii.3')};
   ${colorVariants};
   ${sizeVariants};
-  ${COMMON};
   ${sx};
 `
 
@@ -101,7 +99,7 @@ function StateLabel({children, status, variant: variantProp, ...rest}: StateLabe
   return (
     <StateLabelBase {...rest} variant={variantProp} status={status}>
       {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[status] || QuestionIcon} />}
+      {status && <StyledOcticon {...octiconProps} icon={octiconMap[status] || QuestionIcon} sx={{mr: 1}} />}
       {children}
     </StateLabelBase>
   )

package/src/StyledOcticon.tsx

@@ -1,7 +1,6 @@
 import {IconProps} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -11,8 +10,7 @@ function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
   return <IconComponent {...rest} />
 }
 
-const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
-  ${COMMON}
+const StyledOcticon = styled(Octicon)<SxProp>`
   ${sx}
 `
 

package/src/SubNav.tsx

@@ -3,15 +3,14 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants'
-import Box, {BoxProps} from './Box'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'SubNav-item'
 const SELECTED_CLASS = 'selected'
 
-const SubNavBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+const SubNavBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
 
@@ -32,8 +31,6 @@ const SubNavBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
     align-self: center;
   }
 
-  ${COMMON};
-  ${FLEX};
   ${sx};
 `
 
@@ -54,18 +51,17 @@ function SubNav({actions, className, children, label, ...rest}: SubNavProps) {
   )
 }
 
-export type SubNavLinksProps = BoxProps
+export type SubNavLinksProps = SxProp
 
-function SubNavLinks(props: SubNavLinksProps) {
-  return <Box display="flex" {...props} />
-}
+const SubNavLinks = styled.div<SubNavLinksProps>`
+  display: flex;
+  ${sx};
+`
 
 type StyledSubNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemBorderProps
+} & SxProp
 
 const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -117,7 +113,6 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
     }
   }
 
-  ${COMMON};
   ${sx};
 `
 

package/src/TabNav.tsx

@@ -3,17 +3,16 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-const TabNavBase = styled.div<SystemCommonProps & SxProp>`
+const TabNavBase = styled.div<SxProp>`
   margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON}
   ${sx}
 `
 
@@ -36,9 +35,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
 type StyledTabNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
+} & SxProp
 
 const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -67,7 +64,6 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
     background-color: ${get('colors.canvas.default')};
   }
 
-  ${COMMON};
   ${sx};
 `