carbon-react 123.4.2 → 123.4.4

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -49,7 +49,7 @@ const InputIconToggle = ({
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }
-  if (type && !(disabled || readOnly)) {
+  if (type) {
     return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
       size: size,
       onClick: onClick,
@@ -57,8 +57,11 @@ const InputIconToggle = ({
       onBlur: onBlur,
       onMouseDown: onMouseDown,
       tabIndex: iconTabIndex,
-      "data-element": "input-icon-toggle"
+      "data-element": "input-icon-toggle",
+      disabled: disabled,
+      readOnly: readOnly
     }, /*#__PURE__*/React.createElement(Icon, {
+      disabled: disabled || readOnly,
       type: type
     }));
   }

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -2,6 +2,8 @@
 import { ValidationProps } from "../validations";
 export interface InputIconToggleStyleProps extends ValidationProps {
     size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    readOnly?: boolean;
     onClick?: (event: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
 }
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -26,6 +26,18 @@ const InputIconToggleStyle = styled.span.attrs(({
     width: ${sizes[size].height};
   `}
 
+  ${({
+  disabled
+}) => disabled && css`
+      cursor: not-allowed;
+    `}
+  
+  ${({
+  readOnly
+}) => readOnly && css`
+      cursor: default;
+    `}
+
   ${({
   theme
 }) => `

package/esm/components/button/button.style.js

@@ -6,7 +6,7 @@ import StyledIcon from "../icon/icon.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 function additionalIconStyle(iconType) {
   if (iconType === "services") return "6px";
-  return "16px";
+  return "20px";
 }
 function stylingForIconOnly(size) {
   let dimension = "";
@@ -97,6 +97,7 @@ const StyledButton = styled.button`
       margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
       margin-bottom: ${iconOnly ? "1px" : "0px"};
       height: ${additionalIconStyle(iconType)};
+      width: 20px;
       svg {
         margin-top: 0;
       }

package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -56,7 +56,7 @@ const InputIconToggle = ({
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }
-  if (type && !(disabled || readOnly)) {
+  if (type) {
     return /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
       size: size,
       onClick: onClick,
@@ -64,8 +64,11 @@ const InputIconToggle = ({
       onBlur: onBlur,
       onMouseDown: onMouseDown,
       tabIndex: iconTabIndex,
-      "data-element": "input-icon-toggle"
+      "data-element": "input-icon-toggle",
+      disabled: disabled,
+      readOnly: readOnly
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      disabled: disabled || readOnly,
       type: type
     }));
   }

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -2,6 +2,8 @@
 import { ValidationProps } from "../validations";
 export interface InputIconToggleStyleProps extends ValidationProps {
     size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    readOnly?: boolean;
     onClick?: (event: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
 }
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -35,6 +35,18 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
     width: ${_inputSizes.default[size].height};
   `}
 
+  ${({
+  disabled
+}) => disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+    `}
+  
+  ${({
+  readOnly
+}) => readOnly && (0, _styledComponents.css)`
+      cursor: default;
+    `}
+
   ${({
   theme
 }) => `

package/lib/components/button/button.style.js

@@ -15,7 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 additionalIconStyle(iconType) {
   if (iconType === "services") return "6px";
-  return "16px";
+  return "20px";
 }
 function stylingForIconOnly(size) {
   let dimension = "";
@@ -106,6 +106,7 @@ const StyledButton = _styledComponents.default.button`
       margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
       margin-bottom: ${iconOnly ? "1px" : "0px"};
       height: ${additionalIconStyle(iconType)};
+      width: 20px;
       svg {
         margin-top: 0;
       }

package/package.json

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