carbon-react 138.1.0 → 138.2.0

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -4,13 +4,11 @@ export interface CarbonProviderProps {
     children: React.ReactNode;
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
-    /** Feature flag for opting in to the latest validation designs for components that support it.
+    /** Feature flag for opting in to the new validation redesign for components that support it.
      *
      * NOTE - Will eventually be set to `true` by default in the future. */
     validationRedesignOptIn?: boolean;
-    /** Feature flag for opting out of styling components to have rounded corners.
-     *
-     * NOTE - Will eventually be set to `false` by default in the future. */
+    /** Feature flag for opting out of styling components to have rounded corners. */
     roundedCornersOptOut?: boolean;
     focusRedesignOptOut?: boolean;
 }

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -4,15 +4,18 @@ import { ValidationProps } from "../../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
-    /** The content for the CheckboxGroup Legend Help text  */
+    /**
+     * The content for the CheckboxGroup Help tooltip,
+     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     */
     legendHelp?: string;
-    /** When true, legend is placed inline with the checkboxes */
+    /** [Legacy] When true, legend is placed inline with the checkboxes */
     legendInline?: boolean;
-    /** Percentage width of legend (only when legend is inline)  */
+    /** [Legacy] Percentage width of legend (only when legend is inline)  */
     legendWidth?: number;
-    /** Text alignment of legend when inline */
+    /** [Legacy] Text alignment of legend when inline */
     legendAlign?: "left" | "right";
-    /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
     legendSpacing?: 1 | 2;
     /** The Checkboxes to be rendered in the group */
     children: React.ReactNode;
@@ -22,7 +25,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     required?: boolean;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
-    /** Overrides the default tooltip */
+    /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** When true, Checkboxes are in line */
     inline?: boolean;

package/esm/components/date-range/date-range.component.d.ts

@@ -20,21 +20,21 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     /** Optional label for endDate field */
     endLabel?: string;
     /**
-     * Indicate that error has occurred on end date
-     * Pass string to display icon, tooltip and red border
-     * Pass true boolean to only display red border
+     * Indicate that error has occurred on end date.
+     * Pass string to display icon, tooltip and red border.
+     * Pass true boolean to only display red border.
      */
     endError?: boolean | string;
     /**
-     * Indicate additional information for end date
-     * Pass string to display icon, tooltip and blue border
-     * Pass true boolean to only display blue border
+     * [Legacy] Indicate additional information for end date.
+     * Pass string to display icon, tooltip and blue border.
+     * Pass true boolean to only display blue border.
      */
     endInfo?: boolean | string;
     /**
-     * Indicate that warning has occurred on end date
-     * Pass string to display icon, tooltip and orange border
-     * Pass true boolean to only display orange border
+     * Indicate that warning has occurred on end date.
+     * Pass string to display icon, tooltip and orange border.
+     * Pass true boolean to only display orange border.
      */
     endWarning?: boolean | string;
     /**
@@ -54,20 +54,21 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     /** Optional label for startDate field */
     startLabel?: string;
     /**
-     * Indicate that error has occurred on start date
-     * Pass string to display icon, tooltip and red border
-     * Pass true boolean to only display red border
+     * Indicate that error has occurred on start date.
+     * Pass string to display icon, tooltip and red border.
+     * Pass true boolean to only display red border.
      */
     startError?: boolean | string;
     /**
-     * Indicate that warning has occurred on start date
-     * Pass string to display icon, tooltip and orange border
-     * Pass true boolean to only display orange border
+     * Indicate that warning has occurred on start date.
+     * Pass string to display icon, tooltip and orange border.
+     * Pass true boolean to only display orange border.
      */
     startWarning?: boolean | string;
-    /** Indicate additional information for start date
-     * Pass string to display icon, tooltip and blue border
-     * Pass true boolean to only display blue border
+    /**
+     * [Legacy] Indicate additional information for start date.
+     * Pass string to display icon, tooltip and blue border.
+     * Pass true boolean to only display blue border.
      */
     startInfo?: boolean | string;
     /**
@@ -76,9 +77,9 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     startRef?: React.ForwardedRef<HTMLInputElement>;
     /** An array containing the value of startDate and endDate */
     value: string[];
-    /** When true, validation icons will be placed on labels instead of being placed on the inputs */
+    /** [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs */
     validationOnLabel?: boolean;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Flag to configure component as mandatory. */
     required?: boolean;

package/esm/components/date-range/date-range.style.d.ts

@@ -1,5 +1,5 @@
 export interface StyledDateRangeProps {
-    /** Display labels inline */
+    /** [Legacy] Display labels inline */
     labelsInline?: boolean;
 }
 declare const StyledDateRange: import("styled-components").StyledComponent<"div", any, StyledDateRangeProps, never>;

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -94,13 +94,21 @@ const StyledMenuModal = styled.div`
         }
       }
     }
-  `}
 
-  ${StyledBox} {
-    &::-webkit-scrollbar {
-      width: 16px;
+    ${StyledBox} {
+      scrollbar-color: ${menuConfigVariants[menuType].scrollbarColor};
+
+      &::-webkit-scrollbar {
+        width: var(--sizing150);
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${menuConfigVariants[menuType].scrollbarThumb};
+      }
+      &::-webkit-scrollbar-track {
+        background-color: ${menuConfigVariants[menuType].scrollbarTrack};
+      }
     }
-  }
+  `}
 `;
 const StyledMenuFullscreenHeader = styled.div`
   height: 40px;

package/esm/components/menu/menu.config.d.ts

@@ -12,6 +12,9 @@ declare const _default: {
         alternate: string;
         alternateHover: string;
         divider: string;
+        scrollbarThumb: string;
+        scrollbarTrack: string;
+        scrollbarColor: string;
     };
     dark: {
         background: string;
@@ -26,6 +29,9 @@ declare const _default: {
         alternate: string;
         alternateHover: string;
         divider: string;
+        scrollbarThumb: string;
+        scrollbarTrack: string;
+        scrollbarColor: string;
     };
     black: {
         background: string;
@@ -40,6 +46,9 @@ declare const _default: {
         alternate: string;
         alternateHover: string;
         divider: string;
+        scrollbarThumb: string;
+        scrollbarTrack: string;
+        scrollbarColor: string;
     };
     white: {
         background: string;
@@ -54,6 +63,9 @@ declare const _default: {
         alternate: string;
         alternateHover: string;
         divider: string;
+        scrollbarThumb: string;
+        scrollbarTrack: string;
+        scrollbarColor: string;
     };
 };
 export default _default;

package/esm/components/menu/menu.config.js

@@ -11,7 +11,10 @@ export default {
     title: "var(--colorsComponentsMenuYin065)",
     alternate: "var(--colorsComponentsMenuSpringChildAlt500)",
     alternateHover: "var(--colorsComponentsMenuSpringChildAlt600)",
-    divider: "var(--colorsComponentsMenuSpringChild400)"
+    divider: "var(--colorsComponentsMenuSpringChild400)",
+    scrollbarThumb: "#597a8b",
+    scrollbarTrack: "#f2f5f6",
+    scrollbarColor: "#597a8b #f2f5f6"
   },
   dark: {
     background: "var(--colorsComponentsMenuAutumnStandard500)",
@@ -25,7 +28,10 @@ export default {
     title: "var(--colorsComponentsMenuYang080)",
     alternate: "var(--colorsComponentsMenuAutumnChildAlt500)",
     alternateHover: "var(--colorsComponentsMenuAutumnChildAlt600)",
-    divider: "var(--colorsComponentsMenuAutumnChild400)"
+    divider: "var(--colorsComponentsMenuAutumnChild400)",
+    scrollbarThumb: "#597a8b",
+    scrollbarTrack: "#f2f5f6",
+    scrollbarColor: "#597a8b #f2f5f6"
   },
   black: {
     background: "var(--colorsComponentsMenuWinterStandard500)",
@@ -39,7 +45,10 @@ export default {
     title: "var(--colorsComponentsMenuYang080)",
     alternate: "var(--colorsComponentsMenuWinterChildAlt500)",
     alternateHover: "var(--colorsComponentsMenuWinterChildAlt600)",
-    divider: "var(--colorsComponentsMenuWinterChild400)"
+    divider: "var(--colorsComponentsMenuWinterChild400)",
+    scrollbarThumb: "#CCCCCC",
+    scrollbarTrack: "#808080",
+    scrollbarColor: "#CCCCCC #808080"
   },
   white: {
     background: "var(--colorsComponentsMenuSummerStandard500)",
@@ -53,6 +62,9 @@ export default {
     title: "var(--colorsComponentsMenuYin065)",
     alternate: "var(--colorsComponentsMenuSummerChildAlt500)",
     alternateHover: "var(--colorsComponentsMenuSummerChildAlt600)",
-    divider: "var(--colorsComponentsMenuSummerChild400)"
+    divider: "var(--colorsComponentsMenuSummerChild400)",
+    scrollbarThumb: "#597a8b",
+    scrollbarTrack: "#f2f5f6",
+    scrollbarColor: "#597a8b #f2f5f6"
   }
 };

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -11,6 +11,7 @@ const StyledScrollableBlock = styled.li`
 }) => css`
     && ${StyledMenuItemWrapper} {
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].alternate};
+      padding-right: var(--spacing150);
     }
 
     ${StyledBox} {
@@ -23,6 +24,18 @@ const StyledScrollableBlock = styled.li`
         border-bottom-left-radius: var(--borderRadius100);
         border-bottom-right-radius: var(--borderRadius000);
       }
+
+      scrollbar-color: ${menuConfigVariants[menuType].scrollbarColor};
+
+      &::-webkit-scrollbar {
+        width: var(--sizing150);
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${menuConfigVariants[menuType].scrollbarThumb};
+      }
+      &::-webkit-scrollbar-track {
+        background-color: ${menuConfigVariants[menuType].scrollbarTrack};
+      }
     }
   `}
 `;

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -43,7 +43,7 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     enableInternalError?: boolean;
     /** When true, enables the internal warnings to be displayed */
     enableInternalWarning?: boolean;
-    /** Help content to be displayed under an input */
+    /** [Legacy] Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** `id` for events */
     id?: string;
@@ -51,15 +51,18 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     name?: string;
     /** Label */
     label?: string;
-    /** Label alignment. Works only when labelInline is true */
+    /** [Legacy] Label alignment. Works only when labelInline is true */
     labelAlign?: "left" | "right";
-    /** Text applied to label help tooltip */
+    /**
+     * Text applied to label help tooltip, will be rendered as
+     * hint text when `validationRedesignOptIn` is true.
+     */
     labelHelp?: React.ReactNode;
-    /** When true, label is placed in line with an input */
+    /** [Legacy] When true, label is placed in line with an input */
     labelInline?: boolean;
-    /** Label width */
+    /** [Legacy] Label width */
     labelWidth?: number;
-    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
     /** Blur event handler */
     onBlur?: (ev: NumeralDateEvent<DateType>) => void;
@@ -69,11 +72,11 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     required?: boolean;
     /** Size of an input */
     size?: "small" | "medium" | "large";
-    /** When true, validation icons will be placed on labels instead of being placed on the inputs */
+    /** [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs */
     validationOnLabel?: boolean;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /**
      * A React ref to pass to the input corresponding to the day

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -8,21 +8,24 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     adaptiveSpacingBreakpoint?: number;
     /** The RadioButton objects to be rendered in the group */
     children: React.ReactNode;
-    /** When true, RadioButtons are in line */
+    /** When true, RadioButtons children are in line */
     inline?: boolean;
     /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
     /** The content for the RadioGroup Legend */
     legend?: string;
-    /** The content for the hint text of the RadioGroup Legend */
+    /**
+     * The content for the RadioButtonGroup Legend Help tooltip,
+     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     */
     legendHelp?: string;
-    /** Text alignment of legend when inline */
+    /** [Legacy] Text alignment of legend when inline */
     legendAlign?: "left" | "right";
-    /** When true, legend is placed in line with the radiobuttons */
+    /** [Legacy] When true, legend is placed in line with the RadioButtons */
     legendInline?: boolean;
-    /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
     legendSpacing?: 1 | 2;
-    /** Percentage width of legend (only when legend is inline)  */
+    /** [Legacy] Percentage width of legend (only when legend is inline)  */
     legendWidth?: number;
     /** Specifies the name prop to be applied to each button in the group */
     name: string;
@@ -36,7 +39,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** value of the selected RadioButton */
     value?: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare const RadioButtonGroup: {

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -5,7 +5,7 @@ import { FormInputPropTypes } from "../select-textbox";
 export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
-    /** Prop to specify the aria-labeledby property of the component input */
+    /** Prop to specify the aria-labelledby property of the component input */
     "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
@@ -43,7 +43,7 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     tableHeader?: React.ReactNode;
     /** The selected value(s), when the component is operating in controlled mode */
     value?: string | Record<string, unknown>;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -4,7 +4,7 @@ import { FormInputPropTypes } from "../select-textbox";
 export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
-    /** Prop to specify the aria-labeledby property of the component input */
+    /** Prop to specify the aria-labelledby property of the component input */
     "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
@@ -38,7 +38,7 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     tableHeader?: React.ReactNode;
     /** The selected value(s), when the component is operating in controlled mode */
     value?: string[] | Record<string, unknown>[];
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;

package/esm/components/select/select-list/select-list.component.js

@@ -118,7 +118,14 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
-  const listHeight = virtualizer.getTotalSize();
+  const totalSize = virtualizer.getTotalSize();
+  // virtualizer.getTotalSize() returns the total size in pixels for the virtualized items. If nothing is loaded,
+  // then the list height is set to 0 (line 21 of src/components/select/select-list/select-list.style.ts) as
+  // the method always returns a number and never undefined, it seems.
+  // https://github.com/TanStack/virtual/commit/e43e03e500588b2da36f184ecaba2b8e5a506596 suggests that items are
+  // never returned regardless if the container height it 0, so the below line ensures that a container of at
+  // least 1px is always available to render into.
+  const listHeight = totalSize === 0 ? 1 : totalSize;
   useEffect(() => {
     if (isOpen) {
       blockScroll();

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

@@ -7,7 +7,7 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     adaptiveLabelBreakpoint?: number;
     /** Prop to specify the aria-label attribute of the component input */
     ariaLabel?: string;
-    /** Prop to specify the aria-labeledby property of the component input */
+    /** Prop to specify the aria-labelledby property of the component input */
     ariaLabelledby?: string;
     /** If true the Component will be focused when rendered */
     autoFocus?: boolean;
@@ -19,11 +19,11 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     inputWidth?: number;
     /** Label content */
     label?: string;
-    /** A message that the Help component will display */
+    /** [Legacy] A message that the Help component will display */
     labelHelp?: React.ReactNode;
-    /** When true label is inline */
+    /** [Legacy] When true label is inline */
     labelInline?: boolean;
-    /** Label width */
+    /** [Legacy] Label width */
     labelWidth?: number;
     /** Name attribute of the input element */
     name?: string;

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -14,7 +14,7 @@ export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElem
 export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
-    /** Prop to specify the aria-labeledby property of the component input */
+    /** Prop to specify the aria-labelledby property of the component input */
     "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
@@ -46,7 +46,7 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     transparent?: boolean;
     /** The selected value(s), when the component is operating in controlled mode */
     value?: string | Record<string, unknown>;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;

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

@@ -12,17 +12,17 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */
     defaultChecked?: boolean;
-    /** When true label is inline */
+    /** [Legacy] When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */
     loading?: boolean;
-    /** When true, validation icon will be placed on label instead of being placed on the input */
+    /** [Legacy] When true, validation icon will be placed on label instead of being placed on the input */
     validationOnLabel?: boolean;
     /** The value of the switch, passed on form submit */
     value?: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/esm/components/text-editor/text-editor.component.d.ts

@@ -24,7 +24,7 @@ export interface TextEditorProps extends MarginProps {
     error?: string;
     /** Message to be displayed when there is a warning */
     warning?: string;
-    /** Message to be displayed when there is an info */
+    /** [Legacy] Message to be displayed when there is an info */
     info?: string;
     /** Number greater than 2 multiplied by line-height (21px) to override the default min-height of the editor */
     rows?: number;

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

@@ -25,21 +25,25 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     children?: React.ReactNode;
     /** If true, the component will be disabled */
     disabled?: boolean;
-    /** 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.
+     * Pass string to display icon, tooltip and red border.
+     * Pass true boolean to only display red border.
+     */
     error?: boolean | string;
     /** Allows the Textareas Height to change based on user input */
     expandable?: boolean;
     /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
-    /** Help content to be displayed under an input */
+    /** [Legacy] Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: 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.
+     * Pass string to display icon, tooltip and blue border.
+     * Pass true boolean to only display blue border.
+     */
     info?: boolean | string;
     /**
      * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
@@ -47,7 +51,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
      * Icon to display inside of the Textarea
      */
     inputIcon?: IconType;
-    /** Width of an input in percentage. Works only when labelInline is true */
+    /** [Legacy] Width of an input in percentage. Works only when labelInline is true */
     inputWidth?: number;
     /**
      * Prop for specifying the max width of the input.
@@ -56,18 +60,19 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     maxWidth?: string;
     /** The content of the label for the input */
     label?: string;
-    /** Inline label alignment */
+    /** [Legacy] Inline label alignment */
     labelAlign?: "left" | "right";
-    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+    /**
+     * [Legacy] Text applied to label help tooltip. When opted into new design validations
      * it will render as a hint above the input, unless an `inputHint`
      * prop is also passed
      */
     labelHelp?: React.ReactNode;
-    /** When true, label is placed in line an input */
+    /** [Legacy] When true, label is placed in line an input */
     labelInline?: boolean;
-    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
-    /** Width of a label in percentage. Works only when labelInline is true */
+    /** [Legacy] Width of a label in percentage. Works only when labelInline is true */
     labelWidth?: number;
     /** Name of the input */
     name?: string;
@@ -81,15 +86,17 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     isOptional?: boolean;
     /** The number of visible text lines for the control */
     rows?: number;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, validation icon will be placed on label instead of being placed on the input */
+    /** [Legacy] When true, validation icon will be placed on label instead of being placed on the input */
     validationOnLabel?: boolean;
     /** The value of the Textbox */
     value?: 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.
+     * Pass string to display icon, tooltip and orange border.
+     * Pass true boolean to only display orange border.
+     */
     warning?: boolean | string;
     /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
     borderRadius?: BorderRadiusType | BorderRadiusType[];

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

@@ -22,7 +22,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     deferTimeout?: number;
     /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
-    /** Help content to be displayed under an input */
+    /** [Legacy] Help content to be displayed under an input. */
     fieldHelp?: React.ReactNode;
     /**
      * An optional alternative for props.value, this is useful if the
@@ -54,18 +54,19 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     leftChildren?: React.ReactNode;
     /** Label content */
     label?: string;
-    /** Inline label alignment */
+    /** [Legacy] Inline label alignment */
     labelAlign?: "left" | "right";
-    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+    /**
+     * [Legacy] Text applied to label help tooltip. When opted into new design validations
      * it will render as a hint above the input, unless an `inputHint`
-     * prop is also passed
+     * prop is also passed.
      */
     labelHelp?: React.ReactNode;
-    /** When true label is inline */
+    /** [Legacy] When true label is inline. */
     labelInline?: boolean;
-    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). */
     labelSpacing?: 1 | 2;
-    /** Label width */
+    /** [Legacy] Label width. */
     labelWidth?: number;
     /** Specify a callback triggered on change */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
@@ -85,11 +86,11 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     reverse?: boolean;
     /** Size of an input */
     size?: "small" | "medium" | "large";
-    /** When true, validation icon will be placed on label instead of being placed on the input */
+    /** [Legacy] When true, validation icon will be placed on label instead of being placed on the input. */
     validationOnLabel?: boolean;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position. */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component. */
     helpAriaLabel?: string;
     /** Flag to configure component as optional. */
     isOptional?: boolean;