@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.c4c2c50a

package/src/Label.tsx

@@ -1,6 +1,6 @@
 import styled, {css} from 'styled-components'
 import {borderColor, BorderColorProps, variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -11,7 +11,6 @@ const outlineStyles = css`
   border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
   box-shadow: none;
   ${borderColor};
-  ${COMMON};
   background-color: transparent;
 `
 
@@ -47,27 +46,25 @@ const Label = styled.span<
     dropshadow?: boolean
     outline?: boolean
   } & BorderColorProps &
-    SystemCommonProps &
     SxProp
 >`
   display: inline-block;
   font-weight: ${get('fontWeights.semibold')};
   color: ${get('colors.fg.onEmphasis')};
   border-radius: ${get('radii.3')};
+  background-color: ${get('colors.neutral.emphasis')};
 
   &:hover {
     text-decoration: none;
   }
 
   ${sizeVariant}
-  ${COMMON}
   ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
   ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
   ${sx}
 `
 
 Label.defaultProps = {
-  bg: 'neutral.emphasis',
   variant: 'medium'
 }
 

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/NewButton/button.tsx

@@ -5,6 +5,8 @@ import sx, {merge, SxProp} from '../sx'
 import {useTheme, Theme} from '../ThemeProvider'
 import {VariantType, ButtonProps} from './types'
 
+const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
 const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
   const style = {
     default: {
@@ -130,7 +132,7 @@ const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
         boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
       },
 
-      '&:active': {
+      '&:active:not([disabled])': {
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
         boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
@@ -191,86 +193,88 @@ const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOn
 
 const ButtonBase = styled.button<SxProp>(sx)
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({children, ...props}, forwardedRef): JSX.Element => {
-  const {
-    icon: Icon,
-    leadingIcon: LeadingIcon,
-    trailingIcon: TrailingIcon,
-    variant = 'default',
-    size = 'medium',
-    sx: sxProp = {}
-  } = props
-  const iconOnly = !!Icon
-  const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
-  const {theme} = useTheme()
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({children, sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => {
+    const {
+      icon: Icon,
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      variant = 'default',
+      size = 'medium'
+    } = props
+    const iconOnly = !!Icon
+    const {theme} = useTheme()
 
-  const styles = {
-    borderRadius: '2',
-    border: '1px solid',
-    borderColor: theme?.colors.btn.border,
-    display: 'grid',
-    gridTemplateAreas: '"leadingIcon text trailingIcon"',
-    fontWeight: 'bold',
-    lineHeight: TEXT_ROW_HEIGHT,
-    whiteSpace: 'nowrap',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    appearance: 'none',
-    userSelect: 'none',
-    textDecoration: 'none',
-    textAlign: 'center',
-    '& > :not(:last-child)': {
-      mr: '2'
-    },
-    '&:focus': {
-      outline: 'none'
-    },
-    '&:disabled': {
-      cursor: 'default'
-    },
-    '&:disabled svg': {
-      opacity: '0.6'
-    },
-    '[data-component="leadingIcon"]': {
-      gridArea: 'leadingIcon'
-    },
-    '[data-component="text"]': {
-      gridArea: 'text'
-    },
-    '[data-component="trailingIcon"]': {
-      gridArea: 'trailingIcon'
+    const styles = {
+      borderRadius: '2',
+      border: '1px solid',
+      borderColor: theme?.colors.btn.border,
+      display: 'grid',
+      gridTemplateAreas: '"leadingIcon text trailingIcon"',
+      fontWeight: 'bold',
+      lineHeight: TEXT_ROW_HEIGHT,
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+      appearance: 'none',
+      userSelect: 'none',
+      textDecoration: 'none',
+      textAlign: 'center',
+      '& > :not(:last-child)': {
+        mr: '2'
+      },
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:disabled': {
+        cursor: 'default'
+      },
+      '&:disabled svg': {
+        opacity: '0.6'
+      },
+      '[data-component="leadingIcon"]': {
+        gridArea: 'leadingIcon'
+      },
+      '[data-component="text"]': {
+        gridArea: 'text'
+      },
+      '[data-component="trailingIcon"]': {
+        gridArea: 'trailingIcon'
+      }
     }
+    const iconWrapStyles = {
+      display: 'inline-block'
+    }
+    const sxStyles = merge.all([
+      styles,
+      getSizeStyles(size, variant, iconOnly),
+      getVariantStyles(variant, theme),
+      sxProp as SxProp
+    ])
+    return (
+      <ButtonBase sx={sxStyles} ref={forwardedRef} {...props}>
+        {LeadingIcon && (
+          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+            <LeadingIcon />
+          </Box>
+        )}
+        <span data-component="text" hidden={Icon ? true : false}>
+          {children}
+        </span>
+        {Icon && (
+          <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
+            <Icon />
+          </Box>
+        )}
+        {TrailingIcon && (
+          <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
+            <TrailingIcon />
+          </Box>
+        )}
+      </ButtonBase>
+    )
   }
-  const variableStyles = {...getSizeStyles(size, variant, iconOnly), ...getVariantStyles(variant, theme)}
-  const componentStyles = {...styles, ...variableStyles}
-  const iconWrapStyles = {
-    display: 'inline-block'
-  }
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Why wont it accept the sx prop?
-    <ButtonBase sx={merge(componentStyles, sxProp as SxProp)} ref={forwardedRef} {...props}>
-      {LeadingIcon && (
-        <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
-          <LeadingIcon />
-        </Box>
-      )}
-      <span data-component="text" hidden={Icon ? true : undefined}>
-        {children}
-      </span>
-      {Icon && (
-        <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
-          <Icon />
-        </Box>
-      )}
-      {TrailingIcon && (
-        <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
-          <TrailingIcon />
-        </Box>
-      )}
-    </ButtonBase>
-  )
-})
+)
 
 Button.displayName = 'Button'
 

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};
 `