carbon-react 128.3.0 → 128.4.0

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

@@ -50,9 +50,9 @@ export interface DialogProps extends ModalProps, TagProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
-    /** Title displayed at top of dialog */
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
+    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the Dialog container */
     role?: string;

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

@@ -147,7 +147,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
     size,
     dialogHeight,
     "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
   const componentTags = {
@@ -247,7 +247,7 @@ if (process.env.NODE_ENV !== "production") {
     "role": PropTypes.string,
     "showCloseIcon": PropTypes.bool,
     "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": PropTypes.string,
+    "subtitle": PropTypes.node,
     "timeout": PropTypes.number,
     "title": PropTypes.node,
     "topModalOverride": PropTypes.bool

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -42,8 +42,8 @@ export interface DialogFullScreenProps extends ModalProps {
     showCloseIcon?: boolean;
     /** Data tag prop bag for close Button */
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
     /** Title displayed at top of dialog */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the DialogFullscreen container */

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -77,7 +77,7 @@ export const DialogFullScreen = ({
   }) : title, headerChildren);
   const ariaProps = {
     "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
-    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
   const componentTags = {

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { MarginProps } from "styled-system";
 import { ProfileSize } from "./profile.config";
-export interface ProfileProps {
+export interface ProfileProps extends MarginProps {
     /** [Legacy] A custom class name for the component */
     className?: string;
     /** Custom source URL */

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

@@ -50,9 +50,9 @@ export interface DialogProps extends ModalProps, TagProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
-    /** Title displayed at top of dialog */
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
+    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the Dialog container */
     role?: string;

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

@@ -156,7 +156,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     size,
     dialogHeight,
     "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
   const componentTags = {
@@ -256,7 +256,7 @@ if (process.env.NODE_ENV !== "production") {
     "role": _propTypes.default.string,
     "showCloseIcon": _propTypes.default.bool,
     "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": _propTypes.default.string,
+    "subtitle": _propTypes.default.node,
     "timeout": _propTypes.default.number,
     "title": _propTypes.default.node,
     "topModalOverride": _propTypes.default.bool

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -42,8 +42,8 @@ export interface DialogFullScreenProps extends ModalProps {
     showCloseIcon?: boolean;
     /** Data tag prop bag for close Button */
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
     /** Title displayed at top of dialog */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the DialogFullscreen container */

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -86,7 +86,7 @@ const DialogFullScreen = ({
   }) : title, headerChildren);
   const ariaProps = {
     "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
-    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
   const componentTags = {

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { MarginProps } from "styled-system";
 import { ProfileSize } from "./profile.config";
-export interface ProfileProps {
+export interface ProfileProps extends MarginProps {
     /** [Legacy] A custom class name for the component */
     className?: string;
     /** Custom source URL */

package/package.json

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