@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/src/Autocomplete/AutocompleteOverlay.tsx

@@ -0,0 +1,68 @@
+import React, {useCallback, useContext} from 'react'
+import {useAnchoredPosition} from '../hooks'
+import Overlay, {OverlayProps} from '../Overlay'
+import {ComponentProps} from '../utils/types'
+import {AutocompleteContext} from './AutocompleteContext'
+import {useCombinedRefs} from '../hooks/useCombinedRefs'
+
+type AutocompleteOverlayInternalProps = {
+  /**
+   * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
+   */
+  menuAnchorRef?: React.RefObject<HTMLElement>
+  /**
+   * Props to be spread on the internal `Overlay` component.
+   */
+  overlayProps?: Partial<OverlayProps>
+  children?: React.ReactNode
+} & Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
+
+function AutocompleteOverlay({menuAnchorRef, overlayProps, children}: AutocompleteOverlayInternalProps) {
+  const autocompleteContext = useContext(AutocompleteContext)
+  if (autocompleteContext === null) {
+    throw new Error('AutocompleteContext returned null values')
+  }
+  const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
+  const {floatingElementRef, position} = useAnchoredPosition(
+    {
+      side: 'outside-bottom',
+      align: 'start',
+      anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
+    },
+    [showMenu, selectedItemLength]
+  )
+
+  const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef)
+
+  const closeOptionList = useCallback(() => {
+    setShowMenu(false)
+  }, [setShowMenu])
+
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  return (
+    <Overlay
+      returnFocusRef={inputRef}
+      preventFocusOnOpen={true}
+      onClickOutside={closeOptionList}
+      onEscape={closeOptionList}
+      ref={combinedOverlayRef as React.RefObject<HTMLDivElement>}
+      top={position?.top}
+      left={position?.left}
+      visibility={showMenu ? 'visible' : 'hidden'}
+      sx={{
+        overflow: 'auto'
+      }}
+      {...overlayProps}
+    >
+      {children}
+    </Overlay>
+  )
+}
+
+AutocompleteOverlay.displayName = 'AutocompleteOverlay'
+
+export type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>
+export default AutocompleteOverlay

package/src/Autocomplete/index.ts

@@ -0,0 +1,2 @@
+export {default} from './Autocomplete'
+export type {AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps} from './Autocomplete'

package/src/BaseStyles.tsx

@@ -45,7 +45,7 @@ function BaseStyles(props: BaseStylesProps) {
 }
 
 BaseStyles.defaultProps = {
-  color: 'text.primary',
+  color: 'fg.default',
   fontFamily: 'normal',
   lineHeight: 'default'
 }

package/src/BorderBox.tsx

@@ -11,7 +11,7 @@ const BorderBox = styled(Box)``
 BorderBox.defaultProps = {
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'border.primary',
+  borderColor: 'border.default',
   borderRadius: 2
 }
 

package/src/Button/ButtonInvisible.tsx

@@ -12,12 +12,17 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
   box-shadow: none;
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
   }
-
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};
   }
+  &:hover {
+    background-color: ${get('colors.btn.hoverBg')};
+  }
+  &:active {
+    background-color: ${get('colors.btn.selectedBg')};
+  }
 
   ${buttonSystemProps};
   ${sx}

package/src/Caret.tsx

@@ -125,8 +125,8 @@ Caret.locations = [
 ]
 
 Caret.defaultProps = {
-  bg: 'bg.canvas',
-  borderColor: 'border.primary',
+  bg: 'canvas.default',
+  borderColor: 'border.default',
   borderWidth: 1
 }
 

package/src/Dialog.tsx

@@ -135,7 +135,7 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
 )
 
 DialogHeader.defaultProps = {
-  backgroundColor: 'bg.tertiary'
+  backgroundColor: 'canvas.subtle'
 }
 
 DialogHeader.propTypes = {

package/src/FilteredActionList/FilteredActionList.tsx

@@ -1,4 +1,5 @@
 import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react'
+import {useSSRSafeId} from '@react-aria/ssr'
 import {GroupedListProps, ListPropsBase} from '../ActionList/List'
 import TextInput, {TextInputProps} from '../TextInput'
 import Box from '../Box'
@@ -10,7 +11,7 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
-import {useSSRSafeId} from '@react-aria/ssr'
+import {scrollIntoViewingArea} from '../behaviors/scrollIntoViewingArea'
 import {SxProp} from '../sx'
 
 export interface FilteredActionListProps
@@ -25,29 +26,6 @@ export interface FilteredActionListProps
   inputRef?: React.RefObject<HTMLInputElement>
 }
 
-function scrollIntoViewingArea(
-  child: HTMLElement,
-  container: HTMLElement,
-  margin = 8,
-  behavior: ScrollBehavior = 'smooth'
-) {
-  const {top: childTop, bottom: childBottom} = child.getBoundingClientRect()
-  const {top: containerTop, bottom: containerBottom} = container.getBoundingClientRect()
-
-  const isChildTopAboveViewingArea = childTop < containerTop + margin
-  const isChildBottomBelowViewingArea = childBottom > containerBottom - margin
-
-  if (isChildTopAboveViewingArea) {
-    const scrollHeightToChildTop = childTop - containerTop + container.scrollTop
-    container.scrollTo({behavior, top: scrollHeightToChildTop - margin})
-  } else if (isChildBottomBelowViewingArea) {
-    const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop
-    container.scrollTo({behavior, top: scrollHeightToChildBottom + margin})
-  }
-
-  // either completely in view or outside viewing area on both ends, don't scroll
-}
-
 const StyledHeader = styled.div`
   box-shadow: 0 1px 0 ${get('colors.border.default')};
   z-index: 1;
@@ -118,7 +96,14 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto')
+      scrollIntoViewingArea(
+        activeDescendantRef.current,
+        scrollContainerRef.current,
+        'vertical',
+        undefined,
+        undefined,
+        'auto'
+      )
     }
   }, [items])
 

package/src/Flash.tsx

@@ -7,35 +7,35 @@ import {ComponentProps} from './utils/types'
 const variants = variant({
   variants: {
     default: {
-      color: 'alert.info.text',
-      backgroundColor: 'alert.info.bg',
-      borderColor: 'alert.info.border',
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
       svg: {
-        color: 'alert.info.icon'
+        color: 'accent.fg'
       }
     },
     success: {
-      color: 'alert.success.text',
-      backgroundColor: 'alert.success.bg',
-      borderColor: 'alert.success.border',
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
       svg: {
-        color: 'alert.success.icon'
+        color: 'success.fg'
       }
     },
     danger: {
-      color: 'alert.error.text',
-      backgroundColor: 'alert.error.bg',
-      borderColor: 'alert.error.border',
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
       svg: {
-        color: 'alert.error.icon'
+        color: 'danger.fg'
       }
     },
     warning: {
-      color: 'alert.warn.text',
-      backgroundColor: 'alert.warn.bg',
-      borderColor: 'alert.warn.border',
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
       svg: {
-        color: 'alert.warn.icon'
+        color: 'attention.fg'
       }
     }
   }

package/src/Label.tsx

@@ -67,7 +67,7 @@ const Label = styled.span<
 `
 
 Label.defaultProps = {
-  bg: 'label.primary.border',
+  bg: 'neutral.emphasis',
   variant: 'medium'
 }
 

package/src/Overlay.tsx

@@ -90,6 +90,7 @@ export type OverlayProps = {
   top: number
   left: number
   portalContainerName?: string
+  preventFocusOnOpen?: boolean
 } & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
 
 /**
@@ -124,6 +125,7 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
       left,
       anchorSide,
       portalContainerName,
+      preventFocusOnOpen,
       ...rest
     },
     forwardedRef
@@ -140,7 +142,8 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
       onEscape,
       ignoreClickRefs,
       onClickOutside,
-      initialFocusRef
+      initialFocusRef,
+      preventFocusOnOpen
     })
 
     useEffect(() => {

package/src/ProgressBar.tsx

@@ -45,7 +45,7 @@ function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
 }
 
 ProgressBar.defaultProps = {
-  bg: 'bg.successInverse',
+  bg: 'success.emphasis',
   barSize: 'default'
 }
 

package/src/StateLabel.tsx

@@ -20,34 +20,28 @@ const colorVariants = variant({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullMerged: {
-      backgroundColor: 'prState.merged.bg',
-      color: 'prState.merged.text',
-      borderColor: 'prState.merged.border'
+      backgroundColor: 'done.emphasis',
+      color: 'fg.onEmphasis'
     },
     issueOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     draft: {
-      backgroundColor: 'prState.draft.bg',
-      color: 'prState.draft.text',
-      borderColor: 'prState.draft.border'
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 })
@@ -82,8 +76,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   color: ${get('colors.canvas.default')};
   text-align: center;
   border-radius: ${get('radii.3')};
-  border-width: 1px;
-  border-style: solid;
   ${colorVariants};
   ${sizeVariants};
   ${COMMON};

package/src/Token/_RemoveTokenButton.tsx

@@ -57,11 +57,13 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
 
   &:hover,
   &:focus {
-    background-color: ${get('colors.fade.fg10')};
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.muted')};
   }
 
   &:active {
-    background-color: ${get('colors.fade.fg15')};
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.subtle')};
   }
 
   ${variants}