@primer/components 31.2.1-rc.48ecca6e → 31.2.1-rc.7fa29a87

package/lib-esm/utils/testing.d.ts

@@ -231,67 +231,13 @@ export declare function render(component: React.ReactElement, theme?: {
             gradientOut: string;
         };
         mktg: {
-            success: string;
-            info: string;
-            bgShadeGradient: {
-                top: string;
-                bottom: string;
-            };
             btn: {
-                bg: {
-                    top: string;
-                    bottom: string;
-                };
-                bgOverlay: {
-                    top: string;
-                    bottom: string;
-                };
-                text: string;
-                primary: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                enterprise: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                outline: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
-                };
-                dark: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
+                bg: string;
+                shadow: {
+                    outline: string;
+                    focus: string;
+                    hover: string;
+                    hoverMuted: string;
                 };
             };
         };

package/package-lock.json

@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@primer/octicons-react": "^16.1.0",
-        "@primer/primitives": "6.1.0",
+        "@primer/primitives": "7.0.1",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
         "@styled-system/css": "5.1.5",
@@ -7561,9 +7561,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
-      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.0.1.tgz",
+      "integrity": "sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -43351,9 +43351,9 @@
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
-      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.0.1.tgz",
+      "integrity": "sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.1-rc.48ecca6e",
+  "version": "31.2.1-rc.7fa29a87",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.1.0",
+    "@primer/primitives": "7.0.1",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",

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/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;
   }
 }

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

@@ -436,20 +436,20 @@ Array [
 }
 
 .c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c4:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c4:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c5 {
@@ -530,7 +530,7 @@ Array [
 
 @media (hover:hover) and (pointer:fine) {
   .c4: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;
   }
 }
@@ -1343,20 +1343,20 @@ Array [
 }
 
 .c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c4:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c4:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c5 {
@@ -1400,7 +1400,7 @@ Array [
 
 @media (hover:hover) and (pointer:fine) {
   .c4: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;
   }
 }
@@ -2160,20 +2160,20 @@ Array [
 }
 
 .c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c4:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c4:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c5 {
@@ -2227,7 +2227,7 @@ Array [
 
 @media (hover:hover) and (pointer:fine) {
   .c4: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;
   }
 }
@@ -2987,20 +2987,20 @@ Array [
 }
 
 .c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c4:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c4:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c1 {
@@ -3016,7 +3016,7 @@ Array [
 
 @media (hover:hover) and (pointer:fine) {
   .c4: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;
   }
 }
@@ -3430,20 +3430,20 @@ Array [
 }
 
 .c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c4:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c4:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c1 {
@@ -3459,7 +3459,7 @@ Array [
 
 @media (hover:hover) and (pointer:fine) {
   .c4: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;
   }
 }

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

@@ -41,6 +41,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }
@@ -83,6 +84,7 @@ exports[`Button renders consistently 1`] = `
 >
   <span
     data-component="text"
+    hidden={false}
   />
 </button>
 `;
@@ -128,6 +130,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }
@@ -171,6 +174,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 >
   <span
     data-component="text"
+    hidden={false}
   >
      Disabled
   </span>
@@ -222,6 +226,7 @@ exports[`Button styles icon only button to make it a square 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }