carbon-react 123.10.2 → 123.11.0

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

@@ -6,8 +6,10 @@ export interface BadgeProps {
     children: React.ReactNode;
     /** The number rendered in the badge component */
     counter?: string | number;
+    /** Prop to specify the colour of the component */
+    color?: string;
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/esm/components/badge/badge.component.js

@@ -6,6 +6,7 @@ export const Badge = ({
   "aria-label": ariaLabel,
   children,
   counter = 0,
+  color = "--colorsActionMajor500",
   onClick
 }) => {
   const shouldDisplayCounter = counter > 0;
@@ -19,7 +20,8 @@ export const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
-        "data-component": "badge"
+        "data-component": "badge",
+        color: color
       }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
         "data-element": "badge-cross-icon",
         type: "cross"

package/esm/components/badge/badge.style.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledBadgeProps {
+    color: string;
+}
 declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
     as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
-}, "as">;
+} & StyledBadgeProps, "as">;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/esm/components/badge/badge.style.js

@@ -2,6 +2,8 @@ import styled, { css } from "styled-components";
 import StyledIcon from "../icon/icon.style";
 import Button from "../button";
 import Icon from "../icon";
+import baseTheme from "../../style/themes/base";
+import { toColor } from "../../style/utils/color";
 const commonStyles = `
   overflow: hidden;
   border-radius: var(--borderRadiusCircle);
@@ -34,15 +36,23 @@ const StyledBadge = styled.span.attrs(({
   width: 22px;
   min-height: 22px;
   border: solid 2px transparent;
-  border-color: var(--colorsActionMajor500);
-  color: var(--colorsActionMajor500);
+
+  ${({
+  color,
+  theme
+}) => css`
+    border-color: ${toColor(theme, color)};
+    color: ${toColor(theme, color)};
+  `};
 
   ::-moz-focus-inner {
     border: none;
   }
 
   ${({
-  onClick
+  onClick,
+  color,
+  theme
 }) => css`
     ${onClick && `
       ${commonStyles}
@@ -54,9 +64,12 @@ const StyledBadge = styled.span.attrs(({
         border: none;
       }
 
+      border-color: ${toColor(theme, color)};
+      color: ${toColor(theme, color)};      
+
       &:hover,
       &:focus {
-        background: var(--colorsActionMajor500);
+        background: ${toColor(theme, color)};
         border: none;
         ${StyledCounter} {
           display: none;
@@ -81,4 +94,7 @@ const StyledCrossIcon = styled(Icon)`
   margin: 0;
   display: none;
 `;
+StyledBadge.defaultProps = {
+  theme: baseTheme
+};
 export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -10,6 +10,7 @@ const StyledTitleContent = styled.span`
   display: inline-block;
   line-height: 20px;
   margin: 0;
+  position: relative;
 
   ${({
   hasCustomLayout,
@@ -109,6 +110,7 @@ const StyledTitleContent = styled.span`
     ${(warning || info) && css`
       outline: 1px solid;
       outline-offset: -1px;
+      z-index: 2;
 
       ${info && !warning && css`
         outline-color: var(--colorsSemanticInfo500);
@@ -157,6 +159,7 @@ const StyledTitleContent = styled.span`
     ${error && css`
       outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
+      z-index: 2;
 
       ${position === "top" && css`
         border-bottom-color: transparent;
@@ -319,7 +322,7 @@ const tabTitleStyles = css`
       ${({
   theme
 }) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
-      z-index: 2;
+      z-index: 3;
 
       ${isInSidebar && css`
         outline-offset: -3px;

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

@@ -6,8 +6,10 @@ export interface BadgeProps {
     children: React.ReactNode;
     /** The number rendered in the badge component */
     counter?: string | number;
+    /** Prop to specify the colour of the component */
+    color?: string;
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, onClick, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/lib/components/badge/badge.component.js

@@ -13,6 +13,7 @@ const Badge = ({
   "aria-label": ariaLabel,
   children,
   counter = 0,
+  color = "--colorsActionMajor500",
   onClick
 }) => {
   const shouldDisplayCounter = counter > 0;
@@ -26,7 +27,8 @@ const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
-        "data-component": "badge"
+        "data-component": "badge",
+        color: color
       }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
         "data-element": "badge-cross-icon",
         type: "cross"

package/lib/components/badge/badge.style.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledBadgeProps {
+    color: string;
+}
 declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
     as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;
-}, "as">;
+} & StyledBadgeProps, "as">;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };

package/lib/components/badge/badge.style.js

@@ -8,6 +8,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _button = _interopRequireDefault(require("../button"));
 var _icon2 = _interopRequireDefault(require("../icon"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _color = require("../../style/utils/color");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -45,15 +47,23 @@ const StyledBadge = _styledComponents.default.span.attrs(({
   width: 22px;
   min-height: 22px;
   border: solid 2px transparent;
-  border-color: var(--colorsActionMajor500);
-  color: var(--colorsActionMajor500);
+
+  ${({
+  color,
+  theme
+}) => (0, _styledComponents.css)`
+    border-color: ${(0, _color.toColor)(theme, color)};
+    color: ${(0, _color.toColor)(theme, color)};
+  `};
 
   ::-moz-focus-inner {
     border: none;
   }
 
   ${({
-  onClick
+  onClick,
+  color,
+  theme
 }) => (0, _styledComponents.css)`
     ${onClick && `
       ${commonStyles}
@@ -65,9 +75,12 @@ const StyledBadge = _styledComponents.default.span.attrs(({
         border: none;
       }
 
+      border-color: ${(0, _color.toColor)(theme, color)};
+      color: ${(0, _color.toColor)(theme, color)};      
+
       &:hover,
       &:focus {
-        background: var(--colorsActionMajor500);
+        background: ${(0, _color.toColor)(theme, color)};
         border: none;
         ${StyledCounter} {
           display: none;
@@ -93,4 +106,7 @@ const StyledCrossIcon = (0, _styledComponents.default)(_icon2.default)`
   margin: 0;
   display: none;
 `;
-exports.StyledCrossIcon = StyledCrossIcon;
+exports.StyledCrossIcon = StyledCrossIcon;
+StyledBadge.defaultProps = {
+  theme: _base.default
+};

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -19,6 +19,7 @@ const StyledTitleContent = _styledComponents.default.span`
   display: inline-block;
   line-height: 20px;
   margin: 0;
+  position: relative;
 
   ${({
   hasCustomLayout,
@@ -118,6 +119,7 @@ const StyledTitleContent = _styledComponents.default.span`
     ${(warning || info) && (0, _styledComponents.css)`
       outline: 1px solid;
       outline-offset: -1px;
+      z-index: 2;
 
       ${info && !warning && (0, _styledComponents.css)`
         outline-color: var(--colorsSemanticInfo500);
@@ -166,6 +168,7 @@ const StyledTitleContent = _styledComponents.default.span`
     ${error && (0, _styledComponents.css)`
       outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
+      z-index: 2;
 
       ${position === "top" && (0, _styledComponents.css)`
         border-bottom-color: transparent;
@@ -329,7 +332,7 @@ const tabTitleStyles = (0, _styledComponents.css)`
       ${({
   theme
 }) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
-      z-index: 2;
+      z-index: 3;
 
       ${isInSidebar && (0, _styledComponents.css)`
         outline-offset: -3px;

package/package.json

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