@primer/components 0.0.0-2021926645 → 0.0.0-202192724324

package/lib/ActionMenu.js

@@ -11,7 +11,7 @@ var _Item = require("./ActionList/Item");
 
 var _Divider = require("./ActionList/Divider");
 
-var _Button = _interopRequireDefault(require("./Button"));
+var _NewButton = _interopRequireDefault(require("./NewButton"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -38,7 +38,7 @@ ActionMenuItem.displayName = 'ActionMenu.Item';
 
 const ActionMenuBase = ({
   anchorContent,
-  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_Button.default, props),
+  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_NewButton.default, props),
   anchorRef: externalAnchorRef,
   onAction,
   open,

package/lib/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/Dialog/Dialog.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Button = _interopRequireWildcard(require("../Button"));
+var _NewButton = _interopRequireDefault(require("../NewButton"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -21,8 +21,6 @@ var _useFocusTrap = require("../hooks/useFocusTrap");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
 var _octiconsReact = require("@primer/octicons-react");
 
 var _useFocusZone = require("../hooks/useFocusZone");
@@ -213,11 +211,7 @@ const Footer = (0, _styledComponents.default)(_Box.default).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;}}"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'));
-const buttonTypes = {
-  normal: _Button.default,
-  primary: _Button.ButtonPrimary,
-  danger: _Button.ButtonDanger
-};
+const buttonTypes = ['default', 'primary', 'danger'];
 
 const Buttons = ({
   buttons
@@ -240,33 +234,30 @@ const Buttons = ({
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,
-      buttonType = 'normal',
+      buttonType = 'default',
       autoFocus = false,
       ...buttonProps
     } = dialogButtonProps;
-    const ButtonElement = buttonTypes[buttonType];
-    return /*#__PURE__*/_react.default.createElement(ButtonElement, _extends({
+    return /*#__PURE__*/_react.default.createElement(_NewButton.default, _extends({
       key: index
     }, buttonProps, {
+      variant: buttonType,
       ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
     }), content);
   }));
 };
 
-const DialogCloseButton = (0, _styledComponents.default)(_Button.default).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;"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'));
-
 const CloseButton = ({
   onClose
 }) => {
-  return /*#__PURE__*/_react.default.createElement(DialogCloseButton, {
-    "aria-label": "Close",
-    onClick: onClose
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.XIcon
-  }));
+  return /*#__PURE__*/_react.default.createElement(_NewButton.default, {
+    sx: {
+      alignSelf: 'flex-start'
+    },
+    variant: "invisible",
+    onClick: onClose,
+    icon: () => /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, null)
+  });
 };
 
 CloseButton.displayName = "CloseButton";