@primer/components 31.0.1 → 31.0.2-rc.1e80de40

package/src/AvatarStack.tsx

@@ -0,0 +1,159 @@
+import classnames from 'classnames'
+import React from 'react'
+import styled from 'styled-components'
+import {get} from './constants'
+import {Box} from '.'
+import sx, {SxProp} from './sx'
+
+type StyledAvatarStackWrapperProps = {
+  count?: number
+} & SxProp
+
+const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
+  display: flex;
+  position: relative;
+  height: 20px;
+  min-width: ${props => (props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px')};
+
+  .pc-AvatarItem {
+    flex-shrink: 0;
+    height: 20px;
+    width: 20px;
+    box-shadow: 0 0 0 1px ${get('colors.canvas.default')};
+    margin-left: -11px;
+    position: relative;
+    overflow: hidden;
+    transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+      box-shadow 0.1s ease-in-out;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  &.pc-AvatarStack--two {
+    min-width: 30px;
+    .pc-AvatarItem {
+      &:nth-child(n + 3) {
+        display: none;
+      }
+    }
+  }
+
+  &.pc-AvatarStack--three-plus {
+    min-width: 38px;
+    .pc-AvatarItem {
+      &:nth-child(3) {
+        opacity: ${100 - 3 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(4) {
+        opacity: ${100 - 4 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(5) {
+        opacity: ${100 - 5 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(n + 4) {
+        display: block;
+      }
+      &:nth-child(n + 6) {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.pc-AvatarStack--right {
+    justify-content: flex-end;
+    .pc-AvatarItem {
+      margin-left: 0 !important;
+      margin-right: -11px;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .pc-AvatarStackBody {
+      flex-direction: row-reverse;
+
+      &:hover {
+        .pc-AvatarItem {
+          margin-right: ${get('space.1')}!important;
+          margin-left: 0 !important;
+
+          &:first-child {
+            margin-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.pc-AvatarStack--three-plus.pc-AvatarStack--right {
+    .pc-AvatarItem {
+      &:nth-child(3) {
+        margin-right: -17px;
+      }
+      &:nth-child(4) {
+        margin-right: -17px;
+      }
+      &:nth-child(5) {
+        margin-right: -17px;
+      }
+    }
+  }
+
+  .pc-AvatarStackBody:hover {
+    width: auto;
+
+    .pc-AvatarItem {
+      margin-left: ${get('space.1')};
+      opacity: 100%;
+      visibility: visible;
+      box-shadow: 0 0 0 4px ${get('colors.canvas.default')};
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  ${sx};
+`
+const transformChildren = (children: React.ReactNode) => {
+  return React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child
+    return React.cloneElement(child, {
+      className: classnames(child.props.className, 'pc-AvatarItem'),
+      sx: {zIndex: 10 - index, ...child.props.sx}
+    })
+  })
+}
+
+export type AvatarStackProps = {
+  alignRight?: boolean
+  children: React.ReactNode
+} & SxProp
+
+const AvatarStack = ({children, alignRight, sx: sxProp}: AvatarStackProps) => {
+  const count = React.Children.count(children)
+  const wrapperClassNames = classnames({
+    'pc-AvatarStack--two': count === 2,
+    'pc-AvatarStack--three-plus': count > 2,
+    'pc-AvatarStack--right': alignRight
+  })
+  return (
+    <AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
+      <Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
+        {transformChildren(children)}
+      </Box>
+    </AvatarStackWrapper>
+  )
+}
+
+export default AvatarStack

package/src/BaseStyles.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import styled, {createGlobalStyle} from 'styled-components'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {ComponentProps} from './utils/types'
+
+const GlobalStyle = createGlobalStyle`
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+  table { border-collapse: collapse; }
+  
+  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
+  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  button:focus:not(:focus-visible):not(.focus-visible),
+  summary:focus:not(:focus-visible):not(.focus-visible),
+  a:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+  }
+`
+
+const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
+  ${TYPOGRAPHY};
+  ${COMMON};
+`
+
+export type BaseStylesProps = ComponentProps<typeof Base>
+
+function BaseStyles(props: BaseStylesProps) {
+  const {children, ...rest} = props
+
+  // load polyfill for :focus-visible
+  require('focus-visible')
+
+  return (
+    <Base {...rest} data-portal-root>
+      <GlobalStyle />
+      {children}
+    </Base>
+  )
+}
+
+BaseStyles.defaultProps = {
+  color: 'fg.default',
+  fontFamily: 'normal',
+  lineHeight: 'default'
+}
+
+export default BaseStyles

package/src/BorderBox.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import Box, {BoxProps} from './Box'
+
+export type BorderBoxProps = BoxProps
+
+/**
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
+ */
+const BorderBox = styled(Box)``
+
+BorderBox.defaultProps = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'border.default',
+  borderRadius: 2
+}
+
+export default BorderBox

package/src/Box.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+import {
+  background,
+  BackgroundProps,
+  border,
+  BorderProps,
+  color,
+  ColorProps,
+  flexbox,
+  FlexboxProps,
+  grid,
+  GridProps,
+  layout,
+  LayoutProps,
+  position,
+  PositionProps,
+  shadow,
+  ShadowProps,
+  space,
+  SpaceProps,
+  typography,
+  TypographyProps
+} from 'styled-system'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+type StyledBoxProps = SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps &
+  SxProp
+
+const Box = styled.div<StyledBoxProps>(
+  space,
+  color,
+  typography,
+  layout,
+  flexbox,
+  grid,
+  background,
+  border,
+  position,
+  shadow,
+  sx
+)
+
+export type BoxProps = ComponentProps<typeof Box>
+export default Box

package/src/BranchName.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const BranchName = styled.a<SystemCommonProps & SxProp>`
+  display: inline-block;
+  padding: 2px 6px;
+  font-size: ${get('fontSizes.0')};
+  font-family: ${get('fonts.mono')};
+  color: ${get('colors.fg.muted')};
+  background-color: ${get('colors.accent.subtle')};
+  border-radius: ${get('radii.2')};
+  ${COMMON};
+  ${sx};
+`
+
+export type BranchNameProps = ComponentProps<typeof BranchName>
+export default BranchName

package/src/Breadcrumbs.tsx

@@ -0,0 +1,101 @@
+import classnames from 'classnames'
+// eslint-disable-next-line import/no-namespace
+import * as History from 'history'
+import React from 'react'
+import styled from 'styled-components'
+import Box from './Box'
+import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const SELECTED_CLASS = 'selected'
+
+const Wrapper = styled.li`
+  display: inline-block;
+  white-space: nowrap;
+  list-style: none;
+  &::after {
+    padding-right: 0.5em;
+    padding-left: 0.5em;
+    color: ${get('colors.fg.muted')};
+    font-size: ${get('fontSizes.1')};
+    content: '/';
+  }
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+`
+
+const BreadcrumbsBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+  display: flex;
+  justify-content: space-between;
+  ${COMMON};
+  ${FLEX};
+  ${sx};
+`
+
+export type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>
+
+function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbsProps>) {
+  const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
+  return (
+    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+      <Box as="ol" my={0} pl={0}>
+        {wrappedChildren}
+      </Box>
+    </BreadcrumbsBase>
+  )
+}
+
+type StyledBreadcrumbsItemProps = {
+  to?: History.LocationDescriptor
+  selected?: boolean
+} & SystemCommonProps &
+  SxProp
+
+const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
+  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  className: classnames(props.selected && SELECTED_CLASS, props.className),
+  'aria-current': props.selected ? 'page' : null
+}))<StyledBreadcrumbsItemProps>`
+  color: ${get('colors.accent.fg')};
+  display: inline-block;
+  font-size: ${get('fontSizes.1')};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.selected {
+    color: ${get('colors.fg.default')};
+    pointer-events: none;
+  }
+  ${COMMON}
+  ${sx};
+`
+
+Breadcrumbs.displayName = 'Breadcrumbs'
+
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item'
+
+export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>
+export default Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>
+
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>

package/src/Button/Button.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+
+const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+  color: ${get('colors.btn.text')};
+  background-color: ${get('colors.btn.bg')};
+  border: 1px solid ${get('colors.btn.border')};
+  box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}};
+
+  &:hover {
+    background-color: ${get('colors.btn.hoverBg')};
+    border-color: ${get('colors.btn.hoverBorder')};
+  }
+
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: ${get('colors.btn.focusBorder')};
+    box-shadow: ${get('shadows.btn.focusShadow')};
+  }
+
+  &:active {
+    background-color: ${get('colors.btn.selectedBg')};
+    box-shadow: ${get('shadows.btn.shadowActive')};
+  }
+
+  &:disabled {
+    color: ${get('colors.primer.fg.disabled')};
+    background-color: ${get('colors.btn.bg')};
+    border-color: ${get('colors.btn.border')};
+  }
+
+  ${buttonSystemProps};
+  ${sx};
+`
+
+export type ButtonProps = ComponentProps<typeof Button>
+export default Button

package/src/Button/ButtonBase.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
+import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import {ComponentProps} from '../utils/types'
+import buttonBaseStyles from './ButtonStyles'
+
+export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
+export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
+
+const variants = variant({
+  variants: {
+    small: {
+      p: '4px 12px',
+      fontSize: 0
+    },
+    medium: {
+      fontSize: 1
+    },
+    large: {
+      fontSize: 2,
+      p: '10px 20px'
+    }
+  }
+})
+
+type StyledButtonBaseProps = {
+  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
+  variant?: 'small' | 'medium' | 'large'
+} & FontSizeProps
+
+const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
+  onClick: disabled ? undefined : onClick
+}))<StyledButtonBaseProps>`
+  ${buttonBaseStyles}
+  ${variants}
+`
+
+ButtonBase.defaultProps = {
+  variant: 'medium'
+}
+
+export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
+export default ButtonBase

package/src/Button/ButtonClose.tsx

@@ -0,0 +1,40 @@
+import {XIcon} from '@primer/octicons-react'
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
+
+const StyledButton = styled.button<StyledButtonProps>`
+  border: none;
+  padding: 0;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  border-radius: ${get('radii.2')};
+  color: ${get('colors.fg.muted')};
+
+  &:focus {
+    box-shadow: ${get('shadows.btn.focusShadow')};
+  }
+
+  &:hover {
+    color: ${get('colors.accent.fg')};
+  }
+  ${COMMON};
+  ${LAYOUT};
+  ${sx};
+`
+
+const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>((props, ref) => {
+  return (
+    <StyledButton ref={ref} aria-label="Close" {...props}>
+      <XIcon />
+    </StyledButton>
+  )
+})
+
+export type ButtonCloseProps = ComponentProps<typeof ButtonClose>
+export default ButtonClose

package/src/Button/ButtonDanger.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+
+const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+  color: ${get('colors.btn.danger.text')};
+  border: 1px solid ${get('colors.btn.border')};
+  background-color: ${get('colors.btn.bg')};
+  box-shadow: ${get('shadows.btn.shadow')};
+
+  &:hover {
+    color: ${get('colors.btn.danger.hoverText')};
+    background-color: ${get('colors.btn.danger.hoverBg')};
+    border-color: ${get('colors.btn.danger.hoverBorder')};
+    box-shadow: ${get('shadows.btn.danger.hoverShadow')};
+  }
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: ${get('colors.btn.danger.focusBorder')};
+    box-shadow: ${get('shadows.btn.danger.focusShadow')};
+  }
+
+  &:active {
+    color: ${get('colors.btn.danger.selectedText')};
+    background-color: ${get('colors.btn.danger.selectedBg')};
+    box-shadow: ${get('shadows.btn.danger.selectedShadow')};
+    border-color: ${get('colors.btn.danger.selectedBorder')};
+  }
+
+  &:disabled {
+    color: ${get('colors.btn.danger.disabledText')};
+    background-color: ${get('colors.btn.danger.disabledBg')};
+    border-color: ${get('colors.btn.danger.disabledBorder')};
+  }
+
+  ${buttonSystemProps};
+  ${sx};
+`
+
+export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>
+export default ButtonDanger

package/src/Button/ButtonGroup.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+import Box from '../Box'
+import {get} from '../constants'
+import sx from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const ButtonGroup = styled(Box)`
+  vertical-align: middle;
+
+  && > * {
+    position: relative;
+    border-right-width: 0;
+    border-radius: 0;
+
+    :first-child {
+      border-top-left-radius: ${get('radii.2')};
+      border-bottom-left-radius: ${get('radii.2')};
+      margin-right: 0;
+    }
+
+    :not(:first-child) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    :last-child {
+      border-right-width: 1px;
+      border-top-right-radius: ${get('radii.2')};
+      border-bottom-right-radius: ${get('radii.2')};
+    }
+
+    :focus,
+    :active,
+    :hover {
+      border-right-width: 1px;
+      + * {
+        border-left-width: 0;
+      }
+    }
+
+    :focus,
+    :active {
+      z-index: 1;
+    }
+  }
+
+  ${sx};
+`
+
+ButtonGroup.defaultProps = {
+  display: 'inline-block'
+}
+
+export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
+export default ButtonGroup

package/src/Button/ButtonInvisible.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+
+const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+  color: ${get('colors.accent.fg')};
+  background-color: transparent;
+  border: 0;
+  border-radius: ${get('radii.2')};
+  box-shadow: none;
+
+  &:disabled {
+    color: ${get('colors.primer.fg.disabled')};
+  }
+  &:focus {
+    box-shadow: ${get('shadows.btn.focusShadow')};
+  }
+  &:hover {
+    background-color: ${get('colors.btn.hoverBg')};
+  }
+  &:active {
+    background-color: ${get('colors.btn.selectedBg')};
+  }
+
+  ${buttonSystemProps};
+  ${sx}
+`
+
+export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
+export default ButtonInvisible