carbon-react 102.2.0 → 102.4.2

package/lib/components/alert/alert.component.js

@@ -40,7 +40,7 @@ Alert.propTypes = {
   height: _propTypes.default.string,
 
   /** Title displayed at top of Alert */
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  title: _propTypes.default.node,
 
   /** Subtitle displayed at top of Alert */
   subtitle: _propTypes.default.string,

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

@@ -200,7 +200,7 @@ Dialog.propTypes = {
   /** Dialog content */
   children: _propTypes.default.node,
 
-  /** Custom classname  */
+  /** Custom class name  */
   className: _propTypes.default.string,
 
   /** Controls the open state of the component */

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Modal, { ModalProps } from "../modal/modal";
+import { ModalProps } from "../modal/modal";
 
 export interface DialogProps extends ModalProps {
   /* Disables auto focus functionality on child elements */
@@ -24,6 +24,6 @@ export interface DialogProps extends ModalProps {
   title?: React.ReactNode;
 }
 
-declare class Dialog extends Modal<DialogProps> {}
+declare function Dialog(props: DialogProps): JSX.Element;
 
 export default Dialog;

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -41,7 +41,6 @@ const DismissibleBox = ({
   p: "20px 24px 20px 20px",
   hasBorderLeftHighlight: hasBorderLeftHighlight
 }, rest, {
-  minWidth: "600px",
   display: "flex",
   justifyContent: "space-between"
 }), children, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_iconButton.default, {

package/lib/components/dismissible-box/dismissible-box.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { BoxProps } from "components/box/box";
 
-type BorderOptions = "top" | "bottom" | "right" | "none";
-
-export interface DismissibleBoxProps extends SpaceProps {
+export interface DismissibleBoxProps
+  extends Omit<BoxProps, "display" | "justifyContent"> {
   /** Flag to control whether the thicker left border highlight should be rendered */
   hasBorderLeftHighlight?: boolean;
   /** The content to render in the component */

package/lib/components/link/link.style.js

@@ -37,8 +37,8 @@ const StyledLink = _styledComponents.default.span`
         line-height: 36px;
         left: -999em;
         z-index: ${theme.zIndex.aboveAll};
-        box-shadow: inset 0 0 0 2px ${theme.colors.primary};
-        border: 2px solid ${theme.colors.white};
+        box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
+        border: 2px solid var(--colorsYang100);
       }
 
       a:focus {
@@ -51,38 +51,38 @@ const StyledLink = _styledComponents.default.span`
   button {
       font-size: ${isSkipLink ? "16px" : "14px"};
       text-decoration: underline;
-      color: ${isSkipLink ? theme.text.color : theme.colors.primary};
+      color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor500)"};
       display: inline-block;
       ${_icon.default} {
         display: inline-block;
         position: relative;
         vertical-align: middle;
         ${iconAlign === "left" && (0, _styledComponents.css)`
-          margin-right: ${hasContent ? "5px" : 0};
+          margin-right: ${hasContent ? "var(--spacing100)" : 0};
         `}
         ${iconAlign === "right" && (0, _styledComponents.css)`
           margin-right: 0;
-          margin-left: ${hasContent ? "5px" : 0};
+          margin-left: ${hasContent ? "var(--spacing100)" : 0};
         `}
       }
 
       &:hover {
         cursor: pointer;
-        color: ${isSkipLink ? theme.text.color : theme.colors.secondary};
+        color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor600)"};
       }
 
       &:focus {
-        color: ${theme.text.color};
-        background-color: ${isSkipLink ? theme.colors.white : theme.colors.focusedLinkBackground};
+        color: var(--colorsYin090);
+        background-color: ${isSkipLink ? "var(--colorsYang100)" : "var(--colorsSemanticFocus250)"};
         outline: none;
       }
 
       ${disabled && (0, _styledComponents.css)`
-        color: ${theme.disabled.text};
+        color: var(--colorsYin065);
         &:hover,
         &:focus {
           cursor: not-allowed;
-          color: ${theme.disabled.text};
+          color: var(--colorsYin065);
         }
       `}
     }

package/lib/components/message/message.style.js

@@ -21,18 +21,21 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const messageVariants = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticNeutral500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const MessageStyle = _styledComponents.default.div`
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-content: center;
   border: 1px solid ${({
-  theme,
   variant
-}) => theme.colors[variant]};
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+}) => messageVariants[variant]};
+  background-color: var(--colorsUtilityYang100);
   min-height: 38px;
 
   ${({

package/lib/components/message/type-icon/type-icon.style.js

@@ -9,20 +9,23 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const messageVariants = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticNeutral500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const TypeIconStyle = _styledComponents.default.div`
   align-items: center;
   background-color: ${({
-  theme,
   variant
-}) => theme.colors[variant]};
+}) => messageVariants[variant]};
   display: flex;
   justify-content: center;
   line-height: 100%;
@@ -30,28 +33,24 @@ const TypeIconStyle = _styledComponents.default.div`
   text-align: center;
   span {
     &:before {
-      color: ${({
-  theme
-}) => theme.colors.white};
+      color: var(--colorsUtilityYang100);
     }
   }
 
   ${({
-  theme,
   transparent,
   variant
 }) => transparent && (0, _styledComponents.css)`
       background-color: transparent;
       span {
         &:before {
-          color: ${theme.colors[variant]};
+          color: ${messageVariants[variant]};
         }
       }
     `}
 `;
 TypeIconStyle.defaultProps = {
   variant: "info",
-  theme: _base.default,
   transparent: false
 };
 TypeIconStyle.propTypes = {

package/lib/components/modal/modal.d.ts

@@ -1,21 +1,24 @@
 import * as React from "react";
 
 export interface ModalProps {
+  /** Modal content */
+  children?: React.ReactNode;
   /** The ARIA role to be applied to the modal */
   ariaRole?: string;
   /** Determines if the Esc Key closes the modal */
   disableEscKey?: boolean;
+  /** Determines if the Dialog can be closed */
+  disableClose?: boolean;
   /** Determines if the background is disabled when the modal is open */
   enableBackgroundUI?: boolean;
   /** A custom close event handler */
   onCancel?: (ev: React.KeyboardEvent<HTMLElement>) => void;
   /** Sets the open state of the modal */
   open: boolean;
+  /** Transition time */
+  timeout?: number;
 }
 
-declare class Modal<T extends ModalProps> extends React.Component<
-  T,
-  Record<string, unknown>
-> {}
+declare function Modal(props: ModalProps): JSX.Element;
 
 export default Modal;

package/package.json

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