@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

package/lib-esm/__tests__/NewButton.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { NewButton as Button } from '../NewButton';
+import { render, behavesAsComponent } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({
+    Component: Button
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, null, "Default")).type).toEqual('button');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Button, null, "Click here"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('preserves "onClick" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      onClick: noop
+    }, "Noop")).props.onClick).toEqual(noop);
+  });
+  it('respects width props', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      sx: {
+        width: 200
+      }
+    }, "Block"))).toHaveStyleRule('width', '200px');
+  });
+  it('respects the "disabled" prop', () => {
+    const item = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }, " Disabled"));
+    expect(item.props.disabled).toEqual(true);
+    expect(item).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "Smol"))).toHaveStyleRule('font-size', '12px');
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "large"
+    }, "Large"))).toHaveStyleRule('font-size', '16px');
+  });
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      sx: {
+        fontSize: 20
+      }
+    }, "Big Smol"))).toHaveStyleRule('font-size', '20px');
+  });
+  it('styles primary button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "primary"
+    }, "Primary"))).toHaveStyleRule('background-color', '#2da44e');
+  });
+  it('styles invisible button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "invisible"
+    }, "Invisible"))).toHaveStyleRule('background-color', 'transparent');
+  });
+  it('styles danger button appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "danger"
+    }, "Danger"))).toHaveStyleRule('background-color', '#f6f8fa');
+  });
+});

package/lib-esm/{unreleased.d.ts → drafts.d.ts}

@@ -2,6 +2,7 @@
  *  api yet (not in main bundle). We don't recommend using it in production.
  *
  *  But, they are published on npm and you can import them for experimentation/feedback.
- *  example: import {ActionList} from '@primer/components/unreleased
+ *  example: import {ActionList} from '@primer/components/drafts
  */
 export * from './ActionList2';
+export * from './NewButton';

package/lib-esm/{unreleased.js → drafts.js}

@@ -2,7 +2,8 @@
  *  api yet (not in main bundle). We don't recommend using it in production.
  *
  *  But, they are published on npm and you can import them for experimentation/feedback.
- *  example: import {ActionList} from '@primer/components/unreleased
+ *  example: import {ActionList} from '@primer/components/drafts
  */
 // Components
-export * from './ActionList2';
+export * from './ActionList2';
+export * from './NewButton';

package/lib-esm/index.d.ts

@@ -37,6 +37,8 @@ export type { BranchNameProps } from './BranchName';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
+export type { NewButtonProps } from './NewButton';
 export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
 export { default as Caret } from './Caret';
 export type { CaretProps } from './Caret';

package/lib-esm/index.js

@@ -26,6 +26,7 @@ export { default as AvatarStack } from './AvatarStack';
 export { default as BranchName } from './BranchName';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';
 export { default as CircleOcticon } from './CircleOcticon';

package/lib-esm/stories/ActionList2.stories.js

@@ -1,6 +1,6 @@
 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); }
 
-import { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon, ArrowLeftIcon, LinkIcon, LawIcon, StarIcon, GitForkIcon, AlertIcon, TableIcon, PeopleIcon, CalendarIcon, IssueOpenedIcon, NumberIcon, XIcon, RepoIcon } from '@primer/octicons-react';
+import { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon, ArrowLeftIcon, LinkIcon, LawIcon, StarIcon, RepoForkedIcon, AlertIcon, TableIcon, PeopleIcon, CalendarIcon, IssueOpenedIcon, NumberIcon, XIcon, RepoIcon } from '@primer/octicons-react';
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
@@ -42,7 +42,7 @@ export function SimpleListStory() {
 }
 SimpleListStory.storyName = 'Simple List';
 export function WithIcon() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With Icon"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "github.com/primer"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LawIcon, null)), "MIT License"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "256 stars"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(GitForkIcon, null)), "3 forks"), /*#__PURE__*/React.createElement(ActionList.Item, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With Icon"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "github.com/primer"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LawIcon, null)), "MIT License"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "256 stars"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(RepoForkedIcon, null)), "3 forks"), /*#__PURE__*/React.createElement(ActionList.Item, {
     variant: "danger"
   }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(AlertIcon, null)), "4 vulnerabilities")));
 }
@@ -739,7 +739,7 @@ SortableItem.displayName = "SortableItem";
 const repos = ['primer/primer-markdown', 'primer/octicons', 'primer/css', 'primer/primer-layout', 'primer/primer-alerts', 'primer/primer-avatars', 'primer/react', 'primer/primitives'];
 export function AsyncListStory() {
   const [results, setResults] = React.useState(repos.slice(0, 6));
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const filter = async event => {
     setLoading(true);

package/lib-esm/stories/NewButton.stories.js

@@ -0,0 +1,178 @@
+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); }
+
+import React, { useState } from 'react';
+import { NewButton as Button } from '../NewButton';
+import { BaseStyles, ThemeProvider } from '..';
+import { XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon } from '@primer/octicons-react';
+import Box from '../Box';
+export default {
+  title: 'Composite components/New Button',
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+};
+export const defaultButton = ({
+  size = 'medium',
+  ...args
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    size: size
+  }, args), "Default");
+};
+defaultButton.displayName = "defaultButton";
+export const primaryButton = args => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    variant: "primary"
+  }), "Primary");
+};
+primaryButton.displayName = "primaryButton";
+export const dangerButton = args => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    variant: "danger"
+  }), "Danger");
+};
+dangerButton.displayName = "dangerButton";
+export const invisibleButton = args => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    variant: "invisible"
+  }), "Invisible");
+};
+invisibleButton.displayName = "invisibleButton";
+export const iconBeforeButton = args => {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    leadingIcon: SearchIcon
+  }, args), "Before");
+};
+iconBeforeButton.displayName = "iconBeforeButton";
+export const iconButton = ({ ...args
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    icon: XIcon
+  }, args), "Close")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    icon: XIcon
+  }, args, {
+    variant: "invisible"
+  }), "Close")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    icon: XIcon
+  }, args, {
+    variant: "danger"
+  }), "Close")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    icon: XIcon
+  }, args, {
+    variant: "primary"
+  }), "Close")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    icon: XIcon
+  }, args, {
+    variant: "outline"
+  }), "Close")));
+};
+export const WatchCounterButton = ({ ...args
+}) => {
+  const [count, setCount] = useState(0);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setCount(count + 1)
+  }, args), "Watch", /*#__PURE__*/React.createElement(Button.Counter, null, count))), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setCount(count + 1)
+  }, args, {
+    variant: "primary"
+  }), "Watch", /*#__PURE__*/React.createElement(Button.Counter, null, count))), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setCount(count + 1)
+  }, args, {
+    variant: "invisible"
+  }), "Watch", /*#__PURE__*/React.createElement(Button.Counter, null, count))), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setCount(count + 1)
+  }, args, {
+    variant: "danger"
+  }), "Watch", /*#__PURE__*/React.createElement(Button.Counter, null, count))), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setCount(count + 1)
+  }, args, {
+    variant: "outline"
+  }), "Watch", /*#__PURE__*/React.createElement(Button.Counter, null, count))));
+};
+export const WatchIconButton = ({ ...args
+}) => {
+  const [watching, setWatching] = useState(false);
+  const icon = watching ? EyeClosedIcon : () => /*#__PURE__*/React.createElement(EyeIcon, null);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: () => setWatching(!watching),
+    trailingIcon: icon
+  }, args), "Watch");
+};
+WatchIconButton.displayName = "WatchIconButton";
+export const caretButton = ({ ...args
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    trailingIcon: TriangleDownIcon
+  }, args), "Dropdown");
+};
+caretButton.displayName = "caretButton";
+export const blockButton = ({ ...args
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    sx: {
+      width: '100%'
+    }
+  }), "Block");
+};
+blockButton.displayName = "blockButton";
+export const disabledButton = ({ ...args
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true
+  }, args), "Disabled")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true,
+    variant: "danger"
+  }, args), "Disabled")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true,
+    variant: "invisible"
+  }, args), "Disabled")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true,
+    variant: "primary"
+  }, args), "Disabled")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true,
+    variant: "outline"
+  }, args), "Disabled")), /*#__PURE__*/React.createElement(Box, {
+    mb: 2
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: true,
+    icon: () => /*#__PURE__*/React.createElement(XIcon, null)
+  }, args))));
+};

package/package-lock.json

@@ -9,7 +9,7 @@
       "version": "31.1.0",
       "license": "MIT",
       "dependencies": {
-        "@primer/octicons-react": "^13.0.0",
+        "@primer/octicons-react": "^16.1.0",
         "@primer/primitives": "6.1.0",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
@@ -7550,9 +7550,9 @@
       }
     },
     "node_modules/@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "engines": {
         "node": ">=8"
       },
@@ -43345,9 +43345,9 @@
       "dev": true
     },
     "@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "requires": {}
     },
     "@primer/primitives": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.6afeaa37",
+  "version": "31.2.0-rc.76ed571d",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,7 +20,8 @@
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "release": "npm run build && changeset publish",
-    "size": "size-limit"
+    "size": "size-limit",
+    "typecheck": "npx tsc --project tsconfig.json"
   },
   "repository": "primer/react",
   "keywords": [
@@ -43,7 +44,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
+    "@primer/octicons-react": "^16.1.0",
     "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",

package/script/build

@@ -14,7 +14,7 @@ npx cross-env NODE_ENV=production rollup -c
 npx cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions ".js,.ts,.jsx,.tsx"
 npx babel src --out-dir lib-esm --extensions ".js,.ts,.jsx,.tsx"
 
-# Type check
+# Build type declarations
 npx tsc --project tsconfig.build.json
 
 # Copy type declarations

package/src/Dialog/Dialog.tsx

@@ -372,6 +372,7 @@ const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
           <ButtonElement
             key={index}
             {...buttonProps}
+            variant={buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}

package/src/NewButton/button-counter.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {SxProp} from '../sx'
+import CounterLabel from '../CounterLabel'
+
+export type CounterProps = {
+  children: number
+} & SxProp
+
+export const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
+  return (
+    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
+      {children}
+    </CounterLabel>
+  )
+}