@primer/components 31.2.0 → 31.2.1-rc.7fa29a87

package/docs/src/component-checklist.js

@@ -0,0 +1,81 @@
+import {Box, StyledOcticon, Link, Text} from '@primer/components'
+import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
+import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
+import React from 'react'
+
+/** Render component status checklist in documentation pages */
+export function ComponentChecklist({items}) {
+  return (
+    <>
+      <H3>Alpha</H3>
+      <Checklist aria-describedby="alpha">
+        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.noUnnecessaryDeps}>
+          Component does not have any unnecessary third-party dependencies.
+        </Checklist.Item>
+        <Checklist.Item checked={items.adaptsToThemes}>Component can adapt to different themes.</Checklist.Item>
+        <Checklist.Item checked={items.adaptsToScreenSizes}>
+          Component can adapt to different screen sizes.
+        </Checklist.Item>
+        <Checklist.Item checked={items.fullTestCoverage}>Component has 100% test coverage.</Checklist.Item>
+      </Checklist>
+      <H3>Beta</H3>
+      <Checklist aria-describedby="beta">
+        <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.designReviewed}>
+          Component has been reviewed by a systems designer and any resulting issues have been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.a11yReviewed}>
+          Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
+        </Checklist.Item>
+      </Checklist>
+      <H3>Stable</H3>
+      <Checklist aria-describedby="stable">
+        <Checklist.Item checked={items.apiIsStable}>
+          Component API has been stable with no breaking changes for at least one month.
+        </Checklist.Item>
+        <Checklist.Item checked={items.addressedApiFeedback}>
+          Feedback on API usability has been sought from developers using the component and any resulting issues have
+          been addressed.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasDesignGuidelines}>
+          Component has corresponding design guidelines documented in the{' '}
+          <Link href="https://primer.style/design/">interface guidelines</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasFigmaComponent}>
+          Component has corresponding Figma component in the Primer Web library.
+        </Checklist.Item>
+      </Checklist>
+    </>
+  )
+}
+
+// TODO: This component should live in Doctocat
+function Checklist({'aria-describedby': ariaDescribedby, children}) {
+  return (
+    <Box aria-describedby={ariaDescribedby} as="ul" display="grid" gridGap={2} p={0} m={0} mb={3}>
+      {children}
+    </Box>
+  )
+}
+
+Checklist.Item = ({checked, children}) => {
+  return (
+    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
+      <Box height="24px" display="flex" alignItems="center">
+        {checked ? (
+          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
+        ) : checked === null ? (
+          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
+        ) : (
+          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
+        )}
+      </Box>
+      <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>
+        {checked === null ? <Text color="fg.subtle">N/A: </Text> : null}
+        {children}
+      </Text>
+    </Box>
+  )
+}

package/docs/src/props.js

@@ -0,0 +1,77 @@
+import {Flash, Label} from '@primer/components'
+import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
+import Table from '@primer/gatsby-theme-doctocat/src/components/table'
+import {graphql, useStaticQuery} from 'gatsby'
+import React from 'react'
+
+/** Render prop documentation for the given component */
+export function Props({of}) {
+  const data = useStaticQuery(graphql`
+    query {
+      allComponentMetadata {
+        nodes {
+          id
+          name
+          props {
+            description
+            defaultValue
+            name
+            required
+            type
+          }
+        }
+      }
+    }
+  `)
+
+  const displayName = of?.displayName || of?.name || ''
+  const component = data.allComponentMetadata.nodes.find(node => node.name === displayName)
+
+  if (!component) {
+    // eslint-disable-next-line no-console
+    console.error(`Could not find component ${displayName}`)
+    return (
+      <>
+        <H3>{displayName}</H3>
+        <Flash variant="danger">Component not found</Flash>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <H3>{component.name}</H3>
+      {component.props.length > 0 ? (
+        <Table>
+          <thead>
+            <tr>
+              <th align="left">Prop</th>
+              <th align="left">Type</th>
+              <th align="left">Default</th>
+              <th align="left">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {component.props.map(prop => (
+              <tr key={prop.name}>
+                <td style={{whiteSpace: 'nowrap'}}>
+                  <InlineCode>{prop.name}</InlineCode>{' '}
+                  {prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
+                </td>
+                <td>
+                  <InlineCode>{prop.type}</InlineCode>
+                </td>
+                <td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
+                <td>{prop.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      ) : (
+        <Paragraph>No props</Paragraph>
+      )}
+    </>
+  )
+}

package/jest.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable github/unescaped-html-literal */
+module.exports = {
+  testEnvironment: 'jsdom',
+  cacheDirectory: '.test',
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],
+  setupFilesAfterEnv: [
+    '<rootDir>/src/utils/test-matchers.tsx',
+    '<rootDir>/src/utils/test-deprecations.tsx',
+    '<rootDir>/src/utils/test-helpers.tsx'
+  ],
+  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
+}

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",
@@ -142,7 +122,7 @@ exports.TextContainer = TextContainer;
 const BaseVisualContainer = _styledComponents.default.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
 
 const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
@@ -168,10 +148,16 @@ const DescriptionContainer = _styledComponents.default.span.withConfig({
   componentId: "jqpvy8-8"
 })(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
 
-const MultiSelectInput = _styledComponents.default.input.withConfig({
-  displayName: "Item__MultiSelectInput",
+const MultiSelectIcon = _styledComponents.default.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["pointer-events:none;"]);
+})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
@@ -207,12 +193,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     }
 
     onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
-    const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
-
-    if (isCheckbox && event.key === ' ') {
-      // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
-      return;
-    }
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
@@ -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,18 +224,25 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
-  }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectInput, {
-    disabled: disabled,
-    tabIndex: -1,
-    type: "checkbox",
-    checked: selected,
-    "aria-label": text,
-    readOnly: true,
-    "aria-readonly": "false"
-  })) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
+    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",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  }))) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
     fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
   })), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
     variant: variant,

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}
@@ -192,6 +172,9 @@ const BaseVisualContainer = styled_components_1.default.div `
   height: 20px;
   width: ${constants_1.get('space.3')};
   margin-right: ${constants_1.get('space.2')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 const ColoredVisualContainer = styled_components_1.default(BaseVisualContainer) `
   svg {
@@ -225,8 +208,16 @@ const DescriptionContainer = styled_components_1.default.span `
   flex-grow: 1;
   flex-basis: var(--description-container-flex-basis);
 `;
-const MultiSelectInput = styled_components_1.default.input `
-  pointer-events: none;
+const MultiSelectIcon = styled_components_1.default.svg `
+  rect {
+    fill: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.canvas.default'))};
+    stroke: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.border.default'))};
+  }
+  path {
+    fill: ${constants_1.get('colors.fg.onEmphasis')};
+    boxshadow: ${constants_1.get('shadow.small')};
+    opacity: ${({ selected }) => (selected ? 1 : 0)};
+  }
 `;
 /**
  * An actionable or selectable `Item` with an optional icon and description.
@@ -240,11 +231,6 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
             return;
         }
         onKeyPress?.(event);
-        const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
-        if (isCheckbox && event.key === ' ') {
-            // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
-            return;
-        }
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
             onAction?.(itemProps, event);
         }
@@ -258,18 +244,19 @@ 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' ? (<>
-              {/*
-                 * readOnly is required because we are doing a one-way bind to `checked`.
-                 * aria-readonly="false" tells screen that they can still interact with the checkbox
+              {/**
+                 * we use a svg instead of an input because there should not
+                 * be an interactive element inside an option
+                 * svg copied from primer/css
                  */}
-              <MultiSelectInput disabled={disabled} tabIndex={-1} type="checkbox" checked={selected} aria-label={text} readOnly aria-readonly="false"/>
+              <MultiSelectIcon selected={selected} width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+                <path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
+              </MultiSelectIcon>
             </>) : (selected && <octicons_react_1.CheckIcon fill={theme?.colors.fg.default}/>)}
         </BaseVisualContainer>)}
       {LeadingVisual && (<LeadingVisualContainer variant={variant} disabled={disabled}>

package/lib/ActionList2/Description.js

@@ -23,7 +23,6 @@ const Description = ({
   ...props
 }) => {
   const styles = {
-    color: 'fg.muted',
     fontSize: 0,
     lineHeight: '16px',
     flexGrow: 1,
@@ -35,14 +34,19 @@ const Description = ({
     name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
   }, ({
     blockDescriptionId,
-    inlineDescriptionId
+    inlineDescriptionId,
+    disabled
   }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "span",
-    sx: (0, _sx.merge)(styles, sx),
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
     id: blockDescriptionId
   }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
     id: inlineDescriptionId,
-    sx: (0, _sx.merge)(styles, sx),
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
     title: props.children,
     inline: true,
     maxWidth: "100%"

package/lib/ActionList2/Description.jsx

@@ -11,7 +11,6 @@ const Truncate_1 = __importDefault(require("../Truncate"));
 const Item_1 = require("./Item");
 const Description = ({ variant = 'inline', sx = {}, ...props }) => {
     const styles = {
-        color: 'fg.muted',
         fontSize: 0,
         lineHeight: '16px',
         flexGrow: 1,
@@ -20,9 +19,9 @@ const Description = ({ variant = 'inline', sx = {}, ...props }) => {
         marginLeft: variant === 'block' ? 0 : 2
     };
     return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({ blockDescriptionId, inlineDescriptionId }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge(styles, sx)} id={blockDescriptionId}>
+      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
             {props.children}
-          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge(styles, sx)} title={props.children} inline={true} maxWidth="100%">
+          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
             {props.children}
           </Truncate_1.default>)}
     </Item_1.Slot>);

package/lib/ActionList2/Item.js

@@ -34,9 +34,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const getVariantStyles = (variant, 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'
     };
   }
 
@@ -105,10 +105,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     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])': {
@@ -199,8 +198,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
     "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
   }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
-    selected: selected,
-    disabled: disabled
+    selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
     "data-component": "ActionList.Item--DividerContainer",
     sx: {