@primer/components 31.2.0 → 31.2.1-rc.f73a0f8c

package/lib/ActionList2/Item.jsx

@@ -35,9 +35,9 @@ const Selection_1 = require("./Selection");
 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'
         };
     }
     switch (variant) {
@@ -76,8 +76,8 @@ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = fal
         borderRadius: listVariant === 'inset' ? 2 : 0,
         transition: 'background 33.333ms linear',
         color: exports.getVariantStyles(variant, disabled).color,
-        textDecoration: 'none',
-        ':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`,
@@ -146,7 +146,7 @@ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = fal
     return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
         {slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
             <ItemWrapper>
-              <Selection_1.Selection selected={selected} disabled={disabled}/>
+              <Selection_1.Selection selected={selected}/>
               {slots.LeadingVisual}
               <Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
                 <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>

package/lib/ActionList2/Selection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ItemProps } from './Item';
-declare type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>;
+declare type SelectionProps = Pick<ItemProps, 'selected'>;
 export declare const Selection: React.FC<SelectionProps>;
 export {};

package/lib/ActionList2/Selection.js

@@ -18,8 +18,7 @@ var _Visuals = require("./Visuals");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Selection = ({
-  selected,
-  disabled
+  selected
 }) => {
   const {
     selectionVariant: listSelectionVariant
@@ -44,26 +43,41 @@ const Selection = ({
   }
   /**
    * selectionVariant is 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
    */
 
 
   return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
     sx: {
-      input: {
-        margin: 0,
-        pointerEvents: 'none'
+      rect: {
+        fill: selected ? 'accent.fg' : 'canvas.default',
+        stroke: selected ? 'accent.fg' : 'border.default'
+      },
+      path: {
+        fill: 'fg.onEmphasis',
+        boxShadow: 'shadow.small',
+        opacity: selected ? 1 : 0
       }
     }
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "checkbox",
-    checked: selected,
-    disabled: disabled,
-    tabIndex: -1,
-    readOnly: true,
-    "aria-readonly": "false"
-  }));
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    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"
+  })));
 };
 
 exports.Selection = Selection;

package/lib/ActionList2/Selection.jsx

@@ -9,7 +9,7 @@ const octicons_react_1 = require("@primer/octicons-react");
 const List_1 = require("./List");
 const Group_1 = require("./Group");
 const Visuals_1 = require("./Visuals");
-const Selection = ({ selected, disabled }) => {
+const Selection = ({ selected }) => {
     const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
     const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
     /** selectionVariant in Group can override the selectionVariant in List root */
@@ -26,11 +26,25 @@ const Selection = ({ selected, disabled }) => {
     }
     /**
      * selectionVariant is 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
      */
-    return (<Visuals_1.LeadingVisualContainer sx={{ input: { margin: 0, pointerEvents: 'none' } }}>
-      <input type="checkbox" checked={selected} disabled={disabled} tabIndex={-1} readOnly aria-readonly="false"/>
+    return (<Visuals_1.LeadingVisualContainer sx={{
+            rect: {
+                fill: selected ? 'accent.fg' : 'canvas.default',
+                stroke: selected ? 'accent.fg' : 'border.default'
+            },
+            path: {
+                fill: 'fg.onEmphasis',
+                boxShadow: 'shadow.small',
+                opacity: selected ? 1 : 0
+            }
+        }}>
+      <svg 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"/>
+      </svg>
     </Visuals_1.LeadingVisualContainer>);
 };
 exports.Selection = Selection;

package/lib/NewButton/button.js

@@ -248,7 +248,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
     userSelect: 'none',
     textDecoration: 'none',
     textAlign: 'center',
-    '> :not(:last-child), :not(\'[data-component="icon-only"]\')': {
+    '& > :not(:last-child)': {
       mr: '2'
     },
     '&:focus': {
@@ -291,17 +291,17 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
       "data-component": "leadingIcon",
       sx: iconWrapStyles,
       "aria-hidden": !iconOnly
-    }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), Icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
+      "data-component": "text",
+      hidden: Icon ? true : undefined
+    }, children), Icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
       "data-component": "icon-only",
       as: "span",
       sx: {
         display: 'inline-block'
       },
       "aria-hidden": !iconOnly
-    }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement("span", {
-      "data-component": "text",
-      hidden: Icon ? true : false
-    }, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    }, /*#__PURE__*/_react.default.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
       as: "span",
       "data-component": "trailingIcon",
       sx: { ...iconWrapStyles,

package/lib/NewButton/button.jsx

@@ -228,7 +228,7 @@ const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
         userSelect: 'none',
         textDecoration: 'none',
         textAlign: 'center',
-        '> :not(:last-child), :not(\'[data-component="icon-only"]\')': {
+        '& > :not(:last-child)': {
             mr: '2'
         },
         '&:focus': {
@@ -262,12 +262,12 @@ const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
       {LeadingIcon && (<Box_1.default as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
           <LeadingIcon />
         </Box_1.default>)}
+      <span data-component="text" hidden={Icon ? true : undefined}>
+        {children}
+      </span>
       {Icon && (<Box_1.default data-component="icon-only" as="span" sx={{ display: 'inline-block' }} aria-hidden={!iconOnly}>
           <Icon />
         </Box_1.default>)}
-      <span data-component="text" hidden={Icon ? true : false}>
-        {children}
-      </span>
       {TrailingIcon && (<Box_1.default as="span" data-component="trailingIcon" sx={{ ...iconWrapStyles, ml: 2 }} aria-hidden={!iconOnly}>
           <TrailingIcon />
         </Box_1.default>)}

package/lib/__tests__/ActionList.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/ActionList.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+    items: [{
+      text: 'New file'
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+      items: []
+    })
+  });
+  (0, _testing.checkExports)('ActionList', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});
+describe('ActionList.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList.Item
+  });
+});

package/lib/__tests__/ActionList.test.jsx

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+require("babel-polyfill");
+const jest_axe_1 = require("jest-axe");
+const react_2 = __importDefault(require("react"));
+const theme_1 = __importDefault(require("../theme"));
+const ActionList_1 = require("../ActionList");
+const testing_1 = require("../utils/testing");
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+function SimpleActionList() {
+    return (<__1.ThemeProvider theme={theme_1.default}>
+      <__1.BaseStyles>
+        <ActionList_1.ActionList items={[
+            { text: 'New file' },
+            ActionList_1.ActionList.Divider,
+            { text: 'Copy link' },
+            { text: 'Edit file' },
+            { text: 'Delete file', variant: 'danger' }
+        ]}/>
+      </__1.BaseStyles>
+    </__1.ThemeProvider>);
+}
+describe('ActionList', () => {
+    testing_1.behavesAsComponent({
+        Component: ActionList_1.ActionList,
+        options: { skipAs: true, skipSx: true },
+        toRender: () => <ActionList_1.ActionList items={[]}/>
+    });
+    testing_1.checkExports('ActionList', {
+        default: undefined,
+        ActionList: ActionList_1.ActionList
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<SimpleActionList />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+});
+describe('ActionList.Item', () => {
+    testing_1.behavesAsComponent({
+        Component: ActionList_1.ActionList.Item
+    });
+});

package/lib/__tests__/ActionList.types.test.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function emptyList(): JSX.Element;
+export declare function listWithSingleItem(): JSX.Element;
+export declare function canUseDivDOMProps(): JSX.Element;
+export declare function cannotUseAnchorDOMProps(): JSX.Element;
+export declare function cannotUseAsWithoutRenderProp(): JSX.Element;

package/lib/__tests__/ActionList.types.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyList = emptyList;
+exports.listWithSingleItem = listWithSingleItem;
+exports.canUseDivDOMProps = canUseDivDOMProps;
+exports.cannotUseAnchorDOMProps = cannotUseAnchorDOMProps;
+exports.cannotUseAsWithoutRenderProp = cannotUseAsWithoutRenderProp;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function emptyList() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: []
+  });
+}
+
+emptyList.displayName = "emptyList";
+
+function listWithSingleItem() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One'
+    }]
+  });
+}
+
+listWithSingleItem.displayName = "listWithSingleItem";
+
+function canUseDivDOMProps() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      onMouseDown: () => undefined
+    }]
+  });
+}
+
+canUseDivDOMProps.displayName = "canUseDivDOMProps";
+
+function cannotUseAnchorDOMProps() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      // @ts-expect-error href is not a div DOM prop
+      href: '#'
+    }]
+  });
+}
+
+cannotUseAnchorDOMProps.displayName = "cannotUseAnchorDOMProps";
+
+function cannotUseAsWithoutRenderProp() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      // @ts-expect-error as is only available via manual rendering of items
+      as: 'a'
+    }]
+  });
+}
+
+cannotUseAsWithoutRenderProp.displayName = "cannotUseAsWithoutRenderProp";

package/lib/__tests__/ActionList.types.test.jsx

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cannotUseAsWithoutRenderProp = exports.cannotUseAnchorDOMProps = exports.canUseDivDOMProps = exports.listWithSingleItem = exports.emptyList = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+function emptyList() {
+    return <__1.ActionList items={[]}/>;
+}
+exports.emptyList = emptyList;
+function listWithSingleItem() {
+    return <__1.ActionList items={[{ text: 'One' }]}/>;
+}
+exports.listWithSingleItem = listWithSingleItem;
+function canUseDivDOMProps() {
+    return (<__1.ActionList items={[
+            {
+                text: 'One',
+                onMouseDown: () => undefined
+            }
+        ]}/>);
+}
+exports.canUseDivDOMProps = canUseDivDOMProps;
+function cannotUseAnchorDOMProps() {
+    return (<__1.ActionList items={[
+            {
+                text: 'One',
+                // @ts-expect-error href is not a div DOM prop
+                href: '#'
+            }
+        ]}/>);
+}
+exports.cannotUseAnchorDOMProps = cannotUseAnchorDOMProps;
+function cannotUseAsWithoutRenderProp() {
+    return (<__1.ActionList items={[
+            {
+                text: 'One',
+                // @ts-expect-error as is only available via manual rendering of items
+                as: 'a'
+            }
+        ]}/>);
+}
+exports.cannotUseAsWithoutRenderProp = cannotUseAsWithoutRenderProp;

package/lib/__tests__/ActionList2.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/ActionList2.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList2");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "New file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Divider, null), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Copy link"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Edit file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null)
+  });
+  (0, _testing.checkExports)('ActionList2', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

package/lib/__tests__/ActionList2.test.jsx

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+require("babel-polyfill");
+const jest_axe_1 = require("jest-axe");
+const react_2 = __importDefault(require("react"));
+const theme_1 = __importDefault(require("../theme"));
+const ActionList2_1 = require("../ActionList2");
+const testing_1 = require("../utils/testing");
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+function SimpleActionList() {
+    return (<__1.ThemeProvider theme={theme_1.default}>
+      <__1.SSRProvider>
+        <__1.BaseStyles>
+          <ActionList2_1.ActionList>
+            <ActionList2_1.ActionList.Item>New file</ActionList2_1.ActionList.Item>
+            <ActionList2_1.ActionList.Divider />
+            <ActionList2_1.ActionList.Item>Copy link</ActionList2_1.ActionList.Item>
+            <ActionList2_1.ActionList.Item>Edit file</ActionList2_1.ActionList.Item>
+            <ActionList2_1.ActionList.Item variant="danger">Delete file</ActionList2_1.ActionList.Item>
+          </ActionList2_1.ActionList>
+        </__1.BaseStyles>
+      </__1.SSRProvider>
+    </__1.ThemeProvider>);
+}
+describe('ActionList', () => {
+    testing_1.behavesAsComponent({
+        Component: ActionList2_1.ActionList,
+        options: { skipAs: true, skipSx: true },
+        toRender: () => <ActionList2_1.ActionList />
+    });
+    testing_1.checkExports('ActionList2', {
+        default: undefined,
+        ActionList: ActionList2_1.ActionList
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<SimpleActionList />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+});

package/lib/__tests__/ActionMenu.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';