@primer/components 31.2.1-rc.a088bdc0 → 32.0.0

package/src/Timeline.tsx

@@ -1,141 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import styled, {css} from 'styled-components'
-import Box, {BoxProps} from './Box'
-import {COMMON, get} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
-
-const Timeline = styled(Box)<{clipSidebar?: boolean}>`
-  display: flex;
-  flex-direction: column;
-  ${props =>
-    props.clipSidebar &&
-    css`
-      .Timeline-Item:first-child {
-        padding-top: 0;
-      }
-
-      .Timeline-Item:last-child {
-        padding-bottom: 0;
-      }
-    `}
-
-  ${sx};
-`
-
-type StyledTimelineItemProps = {condensed?: boolean}
-
-const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
-  className: classnames('Timeline-Item', props.className)
-}))<StyledTimelineItemProps>`
-  display: flex;
-  position: relative;
-  padding: ${get('space.3')} 0;
-  margin-left: ${get('space.3')};
-
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 2px;
-    content: '';
-    background-color: ${get('colors.border.muted')};
-  }
-
-  ${props =>
-    props.condensed &&
-    css`
-      padding-top: ${get('space.1')};
-      padding-bottom: 0;
-      &:last-child {
-        padding-bottom: ${get('space.3')};
-      }
-
-      .TimelineItem-Badge {
-        height: 16px;
-        margin-top: ${get('space.2')};
-        margin-bottom: ${get('space.2')};
-        color: ${get('colors.fg.muted')};
-        background-color: ${get('colors.canvas.default')};
-        border: 0;
-      }
-    `}
-
-  ${COMMON};
-  ${sx};
-`
-
-export type TimelineBadgeProps = BoxProps
-
-const TimelineBadge = (props: TimelineBadgeProps) => {
-  return (
-    <Box position="relative" zIndex={1}>
-      <Box
-        display="flex"
-        className={classnames(props.className, 'TimelineItem-Badge')}
-        flexShrink={0}
-        borderRadius="50%"
-        borderWidth="2px"
-        borderStyle="solid"
-        borderColor="canvas.default"
-        overflow="hidden"
-        color="fg.muted"
-        bg="timeline.badgeBg"
-        width="32px"
-        height="32px"
-        mr={2}
-        ml="-15px"
-        alignItems="center"
-        justifyContent="center"
-        {...props}
-      >
-        {props.children}
-      </Box>
-    </Box>
-  )
-}
-
-const TimelineBody = styled(Box)`
-  min-width: 0;
-  max-width: 100%;
-  margin-top: ${get('space.1')};
-  color: ${get('colors.fg.muted')};
-  flex: auto;
-  font-size: ${get('fontSizes.1')};
-  ${sx};
-`
-
-const TimelineBreak = styled(Box)`
-  position: relative
-  z-index: 1;
-  height: 24px;
-  margin: 0;
-  margin-bottom: -${get('space.3')};
-  margin-left: 0;
-  background-color: ${get('colors.canvas.default')};
-  border: 0;
-  border-top: ${get('space.1')} solid ${get('colors.border.default')};
-  ${sx};
-`
-
-TimelineItem.displayName = 'Timeline.Item'
-
-TimelineBadge.displayName = 'Timeline.Badge'
-
-TimelineBody.displayName = 'Timeline.Body'
-
-TimelineBreak.displayName = 'Timeline.Break'
-
-export type TimelineProps = ComponentProps<typeof Timeline>
-export type TimelineItemsProps = ComponentProps<typeof TimelineItem>
-export type TimelineBodyProps = ComponentProps<typeof TimelineBody>
-export type TimelineBreakProps = ComponentProps<typeof TimelineBreak>
-export default Object.assign(Timeline, {
-  Item: TimelineItem,
-  Badge: TimelineBadge,
-  Body: TimelineBody,
-  Break: TimelineBreak
-})

package/src/Token/AvatarToken.tsx

@@ -1,54 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase'
-import Token from './Token'
-import {Avatar} from '..'
-
-export interface AvatarTokenProps extends TokenBaseProps {
-  avatarSrc: string
-}
-
-const AvatarContainer = styled.span<{avatarSize: TokenSizeKeys}>`
-  // 'space.1' is used because to match space from the left of the token to the left of the avatar
-  // '* 2' is done to account for the top and bottom
-  --spacing: calc(${get('space.1')} * 2);
-
-  display: block;
-  height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-  width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
-`
-
-const AvatarToken = forwardRef<HTMLElement, AvatarTokenProps>(({avatarSrc, id, size, ...rest}, forwardedRef) => {
-  return (
-    <Token
-      leadingVisual={() => (
-        <AvatarContainer avatarSize={size || defaultTokenSize}>
-          <Avatar
-            src={avatarSrc}
-            size={parseInt(tokenSizes[size || defaultTokenSize], 10)}
-            sx={{
-              width: '100%',
-              height: '100%'
-            }}
-          />
-        </AvatarContainer>
-      )}
-      size={size}
-      id={id?.toString()}
-      sx={{
-        paddingLeft: get('space.1')
-      }}
-      {...rest}
-      ref={forwardedRef}
-    />
-  )
-})
-
-AvatarToken.defaultProps = {
-  size: defaultTokenSize
-}
-
-AvatarToken.displayName = 'AvatarToken'
-
-export default AvatarToken

package/src/Token/IssueLabelToken.tsx

@@ -1,150 +0,0 @@
-import React, {forwardRef, MouseEventHandler, useMemo} from 'react'
-import {CSSObject} from '@styled-system/css'
-import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
-import RemoveTokenButton from './_RemoveTokenButton'
-import {parseToHsla, parseToRgba} from 'color2k'
-import {useTheme} from '../ThemeProvider'
-import TokenTextContainer from './_TokenTextContainer'
-
-export interface IssueLabelTokenProps extends TokenBaseProps {
-  /**
-   * The color that corresponds to the label
-   */
-  fillColor?: string
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
-}
-
-const tokenBorderWidthPx = 1
-
-const lightModeStyles = {
-  '--lightness-threshold': '0.453',
-  '--border-threshold': '0.96',
-  '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
-  background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
-  color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-}
-
-const darkModeStyles = {
-  '--lightness-threshold': '0.6',
-  '--background-alpha': '0.18',
-  '--border-alpha': '0.3',
-  '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-  color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-  borderColor:
-    'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-}
-
-const IssueLabelToken = forwardRef<HTMLElement, IssueLabelTokenProps>((props, forwardedRef) => {
-  const {as, fillColor = '#999', onRemove, id, isSelected, text, size, hideRemoveButton, href, onClick, ...rest} = props
-  const interactiveTokenProps = {
-    as,
-    href,
-    onClick
-  }
-  const {colorScheme} = useTheme()
-  const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
-  const onRemoveClick: MouseEventHandler = e => {
-    e.stopPropagation()
-    onRemove && onRemove()
-  }
-  const labelStyles: CSSObject = useMemo(() => {
-    const [r, g, b] = parseToRgba(fillColor)
-    const [h, s, l] = parseToHsla(fillColor)
-
-    // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-    // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
-    return {
-      '--label-r': String(r),
-      '--label-g': String(g),
-      '--label-b': String(b),
-      '--label-h': String(Math.round(h)),
-      '--label-s': String(Math.round(s * 100)),
-      '--label-l': String(Math.round(l * 100)),
-      '--perceived-lightness':
-        'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
-      '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
-      paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-      position: 'relative',
-      ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
-      ...(isSelected
-        ? {
-            background:
-              colorScheme === 'light'
-                ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))'
-                : darkModeStyles.background,
-            ':focus': {
-              outline: 'none'
-            },
-            ':after': {
-              content: '""',
-              position: 'absolute',
-              zIndex: 1,
-              top: `-${tokenBorderWidthPx * 2}px`,
-              right: `-${tokenBorderWidthPx * 2}px`,
-              bottom: `-${tokenBorderWidthPx * 2}px`,
-              left: `-${tokenBorderWidthPx * 2}px`,
-              display: 'block',
-              pointerEvents: 'none',
-              boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${
-                colorScheme === 'light'
-                  ? 'rgb(var(--label-r), var(--label-g), var(--label-b))'
-                  : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'
-              }`,
-              borderRadius: '999px'
-            }
-          }
-        : {})
-    }
-  }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove])
-
-  return (
-    <TokenBase
-      onRemove={onRemove}
-      id={id?.toString()}
-      isSelected={isSelected}
-      text={text}
-      size={size}
-      sx={labelStyles}
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
-      ref={forwardedRef}
-    >
-      <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
-      {!hideRemoveButton && onRemove ? (
-        <RemoveTokenButton
-          borderOffset={tokenBorderWidthPx}
-          onClick={onRemoveClick}
-          size={size}
-          aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
-          isParentInteractive={isTokenInteractive(props)}
-          sx={
-            hasMultipleActionTargets
-              ? {
-                  position: 'relative',
-                  zIndex: '1'
-                }
-              : {}
-          }
-        />
-      ) : null}
-    </TokenBase>
-  )
-})
-
-IssueLabelToken.defaultProps = {
-  fillColor: '#999',
-  size: defaultTokenSize
-}
-
-IssueLabelToken.displayName = 'IssueLabelToken'
-
-export default IssueLabelToken

package/src/Token/Token.tsx

@@ -1,126 +0,0 @@
-import React, {forwardRef, MouseEventHandler} from 'react'
-import styled, {css} from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
-import RemoveTokenButton from './_RemoveTokenButton'
-import TokenTextContainer from './_TokenTextContainer'
-
-export interface TokenProps extends TokenBaseProps {
-  /**
-   * A function that renders a component before the token text
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  leadingVisual?: React.ComponentType<any>
-  /**
-   * Whether the remove button should be rendered in the token
-   */
-  hideRemoveButton?: boolean
-}
-
-const tokenBorderWidthPx = 1
-
-const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: boolean} & SxProp>`
-  background-color: ${get('colors.neutral.subtle')};
-  border-color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))};
-  border-style: solid;
-  border-width: ${tokenBorderWidthPx}px;
-  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))};
-  max-width: 100%;
-  padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)};
-  position: relative;
-  ${sx}
-
-  ${props => {
-    if (props.isTokenInteractive) {
-      return css`
-        &:hover {
-          background-color: ${get('colors.neutral.muted')};
-          box-shadow: ${get('colors.shadow.medium')};
-          color: ${get('colors.fg.default')};
-        }
-      `
-    }
-  }}
-`
-
-const LeadingVisualContainer = styled('span')<Pick<TokenBaseProps, 'size'>>`
-  flex-shrink: 0;
-  line-height: 0;
-
-  ${props => {
-    switch (props.size) {
-      case 'large':
-      case 'extralarge':
-        return css`
-          margin-right: ${get('space.2')};
-        `
-      default:
-        return css`
-          margin-right: ${get('space.1')};
-        `
-    }
-  }}
-`
-
-const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, TokenProps & SxProp>(
-  (props, forwardedRef) => {
-    const {as, onRemove, id, leadingVisual: LeadingVisual, text, size, hideRemoveButton, href, onClick, ...rest} = props
-    const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
-    const onRemoveClick: MouseEventHandler = e => {
-      e.stopPropagation()
-      onRemove && onRemove()
-    }
-    const interactiveTokenProps = {
-      as,
-      href,
-      onClick
-    }
-
-    return (
-      <DefaultTokenStyled
-        onRemove={onRemove}
-        hideRemoveButton={hideRemoveButton || !onRemove}
-        id={id?.toString()}
-        text={text}
-        size={size}
-        isTokenInteractive={isTokenInteractive(props)}
-        {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-        {...rest}
-        ref={forwardedRef}
-      >
-        {LeadingVisual ? (
-          <LeadingVisualContainer size={size}>
-            <LeadingVisual />
-          </LeadingVisualContainer>
-        ) : null}
-        <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
-        {!hideRemoveButton && onRemove ? (
-          <RemoveTokenButton
-            borderOffset={tokenBorderWidthPx}
-            onClick={onRemoveClick}
-            size={size}
-            isParentInteractive={isTokenInteractive(props)}
-            aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
-            sx={
-              hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1'
-                  }
-                : {}
-            }
-          />
-        ) : null}
-      </DefaultTokenStyled>
-    )
-  }
-)
-
-Token.displayName = 'Token'
-
-Token.defaultProps = {
-  size: defaultTokenSize
-}
-
-export default Token

package/src/Token/TokenBase.tsx

@@ -1,129 +0,0 @@
-import {KeyboardEvent} from 'react'
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-
-export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge'
-
-export const tokenSizes: Record<TokenSizeKeys, string> = {
-  small: '16px',
-  medium: '20px',
-  large: '24px',
-  extralarge: '32px'
-}
-
-export const defaultTokenSize: TokenSizeKeys = 'medium'
-
-export interface TokenBaseProps
-  extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
-  as?: 'button' | 'a' | 'span'
-  /**
-   * The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
-   */
-  onRemove?: () => void
-  /**
-   * Whether the token is selected
-   */
-  isSelected?: boolean
-  /**
-   * The text label inside the token
-   */
-  text: string
-  /**
-   * A unique identifier that can be associated with the token
-   */
-  id?: number | string
-  /**
-   * Which size the token will be rendered at
-   */
-  size?: TokenSizeKeys
-}
-
-export const isTokenInteractive = ({as = 'span', onClick, onFocus, tabIndex = -1}: TokenBaseProps) =>
-  Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as))
-
-const variants = variant<
-  {
-    fontSize: number
-    height: string
-    lineHeight: string
-    paddingLeft: number
-    paddingRight: number
-    paddingTop: number
-    paddingBottom: number
-  },
-  TokenSizeKeys
->({
-  prop: 'size',
-  variants: {
-    small: {
-      fontSize: 0,
-      height: tokenSizes.small,
-      // without setting lineHeight to match height, the "x" appears vertically mis-aligned
-      lineHeight: tokenSizes.small,
-      paddingLeft: 1,
-      paddingRight: 1,
-      // need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
-      // without setting these, the "x" appears vertically mis-aligned
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    medium: {
-      fontSize: 0,
-      height: tokenSizes.medium,
-      lineHeight: tokenSizes.medium,
-      paddingLeft: 2,
-      paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    large: {
-      fontSize: 0,
-      height: tokenSizes.large,
-      lineHeight: tokenSizes.large,
-      paddingLeft: 2,
-      paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    extralarge: {
-      fontSize: 1,
-      height: tokenSizes.extralarge,
-      lineHeight: tokenSizes.extralarge,
-      paddingLeft: 3,
-      paddingRight: 3,
-      paddingTop: 0,
-      paddingBottom: 0
-    }
-  }
-})
-
-const TokenBase = styled.span.attrs<TokenBaseProps>(({text, onRemove, onKeyDown}) => ({
-  onKeyDown: (event: KeyboardEvent<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>) => {
-    onKeyDown && onKeyDown(event)
-
-    if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
-      onRemove()
-    }
-  },
-  'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined
-}))<TokenBaseProps & SxProp>`
-  align-items: center;
-  border-radius: 999px;
-  cursor: ${props => (isTokenInteractive(props) ? 'pointer' : 'auto')};
-  display: inline-flex;
-  font-weight: ${get('fontWeights.bold')};
-  font-family: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-  ${variants}
-  ${sx}
-`
-
-TokenBase.defaultProps = {
-  as: 'span',
-  size: defaultTokenSize
-}
-
-export default TokenBase