@primer/components 29.1.0-rc.79e8b21e → 29.1.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: 'alert.info.text',
-      backgroundColor: 'alert.info.bg',
-      borderColor: 'alert.info.border',
-      svg: {
-        color: 'alert.info.icon'
-      }
-    },
-    success: {
-      color: 'alert.success.text',
-      backgroundColor: 'alert.success.bg',
-      borderColor: 'alert.success.border',
-      svg: {
-        color: 'alert.success.icon'
-      }
-    },
-    danger: {
-      color: 'alert.error.text',
-      backgroundColor: 'alert.error.bg',
-      borderColor: 'alert.error.border',
-      svg: {
-        color: 'alert.error.icon'
-      }
-    },
-    warning: {
-      color: 'alert.warn.text',
-      backgroundColor: 'alert.warn.bg',
-      borderColor: 'alert.warn.border',
-      svg: {
-        color: 'alert.warn.icon'
-      }
-    }
-  }
-})
-
-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: 'label.primary.border',
-  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/Overlay.tsx

@@ -1,194 +0,0 @@
-import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
-import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
-import {ComponentProps} from './utils/types'
-import {useOverlay, TouchOrMouseEvent} from './hooks'
-import Portal from './Portal'
-import sx, {SxProp} from './sx'
-import {useCombinedRefs} from './hooks/useCombinedRefs'
-import {AnchorSide} from './behaviors/anchoredPosition'
-import {useTheme} from './ThemeProvider'
-
-type StyledOverlayProps = {
-  width?: keyof typeof widthMap
-  height?: keyof typeof heightMap
-  maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
-  visibility?: 'visible' | 'hidden'
-  anchorSide?: AnchorSide
-}
-
-const heightMap = {
-  xsmall: '192px',
-  small: '256px',
-  medium: '320px',
-  large: '432px',
-  xlarge: '600px',
-  auto: 'auto',
-  initial: 'auto' // Passing 'initial' initially applies 'auto'
-}
-
-const widthMap = {
-  small: '256px',
-  medium: '320px',
-  large: '480px',
-  xlarge: '640px',
-  xxlarge: '960px',
-  auto: 'auto'
-}
-const animationDuration = 200
-
-function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y: number} {
-  if (anchorSide?.endsWith('bottom')) {
-    return {x: 0, y: -1}
-  } else if (anchorSide?.endsWith('top')) {
-    return {x: 0, y: 1}
-  } else if (anchorSide?.endsWith('right')) {
-    return {x: -1, y: 0}
-  } else if (anchorSide?.endsWith('left')) {
-    return {x: 1, y: 0}
-  }
-
-  return {x: 0, y: 0}
-}
-
-const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp>`
-  background-color: ${get('colors.canvas.overlay')};
-  box-shadow: ${get('shadows.overlay.shadow')};
-  position: absolute;
-  min-width: 192px;
-  max-width: 640px;
-  height: ${props => heightMap[props.height || 'auto']};
-  max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
-  width: ${props => widthMap[props.width || 'auto']};
-  border-radius: 12px;
-  overflow: hidden;
-  animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
-
-  @keyframes overlay-appear {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  visibility: var(--styled-overlay-visibility);
-  :focus {
-    outline: none;
-  }
-  ${COMMON};
-  ${sx};
-`
-export type OverlayProps = {
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
-  initialFocusRef?: React.RefObject<HTMLElement>
-  returnFocusRef: React.RefObject<HTMLElement>
-  onClickOutside: (e: TouchOrMouseEvent) => void
-  onEscape: (e: KeyboardEvent) => void
-  visibility?: 'visible' | 'hidden'
-  [additionalKey: string]: unknown
-  top: number
-  left: number
-  portalContainerName?: string
-} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
-
-/**
- * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
- * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
- * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
- * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
- * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
- * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
- * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
- * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
- * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
- * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
- * @param top Optional. Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
- */
-const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
-  (
-    {
-      onClickOutside,
-      role = 'none',
-      initialFocusRef,
-      returnFocusRef,
-      ignoreClickRefs,
-      onEscape,
-      visibility = 'visible',
-      height,
-      top,
-      left,
-      anchorSide,
-      portalContainerName,
-      ...rest
-    },
-    forwardedRef
-  ): ReactElement => {
-    const overlayRef = useRef<HTMLDivElement>(null)
-    const combinedRef = useCombinedRefs(overlayRef, forwardedRef)
-    const {theme} = useTheme()
-    const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''))
-    const slideAnimationEasing = get('animation.easeOutCubic')(theme)
-
-    useOverlay({
-      overlayRef,
-      returnFocusRef,
-      onEscape,
-      ignoreClickRefs,
-      onClickOutside,
-      initialFocusRef
-    })
-
-    useEffect(() => {
-      if (height === 'initial' && combinedRef.current?.clientHeight) {
-        combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`
-      }
-    }, [height, combinedRef])
-
-    useLayoutEffect(() => {
-      const {x, y} = getSlideAnimationStartingVector(anchorSide)
-      if ((!x && !y) || !overlayRef.current?.animate || visibility === 'hidden') {
-        return
-      }
-
-      // JS animation is required because Safari does not allow css animations to start paused and then run
-      overlayRef.current.animate(
-        {transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`]},
-        {
-          duration: animationDuration,
-          easing: slideAnimationEasing
-        }
-      )
-    }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility])
-
-    return (
-      <Portal containerName={portalContainerName}>
-        <StyledOverlay
-          height={height}
-          role={role}
-          {...rest}
-          ref={combinedRef}
-          style={
-            {
-              top: `${top || 0}px`,
-              left: `${left || 0}px`,
-              ...rest.style,
-              '--styled-overlay-visibility': visibility
-            } as React.CSSProperties
-          }
-        />
-      </Portal>
-    )
-  }
-)
-
-Overlay.defaultProps = {
-  height: 'auto',
-  width: 'auto'
-}
-
-export default Overlay

package/src/Pagehead.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Pagehead = styled.div<SystemCommonProps & SxProp>`
-  position: relative;
-  padding-top: ${get('space.4')};
-  padding-bottom: ${get('space.4')};
-  margin-bottom: ${get('space.4')};
-  border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON};
-  ${sx};
-`
-
-export type PageheadProps = ComponentProps<typeof Pagehead>
-export default Pagehead