@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/Button/ButtonPrimary.tsx

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

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

@@ -0,0 +1,58 @@
+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: rgba(${get('colors.fg.muted')}, 0.5);
+      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

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

@@ -0,0 +1,133 @@
+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: 'bg.canvas',
+  borderColor: 'border.primary',
+  borderWidth: 1
+}
+
+export default Caret

package/src/CircleBadge.tsx

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

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

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

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

@@ -0,0 +1,184 @@
+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,
+    autoFocus: true
+  }
+  const confirmButton: DialogButtonProps = {
+    content: confirmButtonContent,
+    buttonType: confirmButtonType,
+    onClick: onConfirmButtonClick
+  }
+  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
+}