@primer/components 31.0.0-rc.c90c1dae → 31.0.0

package/src/Button/ButtonOutline.tsx

@@ -1,43 +0,0 @@
-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 ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.btn.outline.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.outline.hoverText')};
-    background-color: ${get('colors.btn.outline.hoverBg')};
-    border-color: ${get('colors.btn.outline.hoverBorder')};
-    box-shadow: ${get('shadows.btn.outline.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.outline.focusBorder')};
-    box-shadow: ${get('shadows.btn.outline.focusShadow')};
-  }
-
-  &:active {
-    color: ${get('colors.btn.outline.selectedText')};
-    background-color: ${get('colors.btn.outline.selectedBg')};
-    box-shadow: ${get('shadows.btn.outline.selectedShadow')};
-    border-color: ${get('colors.btn.outline.selectedBorder')};
-  }
-
-  &:disabled {
-    color: ${get('colors.btn.outline.disabledText')};
-    background-color: ${get('colors.btn.outline.disabledBg')};
-    border-color: ${get('colors.btn.border')};
-  }
-
-  ${buttonSystemProps};
-  ${sx};
-`
-
-export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
-export default ButtonOutline

package/src/Button/ButtonPrimary.tsx

@@ -1,41 +0,0 @@
-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'
-
-export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.btn.primary.text')};
-  border: 1px solid ${get('colors.btn.primary.border')};
-  background-color: ${get('colors.btn.primary.bg')};
-  box-shadow: ${get('shadows.btn.primary.shadow')};
-
-  &:hover {
-    color: ${get('colors.btn.primary.hoverText')};
-    background-color: ${get('colors.btn.primary.hoverBg')};
-    border-color: ${get('colors.btn.primary.hoverBorder')};
-    box-shadow: ${get('shadows.btn.primary.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${get('colors.btn.primary.focusBorder')};
-    box-shadow: ${get('shadows.btn.primary.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${get('colors.btn.primary.selectedBg')};
-    box-shadow: ${get('shadows.btn.primary.selectedShadow')};
-  }
-
-  &:disabled {
-    color: ${get('colors.btn.primary.disabledText')};
-    background-color: ${get('colors.btn.primary.disabledBg')};
-    border-color: ${get('colors.btn.primary.disabledBorder')};
-  }
-
-  ${buttonSystemProps};
-  ${sx};
-`
-
-export type ButtonPrimaryProps = ComponentProps<typeof ButtonPrimary>
-export default ButtonPrimary

package/src/Button/ButtonStyles.tsx

@@ -1,36 +0,0 @@
-import {css} from 'styled-components'
-import {get} from '../constants'
-
-export default css`
-  position: relative;
-  display: inline-block;
-  padding: 6px 16px;
-  font-family: inherit;
-  font-weight: ${get('fontWeights.bold')};
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  border-radius: ${get('radii.2')};
-  appearance: none;
-  text-decoration: none;
-  text-align: center;
-
-  &:hover {
-    // needed to override link styles
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:disabled svg {
-    opacity: 0.6;
-  }
-`

package/src/Button/ButtonTableList.tsx

@@ -1,58 +0,0 @@
-import styled from 'styled-components'
-import {
-  COMMON,
-  get,
-  LAYOUT,
-  SystemCommonProps,
-  SystemLayoutProps,
-  SystemTypographyProps,
-  TYPOGRAPHY
-} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
-
-const ButtonTableList = styled.summary<StyledButtonTableListProps>`
-  display: inline-block;
-  padding: 0;
-  font-size: ${get('fontSizes.1')};
-  color: ${get('colors.fg.muted')};
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none; // Corrects inability to style clickable input types in iOS.
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    &,
-    &:hover {
-      color: ${get('colors.primer.fg.disabled')};
-      cursor: default;
-    }
-  }
-
-  &:after {
-    display: inline-block;
-    margin-left: ${get('space.1')};
-    width: 0;
-    height: 0;
-    vertical-align: -2px;
-    content: '';
-    border: 4px solid transparent;
-    border-top-color: currentcolor;
-  }
-  ${COMMON}
-  ${TYPOGRAPHY}
-  ${LAYOUT}
-  ${sx};
-`
-
-export type ButtonTableListProps = ComponentProps<typeof ButtonTableList>
-export default ButtonTableList

package/src/Button/index.ts

@@ -1,16 +0,0 @@
-export {default} from './Button'
-export type {ButtonProps} from './Button'
-export {default as ButtonDanger} from './ButtonDanger'
-export type {ButtonDangerProps} from './ButtonDanger'
-export {default as ButtonGroup} from './ButtonGroup'
-export type {ButtonGroupProps} from './ButtonGroup'
-export {default as ButtonOutline} from './ButtonOutline'
-export type {ButtonOutlineProps} from './ButtonOutline'
-export {default as ButtonPrimary} from './ButtonPrimary'
-export type {ButtonPrimaryProps} from './ButtonPrimary'
-export {default as ButtonInvisible} from './ButtonInvisible'
-export type {ButtonInvisibleProps} from './ButtonInvisible'
-export {default as ButtonTableList} from './ButtonTableList'
-export type {ButtonTableListProps} from './ButtonTableList'
-export {default as ButtonClose} from './ButtonClose'
-export type {ButtonCloseProps} from './ButtonClose'

package/src/Caret.tsx

@@ -1,133 +0,0 @@
-import React from 'react'
-import {ThemeContext} from 'styled-components'
-import {style} from 'styled-system'
-import {Theme} from './ThemeProvider'
-
-type Location =
-  | 'top'
-  | 'top-left'
-  | 'top-right'
-  | 'right'
-  | 'right-top'
-  | 'right-bottom'
-  | 'bottom'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'left'
-  | 'left-top'
-  | 'left-bottom'
-
-type Alignment = 'top' | 'right' | 'bottom' | 'left'
-
-const oppositeEdge = {
-  top: 'Bottom',
-  right: 'Left',
-  bottom: 'Top',
-  left: 'Right'
-}
-
-const perpendicularEdge = {
-  top: 'Left',
-  right: 'Top',
-  bottom: 'Left',
-  left: 'Top'
-}
-
-function getEdgeAlign(location: Location) {
-  const [edge, align] = location.split('-')
-  return [edge as Alignment, align as Alignment | undefined] as const
-}
-
-function getPosition(edge: Alignment, align: Alignment | undefined, spacing: number) {
-  const opposite = oppositeEdge[edge].toLowerCase()
-  const perp = perpendicularEdge[edge].toLowerCase()
-  return {
-    [opposite]: '100%',
-    [align || perp]: align ? spacing : '50%'
-  }
-}
-
-const getBg = style({prop: 'bg', key: 'colors'})
-const getBorderColor = style({prop: 'borderColor', key: 'colors'})
-const getBorderWidth = style({prop: 'borderWidth', key: 'borderWidths', scale: [0, 1]})
-
-export type CaretProps = {
-  bg?: string
-  borderColor?: string
-  borderWidth?: string | number
-  size?: number
-  location?: Location
-  theme?: Theme
-}
-
-function Caret(props: CaretProps) {
-  const theme = React.useContext(ThemeContext)
-  const propsWithTheme = {...props, theme: props.theme ?? theme}
-  const {bg} = getBg(propsWithTheme)
-  const {borderColor} = getBorderColor(propsWithTheme)
-  const {borderWidth} = getBorderWidth(propsWithTheme)
-  const {size = 8, location = 'bottom'} = props
-  const [edge, align] = getEdgeAlign(location)
-  const perp = perpendicularEdge[edge]
-
-  // note: these arrays represent points in the form [x, y]
-  const a = [-size, 0]
-  const b = [0, size]
-  const c = [size, 0]
-
-  // spaces are optional in path `d` attribute, and points are
-  // represented in the form `x,y` -- which is what the arrays above
-  // become when stringified!
-  const triangle = `M${a}L${b}L${c}L${a}Z`
-  const line = `M${a}L${b}L${c}`
-
-  const transform = {
-    top: `translate(${[size, size * 2]}) rotate(180)`,
-    right: `translate(${[0, size]}) rotate(-90)`,
-    bottom: `translate(${[size, 0]})`,
-    left: `translate(${[size * 2, size]}) rotate(90)`
-  }[edge]
-
-  return (
-    <svg
-      width={size * 2}
-      height={size * 2}
-      style={{
-        pointerEvents: 'none',
-        position: 'absolute',
-        ...getPosition(edge, align, size),
-        // if align is set (top|right|bottom|left),
-        // then we don't need an offset margin
-        [`margin${perp}`]: align ? null : -size
-      }}
-    >
-      <g transform={transform}>
-        <path d={triangle} fill={bg} />
-        <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
-      </g>
-    </svg>
-  )
-}
-
-Caret.locations = [
-  'top',
-  'top-left',
-  'top-right',
-  'right',
-  'right-top',
-  'right-bottom',
-  'bottom',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'left-top',
-  'left-bottom'
-]
-
-Caret.defaultProps = {
-  bg: 'canvas.default',
-  borderColor: 'border.default',
-  borderWidth: 1
-}
-
-export default Caret

package/src/CircleBadge.tsx

@@ -1,55 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import StyledOcticon from './StyledOcticon'
-import sx, {SxProp} from './sx'
-import isNumeric from './utils/isNumeric'
-import {ComponentProps} from './utils/types'
-
-const variantSizes = {
-  small: 56,
-  medium: 96,
-  large: 128
-}
-
-type StyledCircleBadgeProps = {
-  inline?: boolean
-  variant?: keyof typeof variantSizes
-  size?: number
-} & SystemCommonProps &
-  SxProp
-
-const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
-  const calc = isNumeric(size) ? size : variantSizes[variant]
-  return {
-    width: calc,
-    height: calc
-  }
-}
-
-const CircleBadge = styled.div<StyledCircleBadgeProps>`
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  align-items: center;
-  justify-content: center;
-  background-color: ${get('colors.canvas.default')};
-  border-radius: 50%;
-  box-shadow: ${get('shadows.shadow.medium')};
-  ${COMMON};
-  ${sizeStyles};
-  ${sx};
-`
-
-const CircleBadgeIcon = styled(StyledOcticon)`
-  height: auto;
-  max-width: 60%;
-  max-height: 55%;
-`
-
-CircleBadge.defaultProps = {
-  inline: false
-}
-
-CircleBadgeIcon.displayName = 'CircleBadge.Icon'
-
-export type CircleBadgeProps = ComponentProps<typeof CircleBadge>
-export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
-export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon})

package/src/CircleOcticon.tsx

@@ -1,37 +0,0 @@
-import {IconProps} from '@primer/octicons-react'
-import React from 'react'
-import Box, {BoxProps} from './Box'
-
-export type CircleOcticonProps = {
-  as?: React.ElementType
-  size?: number
-  icon: React.ComponentType<{size?: IconProps['size']}>
-} & BoxProps
-
-function CircleOcticon(props: CircleOcticonProps) {
-  const {size, as} = props
-  const {icon: IconComponent, bg, ...rest} = props
-  return (
-    <Box
-      as={as}
-      bg={bg}
-      overflow="hidden"
-      borderWidth={0}
-      size={size}
-      borderRadius="50%"
-      borderStyle="solid"
-      borderColor="border.default"
-    >
-      <Box display="flex" {...rest} alignItems="center" justifyContent="center">
-        <IconComponent size={size} />
-      </Box>
-    </Box>
-  )
-}
-
-CircleOcticon.defaultProps = {
-  ...Box.defaultProps,
-  size: 32
-}
-
-export default CircleOcticon

package/src/CounterLabel.tsx

@@ -1,52 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledCounterLabelProps = {
-  scheme?: 'primary' | 'secondary'
-} & SystemCommonProps &
-  SxProp
-
-const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
-  return {
-    color:
-      scheme === 'secondary'
-        ? get('colors.fg.default')(props)
-        : scheme === 'primary'
-        ? get('colors.fg.onEmphasis')(props)
-        : get('colors.fg.default')(props)
-  }
-}
-
-const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
-  return {
-    backgroundColor:
-      scheme === 'secondary'
-        ? get('colors.neutral.muted')(props)
-        : scheme === 'primary'
-        ? get('colors.neutral.emphasis')(props)
-        : get('colors.neutral.muted')(props)
-  }
-}
-
-const CounterLabel = styled.span<StyledCounterLabelProps>`
-  display: inline-block;
-  padding: 2px 5px;
-  font-size: ${get('fontSizes.0')};
-  font-weight: ${get('fontWeights.bold')};
-  line-height: ${get('lineHeights.condensedUltra')};
-  border-radius: 20px;
-  ${colorStyles};
-  ${bgStyles};
-  ${COMMON};
-
-  &:empty {
-    display: none;
-  }
-
-  ${sx};
-`
-
-export type CounterLabelProps = ComponentProps<typeof CounterLabel>
-export default CounterLabel

package/src/Details.tsx

@@ -1,23 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledDetailsProps = SystemCommonProps & SxProp
-
-const Details = styled.details<StyledDetailsProps>`
-  & > summary {
-    list-style: none;
-  }
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
-
-  ${COMMON}
-  ${sx};
-`
-
-Details.displayName = 'Details'
-
-export type DetailsProps = ComponentProps<typeof Details>
-export default Details

package/src/Dialog/ConfirmationDialog.tsx

@@ -1,184 +0,0 @@
-import React, {useCallback} from 'react'
-import ReactDOM from 'react-dom'
-import styled from 'styled-components'
-import Box from '../Box'
-import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
-import {FocusKeys} from '../behaviors/focusZone'
-import {get} from '../constants'
-import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
-import {useFocusZone} from '../hooks/useFocusZone'
-
-/**
- * Props to customize the ConfirmationDialog.
- */
-export interface ConfirmationDialogProps {
-  /**
-   * Required. This callback is invoked when a gesture to close the dialog
-   * is performed. The first argument indicates the gesture.
-   */
-  onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
-
-  /**
-   * Required. The title of the ConfirmationDialog. This is usually a brief
-   * question.
-   */
-  title: React.ReactNode
-
-  /**
-   * The text to use for the cancel button. Default: "Cancel".
-   */
-  cancelButtonContent?: React.ReactNode
-
-  /**
-   * The text to use for the confirm button. Default: "OK".
-   */
-  confirmButtonContent?: React.ReactNode
-
-  /**
-   * The type of button to use for the confirm button. Default: Button.
-   */
-  confirmButtonType?: 'normal' | 'primary' | 'danger'
-}
-
-const StyledConfirmationHeader = styled.header`
-  padding: ${get('space.2')};
-  display: flex;
-  flex-direction: row;
-`
-const StyledTitle = styled(Box)`
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: 6px ${get('space.2')};
-  flex-grow: 1;
-`
-const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialogLabelId}) => {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button')
-  }, [onClose])
-  return (
-    <StyledConfirmationHeader>
-      <StyledTitle id={dialogLabelId}>{title}</StyledTitle>
-      <Dialog.CloseButton onClose={onCloseClick} />
-    </StyledConfirmationHeader>
-  )
-}
-const StyledConfirmationBody = styled(Box)`
-  font-size: ${get('fontSizes.1')};
-  padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  color: ${get('colors.fg.muted')};
-  flex-grow: 1;
-`
-const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
-  return <StyledConfirmationBody>{children}</StyledConfirmationBody>
-}
-const StyledConfirmationFooter = styled(Box)`
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  grid-gap: ${get('space.2')};
-  align-items: end;
-  justify-content: end;
-  padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
-`
-const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
-  const {containerRef: footerRef} = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  })
-  // Must have exactly 2 buttons!
-  return (
-    <StyledConfirmationFooter ref={footerRef as React.RefObject<HTMLDivElement>}>
-      <Dialog.Buttons buttons={footerButtons ?? []} />
-    </StyledConfirmationFooter>
-  )
-}
-
-/**
- * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
- * is used to confirm a user action. ConfirmationDialogs always have exactly
- * two buttons: one to cancel the action and one to confirm it. No custom
- * rendering capabilities are provided for ConfirmationDialog.
- */
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
-  const {
-    onClose,
-    title,
-    cancelButtonContent = 'Cancel',
-    confirmButtonContent = 'OK',
-    confirmButtonType = 'normal',
-    children
-  } = props
-
-  const onCancelButtonClick = useCallback(() => {
-    onClose('cancel')
-  }, [onClose])
-  const onConfirmButtonClick = useCallback(() => {
-    onClose('confirm')
-  }, [onClose])
-  const cancelButton: DialogButtonProps = {
-    content: cancelButtonContent,
-    onClick: onCancelButtonClick
-  }
-  const confirmButton: DialogButtonProps = {
-    content: confirmButtonContent,
-    buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: true
-  }
-  const footerButtons = [cancelButton, confirmButton]
-  return (
-    <Dialog
-      onClose={onClose}
-      title={title}
-      footerButtons={footerButtons}
-      role="alertdialog"
-      width="medium"
-      renderHeader={ConfirmationHeader}
-      renderBody={ConfirmationBody}
-      renderFooter={ConfirmationFooter}
-    >
-      {children}
-    </Dialog>
-  )
-}
-
-export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
-async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
-  const {content, ...confirmationDialogProps} = options
-  return new Promise(resolve => {
-    const hostElement = document.createElement('div')
-    const onClose: ConfirmationDialogProps['onClose'] = gesture => {
-      ReactDOM.unmountComponentAtNode(hostElement)
-      if (gesture === 'confirm') {
-        resolve(true)
-      } else {
-        resolve(false)
-      }
-    }
-    ReactDOM.render(
-      <ThemeProvider {...themeProps}>
-        <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
-          {content}
-        </ConfirmationDialog>
-      </ThemeProvider>,
-      hostElement
-    )
-  })
-}
-
-/**
- * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
- * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
- * resolved with `true` or `false` depending on whether or not the confirm button was used.
- */
-export function useConfirm() {
-  const {theme, colorMode, dayScheme, nightScheme} = useTheme()
-  const result = useCallback(
-    (options: ConfirmOptions) => {
-      const themeProps: ThemeProviderProps = {theme, colorMode, dayScheme, nightScheme}
-      return confirm(themeProps, options)
-    },
-    [theme, colorMode, dayScheme, nightScheme]
-  )
-  return result
-}