@primer/components 31.2.0 → 31.2.1-rc.0e01900c

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

@@ -142,7 +142,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 +168,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 +213,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);
@@ -250,15 +250,24 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     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, {
+  }), !!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

@@ -192,6 +192,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 +228,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 +251,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);
         }
@@ -265,11 +271,15 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
     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}>
       {!!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: {

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
+    });
+});