@primer/components 0.0.0-2021926645 → 0.0.0-202192724324

package/lib/Dropdown.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Button = _interopRequireDefault(require("./Button"));
+var _NewButton = _interopRequireDefault(require("./NewButton"));
 
 var _constants = require("./constants");
 
@@ -51,10 +51,11 @@ const DropdownButton = ({
   children,
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_NewButton.default, _extends({
     as: "summary",
-    "aria-haspopup": "true"
-  }, rest), children, /*#__PURE__*/_react.default.createElement(DropdownCaret, null));
+    "aria-haspopup": "true",
+    caret: true
+  }, rest), children);
 };
 
 DropdownButton.displayName = "DropdownButton";
@@ -79,7 +80,7 @@ DropdownMenu.defaultProps = {
 };
 DropdownMenu.displayName = 'Dropdown.Menu';
 DropdownItem.displayName = 'Dropdown.Item';
-DropdownButton.defaultProps = _Button.default.defaultProps;
+DropdownButton.defaultProps = _NewButton.default.defaultProps;
 DropdownButton.displayName = 'Dropdown.Button';
 DropdownCaret.displayName = 'Dropdown.Caret';
 Dropdown.defaultProps = _Details.default.defaultProps;

package/lib-esm/ActionMenu.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import { List } from './ActionList/List';
 import { Item } from './ActionList/Item';
 import { Divider } from './ActionList/Divider';
-import Button from './Button';
+import NewButton from './NewButton';
 import React, { useCallback, useMemo } from 'react';
 import { AnchoredOverlay } from './AnchoredOverlay';
 import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
@@ -18,7 +18,7 @@ ActionMenuItem.displayName = 'ActionMenu.Item';
 
 const ActionMenuBase = ({
   anchorContent,
-  renderAnchor = props => /*#__PURE__*/React.createElement(Button, props),
+  renderAnchor = props => /*#__PURE__*/React.createElement(NewButton, props),
   anchorRef: externalAnchorRef,
   onAction,
   open,

package/lib-esm/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps } from '../Button';
+import { ButtonProps } from '../NewButton';
 import { SxProp } from '../sx';
 /**
  * Props that characterize a button to be rendered into the footer of
@@ -9,7 +9,7 @@ export declare type DialogButtonProps = ButtonProps & {
     /**
      * The type of Button element to use
      */
-    buttonType?: 'normal' | 'primary' | 'danger';
+    buttonType?: 'default' | 'primary' | 'danger' | 'invisible';
     /**
      * The Button's inner text
      */
@@ -160,8 +160,8 @@ export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
     Buttons: React.FC<{
         buttons: DialogButtonProps[];
     }>;
-    CloseButton: React.FC<{
-        onClose: () => void;
-    }>;
+    CloseButton: ({ onClose }: {
+        onClose: any;
+    }) => JSX.Element;
 };
 export {};

package/lib-esm/Dialog/Dialog.js

@@ -2,13 +2,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import Button, { ButtonPrimary, ButtonDanger } from '../Button';
+import NewButton from '../NewButton';
 import Box from '../Box';
 import { get, COMMON, POSITION } from '../constants';
 import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import sx from '../sx';
-import StyledOcticon from '../StyledOcticon';
 import { XIcon } from '@primer/octicons-react';
 import { useFocusZone } from '../hooks/useFocusZone';
 import { FocusKeys } from '../behaviors/focusZone';
@@ -184,11 +183,7 @@ const Footer = styled(Box).attrs({
   displayName: "Dialog__Footer",
   componentId: "sc-11pkgky-6"
 })(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.default'), get('space.3'), get('space.1'));
-const buttonTypes = {
-  normal: Button,
-  primary: ButtonPrimary,
-  danger: ButtonDanger
-};
+const buttonTypes = ['default', 'primary', 'danger'];
 
 const Buttons = ({
   buttons
@@ -211,33 +206,30 @@ const Buttons = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,
-      buttonType = 'normal',
+      buttonType = 'default',
       autoFocus = false,
       ...buttonProps
     } = dialogButtonProps;
-    const ButtonElement = buttonTypes[buttonType];
-    return /*#__PURE__*/React.createElement(ButtonElement, _extends({
+    return /*#__PURE__*/React.createElement(NewButton, _extends({
       key: index
     }, buttonProps, {
+      variant: buttonType,
       ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
     }), content);
   }));
 };
 
-const DialogCloseButton = styled(Button).withConfig({
-  displayName: "Dialog__DialogCloseButton",
-  componentId: "sc-11pkgky-7"
-})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.fg.muted'), get('space.2'));
-
 const CloseButton = ({
   onClose
 }) => {
-  return /*#__PURE__*/React.createElement(DialogCloseButton, {
-    "aria-label": "Close",
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: XIcon
-  }));
+  return /*#__PURE__*/React.createElement(NewButton, {
+    sx: {
+      alignSelf: 'flex-start'
+    },
+    variant: "invisible",
+    onClick: onClose,
+    icon: () => /*#__PURE__*/React.createElement(XIcon, null)
+  });
 };
 
 CloseButton.displayName = "CloseButton";