@primer/components 31.2.1-rc.f73a0f8c → 32.0.0-next.0

package/src/Flash.tsx

@@ -1,77 +0,0 @@
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const variants = variant({
-  variants: {
-    default: {
-      color: 'fg.default',
-      backgroundColor: 'accent.subtle',
-      borderColor: 'accent.muted',
-      svg: {
-        color: 'accent.fg'
-      }
-    },
-    success: {
-      color: 'fg.default',
-      backgroundColor: 'success.subtle',
-      borderColor: 'success.muted',
-      svg: {
-        color: 'success.fg'
-      }
-    },
-    danger: {
-      color: 'fg.default',
-      backgroundColor: 'danger.subtle',
-      borderColor: 'danger.muted',
-      svg: {
-        color: 'danger.fg'
-      }
-    },
-    warning: {
-      color: 'fg.default',
-      backgroundColor: 'attention.subtle',
-      borderColor: 'attention.muted',
-      svg: {
-        color: 'attention.fg'
-      }
-    }
-  }
-})
-
-const Flash = styled.div<
-  {
-    variant?: 'default' | 'warning' | 'success' | 'danger'
-    full?: boolean
-  } & SystemCommonProps &
-    SxProp
->`
-  position: relative;
-  color: ${get('colors.fg.default')};
-  padding: ${get('space.3')};
-  border-style: solid;
-  border-width: ${props => (props.full ? '1px 0px' : '1px')};
-  border-radius: ${props => (props.full ? '0' : get('radii.2'))};
-  margin-top: ${props => (props.full ? '-1px' : '0')};
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  svg {
-    margin-right: ${get('space.2')};
-  }
-
-  ${COMMON};
-  ${variants};
-  ${sx};
-`
-
-Flash.defaultProps = {
-  variant: 'default'
-}
-
-export type FlashProps = ComponentProps<typeof Flash>
-export default Flash

package/src/Flex.tsx

@@ -1,15 +0,0 @@
-import styled from 'styled-components'
-import Box, {BoxProps} from './Box'
-
-export type FlexProps = BoxProps
-
-/**
- * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
- */
-const Flex = styled(Box)``
-
-Flex.defaultProps = {
-  display: 'flex'
-}
-
-export default Flex

package/src/FormGroup.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const FormGroup = styled.div<SystemCommonProps & SxProp>`
-  margin: ${get('space.3')} 0;
-  font-weight: ${get('fontWeights.normal')};
-  ${COMMON};
-  ${sx};
-`
-
-const FormGroupLabel = styled.label<SystemTypographyProps & SystemCommonProps & SxProp>`
-  display: block;
-  margin: 0 0 ${get('space.2')};
-  font-size: ${get('fontSizes.1')};
-  font-weight: ${get('fontWeights.bold')};
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-FormGroupLabel.displayName = 'FormGroup.Label'
-
-export type FormGroupProps = ComponentProps<typeof FormGroup>
-export type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>
-export default Object.assign(FormGroup, {Label: FormGroupLabel})

package/src/Grid.tsx

@@ -1,15 +0,0 @@
-import styled from 'styled-components'
-import Box, {BoxProps} from './Box'
-
-export type GridProps = BoxProps
-
-/**
- * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
- */
-const Grid = styled(Box)``
-
-Grid.defaultProps = {
-  display: 'grid'
-}
-
-export default Grid

package/src/Header.tsx

@@ -1,84 +0,0 @@
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-import styled, {css} from 'styled-components'
-import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
-type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
-type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps &
-  SystemBorderProps
-
-const Header = styled.div<StyledHeaderProps>`
-  z-index: 32;
-  display: flex;
-  padding: ${get('space.3')};
-  font-size: ${get('fontSizes.1')};
-  line-height: ${get('lineHeights.default')};
-  color: ${get('colors.header.text')};
-  background-color: ${get('colors.header.bg')};
-  align-items: center;
-  flex-wrap: nowrap;
-
-  ${COMMON}
-  ${BORDER}
-  ${sx};
-`
-const HeaderItem = styled.div<StyledHeaderItemProps>`
-  display: flex;
-  margin-right: ${get('space.3')};
-  align-self: stretch;
-  align-items: center;
-  flex-wrap: nowrap;
-
-  ${({full}) =>
-    full &&
-    css`
-      flex: auto;
-    `};
-
-  ${COMMON};
-  ${BORDER};
-  ${sx};
-`
-
-HeaderItem.displayName = 'Header.Item'
-
-const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
-  const isReactRouter = typeof to === 'string'
-  if (isReactRouter) {
-    // according to their docs, NavLink supports aria-current:
-    // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-    return {'aria-current': 'page'}
-  } else {
-    return {}
-  }
-})<StyledHeaderLinkProps>`
-  font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.header.logo')};
-  white-space: nowrap;
-  cursor: pointer;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: ${get('colors.header.text')};
-  }
-
-  ${COMMON};
-  ${BORDER};
-  ${TYPOGRAPHY};
-  ${sx};
-`
-
-HeaderLink.displayName = 'Header.Link'
-
-export type HeaderProps = ComponentProps<typeof Header>
-export type HeaderLinkProps = ComponentProps<typeof HeaderLink>
-export type HeaderItemProps = ComponentProps<typeof HeaderItem>
-export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem})

package/src/Heading.tsx

@@ -1,21 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import theme from './theme'
-import {ComponentProps} from './utils/types'
-
-const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
-  font-weight: ${get('fontWeights.bold')};
-  font-size: ${get('fontSizes.5')};
-  margin: 0;
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-Heading.defaultProps = {
-  theme
-}
-
-export type HeadingProps = ComponentProps<typeof Heading>
-export default Heading

package/src/Label.tsx

@@ -1,75 +0,0 @@
-import styled, {css} from 'styled-components'
-import {borderColor, BorderColorProps, variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const outlineStyles = css`
-  margin-top: -1px; // offsets the 1px border
-  margin-bottom: -1px; // offsets the 1px border
-  color: ${get('colors.fg.muted')};
-  border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
-  box-shadow: none;
-  ${borderColor};
-  ${COMMON};
-  background-color: transparent;
-`
-
-const sizeVariant = variant({
-  variants: {
-    small: {
-      fontSize: 0,
-      lineHeight: '16px',
-      padding: '0px 8px'
-    },
-    medium: {
-      fontSize: 0,
-      lineHeight: '20px',
-      padding: '0 8px'
-    },
-    large: {
-      fontSize: 0,
-      lineHeight: '24px',
-      padding: '0 12px'
-    },
-    // corresponds to StateLabel fontSize/lineHeight/padding
-    xl: {
-      fontSize: 1,
-      lineHeight: '16px',
-      padding: '8px 12px'
-    }
-  }
-})
-
-const Label = styled.span<
-  {
-    variant?: 'small' | 'medium' | 'large' | 'xl'
-    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')};
-
-  &: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'
-}
-
-export type LabelProps = ComponentProps<typeof Label>
-export default Label

package/src/LabelGroup.tsx

@@ -1,18 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const LabelGroup = styled.span<SystemCommonProps & SxProp>`
-  ${COMMON}
-  & * {
-    margin-right: ${get('space.1')};
-  }
-  & *:last-child {
-    margin-right: 0;
-  }
-  ${sx};
-`
-
-export type LabelGroupProps = ComponentProps<typeof LabelGroup>
-export default LabelGroup

package/src/Link.tsx

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-import {system} from 'styled-system'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledLinkProps = {
-  hoverColor?: string
-  muted?: boolean
-  underline?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
-
-const hoverColor = system({
-  hoverColor: {
-    property: 'color',
-    scale: 'colors'
-  }
-})
-
-const Link = styled.a<StyledLinkProps>`
-  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
-  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
-  &:hover {
-    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
-    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
-  }
-  &:is(button) {
-    display: inline-block;
-    padding: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: 0;
-    appearance: none;
-  }
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-export type LinkProps = ComponentProps<typeof Link>
-export default Link

package/src/NewButton/button-counter.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import {SxProp} from '../sx'
-import CounterLabel from '../CounterLabel'
-
-export type CounterProps = {
-  children: number
-} & SxProp
-
-export const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
-  return (
-    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
-      {children}
-    </CounterLabel>
-  )
-}

package/src/NewButton/button.tsx

@@ -1,279 +0,0 @@
-import React, {forwardRef} from 'react'
-import Box from '../Box'
-import styled from 'styled-components'
-import sx, {merge, SxProp} from '../sx'
-import {useTheme, Theme} from '../ThemeProvider'
-import {VariantType, ButtonProps} from './types'
-
-const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
-  const style = {
-    default: {
-      color: 'btn.text',
-      backgroundColor: 'btn.bg',
-      boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`,
-      '&:hover:not([disabled])': {
-        backgroundColor: 'btn.hoverBg'
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        boxShadow: `${theme?.shadows.btn.focusShadow}`
-      },
-      '&:active:not([disabled])': {
-        backgroundColor: 'btn.selectedBg',
-        boxShadow: `${theme?.shadows.btn.shadowActive}`
-      },
-      '&:disabled': {
-        color: 'primer.fg.disabled',
-        backgroundColor: 'btn.disabledBg'
-      }
-    },
-    primary: {
-      color: 'btn.primary.text',
-      backgroundColor: 'btn.primary.bg',
-      borderColor: 'border.subtle',
-      boxShadow: `${theme?.shadows.btn.primary.shadow}`,
-      '&:hover:not([disabled])': {
-        color: 'btn.primary.hoverText',
-        backgroundColor: 'btn.primary.hoverBg'
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        boxShadow: `${theme?.shadows.btn.primary.focusShadow}`
-      },
-      '&:active:not([disabled])': {
-        backgroundColor: 'btn.primary.selectedBg',
-        boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`
-      },
-      '&:disabled': {
-        color: 'btn.primary.disabledText',
-        backgroundColor: 'btn.primary.disabledBg'
-      },
-      '[data-component="ButtonCounter"]': {
-        backgroundColor: 'btn.primary.counterBg',
-        color: 'btn.primary.text'
-      }
-    },
-    danger: {
-      color: 'btn.danger.text',
-      backgroundColor: 'btn.bg',
-      boxShadow: `${theme?.shadows.btn.shadow}`,
-      '&:hover:not([disabled])': {
-        color: 'btn.danger.hoverText',
-        backgroundColor: 'btn.danger.hoverBg',
-        borderColor: 'btn.danger.hoverBorder',
-        boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.danger.hoverCounterBg',
-          color: 'btn.danger.hoverText'
-        }
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        borderColor: 'btn.danger.focusBorder',
-        boxShadow: `${theme?.shadows.btn.danger.focusShadow}`
-      },
-      '&:active:not([disabled])': {
-        color: 'btn.danger.selectedText',
-        backgroundColor: 'btn.danger.selectedBg',
-        boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`,
-        borderColor: 'btn.danger.selectedBorder'
-      },
-      '&:disabled': {
-        color: 'btn.danger.disabledText',
-        backgroundColor: 'btn.danger.disabledBg',
-        borderColor: 'btn.danger.disabledBorder',
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.danger.disabledCounterBg'
-        }
-      },
-      '[data-component="ButtonCounter"]': {
-        color: 'btn.danger.text',
-        backgroundColor: 'btn.danger.counterBg'
-      }
-    },
-    invisible: {
-      color: 'accent.fg',
-      backgroundColor: 'transparent',
-      border: '0',
-      boxShadow: 'none',
-      '&:hover:not([disabled])': {
-        backgroundColor: 'btn.hoverBg'
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        boxShadow: `${theme?.shadows.btn.focusShadow}`
-      },
-      '&:active:not([disabled])': {
-        backgroundColor: 'btn.selectedBg'
-      },
-      '&:disabled': {
-        color: 'primer.fg.disabled'
-      }
-    },
-    outline: {
-      color: 'btn.outline.text',
-      boxShadow: `${theme?.shadows.btn.shadow}`,
-
-      '&:hover': {
-        color: 'btn.outline.hoverText',
-        backgroundColor: 'btn.outline.hoverBg',
-        borderColor: 'outline.hoverBorder',
-        boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'btn.outline.hoverText'
-        }
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus': {
-        borderColor: 'btn.outline.focusBorder',
-        boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
-      },
-
-      '&:active': {
-        color: 'btn.outline.selectedText',
-        backgroundColor: 'btn.outline.selectedBg',
-        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
-        borderColor: 'btn.outline.selectedBorder'
-      },
-
-      '&:disabled': {
-        color: 'btn.outline.disabledText',
-        backgroundColor: 'btn.outline.disabledBg',
-        borderColor: 'btn.border',
-        '[data-component="ButtonCounter"]': {
-          backgroundColor: 'btn.outline.disabledCounterBg'
-        }
-      },
-      '[data-component="ButtonCounter"]': {
-        backgroundColor: 'btn.outline.counterBg',
-        color: 'btn.outline.text'
-      }
-    }
-  }
-  return style[variant]
-}
-
-const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => {
-  let paddingY, paddingX, fontSize
-  switch (size) {
-    case 'small':
-      paddingY = 3
-      paddingX = 12
-      fontSize = 0
-      break
-    case 'large':
-      paddingY = 9
-      paddingX = 20
-      fontSize = 2
-      break
-    case 'medium':
-    default:
-      paddingY = 5
-      paddingX = 16
-      fontSize = 1
-  }
-  if (iconOnly) {
-    paddingX = paddingY + 2
-  }
-  if (variant === 'invisible') {
-    paddingY = paddingY + 1
-  }
-  return {
-    paddingY: `${paddingY}px`,
-    paddingX: `${paddingX}px`,
-    fontSize,
-    '[data-component="ButtonCounter"]': {
-      fontSize
-    }
-  }
-}
-
-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 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 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'
-
-Object.assign(Button, {})
-
-export {Button}

package/src/NewButton/index.ts

@@ -1,10 +0,0 @@
-import {Button} from './button'
-import {Counter} from './button-counter'
-import {ButtonProps} from './types'
-// change this when moving to released state
-
-export type {ButtonProps as NewButtonProps}
-
-export const NewButton = Object.assign(Button, {
-  Counter
-})