carbon-react 124.0.0 → 124.1.0

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

@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
     role?: string;
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
+    /** Change the background color of the content to grey */
+    greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }

package/esm/components/dialog/dialog.component.js

@@ -33,6 +33,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   help,
   role = "dialog",
   contentPadding = {},
+  greyBackground = false,
   focusableContainers,
   topModalOverride,
   ...rest
@@ -175,7 +176,9 @@ const Dialog = /*#__PURE__*/forwardRef(({
     "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
+  }, contentPadding, {
+    backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
     ref: innerContentRef
@@ -227,6 +230,7 @@ Dialog.propTypes = {
       }
     }
   })]),
+  "greyBackground": PropTypes.bool,
   "height": PropTypes.string,
   "help": PropTypes.string,
   "onCancel": PropTypes.func,

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

@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
     topMargin: number;
     size?: DialogSizes;
     dialogHeight?: string;
+    backgroundColor: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {

package/esm/components/dialog/dialog.style.js

@@ -21,7 +21,6 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
 const StyledDialog = styled.div`
-  background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -39,6 +38,12 @@ const StyledDialog = styled.div`
     outline: none;
   }
 
+  ${({
+  backgroundColor
+}) => css`
+      background-color: ${backgroundColor};
+    `}
+
   ${({
   size
 }) => size && css`

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

@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
     role?: string;
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
+    /** Change the background color of the content to grey */
+    greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }

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

@@ -42,6 +42,7 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   help,
   role = "dialog",
   contentPadding = {},
+  greyBackground = false,
   focusableContainers,
   topModalOverride,
   ...rest
@@ -184,7 +185,9 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+  }, contentPadding, {
+    backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
     ref: innerContentRef
@@ -237,6 +240,7 @@ Dialog.propTypes = {
       }
     }
   })]),
+  "greyBackground": _propTypes.default.bool,
   "height": _propTypes.default.string,
   "help": _propTypes.default.string,
   "onCancel": _propTypes.default.func,

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

@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
     topMargin: number;
     size?: DialogSizes;
     dialogHeight?: string;
+    backgroundColor: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {

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

@@ -30,7 +30,6 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
 const StyledDialog = _styledComponents.default.div`
-  background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -48,6 +47,12 @@ const StyledDialog = _styledComponents.default.div`
     outline: none;
   }
 
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+      background-color: ${backgroundColor};
+    `}
+
   ${({
   size
 }) => size && (0, _styledComponents.css)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "124.0.0",
+  "version": "124.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",