carbon-react 94.8.0 → 95.1.0

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -42,8 +42,9 @@ const FocusTrap = ({
     return Array.from(candidate).some((el, i) => el !== focusableElements[i]);
   }, [focusableElements]);
   const updateFocusableElements = (0, _react.useCallback)(() => {
-    if (wrapperRef) {
-      const ref = wrapperRef.current;
+    const ref = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+
+    if (ref) {
       const elements = Array.from(ref.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
 
       if (hasNewInputs(elements)) {

package/lib/__internal__/tooltip-provider/index.d.ts

@@ -9,6 +9,8 @@ export interface TooltipProviderProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** Control whether the tooltip is visible */
   children: React.ReactNode;
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare const ToolbarContext: React.Context<ToolbarContextProps>;

package/lib/__internal__/tooltip-provider/index.js

@@ -17,15 +17,18 @@ exports.TooltipContext = TooltipContext;
 
 const TooltipProvider = ({
   children,
-  tooltipPosition
+  tooltipPosition,
+  helpAriaLabel
 }) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
   value: {
-    tooltipPosition
+    tooltipPosition,
+    helpAriaLabel
   }
 }, children);
 
 exports.TooltipProvider = TooltipProvider;
 TooltipProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+  helpAriaLabel: _propTypes.default.string
 };

package/lib/__internal__/validations/validation-icon.component.js

@@ -100,7 +100,9 @@ const ValidationIcon = ({
     tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
     tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
     isPartOfInput: isPartOfInput,
-    inputSize: size
+    inputSize: size,
+    "aria-hidden": "true",
+    focusable: false
   }));
 };
 

package/lib/components/button/button.component.js

@@ -7,6 +7,8 @@ exports.default = exports.ButtonWithForwardRef = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = require("styled-components");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
@@ -17,6 +19,8 @@ var _button = _interopRequireWildcard(require("./button.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 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; }
@@ -35,21 +39,23 @@ function renderChildren({
   disabled,
   buttonType,
   iconTooltipMessage,
-  iconTooltipPosition
+  iconTooltipPosition,
+  theme
   /* eslint-enable */
 
 }) {
   const iconColorMap = {
-    primary: "on-dark-background",
-    secondary: "business-color",
-    tertiary: "business-color",
-    darkBackground: "business-color"
+    primary: theme.colors.white,
+    secondary: theme.colors.primary,
+    tertiary: theme.colors.primary,
+    darkBackground: theme.colors.primary
   };
   const iconProps = {
     type: iconType,
     disabled,
-    bgTheme: "none",
-    iconColor: iconColorMap[buttonType]
+    bgSize: "extra-small",
+    color: iconColorMap[buttonType],
+    bg: "transparent"
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconType && iconPosition === "before" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
     "data-element": "main-text"
@@ -129,6 +135,8 @@ const renderStyledButton = buttonProps => {
 };
 
 const Button = props => {
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _base.default;
+
   const {
     size,
     subtext
@@ -142,7 +150,8 @@ const Button = props => {
   } = props;
   const propsWithoutAs = { ...rest,
     buttonType: buttonType || as,
-    ref: forwardRef || linkRef
+    ref: forwardRef || linkRef,
+    theme
   };
 
   if (subtext.length > 0 && size !== "large") {

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

@@ -19,10 +19,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const ButtonToggleIcon = props => /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleIcon, props, /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
   type: props.buttonIcon,
-  fontSize: props.buttonIconSize
-}, props, {
-  bgTheme: "none"
-})));
+  fontSize: props.buttonIconSize,
+  bgSize: "extra-small"
+}, props)));
 
 ButtonToggleIcon.propTypes = {
   /**

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

@@ -144,6 +144,8 @@ const StyledButtonToggleIcon = _styledComponents.default.div`
       ${_icon.default} {
         margin-right: 0;
         margin-bottom: 8px;
+        height: ${`${iconFontSizes.largeIcon}px`};
+        width: ${`${iconFontSizes.largeIcon}px`};
       }
 
       ${_icon.default}::before {

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

@@ -25,6 +25,8 @@ var _inputBehaviour = require("../../__internal__/input-behaviour");
 
 var _utils = require("../../style/utils");
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
@@ -53,6 +55,7 @@ const ButtonToggleGroup = ({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...props
 }) => {
   const validationProps = {
@@ -60,7 +63,9 @@ const ButtonToggleGroup = ({
     warning,
     info
   };
-  return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
     useValidationIcon: validationOnLabel,
     label: label,
     labelHelp: labelHelp,
@@ -84,7 +89,7 @@ const ButtonToggleGroup = ({
     value: value
   }, children), !validationOnLabel && /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
-  })))));
+  }))))));
 };
 
 ButtonToggleGroup.propTypes = { ...marginPropTypes,
@@ -171,7 +176,10 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   onBlur: _propTypes.default.func,
 
   /** The value of the Button Toggle Group */
-  value: _propTypes.default.string
+  value: _propTypes.default.string,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 ButtonToggleGroup.defaultProps = {
   validationOnLabel: false,

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

@@ -49,6 +49,8 @@ export interface ButtonToggleGroupProps
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** The value of the Button Toggle Group */
   value?: string;
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;

package/lib/components/checkbox/checkbox.component.js

@@ -60,6 +60,7 @@ const Checkbox = ({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
+  helpAriaLabel,
   ...props
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
@@ -93,6 +94,7 @@ const Checkbox = ({
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
     "data-component": dataComponent,
@@ -206,7 +208,10 @@ Checkbox.propTypes = {
   required: _propTypes.default.bool,
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Checkbox.defaultProps = {
   reverse: false,

package/lib/components/checkbox/checkbox.d.ts

@@ -15,6 +15,8 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
   value?: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
 declare function Checkbox(props: CheckboxProps): JSX.Element;

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

@@ -619,7 +619,8 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         }),
         inputRef: this.assignInput,
         adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-        tooltipPosition: tooltipPosition
+        tooltipPosition: tooltipPosition,
+        helpAriaLabel: this.props.helpAriaLabel
       }, events)), this.renderHiddenInput(), this.renderDatePicker({
         minDate,
         maxDate

package/lib/components/decimal/decimal.component.js

@@ -361,7 +361,10 @@ Decimal.propTypes = {
   /**
    * Override the locale string, default from I18nProvider
    */
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 Decimal.defaultProps = {
   align: "right",

package/lib/components/grouped-character/grouped-character.component.js

@@ -164,7 +164,10 @@ GroupedCharacter.propTypes = { ...marginPropTypes,
   onBlur: _propTypes.default.func,
 
   /** Flag to configure component as mandatory */
-  required: _propTypes.default.bool
+  required: _propTypes.default.bool,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: _propTypes.default.string
 };
 var _default = GroupedCharacter;
 exports.default = _default;

package/lib/components/heading/heading.component.js

@@ -71,7 +71,8 @@ let Heading = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderHelp, {
         "data-element": "help",
         tooltipPosition: "right",
-        href: this.props.helpLink
+        href: this.props.helpLink,
+        ariaLabel: this.props.helpAriaLabel
       }, this.props.help);
     }
     /**
@@ -255,7 +256,12 @@ Heading.propTypes = { ...marginPropTypes,
   /**
    * Pills that will be added after the title.
    */
-  pills: _propTypes.default.node
+  pills: _propTypes.default.node,
+
+  /**
+   * Aria label for rendered help component
+   */
+  helpAriaLabel: _propTypes.default.string
 };
 Heading.defaultProps = {
   divider: true,

package/lib/components/heading/heading.style.js

@@ -85,6 +85,7 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
 
     ${_icon2.default} {
       margin-right: 0;
+      display: inline-flex;
     }
   }
 `;

package/lib/components/help/help.component.js

@@ -19,6 +19,8 @@ var _help = _interopRequireDefault(require("./help.style"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 var _utils = require("../../style/utils");
 
 var _help2 = require("./help.config");
@@ -46,10 +48,14 @@ const Help = ({
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
+  ariaLabel,
   ...rest
 }) => {
   const helpElement = (0, _react.useRef)(null);
   const [isTooltipVisible, updateTooltipVisible] = (0, _react.useState)(false);
+  const {
+    helpAriaLabel
+  } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   (0, _react.useEffect)(() => {
     document.addEventListener("keydown", handleKeyPress);
     return function cleanup() {
@@ -72,13 +78,10 @@ const Help = ({
   }
 
   return /*#__PURE__*/_react.default.createElement(_help.default, _extends({
-    role: "tooltip",
     className: className,
     as: tagType,
     href: href,
     id: helpId,
-    target: "_blank",
-    rel: "noopener noreferrer",
     ref: helpElement,
     onClick: () => {
       helpElement.current.focus();
@@ -89,15 +92,26 @@ const Help = ({
     onMouseLeave: handleFocusBlur(false)
   }, (0, _tags.default)("help", rest), {
     tabIndex: tabIndex
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, href ? {
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {
+    role: "tooltip",
+    "aria-label": ariaLabel || helpAriaLabel
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
     type: type,
     tooltipMessage: children,
     tooltipPosition: tooltipPosition,
     tooltipVisible: isFocused || isTooltipVisible,
     tooltipBgColor: tooltipBgColor,
     tooltipFontColor: tooltipFontColor,
-    tooltipFlipOverrides: tooltipFlipOverrides
-  }));
+    tooltipFlipOverrides: tooltipFlipOverrides,
+    focusable: false,
+    "aria-hidden": "true"
+  }, href && {
+    role: "tooltip",
+    ariaLabel: ariaLabel || helpAriaLabel
+  })));
 };
 
 Help.propTypes = { ...marginPropTypes,
@@ -150,7 +164,10 @@ Help.propTypes = { ...marginPropTypes,
 
     return new Error( // eslint-disable-next-line max-len
     `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  }
+  },
+
+  /** Aria label */
+  ariaLabel: _propTypes.default.string
 };
 Help.defaultProps = {
   tooltipPosition: "top",

package/lib/components/help/help.d.ts

@@ -30,6 +30,8 @@ export interface HelpProps extends MarginProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** Help Icon type */
   type?: IconType;
+  /** Aria label */
+  ariaLabel?: string;
 }
 
 declare function Help(props: HelpProps): JSX.Element;

package/lib/components/icon/icon-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ICONS = exports.ICON_COLORS = exports.ICON_BACKGROUNDS = exports.ICON_SIZES = exports.ICON_SHAPES = exports.ICON_TOOLTIP_POSITIONS = void 0;
+exports.default = exports.ICONS = exports.ICON_FONT_SIZES = exports.ICON_SIZES = exports.ICON_SHAPES = exports.ICON_TOOLTIP_POSITIONS = void 0;
 const dlsConfig = {
   backgroundSize: {
     "extra-small": "16px",
@@ -30,10 +30,8 @@ const ICON_SHAPES = ["circle", "rounded-rect", "square"];
 exports.ICON_SHAPES = ICON_SHAPES;
 const ICON_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
 exports.ICON_SIZES = ICON_SIZES;
-const ICON_BACKGROUNDS = ["info", "error", "success", "warning", "business", "none"];
-exports.ICON_BACKGROUNDS = ICON_BACKGROUNDS;
-const ICON_COLORS = ["default", "on-light-background", "on-dark-background", "business-color"];
-exports.ICON_COLORS = ICON_COLORS;
+const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
+exports.ICON_FONT_SIZES = ICON_FONT_SIZES;
 const ICONS = ["add", "alert", "analysis", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_up", "attach", "bank", "basket", "basket_with_squares", "bin", "blocked", "blocked_square", "block_arrow_right", "bold", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "camera", "card_view", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "delete", "delivery", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger", "ledger_arrow_left", "ledger_arrow_right", "link", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "messages", "minus", "minus_large", "mobile", "money_bag", "pause", "pause_circle", "pdf", "people", "people_switch", "person", "person_info", "person_tick", "phone", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "question", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick", "tick_circle", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning", "admin", "arrow", "contacts", "create", "disconnect", "entry", "go", "lightbulb_off", "lightbulb_on", "none", "old_warning", "piggy_bank", "question_hollow", "question_mark", "settings_old", "talk", "true_tick"];
 exports.ICONS = ICONS;
 var _default = dlsConfig;

package/lib/components/icon/icon.component.js

@@ -19,8 +19,6 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
 
 var _utils = require("../../style/utils");
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 var _iconConfig = require("./icon-config");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
@@ -33,19 +31,16 @@ 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); }
 
-let deprecatedWarnTriggered = false;
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Icon = /*#__PURE__*/_react.default.forwardRef(({
   bg,
   bgShape,
   bgSize,
-  bgTheme,
   className,
   color,
   disabled,
   fontSize,
-  iconColor,
   type,
   tooltipMessage,
   tooltipPosition,
@@ -56,14 +51,11 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   tabIndex,
   isPartOfInput,
   inputSize,
+  role,
+  ariaLabel,
+  focusable = true,
   ...rest
 }, ref) => {
-  if (!deprecatedWarnTriggered && (iconColor || bgTheme)) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate("`iconColor` and `bgTheme` props are deprecated and will soon be removed");
-  }
-
   const isInteractive = !!tooltipMessage && !disabled;
   /** Return Icon type with overrides */
 
@@ -91,18 +83,17 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
 
+  const hasTooltip = !disabled && tooltipMessage && focusable;
   const styleProps = {
     bg,
-    bgTheme,
     bgSize,
     bgShape,
     color,
     disabled,
     fontSize,
     isInteractive,
-    iconColor,
-    tabIndex,
     type: iconType(),
+    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
     ...(0, _utils.filterStyledSystemMarginProps)(rest)
   };
 
@@ -111,7 +102,11 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     key: "icon",
     className: className || null,
     "data-element": iconType()
-  }, (0, _tags.default)("icon", rest), styleProps));
+  }, (0, _tags.default)("icon", rest), styleProps, {
+    hasTooltip: hasTooltip,
+    "aria-label": ariaLabel,
+    role: hasTooltip && role === undefined ? "tooltip" : role
+  }));
 
   const {
     tooltipPosition: tooltipPositionFromContext
@@ -157,19 +152,13 @@ Icon.propTypes = { ...marginPropTypes,
   /** Background shape */
   bgShape: _propTypes.default.oneOf(["circle", "rounded-rect", "square"]),
 
-  /** Background color theme */
-  bgTheme: _propTypes.default.oneOf(["info", "error", "success", "warning", "business", "none"]),
-
   /** Icon font size */
   fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"]),
 
-  /** Icon color */
-  iconColor: _propTypes.default.oneOf(["default", "on-light-background", "on-dark-background", "business-color"]),
-
-  /** Override iconColor, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide any color from palette or any valid css color value. */
   color: _propTypes.default.string,
 
-  /** Override bgTheme, provide any color from palette or any valid css color value. */
+  /** Background colour, provide any color from palette or any valid css color value. */
   bg: _propTypes.default.string,
 
   /** Sets the icon in the disabled state */
@@ -216,7 +205,10 @@ Icon.propTypes = { ...marginPropTypes,
   inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
 
   /** @ignore @private */
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.number])
+  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** @ignore @private */
+  focusable: _propTypes.default.bool
 };
 Icon.defaultProps = {
   bgSize: "small",

package/lib/components/icon/icon.d.ts

@@ -15,13 +15,7 @@ export type FontSize =
   | "large"
   | "extra-large";
 export type BackgroundShape = "circle" | "rounded-rect" | "square";
-export type BackgroundTheme =
-  | "info"
-  | "error"
-  | "success"
-  | "warning"
-  | "business"
-  | "none";
+
 export type IconType =
   | "add"
   | "alert"
@@ -209,11 +203,6 @@ export type IconType =
   | "video"
   | "view"
   | "warning";
-export type IconColor =
-  | "default"
-  | "on-light-background"
-  | "on-dark-background"
-  | "business-color";
 
 export interface IconProps extends MarginProps {
   /** Icon type */
@@ -222,15 +211,11 @@ export interface IconProps extends MarginProps {
   bgSize?: BgSize;
   /** Background shape */
   bgShape?: BackgroundShape;
-  /** Background color theme */
-  bgTheme?: BackgroundTheme;
   /** Icon font size */
   fontSize?: FontSize;
-  /** Icon color */
-  iconColor?: IconColor;
-  /** Override iconColor, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide any color from palette or any valid css color value. */
   color?: string;
-  /** Override bgTheme, provide any color from palette or any valid css color value. */
+  /** Background colour, provide any color from palette or any valid css color value. */
   bg?: string;
   /** Sets the icon in the disabled state */
   disabled?: boolean;