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

package/src/Token/IssueLabelToken.tsx

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,129 @@
+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

package/src/Token/_RemoveTokenButton.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import {XIcon} from '@primer/octicons-react'
+import styled, {css} from 'styled-components'
+import {variant} from 'styled-system'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import {tokenSizes, TokenSizeKeys, defaultTokenSize} from './TokenBase'
+
+interface TokenButtonProps {
+  borderOffset?: number
+  size?: TokenSizeKeys
+  isParentInteractive?: boolean
+}
+
+const variants = variant<{height: string; width: string}, TokenSizeKeys>({
+  prop: 'size',
+  variants: {
+    small: {
+      height: tokenSizes.small,
+      width: tokenSizes.small
+    },
+    medium: {
+      height: tokenSizes.medium,
+      width: tokenSizes.medium
+    },
+    large: {
+      height: tokenSizes.large,
+      width: tokenSizes.large
+    },
+    extralarge: {
+      height: tokenSizes.extralarge,
+      width: tokenSizes.extralarge
+    }
+  }
+})
+
+const getTokenButtonIconSize = (size?: TokenSizeKeys) => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75
+
+const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  appearance: none;
+  text-decoration: none;
+  padding: 0;
+  transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+
+  ${props => {
+    switch (props.size) {
+      case 'large':
+      case 'extralarge':
+        return css`
+          margin-left: ${get('space.2')};
+        `
+      default:
+        return css`
+          margin-left: ${get('space.1')};
+        `
+    }
+  }}
+
+  &:hover,
+  &:focus {
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.muted')};
+  }
+
+  &:active {
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.subtle')};
+  }
+
+  ${variants}
+  ${sx}
+`
+
+const RemoveTokenButton: React.FC<ComponentProps<typeof StyledTokenButton>> = ({
+  'aria-label': ariaLabel,
+  isParentInteractive,
+  size,
+  ...rest
+}) => {
+  delete rest.children
+
+  return (
+    <StyledTokenButton
+      as={isParentInteractive ? 'span' : 'button'}
+      tabIndex={isParentInteractive ? -1 : undefined}
+      aria-label={!isParentInteractive ? 'Remove token' : ariaLabel}
+      size={size}
+      {...rest}
+    >
+      <XIcon size={getTokenButtonIconSize(size)} />
+    </StyledTokenButton>
+  )
+}
+
+RemoveTokenButton.defaultProps = {
+  size: defaultTokenSize
+}
+
+export default RemoveTokenButton

package/src/Token/_TokenTextContainer.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+import {TokenBaseProps} from './TokenBase'
+
+const TokenTextContainer = styled('span')<Partial<TokenBaseProps>>`
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // reset button styles, make the cursor a pointer, and add line-height
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+
+  // reset anchor styles
+  color: currentColor;
+  text-decoration: none;
+
+  // Position psuedo-element above text content, but below the
+  // remove button.
+  // This ensures the <a> or <button> receives the click no
+  // matter where on the token the user clicks.
+  &:is(a, button, [tabIndex='0']) {
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+`
+
+export default TokenTextContainer

package/src/Token/index.ts

@@ -0,0 +1,3 @@
+export {default} from './Token'
+export {default as IssueLabelToken} from './IssueLabelToken'
+export {default as AvatarToken} from './AvatarToken'