carbon-react 109.4.0 → 109.5.2

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _utils = require("../../style/utils");
 
@@ -33,8 +33,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const FormField = ({
   children,
   disabled,
@@ -45,7 +43,6 @@ const FormField = ({
   info,
   tooltipId,
   fieldHelpId,
-  helpTabIndex,
   label,
   labelId,
   labelAlign,
@@ -63,7 +60,16 @@ const FormField = ({
   validationIconId,
   ...rest
 }) => {
-  const context = (0, _react.useContext)(_tab.TabContext);
+  const invalidValidationProp = (0, _react.useMemo)(() => {
+    const validationProps = {
+      error: !!error,
+      warning: !!warning,
+      info: !!info
+    };
+    if (!disabled) return undefined;
+    return Object.keys(validationProps).find(propName => validationProps[propName]);
+  }, [error, warning, info, disabled]);
+  !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : (0, _invariant.default)(false) : void 0;
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
 
@@ -71,13 +77,16 @@ const FormField = ({
     inlineLabel = largeScreen;
   }
 
+  const {
+    setError,
+    setWarning,
+    setInfo
+  } = (0, _react.useContext)(_tab.TabContext);
   (0, _react.useEffect)(() => {
-    if (context && context.setError && context.setWarning && context.setInfo) {
-      context.setError(id, !!error);
-      context.setWarning(id, !!warning);
-      context.setInfo(id, !!info);
-    }
-  }, [id, context, error, warning, info]);
+    if (setError) setError(id, !!error);
+    if (setWarning) setWarning(id, !!warning);
+    if (setInfo) setInfo(id, !!info);
+  }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
     labelInline: inlineLabel,
@@ -95,7 +104,6 @@ const FormField = ({
     info: !rest.validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
-    helpTabIndex: helpTabIndex,
     htmlFor: id,
     helpIcon: labelHelpIcon,
     inline: inlineLabel,
@@ -109,53 +117,189 @@ const FormField = ({
   }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 
-const errorPropType = (props, propName, componentName, ...rest) => {
-  if (props[propName] && props.disabled) {
-    return new Error(`Prop \`${propName}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field");
-  }
-
-  return _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])(props, propName, componentName, ...rest);
-};
-
 FormField.propTypes = {
-  /** Styled system margin props */
-  ...marginPropTypes,
-  children: _propTypes.default.node,
-  disabled: _propTypes.default.bool,
-  "data-component": _propTypes.default.string,
-  "data-role": _propTypes.default.string,
+  "adaptiveLabelBreakpoint": _propTypes.default.number,
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string.isRequired,
   "data-element": _propTypes.default.string,
-  fieldHelp: _propTypes.default.node,
-  fieldHelpInline: _propTypes.default.bool,
-  error: errorPropType,
-  warning: errorPropType,
-  info: errorPropType,
-  tooltipId: _propTypes.default.string,
-  fieldHelpId: _propTypes.default.string,
-  helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  id: _propTypes.default.string.isRequired,
-  isOptional: _propTypes.default.bool,
-  label: _propTypes.default.node,
-  labelId: _propTypes.default.string,
-  labelAlign: _propTypes.default.oneOf(["left", "right"]),
-  labelHelp: _propTypes.default.node,
-  labelHelpIcon: _propTypes.default.string,
-  labelInline: _propTypes.default.bool,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: _propTypes.default.oneOf([1, 2]),
-  labelWidth: _propTypes.default.number,
-  reverse: _propTypes.default.bool,
-  useValidationIcon: _propTypes.default.bool,
-
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint: _propTypes.default.number,
-
-  /** Flag to configure component as mandatory */
-  isRequired: _propTypes.default.bool,
-
-  /** Id of the validation icon */
-  validationIconId: _propTypes.default.string
+  "data-role": _propTypes.default.string,
+  "disabled": _propTypes.default.bool,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "fieldHelp": _propTypes.default.node,
+  "fieldHelpId": _propTypes.default.string,
+  "fieldHelpInline": _propTypes.default.bool,
+  "id": _propTypes.default.string.isRequired,
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "isOptional": _propTypes.default.bool,
+  "isRequired": _propTypes.default.bool,
+  "label": _propTypes.default.node,
+  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
+  "labelHelp": _propTypes.default.node,
+  "labelHelpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "labelId": _propTypes.default.string,
+  "labelInline": _propTypes.default.bool,
+  "labelSpacing": _propTypes.default.oneOf([1, 2]),
+  "labelWidth": _propTypes.default.number,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "reverse": _propTypes.default.bool,
+  "tooltipId": _propTypes.default.string,
+  "useValidationIcon": _propTypes.default.bool,
+  "validationIconId": _propTypes.default.string,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
+FormField.displayName = "FormField";
 var _default = FormField;
 exports.default = _default;

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

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

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

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FieldLineStyle = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _themes = require("../../style/themes");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
 const FormFieldStyle = _styledComponents.default.div`
   & + & {
@@ -23,20 +25,14 @@ const FormFieldStyle = _styledComponents.default.div`
   }
 `;
 FormFieldStyle.defaultProps = {
-  theme: _base.default
+  theme: _themes.baseTheme
 };
 const FieldLineStyle = _styledComponents.default.div`
   ${({
   inline
-}) => {
-  if (inline) {
-    return `
-        display: flex;
-      `;
-  }
-
-  return "display: block;";
-}}
+}) => (0, _styledComponents.css)`
+    display: ${inline ? "flex" : "block"};
+  `}
 `;
 exports.FieldLineStyle = FieldLineStyle;
 var _default = FormFieldStyle;

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

@@ -1,5 +1,2 @@
-export {
-  default,
-  CommonFormFieldPropTypes,
-  FormFieldPropTypes,
-} from "./form-field";
+export { default } from "./form-field.component";
+export type { FormFieldProps } from "./form-field.component";

package/lib/__internal__/label/label.component.d.ts

@@ -9,8 +9,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     help?: React.ReactNode;
     /** Icon type */
     helpIcon?: IconType;
-    /** Overrides the default tabindex of the Help component */
-    helpTabIndex?: number | string;
     /** A string that represents the ID of another form element */
     htmlFor?: string;
     /** The unique id of the label element */
@@ -22,6 +20,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Id of the validation icon */
     validationIconId?: string;
 }
-export declare const Label: ({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
+export declare const Label: ({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
 export default _default;

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

@@ -51,7 +51,6 @@ const Label = ({
   error,
   help,
   helpIcon,
-  helpTabIndex,
   htmlFor,
   info,
   inline,
@@ -117,7 +116,6 @@ const Label = ({
 
     return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
-      tabIndex: Number(helpTabIndex),
       type: helpIcon,
       isFocused: isFocused
     }, help));
@@ -149,7 +147,6 @@ Label.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "help": _propTypes.default.node,
   "helpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "helpTabIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "htmlFor": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inline": _propTypes.default.bool,

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
+var _loaderSquare = _interopRequireDefault(require("../loader/loader-square.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function makeColors(color) {
@@ -15,6 +17,9 @@ function makeColors(color) {
   ${_icon.default} {
     color: ${color};
   }
+  ${_loaderSquare.default} {
+    background-color: ${color};
+  }
   `;
 }
 

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -39,7 +39,7 @@ const ButtonToggleGroup = ({
   error,
   warning,
   info,
-  validationOnLabel,
+  validationOnLabel = false,
   label,
   labelHelp,
   labelSpacing,
@@ -52,7 +52,7 @@ const ButtonToggleGroup = ({
   onChange,
   onBlur,
   value,
-  "data-component": dataComponent,
+  "data-component": dataComponent = "button-toggle-group",
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -105,10 +105,13 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": _propTypes.default.string,
 
+  /** Unique id for the root element of the component */
+  id: _propTypes.default.string.isRequired,
+
   /** Specifies the name prop to be applied to each button in the group */
   name: _propTypes.default.string.isRequired,
 
-  /** Children to be rendered (ButtonToggle). */
+  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
   children: (props, propName, componentName) => {
     let error;
     const prop = props[propName];
@@ -171,22 +174,18 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   /** The alignment for the text in the label. */
   labelAlign: _propTypes.default.string,
 
-  /** callback to handle change event */
-  onChange: _propTypes.default.func,
-
   /** Callback fired when each RadioButton is blurred */
   onBlur: _propTypes.default.func,
 
+  /** callback to handle change event */
+  onChange: _propTypes.default.func,
+
   /** The value of the Button Toggle Group */
   value: _propTypes.default.string,
 
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
-ButtonToggleGroup.defaultProps = {
-  validationOnLabel: false,
-  "data-component": "button-toggle-group"
-};
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 var _default = ButtonToggleGroup;
 exports.default = _default;

package/lib/components/button-toggle-group/button-toggle-group.d.ts

@@ -17,9 +17,11 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
   "data-element"?: string;
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role"?: string;
+  /** Unique id for the root element of the component */
+  id: string;
   /** Specifies the name prop to be applied to each button in the group */
   name: string;
-  /** Children to be rendered (ButtonToggle). */
+  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
   children?: ButtonToggle | ButtonToggle[];
   /** When true, validation icon will be placed on label instead of being placed on the input */
   validationOnLabel?: boolean;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconProps } from "../icon";
+export interface IconButtonProps extends MarginProps {
+    /** Prop to specify the aria-label of the icon-button component */
+    "aria-label"?: string;
+    /** Icon meant to be rendered, should be an Icon component */
+    children: React.ReactElement<IconProps>;
+    /** Callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse enter */
+    onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse leave */
+    onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Action callback */
+    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the button to disabled */
+    disabled?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;