@primer/components 31.2.1-rc.48ecca6e → 31.2.1-rc.f73a0f8c

package/lib/ActionList/Item.js

@@ -35,39 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * 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)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -84,7 +51,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.danger.fg'),
         iconColor: (0, _constants.get)('colors.danger.fg'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
       };
 
     default:
@@ -92,7 +62,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
       };
   }
 };
@@ -110,12 +82,16 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
@@ -123,14 +99,18 @@ const StyledItem = _styledComponents.default.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, _sx.default);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _sx.default);
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
@@ -229,9 +209,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
-  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -247,9 +224,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",

package/lib/ActionList/Item.jsx

@@ -34,35 +34,6 @@ const Divider_1 = require("./Divider");
 const ThemeProvider_1 = require("../ThemeProvider");
 const focusZone_1 = require("../behaviors/focusZone");
 const ssr_1 = require("@react-aria/ssr");
-/**
- * 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)'
-        }
-    }
-};
 const getItemVariant = (variant = 'default', disabled) => {
     if (disabled) {
         return {
@@ -78,14 +49,19 @@ const getItemVariant = (variant = 'default', disabled) => {
                 color: constants_1.get('colors.danger.fg'),
                 iconColor: constants_1.get('colors.danger.fg'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.danger.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.danger.activeBg'),
+                hoverText: constants_1.get('colors.actionListItem.danger.hoverText')
             };
         default:
             return {
                 color: constants_1.get('colors.fg.default'),
                 iconColor: constants_1.get('colors.fg.muted'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.default.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.default.activeBg')
             };
     }
 };
@@ -121,7 +97,11 @@ const StyledItem = styled_components_1.default.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};
     }
   }
@@ -167,19 +147,19 @@ const StyledItem = styled_components_1.default.div `
 
   // Active Descendant
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.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_1.default}
@@ -264,11 +244,8 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
             onAction?.(itemProps, event);
         }
     }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
     const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
+    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler}>
       {!!selected === selected && (<BaseVisualContainer>
           {selectionVariant === 'multiple' ? (<>
               {/**

package/lib/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/lib-esm/ActionList/Item.js

@@ -8,43 +8,10 @@ import Truncate from '../Truncate';
 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, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
 
-/**
- * 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)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -61,7 +28,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         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:
@@ -69,7 +39,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         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')
       };
   }
 };
@@ -85,12 +57,16 @@ const MainContent = styled.div.withConfig({
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
@@ -98,14 +74,18 @@ const StyledItem = styled.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, sx);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
 export const TextContainer = styled.span.withConfig({
   displayName: "Item__TextContainer",
   componentId: "jqpvy8-3"
@@ -196,9 +176,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit');
-  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit');
   const {
     theme
   } = useTheme();
@@ -214,9 +191,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",