carbon-react 105.0.2 → 105.1.0

package/esm/components/button/button.component.js

@@ -78,7 +78,7 @@ const Button = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const [internalRef, setInternalRef] = useState(null);

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -27,7 +27,7 @@ const MultiActionButton = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `MultiActionButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const ref = useRef();

package/esm/components/split-button/split-button.component.js

@@ -37,7 +37,7 @@ const SplitButton = ({
   if (!deprecatedWarnTriggered && as) {
     deprecatedWarnTriggered = true;
     Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `SplitButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const theme = useContext(ThemeContext) || baseTheme;

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

@@ -1,7 +1,8 @@
 export default Tile;
-declare function Tile({ as, p, children, orientation, width, ...props }: {
+declare function Tile({ as, variant, p, children, orientation, width, ...props }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
+    variant?: string | undefined;
     p?: number | undefined;
     children: any;
     orientation?: string | undefined;

package/esm/components/tile/tile.component.js

@@ -4,15 +4,24 @@ import React from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledTile, TileContent } from "./tile.style.js";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
 
 const Tile = ({
-  as = "tile",
+  as,
+  variant = "tile",
   p = 3,
   children,
   orientation = "horizontal",
   width,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Tile` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const isHorizontal = () => orientation === "horizontal";
 
   const isVertical = () => orientation === "vertical";
@@ -41,7 +50,7 @@ const Tile = ({
     }), /*#__PURE__*/React.cloneElement(child, childProps));
   });
   return /*#__PURE__*/React.createElement(StyledTile, _extends({
-    tileTheme: as,
+    tileTheme: as || variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -56,6 +65,9 @@ Tile.propTypes = {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as: PropTypes.oneOf(["tile", "transparent"]),
 
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant: PropTypes.oneOf(["tile", "transparent"]),
+
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/esm/components/tile/tile.d.ts

@@ -4,6 +4,8 @@ import { SpaceProps } from "styled-system";
 export interface TileProps extends SpaceProps {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant?: "tile" | "transparent";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

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

@@ -1,7 +1,7 @@
 export default Toast;
 declare function Toast({ as, children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
     children: any;
     className: any;
     id: any;

package/esm/components/toast/toast.component.js

@@ -11,9 +11,11 @@ import IconButton from "../icon-button";
 import ModalManager from "../modal/__internal__/modal-manager";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
 
 const Toast = ({
-  as = "success",
+  as,
   children,
   className,
   id,
@@ -26,6 +28,12 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Toast` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
@@ -74,7 +82,7 @@ const Toast = ({
     if (!open) return null;
     const toastProps = {
       isCenter,
-      variant: variant || as,
+      variant: variant || as || "success",
       id,
       maxWidth
     };

package/lib/components/button/button.component.js

@@ -99,7 +99,7 @@ const Button = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const [internalRef, setInternalRef] = (0, _react.useState)(null);

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -51,7 +51,7 @@ const MultiActionButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `MultiActionButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const ref = (0, _react.useRef)();

package/lib/components/split-button/split-button.component.js

@@ -67,7 +67,7 @@ const SplitButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `SplitButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;

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

@@ -1,7 +1,8 @@
 export default Tile;
-declare function Tile({ as, p, children, orientation, width, ...props }: {
+declare function Tile({ as, variant, p, children, orientation, width, ...props }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
+    variant?: string | undefined;
     p?: number | undefined;
     children: any;
     orientation?: string | undefined;

package/lib/components/tile/tile.component.js

@@ -13,18 +13,30 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tileStyle = require("./tile.style.js");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+let deprecatedWarnTriggered = false;
+
 const Tile = ({
-  as = "tile",
+  as,
+  variant = "tile",
   p = 3,
   children,
   orientation = "horizontal",
   width,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Tile` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const isHorizontal = () => orientation === "horizontal";
 
   const isVertical = () => orientation === "vertical";
@@ -54,7 +66,7 @@ const Tile = ({
   });
 
   return /*#__PURE__*/_react.default.createElement(_tileStyle.StyledTile, _extends({
-    tileTheme: as,
+    tileTheme: as || variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -69,6 +81,9 @@ Tile.propTypes = {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as: _propTypes.default.oneOf(["tile", "transparent"]),
 
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant: _propTypes.default.oneOf(["tile", "transparent"]),
+
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/lib/components/tile/tile.d.ts

@@ -4,6 +4,8 @@ import { SpaceProps } from "styled-system";
 export interface TileProps extends SpaceProps {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant?: "tile" | "transparent";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

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

@@ -1,7 +1,7 @@
 export default Toast;
 declare function Toast({ as, children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
     children: any;
     className: any;
     id: any;

package/lib/components/toast/toast.component.js

@@ -27,6 +27,8 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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; }
@@ -35,8 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+let deprecatedWarnTriggered = false;
+
 const Toast = ({
-  as = "success",
+  as,
   children,
   className,
   id,
@@ -49,6 +53,13 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Toast` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
@@ -100,7 +111,7 @@ const Toast = ({
     if (!open) return null;
     const toastProps = {
       isCenter,
-      variant: variant || as,
+      variant: variant || as || "success",
       id,
       maxWidth
     };

package/package.json

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