carbon-react 121.2.0 → 122.0.1

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
-export interface ButtonProps extends SpaceProps {
+export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * Prop to specify the aria-label attribute of the component
      * Defaults to the iconType, when the component has only an icon

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

@@ -176,6 +176,9 @@ Button.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "destructive": PropTypes.bool,
   "disabled": PropTypes.bool,
   "forwardRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
@@ -523,6 +526,9 @@ ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "destructive": PropTypes.bool,
   "disabled": PropTypes.bool,
   "forwardRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/esm/components/link/link.style.js

@@ -122,11 +122,11 @@ const StyledLink = styled.span`
 
       a,
       button {
-        text-decoration: underline;
+        text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
         > ${StyledIcon} {
-          display: inline-block;
+          display: ${hasContent ? "inline-block" : "inline"};
           position: relative;
           vertical-align: middle;
           ${iconAlign === "left" && css`

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

@@ -25,7 +25,7 @@ export interface PodProps extends MarginProps {
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */
-    onEdit?: string | Record<string, unknown> | ((ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void);
+    onEdit?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies a delete action to the pod */
     onDelete?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies an undo action to the pod in soft delete state. */

package/esm/components/pod/pod.component.js

@@ -1,13 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import Logger from "../../__internal__/utils/logger";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
-let deprecationOnEditStringWarnTriggered = false;
-let deprecationOnEditObjectWarnTriggered = false;
 const Pod = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -31,14 +28,6 @@ const Pod = /*#__PURE__*/React.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
-  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
-    deprecationOnEditStringWarnTriggered = true;
-    Logger.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
-  if (!deprecationOnEditObjectWarnTriggered && typeof onEdit === "object") {
-    deprecationOnEditObjectWarnTriggered = true;
-    Logger.deprecate("Support for passing objects to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
   const [isEditFocused, setEditFocused] = useState(false);
   const [isEditHovered, setEditHovered] = useState(false);
   const [isDeleteFocused, setDeleteFocused] = useState(false);
@@ -58,10 +47,8 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     onMouseLeave: () => setEditHovered(false),
     onFocus: () => setEditFocused(true),
     onBlur: () => setEditFocused(false),
-    ...(typeof onEdit === "function" && {
-      onClick: processPodAction(onEdit),
-      onKeyDown: processPodAction(onEdit)
-    })
+    onClick: onEdit && processPodAction(onEdit),
+    onKeyDown: onEdit && processPodAction(onEdit)
   };
   return /*#__PURE__*/React.createElement(StyledPod, _extends({
     alignTitle: alignTitle,
@@ -131,9 +118,7 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant
-  }, typeof onEdit === "string" ? {
-    href: onEdit
-  } : onEdit), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     type: "edit"
   })), !softDelete && onDelete && /*#__PURE__*/React.createElement(StyledDeleteButton, {
     "aria-label": l.actions.delete(),
@@ -320,7 +305,7 @@ Pod.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "onDelete": PropTypes.func,
-  "onEdit": PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
+  "onEdit": PropTypes.func,
   "onUndo": PropTypes.func,
   "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": PropTypes.bool,

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

@@ -32,7 +32,7 @@ interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
 interface StyledEditActionProps extends CommonPodButtonProps {
     displayOnlyOnHover?: boolean;
 }
-declare const StyledEditAction: import("styled-components").StyledComponent<"a", any, StyledEditActionProps, never>;
+declare const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledEditActionProps, never>;
 declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {

package/esm/components/pod/pod.style.js

@@ -152,7 +152,7 @@ const actionButtonBackgrounds = {
   transparent: "var(--colorsActionMajorTransparent)",
   tile: "var(--colorsActionMajorYang100)"
 };
-const StyledEditAction = styled.a`
+const StyledEditAction = styled(IconButton)`
   && {
     ${({
   displayOnlyOnHover,

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
-export interface ButtonProps extends SpaceProps {
+export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * Prop to specify the aria-label attribute of the component
      * Defaults to the iconType, when the component has only an icon

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

@@ -185,6 +185,9 @@ Button.propTypes = {
   "aria-label": _propTypes.default.string,
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "destructive": _propTypes.default.bool,
   "disabled": _propTypes.default.bool,
   "forwardRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
@@ -533,6 +536,9 @@ ButtonWithForwardRef.propTypes = {
   "aria-label": _propTypes.default.string,
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "destructive": _propTypes.default.bool,
   "disabled": _propTypes.default.bool,
   "forwardRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({

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

@@ -131,11 +131,11 @@ const StyledLink = _styledComponents.default.span`
 
       a,
       button {
-        text-decoration: underline;
+        text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
         > ${_icon.default} {
-          display: inline-block;
+          display: ${hasContent ? "inline-block" : "inline"};
           position: relative;
           vertical-align: middle;
           ${iconAlign === "left" && (0, _styledComponents.css)`

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

@@ -25,7 +25,7 @@ export interface PodProps extends MarginProps {
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */
-    onEdit?: string | Record<string, unknown> | ((ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void);
+    onEdit?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies a delete action to the pod */
     onDelete?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies an undo action to the pod in soft delete state. */

package/lib/components/pod/pod.component.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _pod = require("./pod.style");
 var _icon = _interopRequireDefault(require("../icon"));
@@ -15,8 +14,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 deprecationOnEditStringWarnTriggered = false;
-let deprecationOnEditObjectWarnTriggered = false;
 const Pod = /*#__PURE__*/_react.default.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -40,14 +37,6 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
-  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
-    deprecationOnEditStringWarnTriggered = true;
-    _logger.default.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
-  if (!deprecationOnEditObjectWarnTriggered && typeof onEdit === "object") {
-    deprecationOnEditObjectWarnTriggered = true;
-    _logger.default.deprecate("Support for passing objects to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
   const [isEditFocused, setEditFocused] = (0, _react.useState)(false);
   const [isEditHovered, setEditHovered] = (0, _react.useState)(false);
   const [isDeleteFocused, setDeleteFocused] = (0, _react.useState)(false);
@@ -67,10 +56,8 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     onMouseLeave: () => setEditHovered(false),
     onFocus: () => setEditFocused(true),
     onBlur: () => setEditFocused(false),
-    ...(typeof onEdit === "function" && {
-      onClick: processPodAction(onEdit),
-      onKeyDown: processPodAction(onEdit)
-    })
+    onClick: onEdit && processPodAction(onEdit),
+    onKeyDown: onEdit && processPodAction(onEdit)
   };
   return /*#__PURE__*/_react.default.createElement(_pod.StyledPod, _extends({
     alignTitle: alignTitle,
@@ -140,9 +127,7 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant
-  }, typeof onEdit === "string" ? {
-    href: onEdit
-  } : onEdit), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "edit"
   })), !softDelete && onDelete && /*#__PURE__*/_react.default.createElement(_pod.StyledDeleteButton, {
     "aria-label": l.actions.delete(),
@@ -329,7 +314,7 @@ Pod.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "onDelete": _propTypes.default.func,
-  "onEdit": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
+  "onEdit": _propTypes.default.func,
   "onUndo": _propTypes.default.func,
   "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": _propTypes.default.bool,

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

@@ -32,7 +32,7 @@ interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
 interface StyledEditActionProps extends CommonPodButtonProps {
     displayOnlyOnHover?: boolean;
 }
-declare const StyledEditAction: import("styled-components").StyledComponent<"a", any, StyledEditActionProps, never>;
+declare const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledEditActionProps, never>;
 declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {

package/lib/components/pod/pod.style.js

@@ -166,7 +166,7 @@ const actionButtonBackgrounds = {
   transparent: "var(--colorsActionMajorTransparent)",
   tile: "var(--colorsActionMajorYang100)"
 };
-const StyledEditAction = _styledComponents.default.a`
+const StyledEditAction = (0, _styledComponents.default)(_iconButton.default)`
   && {
     ${({
   displayOnlyOnHover,

package/package.json

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