carbon-react 146.2.1 → 146.3.0

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -59,9 +59,11 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     isRequired?: boolean;
     /** Whether to show the validation icon */
     useValidationIcon?: boolean;
+    /** String value for max-width of `field-line` element */
+    maxWidth?: string;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

package/esm/__internal__/form-field/form-field.component.js

@@ -10,6 +10,7 @@ import TabContext from "../../components/tabs/tab/__internal__/tab.context";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const FormField = ({
+  maxWidth,
   children,
   "data-component": dataComponent,
   disabled,
@@ -88,7 +89,8 @@ const FormField = ({
   }, fieldHelpContent) : null;
   return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(dataComponent, rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
     "data-role": "field-line",
-    inline: inlineLabel
+    inline: inlineLabel,
+    maxWidth: maxWidth
   }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
     labelId: labelId,
     align: labelAlign,

package/esm/__internal__/form-field/form-field.style.d.ts

@@ -1,6 +1,7 @@
 declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface FieldLineStyleProps {
     inline?: boolean;
+    maxWidth?: string;
 }
 declare const FieldLineStyle: import("styled-components").StyledComponent<"div", any, FieldLineStyleProps, never>;
 export { FieldLineStyle };

package/esm/__internal__/form-field/form-field.style.js

@@ -15,9 +15,11 @@ FormFieldStyle.defaultProps = {
 };
 const FieldLineStyle = styled.div`
   ${({
-  inline
+  inline,
+  maxWidth
 }) => css`
     display: ${inline ? "flex" : "block"};
+    ${maxWidth && `max-width: ${maxWidth};`}
   `}
 `;
 export { FieldLineStyle };

package/esm/__internal__/label/label.component.js

@@ -24,7 +24,7 @@ const tooltipPosition = ({
   return (error || warning || info) && inline ? "top" : "right";
 };
 export const Label = ({
-  align = "right",
+  align,
   as = "label",
   children,
   disabled,
@@ -65,6 +65,14 @@ export const Label = ({
     if (onMouseLeave) onMouseLeave();
     if (onGroupMouseLeave) onGroupMouseLeave();
   };
+  let alignment;
+  if (inline && !align) {
+    alignment = "right";
+  } else if (!align) {
+    alignment = "left";
+  } else {
+    alignment = align;
+  }
   const icon = () => {
     const wrapperProps = {
       onFocus: () => setFocus(true),
@@ -99,7 +107,7 @@ export const Label = ({
   };
   return /*#__PURE__*/React.createElement(StyledLabelContainer, {
     "data-role": "label-container",
-    align: align,
+    align: alignment,
     inline: inline,
     width: width,
     optional: optional,

package/esm/__internal__/label/label.style.js

@@ -31,7 +31,12 @@ export const StyledLabelContainer = styled.div`
   margin-bottom: 8px;
 
   ${({
-  align,
+  align
+}) => css`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+
+  ${({
   inline,
   pr,
   pl,
@@ -45,7 +50,6 @@ export const StyledLabelContainer = styled.div`
       ${pl && css`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width}%;
     `}
 

package/esm/components/numeral-date/numeral-date.component.js

@@ -262,6 +262,7 @@ export const NumeralDate = ({
         isYearInput: datePart.length === 4,
         hasValidationIconInField: !validationOnLabel && isEnd && validationInField
       }, /*#__PURE__*/React.createElement(Textbox, _extends({
+        maxWidth: "fit-content",
         id: inputIds.current[datePart],
         label: getDateLabel(datePart, locale),
         disabled: disabled,

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

@@ -60,7 +60,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     maxWidth?: string;
     /** The content of the label for the input */
     label?: string;
-    /** [Legacy] Inline label alignment */
+    /** Label alignment */
     labelAlign?: "left" | "right";
     /**
      * [Legacy] Text applied to label help tooltip. When opted into new design validations

package/esm/components/textarea/textarea.component.js

@@ -235,7 +235,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     id: id,
     labelInline: computeLabelPropValues(labelInlineWithNewValidation),
-    labelAlign: computeLabelPropValues(labelAlign),
+    labelAlign: labelAlign,
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,

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

@@ -54,7 +54,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     leftChildren?: React.ReactNode;
     /** Label content */
     label?: string;
-    /** [Legacy] Inline label alignment */
+    /** Label alignment */
     labelAlign?: "left" | "right";
     /**
      * [Legacy] Text applied to label help tooltip. When opted into new design validations

package/esm/components/textbox/textbox.component.js

@@ -134,7 +134,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     info: info,
     prefix: prefix,
     inputWidth: inputWidth || 100 - labelWidth,
-    maxWidth: maxWidth,
+    maxWidth: labelInline || labelAlign !== "right" ? maxWidth : undefined,
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
@@ -182,6 +182,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    maxWidth: !labelInline && labelAlign === "right" ? maxWidth : undefined,
     disabled: disabled,
     fieldHelpId: fieldHelpId,
     fieldHelp: computeLabelPropValues(fieldHelp),
@@ -190,7 +191,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     info: info,
     label: label,
     labelId: labelId,
-    labelAlign: computeLabelPropValues(labelAlign),
+    labelAlign: labelAlign,
     labelHelp: computeLabelPropValues(labelHelp),
     labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -59,9 +59,11 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     isRequired?: boolean;
     /** Whether to show the validation icon */
     useValidationIcon?: boolean;
+    /** String value for max-width of `field-line` element */
+    maxWidth?: string;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

package/lib/__internal__/form-field/form-field.component.js

@@ -19,6 +19,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const FormField = ({
+  maxWidth,
   children,
   "data-component": dataComponent,
   disabled,
@@ -97,7 +98,8 @@ const FormField = ({
   }, fieldHelpContent) : null;
   return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(dataComponent, rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
     "data-role": "field-line",
-    inline: inlineLabel
+    inline: inlineLabel,
+    maxWidth: maxWidth
   }, reverse && children, label && /*#__PURE__*/_react.default.createElement(_label.default, {
     labelId: labelId,
     align: labelAlign,

package/lib/__internal__/form-field/form-field.style.d.ts

@@ -1,6 +1,7 @@
 declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface FieldLineStyleProps {
     inline?: boolean;
+    maxWidth?: string;
 }
 declare const FieldLineStyle: import("styled-components").StyledComponent<"div", any, FieldLineStyleProps, never>;
 export { FieldLineStyle };

package/lib/__internal__/form-field/form-field.style.js

@@ -23,9 +23,11 @@ FormFieldStyle.defaultProps = {
 };
 const FieldLineStyle = exports.FieldLineStyle = _styledComponents.default.div`
   ${({
-  inline
+  inline,
+  maxWidth
 }) => (0, _styledComponents.css)`
     display: ${inline ? "flex" : "block"};
+    ${maxWidth && `max-width: ${maxWidth};`}
   `}
 `;
 var _default = exports.default = FormFieldStyle;

package/lib/__internal__/label/label.component.js

@@ -33,7 +33,7 @@ const tooltipPosition = ({
   return (error || warning || info) && inline ? "top" : "right";
 };
 const Label = ({
-  align = "right",
+  align,
   as = "label",
   children,
   disabled,
@@ -74,6 +74,14 @@ const Label = ({
     if (onMouseLeave) onMouseLeave();
     if (onGroupMouseLeave) onGroupMouseLeave();
   };
+  let alignment;
+  if (inline && !align) {
+    alignment = "right";
+  } else if (!align) {
+    alignment = "left";
+  } else {
+    alignment = align;
+  }
   const icon = () => {
     const wrapperProps = {
       onFocus: () => setFocus(true),
@@ -108,7 +116,7 @@ const Label = ({
   };
   return /*#__PURE__*/_react.default.createElement(_label.StyledLabelContainer, {
     "data-role": "label-container",
-    align: align,
+    align: alignment,
     inline: inline,
     width: width,
     optional: optional,

package/lib/__internal__/label/label.style.js

@@ -39,7 +39,12 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
   margin-bottom: 8px;
 
   ${({
-  align,
+  align
+}) => (0, _styledComponents.css)`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+
+  ${({
   inline,
   pr,
   pl,
@@ -53,7 +58,6 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
       ${pl && (0, _styledComponents.css)`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width}%;
     `}
 

package/lib/components/numeral-date/numeral-date.component.js

@@ -271,6 +271,7 @@ const NumeralDate = ({
         isYearInput: datePart.length === 4,
         hasValidationIconInField: !validationOnLabel && isEnd && validationInField
       }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
+        maxWidth: "fit-content",
         id: inputIds.current[datePart],
         label: getDateLabel(datePart, locale),
         disabled: disabled,

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

@@ -60,7 +60,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     maxWidth?: string;
     /** The content of the label for the input */
     label?: string;
-    /** [Legacy] Inline label alignment */
+    /** Label alignment */
     labelAlign?: "left" | "right";
     /**
      * [Legacy] Text applied to label help tooltip. When opted into new design validations

package/lib/components/textarea/textarea.component.js

@@ -244,7 +244,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     disabled: disabled,
     id: id,
     labelInline: computeLabelPropValues(labelInlineWithNewValidation),
-    labelAlign: computeLabelPropValues(labelAlign),
+    labelAlign: labelAlign,
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,

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

@@ -54,7 +54,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     leftChildren?: React.ReactNode;
     /** Label content */
     label?: string;
-    /** [Legacy] Inline label alignment */
+    /** Label alignment */
     labelAlign?: "left" | "right";
     /**
      * [Legacy] Text applied to label help tooltip. When opted into new design validations

package/lib/components/textbox/textbox.component.js

@@ -143,7 +143,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     info: info,
     prefix: prefix,
     inputWidth: inputWidth || 100 - labelWidth,
-    maxWidth: maxWidth,
+    maxWidth: labelInline || labelAlign !== "right" ? maxWidth : undefined,
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/_react.default.createElement(_prefix.default, {
@@ -191,6 +191,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+    maxWidth: !labelInline && labelAlign === "right" ? maxWidth : undefined,
     disabled: disabled,
     fieldHelpId: fieldHelpId,
     fieldHelp: computeLabelPropValues(fieldHelp),
@@ -199,7 +200,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     info: info,
     label: label,
     labelId: labelId,
-    labelAlign: computeLabelPropValues(labelAlign),
+    labelAlign: labelAlign,
     labelHelp: computeLabelPropValues(labelHelp),
     labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,

package/package.json

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