@primer/components 31.2.1-rc.18690e3f → 31.2.1-rc.32ed6e21

package/src/ActionList/Item.tsx

@@ -7,7 +7,7 @@ import {ItemInput} from './List'
 import styled from 'styled-components'
 import {StyledHeader} from './Header'
 import {StyledDivider} from './Divider'
-import {useColorSchemeVar, useTheme} from '../ThemeProvider'
+import {useTheme} from '../ThemeProvider'
 import {
   activeDescendantActivatedDirectly,
   activeDescendantActivatedIndirectly,
@@ -17,36 +17,6 @@ import {useSSRSafeId} from '@react-aria/ssr'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import {AriaRole} from '../utils/types'
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-  default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
-  },
-  danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
-  }
-} as const
-
 /**
  * Contract for props passed to the `Item` component.
  */
@@ -166,14 +136,19 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.danger.hoverBg'),
+        focusBg: get('colors.actionListItem.danger.activeBg'),
+        hoverText: get('colors.actionListItem.danger.hoverText')
       }
     default:
       return {
         color: get('colors.fg.default'),
         iconColor: get('colors.fg.muted'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.default.hoverBg'),
+        focusBg: get('colors.actionListItem.default.activeBg')
       }
   }
 }
@@ -200,8 +175,6 @@ const StyledItem = styled.div<
     variant: ItemProps['variant']
     showDivider: ItemProps['showDivider']
     item?: ItemInput
-    hoverBackground: string
-    focusBackground: string
   } & SxProp
 >`
   /* 6px vertical padding + 20px line height = 32px total height
@@ -220,7 +193,11 @@ const StyledItem = styled.div<
   @media (hover: hover) and (pointer: fine) {
     :hover {
       // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({hoverBackground}) => hoverBackground});
+      background: var(
+        --item-hover-bg-override,
+        ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverBg}
+      );
+      color: ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverText};
       cursor: ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverCursor};
     }
   }
@@ -266,19 +243,19 @@ const StyledItem = styled.div<
 
   // Active Descendant
   &[${isActiveDescendantAttribute}='${activeDescendantActivatedDirectly}'] {
-    background: ${({focusBackground}) => focusBackground};
+    background: ${({variant, item}) => getItemVariant(variant, item?.disabled).focusBg};
   }
   &[${isActiveDescendantAttribute}='${activeDescendantActivatedIndirectly}'] {
-    background: ${({hoverBackground}) => hoverBackground};
+    background: ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverBg};
   }
 
   &:focus {
-    background: ${({focusBackground}) => focusBackground};
+    background: ${({variant, item}) => getItemVariant(variant, item?.disabled).focusBg};
     outline: none;
   }
 
   &:active {
-    background: ${({focusBackground}) => focusBackground};
+    background: ${({variant, item}) => getItemVariant(variant, item?.disabled).focusBg};
   }
 
   ${sx}
@@ -404,10 +381,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
     [onAction, disabled, itemProps, onClick]
   )
 
-  const customItemTheme = customItemThemes[variant]
-  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit')
-  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit')
-
   const {theme} = useTheme()
 
   return (
@@ -424,8 +397,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
       data-id={id}
       onKeyPress={keyPressHandler}
       onClick={clickHandler}
-      hoverBackground={disabled ? 'inherit' : hoverBackground}
-      focusBackground={disabled ? 'inherit' : focusBackground}
     >
       {!!selected === selected && (
         <BaseVisualContainer>

package/src/ActionList2/Description.tsx

@@ -16,7 +16,6 @@ export type DescriptionProps = {
 
 export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
   const styles = {
-    color: 'fg.muted',
     fontSize: 0,
     lineHeight: '16px',
     flexGrow: 1,
@@ -27,15 +26,19 @@ export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx
 
   return (
     <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
+      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
         variant === 'block' ? (
-          <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId}>
+          <Box
+            as="span"
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            id={blockDescriptionId}
+          >
             {props.children}
           </Box>
         ) : (
           <Truncate
             id={inlineDescriptionId}
-            sx={merge(styles, sx as SxProp)}
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
             title={props.children as string}
             inline={true}
             maxWidth="100%"

package/src/ActionList2/Group.tsx

@@ -1,18 +1,51 @@
 import React from 'react'
+import {useSSRSafeId} from '@react-aria/ssr'
 import Box from '../Box'
 import {SxProp} from '../sx'
-import {Header, HeaderProps} from './Header'
-import {ListProps} from './List'
+import {ListContext, ListProps} from './List'
+import {AriaRole} from '../utils/types'
 
-export type GroupProps = HeaderProps &
-  SxProp & {
+export type GroupProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+  /**
+   * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     selectionVariant?: ListProps['selectionVariant'] | false
   }
 
 type ContextProps = Pick<GroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
-export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+export const Group: React.FC<GroupProps> = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = useSSRSafeId()
+
   return (
     <Box
       as="li"
@@ -23,12 +56,48 @@ export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, sele
       }}
       {...props}
     >
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
       <GroupContext.Provider value={{selectionVariant}}>
-        <Box as="ul" sx={{paddingInlineStart: 0}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box>
       </GroupContext.Provider>
     </Box>
   )
 }
+
+export type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+  labelId: string
+}
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header: React.FC<HeaderProps> = ({variant, title, auxiliaryText, labelId, ...props}) => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  }
+
+  return (
+    <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}

package/src/ActionList2/Item.tsx

@@ -13,9 +13,9 @@ import {Selection} from './Selection'
 export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
   if (disabled) {
     return {
-      color: 'fg.muted',
-      iconColor: 'fg.muted',
-      annotationColor: 'fg.muted'
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
     }
   }
 
@@ -114,8 +114,9 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       borderRadius: listVariant === 'inset' ? 2 : 0,
       transition: 'background 33.333ms linear',
       color: getVariantStyles(variant, disabled).color,
-      textDecoration: 'none', // for as="a"
-      ':not([aria-disabled])': {cursor: 'pointer'},
+      cursor: 'pointer',
+      '&[aria-disabled]': {cursor: 'not-allowed'},
+
       '@media (hover: hover) and (pointer: fine)': {
         ':hover:not([aria-disabled])': {
           backgroundColor: `actionListItem.${variant}.hoverBg`,

package/src/ActionList2/List.tsx

@@ -23,7 +23,7 @@ export type ListProps = {
   role?: AriaRole
 } & SxProp
 
-type ContextProps = Omit<ListProps, 'sx'>
+type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>
 export const ListContext = React.createContext<ContextProps>({})
 
 const ListBox = styled.ul<SxProp>(sx)

package/src/NewButton/button.tsx

@@ -5,6 +5,8 @@ import sx, {merge, SxProp} from '../sx'
 import {useTheme, Theme} from '../ThemeProvider'
 import {VariantType, ButtonProps} from './types'
 
+const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
 const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
   const style = {
     default: {
@@ -130,7 +132,7 @@ const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
         boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
       },
 
-      '&:active': {
+      '&:active:not([disabled])': {
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
         boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
@@ -191,86 +193,88 @@ const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOn
 
 const ButtonBase = styled.button<SxProp>(sx)
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({children, ...props}, forwardedRef): JSX.Element => {
-  const {
-    icon: Icon,
-    leadingIcon: LeadingIcon,
-    trailingIcon: TrailingIcon,
-    variant = 'default',
-    size = 'medium',
-    sx: sxProp = {}
-  } = props
-  const iconOnly = !!Icon
-  const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
-  const {theme} = useTheme()
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({children, sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => {
+    const {
+      icon: Icon,
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      variant = 'default',
+      size = 'medium'
+    } = props
+    const iconOnly = !!Icon
+    const {theme} = useTheme()
 
-  const styles = {
-    borderRadius: '2',
-    border: '1px solid',
-    borderColor: theme?.colors.btn.border,
-    display: 'grid',
-    gridTemplateAreas: '"leadingIcon text trailingIcon"',
-    fontWeight: 'bold',
-    lineHeight: TEXT_ROW_HEIGHT,
-    whiteSpace: 'nowrap',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    appearance: 'none',
-    userSelect: 'none',
-    textDecoration: 'none',
-    textAlign: 'center',
-    '& > :not(:last-child)': {
-      mr: '2'
-    },
-    '&:focus': {
-      outline: 'none'
-    },
-    '&:disabled': {
-      cursor: 'default'
-    },
-    '&:disabled svg': {
-      opacity: '0.6'
-    },
-    '[data-component="leadingIcon"]': {
-      gridArea: 'leadingIcon'
-    },
-    '[data-component="text"]': {
-      gridArea: 'text'
-    },
-    '[data-component="trailingIcon"]': {
-      gridArea: 'trailingIcon'
+    const styles = {
+      borderRadius: '2',
+      border: '1px solid',
+      borderColor: theme?.colors.btn.border,
+      display: 'grid',
+      gridTemplateAreas: '"leadingIcon text trailingIcon"',
+      fontWeight: 'bold',
+      lineHeight: TEXT_ROW_HEIGHT,
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+      appearance: 'none',
+      userSelect: 'none',
+      textDecoration: 'none',
+      textAlign: 'center',
+      '& > :not(:last-child)': {
+        mr: '2'
+      },
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:disabled': {
+        cursor: 'default'
+      },
+      '&:disabled svg': {
+        opacity: '0.6'
+      },
+      '[data-component="leadingIcon"]': {
+        gridArea: 'leadingIcon'
+      },
+      '[data-component="text"]': {
+        gridArea: 'text'
+      },
+      '[data-component="trailingIcon"]': {
+        gridArea: 'trailingIcon'
+      }
     }
+    const iconWrapStyles = {
+      display: 'inline-block'
+    }
+    const sxStyles = merge.all([
+      styles,
+      getSizeStyles(size, variant, iconOnly),
+      getVariantStyles(variant, theme),
+      sxProp as SxProp
+    ])
+    return (
+      <ButtonBase sx={sxStyles} ref={forwardedRef} {...props}>
+        {LeadingIcon && (
+          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+            <LeadingIcon />
+          </Box>
+        )}
+        <span data-component="text" hidden={Icon ? true : false}>
+          {children}
+        </span>
+        {Icon && (
+          <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
+            <Icon />
+          </Box>
+        )}
+        {TrailingIcon && (
+          <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
+            <TrailingIcon />
+          </Box>
+        )}
+      </ButtonBase>
+    )
   }
-  const variableStyles = {...getSizeStyles(size, variant, iconOnly), ...getVariantStyles(variant, theme)}
-  const componentStyles = {...styles, ...variableStyles}
-  const iconWrapStyles = {
-    display: 'inline-block'
-  }
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Why wont it accept the sx prop?
-    <ButtonBase sx={merge(componentStyles, sxProp as SxProp)} ref={forwardedRef} {...props}>
-      {LeadingIcon && (
-        <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
-          <LeadingIcon />
-        </Box>
-      )}
-      <span data-component="text" hidden={Icon ? true : undefined}>
-        {children}
-      </span>
-      {Icon && (
-        <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
-          <Icon />
-        </Box>
-      )}
-      {TrailingIcon && (
-        <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
-          <TrailingIcon />
-        </Box>
-      )}
-    </ButtonBase>
-  )
-})
+)
 
 Button.displayName = 'Button'
 

package/src/__tests__/__snapshots__/ActionList.test.tsx.snap

@@ -178,25 +178,25 @@ exports[`ActionList.Item renders consistently 1`] = `
 }
 
 .c1[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c1[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c1:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c1:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 @media (hover:hover) and (pointer:fine) {
   .c1:hover {
-    background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
+    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
     cursor: pointer;
   }
 }