carbon-react 104.9.0 → 104.10.0

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -2,7 +2,7 @@ export const StyledAdvancedColorPickerWrapper: import("styled-components").Style
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 export const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogStyle: import("styled-components").StyledComponent<{
-    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
         [x: string]: any;
         className: any;
         children: any;
@@ -20,6 +20,7 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableClose: any;
         help: any;
         role?: string | undefined;
+        contentPadding?: {} | undefined;
     }): JSX.Element;
     propTypes: {
         "aria-describedby": import("prop-types").Requireable<string>;
@@ -43,6 +44,11 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableAutoFocus: import("prop-types").Requireable<boolean>;
         bespokeFocusTrap: import("prop-types").Requireable<(...args: any[]) => any>;
         role: import("prop-types").Requireable<string>;
+        contentPadding: import("prop-types").Requireable<import("prop-types").InferProps<{
+            p: import("prop-types").Requireable<number>;
+            px: import("prop-types").Requireable<number>;
+            py: import("prop-types").Requireable<number>;
+        }>>;
     };
     defaultProps: {
         size: string;

package/lib/components/dialog/dialog.component.d.ts

@@ -1,5 +1,5 @@
 export default Dialog;
-declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
     [x: string]: any;
     className: any;
     children: any;
@@ -17,6 +17,7 @@ declare function Dialog({ className, children, open, height, size, title, disabl
     disableClose: any;
     help: any;
     role?: string | undefined;
+    contentPadding?: {} | undefined;
 }): JSX.Element;
 declare namespace Dialog {
     const propTypes: {
@@ -28,7 +29,7 @@ declare namespace Dialog {
          */
         "aria-label": PropTypes.Requireable<string>;
         /**
-         * Prop to specify the aria-labeledby property of the Dialog component
+         * Prop to specify the aria-labelledby property of the Dialog component
          * To be used when the title prop is a custom React Node,
          * or the component is labelled by an internal element other than the title.
          */
@@ -71,6 +72,12 @@ declare namespace Dialog {
         bespokeFocusTrap: PropTypes.Requireable<(...args: any[]) => any>;
         /** The ARIA role to be applied to the Dialog container */
         role: PropTypes.Requireable<string>;
+        /** Padding to be set on the Dialog content */
+        contentPadding: PropTypes.Requireable<PropTypes.InferProps<{
+            p: PropTypes.Requireable<number>;
+            px: PropTypes.Requireable<number>;
+            py: PropTypes.Requireable<number>;
+        }>>;
     };
     namespace defaultProps {
         const size: string;

package/lib/components/dialog/dialog.component.js

@@ -56,6 +56,7 @@ const Dialog = ({
   disableClose,
   help,
   role = "dialog",
+  contentPadding = {},
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -190,9 +191,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, {
+  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, _react.default.Children.map(children, child => {
+  }, contentPadding), _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _form.default) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         dialogRef
@@ -214,7 +215,7 @@ Dialog.propTypes = {
   "aria-label": _propTypes.default.string,
 
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -272,7 +273,14 @@ Dialog.propTypes = {
   bespokeFocusTrap: _propTypes.default.func,
 
   /** The ARIA role to be applied to the Dialog container */
-  role: _propTypes.default.string
+  role: _propTypes.default.string,
+
+  /** Padding to be set on the Dialog content */
+  contentPadding: _propTypes.default.shape({
+    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  })
 };
 Dialog.defaultProps = {
   size: "medium",

package/lib/components/dialog/dialog.config.d.ts

@@ -1,2 +1,5 @@
 export const DIALOG_SIZES: string[];
 export const TOP_MARGIN: 20;
+export const CONTENT_TOP_PADDING: 24;
+export const HORIZONTAL_PADDING: 32;
+export const CONTENT_BOTTOM_PADDING: 30;

package/lib/components/dialog/dialog.config.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
+exports.CONTENT_BOTTOM_PADDING = exports.HORIZONTAL_PADDING = exports.CONTENT_TOP_PADDING = exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
 const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.DIALOG_SIZES = DIALOG_SIZES;
 const TOP_MARGIN = 20;
-exports.TOP_MARGIN = TOP_MARGIN;
+exports.TOP_MARGIN = TOP_MARGIN;
+const CONTENT_TOP_PADDING = 24;
+exports.CONTENT_TOP_PADDING = CONTENT_TOP_PADDING;
+const HORIZONTAL_PADDING = 32;
+exports.HORIZONTAL_PADDING = HORIZONTAL_PADDING;
+const CONTENT_BOTTOM_PADDING = 30;
+exports.CONTENT_BOTTOM_PADDING = CONTENT_BOTTOM_PADDING;

package/lib/components/dialog/dialog.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
 import { ModalProps } from "../modal/modal";
 
+type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+interface ContentPaddingInterface {
+  p?: PaddingValues;
+  py?: PaddingValues;
+  px?: PaddingValues;
+}
+
 export type DialogSizes =
   | "auto"
   | "extra-small"
@@ -20,7 +28,7 @@ export interface DialogProps extends ModalProps {
    */
   "aria-label"?: string;
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -49,6 +57,8 @@ export interface DialogProps extends ModalProps {
   title?: React.ReactNode;
   /** The ARIA role to be applied to the Dialog container */
   role?: string;
+  /** Padding to be set on the Dialog content */
+  contentPadding?: ContentPaddingInterface;
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

package/lib/components/dialog/dialog.style.d.ts

@@ -1,4 +1,7 @@
 export const DialogStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {
+    py: any;
+    p: any;
+}, never>;

package/lib/components/dialog/dialog.style.js

@@ -7,12 +7,18 @@ exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTit
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
+var _dialog = require("./dialog.config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -29,8 +35,51 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const HORIZONTAL_PADDING = 35;
-const CONTENT_BOTTOM_PADDING = 30;
+
+const calculateWidthValue = props => {
+  const {
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const paddingValue = paddingLeft ?? paddingRight ?? padding;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+};
+
+const calculateFormSpacingValues = (props, isFormContent) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const spacingTopValue = paddingTop ?? padding ?? _dialog.CONTENT_TOP_PADDING;
+  const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
+  const spacingLeftValue = paddingLeft ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  return {
+    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
+    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    ...(isFormContent && {
+      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "padding-top": spacingTopValue,
+      "padding-bottom": spacingBottomValue,
+      "padding-left": spacingLeftValue,
+      "padding-right": spacingRightValue
+    }),
+    ...(!isFormContent && {
+      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
+      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+    })
+  };
+};
+
+const calculatePaddingTopInnerContent = ({
+  py,
+  p
+}) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
+
 const DialogStyle = _styledComponents.default.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
@@ -62,7 +111,7 @@ const DialogStyle = _styledComponents.default.div`
   dialogHeight
 }) => dialogHeight && (0, _styledComponents.css)`
       height: ${dialogHeight}px;
-    `};
+    `}
 
   ${_form.StyledForm} {
     padding-bottom: 0px;
@@ -70,21 +119,12 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    padding-right: ${HORIZONTAL_PADDING}px;
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-top: 20px;
-    margin-right: -${HORIZONTAL_PADDING}px;
-    margin-left: -${HORIZONTAL_PADDING}px;
-    margin-top: -20px;
+    ${props => calculateFormSpacingValues(props, true)}
   }
 
   ${_form.StyledFormFooter}.sticky {
-    margin-left: -${HORIZONTAL_PADDING}px;
-    bottom: -${CONTENT_BOTTOM_PADDING}px;
-    margin-bottom: -${CONTENT_BOTTOM_PADDING}px;
-    width: calc(100% + ${2 * HORIZONTAL_PADDING}px);
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-right: ${HORIZONTAL_PADDING}px;
+    width: calc(100% + ${calculateWidthValue}px);
+    ${props => calculateFormSpacingValues(props, false)}
   }
 
   > ${_iconButton.default} {
@@ -101,7 +141,7 @@ const DialogStyle = _styledComponents.default.div`
 `;
 exports.DialogStyle = DialogStyle;
 const DialogTitleStyle = _styledComponents.default.div`
-  padding: 23px ${HORIZONTAL_PADDING}px 0;
+  padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
   showCloseIcon
@@ -133,12 +173,19 @@ const DialogContentStyle = _styledComponents.default.div`
   overflow-y: auto;
   width: 100%;
   flex: 1;
-  padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
+  padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
+  ${_styledSystem.padding}
 `;
 exports.DialogContentStyle = DialogContentStyle;
 const DialogInnerContentStyle = _styledComponents.default.div`
-  padding-top: 20px;
   position: relative;
   flex: 1;
+  padding-top: ${calculatePaddingTopInnerContent};
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
+exports.DialogInnerContentStyle = DialogInnerContentStyle;
+DialogStyle.defaultProps = {
+  theme: _base.default
+};
+DialogContentStyle.defaultProps = {
+  theme: _base.default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.9.0",
+  "version": "104.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {