carbon-react 154.1.1 → 154.2.0

package/esm/__internal__/validations/validation-icon.component.d.ts

@@ -1,20 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ValidationProps {
-    /** Indicate that error has occurred
-     * Pass string to display icon, tooltip and red border
-     * Pass true boolean to only display red border
-     */
+    /** Indicate that error has occurred. */
     error?: boolean | string;
-    /** Indicate additional information
-     * Pass string to display icon, tooltip and blue border
-     * Pass true boolean to only display blue border
-     */
+    /** [Legacy] Indicate additional information. */
     info?: boolean | string;
-    /** Indicate that warning has occurred
-     * Pass string to display icon, tooltip and orange border
-     * Pass true boolean to only display orange border
-     */
+    /** Indicate that warning has occurred. */
     warning?: boolean | string;
 }
 type TooltipPositions = "top" | "bottom" | "left" | "right";

package/esm/components/password/password.component.js

@@ -22,7 +22,7 @@ export const Password = ({
     type: visibleInput ? "text" : "password",
     disabled: disabled
   }, rest, tagComponent("password", rest)), /*#__PURE__*/React.createElement(ButtonMinor, {
-    "aria-label": visibleInput ? "Hide password" : "Show password",
+    "aria-label": visibleInput ? l.password?.ariaLabelHide?.() : l.password?.ariaLabelShow?.(),
     "aria-controls": internalInputId.current,
     onClick: () => setPasswordShown(!passwordShown),
     pr: 1,
@@ -32,7 +32,7 @@ export const Password = ({
     size: "small",
     disabled: forceObscurity || disabled,
     isInPassword: true
-  }, visibleInput ? "Hide" : "Show")), /*#__PURE__*/React.createElement(HiddenAriaLive, {
+  }, visibleInput ? l.password?.buttonLabelHide?.() : l.password?.buttonLabelShow?.())), /*#__PURE__*/React.createElement(HiddenAriaLive, {
     role: "status",
     "aria-live": "polite"
   }, visibleInput ? l.password.ariaLiveShownMessage() : l.password.ariaLiveHiddenMessage()));

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

@@ -61,7 +61,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     labelInline?: boolean;
     /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). */
     labelSpacing?: 1 | 2;
-    /** [Legacy] Label width. */
+    /** [Legacy] Label width as a percentage when label is inline. */
     labelWidth?: number;
     /** Specify a callback triggered on change */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;

package/esm/locales/en-gb.js

@@ -146,6 +146,10 @@ const enGB = {
     ofY: count => `of ${count}`
   },
   password: {
+    buttonLabelHide: () => "Hide",
+    buttonLabelShow: () => "Show",
+    ariaLabelHide: () => "Hide password",
+    ariaLabelShow: () => "Show password",
     ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
     ariaLiveHiddenMessage: () => "Your password is currently hidden."
   },

package/esm/locales/locale.d.ts

@@ -121,6 +121,10 @@ interface Locale {
         ofY: (count: string | number) => string;
     };
     password: {
+        buttonLabelHide?: () => string;
+        buttonLabelShow?: () => string;
+        ariaLabelHide?: () => string;
+        ariaLabelShow?: () => string;
         ariaLiveShownMessage: () => string;
         ariaLiveHiddenMessage: () => string;
     };

package/lib/__internal__/validations/validation-icon.component.d.ts

@@ -1,20 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ValidationProps {
-    /** Indicate that error has occurred
-     * Pass string to display icon, tooltip and red border
-     * Pass true boolean to only display red border
-     */
+    /** Indicate that error has occurred. */
     error?: boolean | string;
-    /** Indicate additional information
-     * Pass string to display icon, tooltip and blue border
-     * Pass true boolean to only display blue border
-     */
+    /** [Legacy] Indicate additional information. */
     info?: boolean | string;
-    /** Indicate that warning has occurred
-     * Pass string to display icon, tooltip and orange border
-     * Pass true boolean to only display orange border
-     */
+    /** Indicate that warning has occurred. */
     warning?: boolean | string;
 }
 type TooltipPositions = "top" | "bottom" | "left" | "right";

package/lib/components/password/password.component.js

@@ -31,7 +31,7 @@ const Password = ({
     type: visibleInput ? "text" : "password",
     disabled: disabled
   }, rest, (0, _tags.default)("password", rest)), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
-    "aria-label": visibleInput ? "Hide password" : "Show password",
+    "aria-label": visibleInput ? l.password?.ariaLabelHide?.() : l.password?.ariaLabelShow?.(),
     "aria-controls": internalInputId.current,
     onClick: () => setPasswordShown(!passwordShown),
     pr: 1,
@@ -41,7 +41,7 @@ const Password = ({
     size: "small",
     disabled: forceObscurity || disabled,
     isInPassword: true
-  }, visibleInput ? "Hide" : "Show")), /*#__PURE__*/_react.default.createElement(_password.HiddenAriaLive, {
+  }, visibleInput ? l.password?.buttonLabelHide?.() : l.password?.buttonLabelShow?.())), /*#__PURE__*/_react.default.createElement(_password.HiddenAriaLive, {
     role: "status",
     "aria-live": "polite"
   }, visibleInput ? l.password.ariaLiveShownMessage() : l.password.ariaLiveHiddenMessage()));

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

@@ -61,7 +61,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     labelInline?: boolean;
     /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). */
     labelSpacing?: 1 | 2;
-    /** [Legacy] Label width. */
+    /** [Legacy] Label width as a percentage when label is inline. */
     labelWidth?: number;
     /** Specify a callback triggered on change */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;

package/lib/locales/en-gb.js

@@ -152,6 +152,10 @@ const enGB = {
     ofY: count => `of ${count}`
   },
   password: {
+    buttonLabelHide: () => "Hide",
+    buttonLabelShow: () => "Show",
+    ariaLabelHide: () => "Hide password",
+    ariaLabelShow: () => "Show password",
     ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
     ariaLiveHiddenMessage: () => "Your password is currently hidden."
   },

package/lib/locales/locale.d.ts

@@ -121,6 +121,10 @@ interface Locale {
         ofY: (count: string | number) => string;
     };
     password: {
+        buttonLabelHide?: () => string;
+        buttonLabelShow?: () => string;
+        ariaLabelHide?: () => string;
+        ariaLabelShow?: () => string;
         ariaLiveShownMessage: () => string;
         ariaLiveHiddenMessage: () => string;
     };

package/package.json

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