@primer/components 0.0.0-20219266052 → 0.0.0-202192723547

package/lib/ActionList/Item.d.ts

@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib/ActionList/Item.js

@@ -187,6 +187,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -278,7 +279,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));

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";

package/lib-esm/ActionList/Item.d.ts

@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib-esm/ActionList/Item.js

@@ -154,6 +154,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -245,7 +246,10 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));

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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20219266052",
+  "version": "0.0.0-202192723547",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",