carbon-react 144.9.1 → 144.9.2

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

@@ -1,13 +1,15 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
-import { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator } from "./tab-title.style";
+import { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator } from "./tab-title.style";
 import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
 import ValidationIcon from "../../../../__internal__/validations/validation-icon.component";
 import Icon from "../../../icon";
 import Events from "../../../../__internal__/utils/helpers/events";
 import { TooltipProvider } from "../../../../__internal__/tooltip-provider";
 import TabTitleContext from "./tab-title.context";
+import Typography from "../../../typography";
+import NewValidationContext from "../../../carbon-provider/__internal__/new-validation.context";
 const TabTitle = /*#__PURE__*/React.forwardRef(({
   isTabSelected,
   dataTabId,
@@ -34,6 +36,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   onKeyDown,
   align,
   tabIndex,
+  id,
   ...tabTitleProps
 }, ref) => {
   const isHref = !!href;
@@ -41,6 +44,15 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   const hasFailedValidation = error || warning || info;
   const [shouldShowTooltip, setShouldShowTooltip] = useState(false);
   const hasHover = useRef(false);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  let screenReaderMessage = "";
+  if (error) {
+    screenReaderMessage = errorMessage;
+  } else if (warning) {
+    screenReaderMessage = warningMessage;
+  }
   const showTooltip = () => {
     setShouldShowTooltip(true);
   };
@@ -121,12 +133,14 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     hasCustomLayout: !!customLayout,
     alternateStyling: hasAlternateStyling,
     align: align,
-    hasHref: !!href
+    hasHref: !!href,
+    validationRedesignOptIn: validationRedesignOptIn
   }, renderContent(), isHref && /*#__PURE__*/React.createElement(Icon, {
     type: "link"
   }), hasFailedValidation && /*#__PURE__*/React.createElement(StyledLayoutWrapper, {
     position: position,
-    hasCustomSibling: !!customLayout
+    hasCustomSibling: !!customLayout,
+    validationRedesignOptIn: validationRedesignOptIn
   }, error && /*#__PURE__*/React.createElement(ValidationIcon, {
     tooltipPosition: "top",
     error: errorMessage
@@ -136,7 +150,9 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   }), !warning && !error && info && /*#__PURE__*/React.createElement(ValidationIcon, {
     tooltipPosition: "top",
     info: infoMessage
-  }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/React.createElement(StyledSelectedIndicator, {
+  }))), validationRedesignOptIn && position === "left" && /*#__PURE__*/React.createElement(StyledVerticalIndicator, null), (!(hasFailedValidation || hasAlternateStyling) || validationRedesignOptIn) && isTabSelected && /*#__PURE__*/React.createElement(StyledSelectedIndicator, {
+    warning: warning,
+    error: error,
     "data-element": "tab-selected-indicator",
     "data-role": "tab-selected-indicator",
     position: position
@@ -158,8 +174,12 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     borders,
     isInSidebar,
     tabIndex,
+    id,
     ...tabTitleProps,
-    ...tagComponent("tab-header", tabTitleProps),
+    ...tagComponent("tab-header", {
+      id,
+      ...tabTitleProps
+    }),
     onKeyDown: handleKeyDown,
     onClick: handleClick,
     size,
@@ -172,7 +192,13 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
       hideTooltip();
     },
     onFocus: showTooltip,
-    onBlur: hideTooltip
+    onBlur: hideTooltip,
+    ...(validationRedesignOptIn && hasFailedValidation && {
+      "aria-invalid": true,
+      "aria-errormessage": `${id}-message`,
+      "aria-describedby": `${id}-message`
+    }),
+    validationRedesignOptIn
   };
   const tabTitle = isHref ? /*#__PURE__*/React.createElement(StyledTabTitleLink, _extends({}, titleWrapperProps, {
     ref: ref,
@@ -183,12 +209,15 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }), titleChildren);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
-    tooltipVisible: shouldShowTooltip
+    tooltipVisible: validationRedesignOptIn ? false : shouldShowTooltip
   }, /*#__PURE__*/React.createElement(TabTitleContext.Provider, {
     value: {
       isInTab: true
     }
-  }, tabTitle));
+  }, tabTitle), validationRedesignOptIn && hasFailedValidation && /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true,
+    id: `${id}-message`
+  }, screenReaderMessage));
 });
 if (process.env.NODE_ENV !== "production") {
   TabTitle.propTypes = {

package/esm/components/tabs/__internal__/tab-title/tab-title.style.d.ts

@@ -4,15 +4,23 @@ interface StyledTitleContentProps extends Pick<TabTitleProps, "align" | "borders
     hasCustomLayout?: boolean;
     hasHref?: boolean;
     hasSiblings?: boolean;
+    validationRedesignOptIn?: boolean;
 }
 declare const StyledTitleContent: import("styled-components").StyledComponent<"span", any, StyledTitleContentProps, never>;
-declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps, never>;
-declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps, never>;
+declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
+declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
 interface StyledLayoutWrapperProps extends Pick<TabTitleProps, "titlePosition" | "position"> {
     hasCustomLayout?: boolean;
     hasCustomSibling?: boolean;
+    validationRedesignOptIn?: boolean;
 }
 declare const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, StyledLayoutWrapperProps, never>;
-declare type StyledSelectedIndicatorProps = Pick<TabTitleProps, "position">;
-declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, StyledSelectedIndicatorProps, never>;
-export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, };
+declare const StyledVerticalIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, Pick<TabTitleProps, "error" | "warning" | "position"> & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
+export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator, };

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

@@ -7,7 +7,7 @@ const oldFocusStyling = `
 `;
 const StyledTitleContent = styled.span`
   outline: none;
-  display: inline-block;
+  display: inline-flex;
   line-height: 20px;
   margin: 0;
   position: relative;
@@ -26,7 +26,8 @@ const StyledTitleContent = styled.span`
   noRightBorder,
   hasHref,
   alternateStyling,
-  align
+  align,
+  validationRedesignOptIn
 }) => css`
     text-align: ${align};
 
@@ -40,6 +41,10 @@ const StyledTitleContent = styled.span`
       border-top-right-radius: var(--borderRadius000);
     `}
 
+    ${position === "left" && validationRedesignOptIn && css`
+      justify-content: space-between;
+    `}
+
     ${position === "top" && css`
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
@@ -110,7 +115,7 @@ const StyledTitleContent = styled.span`
     ${(warning || info) && css`
       outline: 1px solid;
       outline-offset: -1px;
-      z-index: 2;
+      z-index: ${validationRedesignOptIn ? 1 : 2};
 
       ${info && !warning && css`
         outline-color: var(--colorsSemanticInfo500);
@@ -159,7 +164,7 @@ const StyledTitleContent = styled.span`
     ${error && css`
       outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
-      z-index: 2;
+      z-index: ${validationRedesignOptIn ? 1 : 2};
 
       ${position === "top" && css`
         border-bottom-color: transparent;
@@ -263,7 +268,8 @@ const tabTitleStyles = css`
   error,
   warning,
   info,
-  isInSidebar
+  isInSidebar,
+  validationRedesignOptIn
 }) => css`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
@@ -290,9 +296,15 @@ const tabTitleStyles = css`
 
     ${!isTabSelected && css`
       color: var(--colorsActionMinorYin090);
+      ${validationRedesignOptIn && css`
+        background: transparent;
+      `}
 
       &:hover {
         background: var(--colorsActionMinor100);
+        ${validationRedesignOptIn && css`
+          background: var(--colorsUtilityMajor100);
+        `}
         color: var(--colorsActionMinorYin090);
         outline: none;
       }
@@ -334,7 +346,9 @@ const tabTitleStyles = css`
       border-bottom: 0px;
 
       ${!isInSidebar && !error && css`
-        border-right: ${alternateStyling ? "1px" : "2px"} solid
+        --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"}
+          border-right:
+          ${alternateStyling ? "1px" : "var(--border-right-value)"} solid
           var(--colorsActionMinor100);
       `}
 
@@ -360,6 +374,10 @@ const tabTitleStyles = css`
         border-right: none;
       `}
 
+      ${!isTabSelected && css`
+        border-right-color: var(--colorsActionMinor100);
+      `}
+
       ${isTabSelected && css`
         ${alternateStyling && css`
           border-right-color: var(--colorsActionMinor100);
@@ -370,7 +388,7 @@ const tabTitleStyles = css`
           padding-bottom: 0px;
 
           ${StyledTitleContent} {
-            ${!(error || warning || info) && "margin-right: 2px;"}
+            ${!(error || warning || info) && !validationRedesignOptIn && "margin-right: 2px;"}
             border-right: none;
           }
         `}
@@ -415,7 +433,8 @@ const StyledLayoutWrapper = styled.div`
   hasCustomLayout,
   titlePosition = "before",
   hasCustomSibling,
-  position
+  position,
+  validationRedesignOptIn
 }) => css`
     ${hasCustomLayout && css`
       flex-grow: 2;
@@ -441,27 +460,52 @@ const StyledLayoutWrapper = styled.div`
         z-index: 10;
 
         ${StyledIcon} {
-          height: 16px;
+          height: ${validationRedesignOptIn ? "0px" : "16px"};
           left: -2px;
-          top: ${position === "left" ? "1px" : "3px"};
         }
       }
     `}
   `}
 `;
+const StyledVerticalIndicator = styled.div`
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
+    var(--colorsActionMinor100);
+  width: 2px;
+  z-index: 1;
+`;
 const StyledSelectedIndicator = styled.div`
   position: absolute;
   z-index: 1;
+  ${validationRedesignOptIn => css`
+    ${validationRedesignOptIn && css`
+      z-index: 2;
+    `}
+  `}
 
   ${({
-  position = "top"
+  position = "top",
+  warning,
+  error
 }) => css`
+    --selected-indicator-color: var(--colorsActionMajor500);
+
+    ${warning && css`
+      --selected-indicator-color: var(--colorsSemanticCaution500);
+    `}
+
+    ${error && css`
+      --selected-indicator-color: var(--colorsSemanticNegative500);
+    `}
     ${position === "top" && css`
       bottom: 0px;
       left: 0px;
       right: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing050)) 0px
-        var(--colorsActionMajor500);
+        var(--selected-indicator-color);
       height: var(--sizing050);
     `}
 
@@ -470,9 +514,9 @@ const StyledSelectedIndicator = styled.div`
       bottom: 0px;
       right: 0px;
       box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
-        var(--colorsActionMajor500);
+        var(--selected-indicator-color);
       width: var(--sizing050);
     `}
   `}
 `;
-export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator };
+export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator };

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -1,7 +1,8 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsBottomBorder, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledVerticalTabsWrapper } from "./tabs-header.style";
 import useThrottle from "../../../../hooks/__internal__/useThrottle";
+import NewValidationContext from "../../../carbon-provider/__internal__/new-validation.context";
 
 /*  In the original prototype the tabs have shadows that fade out as you scroll horizontally.
  *  This value is the closest replication to the way that the shadow disappears.
@@ -24,6 +25,9 @@ const TabsHeader = ({
 }) => {
   const [leftScrollOpacity, setLeftScrollOpacity] = useState(0);
   const [rightScrollOpacity, setRightScrollOpacity] = useState(1);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const ref = useRef(null);
   let isScrollable = false;
   const {
@@ -56,7 +60,9 @@ const TabsHeader = ({
     rightScrollOpacity: rightScrollOpacity,
     isScrollable: isScrollable,
     ref: ref
-  }, position === "top" ? /*#__PURE__*/React.createElement(StyledTabsWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorderWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorder, null)), children) : /*#__PURE__*/React.createElement(StyledVerticalTabsWrapper, {
+  }, position === "top" ? /*#__PURE__*/React.createElement(StyledTabsWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorderWrapper, {
+    validationRedesignOptIn: validationRedesignOptIn
+  }, /*#__PURE__*/React.createElement(StyledTabsBottomBorder, null)), children) : /*#__PURE__*/React.createElement(StyledVerticalTabsWrapper, {
     isInSidebar: isInSidebar
   }, children)));
 };

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -10,6 +10,8 @@ declare const StyledTabsHeaderList: import("styled-components").StyledComponent<
 declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
 declare const StyledVerticalTabsWrapper: import("styled-components").StyledComponent<"div", any, StyledVerticalTabsWrapperProps, never>;
-declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
 declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper, };

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -148,7 +148,12 @@ const StyledTabsBottomBorderWrapper = styled.div`
   position: absolute;
   width: 100%;
   height: auto;
-  bottom: 0;
+  bottom: 0px;
+  ${({
+  validationRedesignOptIn
+}) => css`
+    z-index: ${validationRedesignOptIn ? 2 : ""};
+  `}
 `;
 const StyledTabsBottomBorder = styled.div`
   position: sticky;

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

@@ -13,6 +13,8 @@ var _icon = _interopRequireDefault(require("../../../icon"));
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
 var _tooltipProvider = require("../../../../__internal__/tooltip-provider");
 var _tabTitle2 = _interopRequireDefault(require("./tab-title.context"));
+var _typography = _interopRequireDefault(require("../../../typography"));
+var _newValidation = _interopRequireDefault(require("../../../carbon-provider/__internal__/new-validation.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -43,6 +45,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   onKeyDown,
   align,
   tabIndex,
+  id,
   ...tabTitleProps
 }, ref) => {
   const isHref = !!href;
@@ -50,6 +53,15 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   const hasFailedValidation = error || warning || info;
   const [shouldShowTooltip, setShouldShowTooltip] = (0, _react.useState)(false);
   const hasHover = (0, _react.useRef)(false);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
+  let screenReaderMessage = "";
+  if (error) {
+    screenReaderMessage = errorMessage;
+  } else if (warning) {
+    screenReaderMessage = warningMessage;
+  }
   const showTooltip = () => {
     setShouldShowTooltip(true);
   };
@@ -130,12 +142,14 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     hasCustomLayout: !!customLayout,
     alternateStyling: hasAlternateStyling,
     align: align,
-    hasHref: !!href
+    hasHref: !!href,
+    validationRedesignOptIn: validationRedesignOptIn
   }, renderContent(), isHref && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "link"
   }), hasFailedValidation && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledLayoutWrapper, {
     position: position,
-    hasCustomSibling: !!customLayout
+    hasCustomSibling: !!customLayout,
+    validationRedesignOptIn: validationRedesignOptIn
   }, error && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     tooltipPosition: "top",
     error: errorMessage
@@ -145,7 +159,9 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   }), !warning && !error && info && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     tooltipPosition: "top",
     info: infoMessage
-  }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
+  }))), validationRedesignOptIn && position === "left" && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledVerticalIndicator, null), (!(hasFailedValidation || hasAlternateStyling) || validationRedesignOptIn) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
+    warning: warning,
+    error: error,
     "data-element": "tab-selected-indicator",
     "data-role": "tab-selected-indicator",
     position: position
@@ -167,8 +183,12 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     borders,
     isInSidebar,
     tabIndex,
+    id,
     ...tabTitleProps,
-    ...(0, _tags.default)("tab-header", tabTitleProps),
+    ...(0, _tags.default)("tab-header", {
+      id,
+      ...tabTitleProps
+    }),
     onKeyDown: handleKeyDown,
     onClick: handleClick,
     size,
@@ -181,7 +201,13 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
       hideTooltip();
     },
     onFocus: showTooltip,
-    onBlur: hideTooltip
+    onBlur: hideTooltip,
+    ...(validationRedesignOptIn && hasFailedValidation && {
+      "aria-invalid": true,
+      "aria-errormessage": `${id}-message`,
+      "aria-describedby": `${id}-message`
+    }),
+    validationRedesignOptIn
   };
   const tabTitle = isHref ? /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTabTitleLink, _extends({}, titleWrapperProps, {
     ref: ref,
@@ -192,12 +218,15 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref
   }), titleChildren);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    tooltipVisible: shouldShowTooltip
+    tooltipVisible: validationRedesignOptIn ? false : shouldShowTooltip
   }, /*#__PURE__*/_react.default.createElement(_tabTitle2.default.Provider, {
     value: {
       isInTab: true
     }
-  }, tabTitle));
+  }, tabTitle), validationRedesignOptIn && hasFailedValidation && /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true,
+    id: `${id}-message`
+  }, screenReaderMessage));
 });
 if (process.env.NODE_ENV !== "production") {
   TabTitle.propTypes = {

package/lib/components/tabs/__internal__/tab-title/tab-title.style.d.ts

@@ -4,15 +4,23 @@ interface StyledTitleContentProps extends Pick<TabTitleProps, "align" | "borders
     hasCustomLayout?: boolean;
     hasHref?: boolean;
     hasSiblings?: boolean;
+    validationRedesignOptIn?: boolean;
 }
 declare const StyledTitleContent: import("styled-components").StyledComponent<"span", any, StyledTitleContentProps, never>;
-declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps, never>;
-declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps, never>;
+declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
+declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
 interface StyledLayoutWrapperProps extends Pick<TabTitleProps, "titlePosition" | "position"> {
     hasCustomLayout?: boolean;
     hasCustomSibling?: boolean;
+    validationRedesignOptIn?: boolean;
 }
 declare const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, StyledLayoutWrapperProps, never>;
-declare type StyledSelectedIndicatorProps = Pick<TabTitleProps, "position">;
-declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, StyledSelectedIndicatorProps, never>;
-export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, };
+declare const StyledVerticalIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, Pick<TabTitleProps, "error" | "warning" | "position"> & {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
+export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator, };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTitleContent = exports.StyledTabTitleLink = exports.StyledTabTitleButton = exports.StyledSelectedIndicator = exports.StyledLayoutWrapper = void 0;
+exports.StyledVerticalIndicator = exports.StyledTitleContent = exports.StyledTabTitleLink = exports.StyledTabTitleButton = exports.StyledSelectedIndicator = exports.StyledLayoutWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 var _validationIcon = _interopRequireDefault(require("../../../../__internal__/validations/validation-icon.style"));
@@ -16,7 +16,7 @@ const oldFocusStyling = `
 `;
 const StyledTitleContent = exports.StyledTitleContent = _styledComponents.default.span`
   outline: none;
-  display: inline-block;
+  display: inline-flex;
   line-height: 20px;
   margin: 0;
   position: relative;
@@ -35,7 +35,8 @@ const StyledTitleContent = exports.StyledTitleContent = _styledComponents.defaul
   noRightBorder,
   hasHref,
   alternateStyling,
-  align
+  align,
+  validationRedesignOptIn
 }) => (0, _styledComponents.css)`
     text-align: ${align};
 
@@ -49,6 +50,10 @@ const StyledTitleContent = exports.StyledTitleContent = _styledComponents.defaul
       border-top-right-radius: var(--borderRadius000);
     `}
 
+    ${position === "left" && validationRedesignOptIn && (0, _styledComponents.css)`
+      justify-content: space-between;
+    `}
+
     ${position === "top" && (0, _styledComponents.css)`
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
@@ -119,7 +124,7 @@ const StyledTitleContent = exports.StyledTitleContent = _styledComponents.defaul
     ${(warning || info) && (0, _styledComponents.css)`
       outline: 1px solid;
       outline-offset: -1px;
-      z-index: 2;
+      z-index: ${validationRedesignOptIn ? 1 : 2};
 
       ${info && !warning && (0, _styledComponents.css)`
         outline-color: var(--colorsSemanticInfo500);
@@ -168,7 +173,7 @@ const StyledTitleContent = exports.StyledTitleContent = _styledComponents.defaul
     ${error && (0, _styledComponents.css)`
       outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
-      z-index: 2;
+      z-index: ${validationRedesignOptIn ? 1 : 2};
 
       ${position === "top" && (0, _styledComponents.css)`
         border-bottom-color: transparent;
@@ -272,7 +277,8 @@ const tabTitleStyles = (0, _styledComponents.css)`
   error,
   warning,
   info,
-  isInSidebar
+  isInSidebar,
+  validationRedesignOptIn
 }) => (0, _styledComponents.css)`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
@@ -299,9 +305,15 @@ const tabTitleStyles = (0, _styledComponents.css)`
 
     ${!isTabSelected && (0, _styledComponents.css)`
       color: var(--colorsActionMinorYin090);
+      ${validationRedesignOptIn && (0, _styledComponents.css)`
+        background: transparent;
+      `}
 
       &:hover {
         background: var(--colorsActionMinor100);
+        ${validationRedesignOptIn && (0, _styledComponents.css)`
+          background: var(--colorsUtilityMajor100);
+        `}
         color: var(--colorsActionMinorYin090);
         outline: none;
       }
@@ -343,7 +355,9 @@ const tabTitleStyles = (0, _styledComponents.css)`
       border-bottom: 0px;
 
       ${!isInSidebar && !error && (0, _styledComponents.css)`
-        border-right: ${alternateStyling ? "1px" : "2px"} solid
+        --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"}
+          border-right:
+          ${alternateStyling ? "1px" : "var(--border-right-value)"} solid
           var(--colorsActionMinor100);
       `}
 
@@ -369,6 +383,10 @@ const tabTitleStyles = (0, _styledComponents.css)`
         border-right: none;
       `}
 
+      ${!isTabSelected && (0, _styledComponents.css)`
+        border-right-color: var(--colorsActionMinor100);
+      `}
+
       ${isTabSelected && (0, _styledComponents.css)`
         ${alternateStyling && (0, _styledComponents.css)`
           border-right-color: var(--colorsActionMinor100);
@@ -379,7 +397,7 @@ const tabTitleStyles = (0, _styledComponents.css)`
           padding-bottom: 0px;
 
           ${StyledTitleContent} {
-            ${!(error || warning || info) && "margin-right: 2px;"}
+            ${!(error || warning || info) && !validationRedesignOptIn && "margin-right: 2px;"}
             border-right: none;
           }
         `}
@@ -424,7 +442,8 @@ const StyledLayoutWrapper = exports.StyledLayoutWrapper = _styledComponents.defa
   hasCustomLayout,
   titlePosition = "before",
   hasCustomSibling,
-  position
+  position,
+  validationRedesignOptIn
 }) => (0, _styledComponents.css)`
     ${hasCustomLayout && (0, _styledComponents.css)`
       flex-grow: 2;
@@ -450,27 +469,52 @@ const StyledLayoutWrapper = exports.StyledLayoutWrapper = _styledComponents.defa
         z-index: 10;
 
         ${_icon.default} {
-          height: 16px;
+          height: ${validationRedesignOptIn ? "0px" : "16px"};
           left: -2px;
-          top: ${position === "left" ? "1px" : "3px"};
         }
       }
     `}
   `}
 `;
+const StyledVerticalIndicator = exports.StyledVerticalIndicator = _styledComponents.default.div`
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
+    var(--colorsActionMinor100);
+  width: 2px;
+  z-index: 1;
+`;
 const StyledSelectedIndicator = exports.StyledSelectedIndicator = _styledComponents.default.div`
   position: absolute;
   z-index: 1;
+  ${validationRedesignOptIn => (0, _styledComponents.css)`
+    ${validationRedesignOptIn && (0, _styledComponents.css)`
+      z-index: 2;
+    `}
+  `}
 
   ${({
-  position = "top"
+  position = "top",
+  warning,
+  error
 }) => (0, _styledComponents.css)`
+    --selected-indicator-color: var(--colorsActionMajor500);
+
+    ${warning && (0, _styledComponents.css)`
+      --selected-indicator-color: var(--colorsSemanticCaution500);
+    `}
+
+    ${error && (0, _styledComponents.css)`
+      --selected-indicator-color: var(--colorsSemanticNegative500);
+    `}
     ${position === "top" && (0, _styledComponents.css)`
       bottom: 0px;
       left: 0px;
       right: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing050)) 0px
-        var(--colorsActionMajor500);
+        var(--selected-indicator-color);
       height: var(--sizing050);
     `}
 
@@ -479,7 +523,7 @@ const StyledSelectedIndicator = exports.StyledSelectedIndicator = _styledCompone
       bottom: 0px;
       right: 0px;
       box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
-        var(--colorsActionMajor500);
+        var(--selected-indicator-color);
       width: var(--sizing050);
     `}
   `}

package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tabsHeader = require("./tabs-header.style");
 var _useThrottle = _interopRequireDefault(require("../../../../hooks/__internal__/useThrottle"));
+var _newValidation = _interopRequireDefault(require("../../../carbon-provider/__internal__/new-validation.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -32,6 +33,9 @@ const TabsHeader = ({
 }) => {
   const [leftScrollOpacity, setLeftScrollOpacity] = (0, _react.useState)(0);
   const [rightScrollOpacity, setRightScrollOpacity] = (0, _react.useState)(1);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
   const ref = (0, _react.useRef)(null);
   let isScrollable = false;
   const {
@@ -64,7 +68,9 @@ const TabsHeader = ({
     rightScrollOpacity: rightScrollOpacity,
     isScrollable: isScrollable,
     ref: ref
-  }, position === "top" ? /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorderWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorder, null)), children) : /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledVerticalTabsWrapper, {
+  }, position === "top" ? /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorderWrapper, {
+    validationRedesignOptIn: validationRedesignOptIn
+  }, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorder, null)), children) : /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledVerticalTabsWrapper, {
     isInSidebar: isInSidebar
   }, children)));
 };

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -10,6 +10,8 @@ declare const StyledTabsHeaderList: import("styled-components").StyledComponent<
 declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
 declare const StyledVerticalTabsWrapper: import("styled-components").StyledComponent<"div", any, StyledVerticalTabsWrapperProps, never>;
-declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {
+    validationRedesignOptIn?: boolean | undefined;
+}, never>;
 declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper, };

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -157,7 +157,12 @@ const StyledTabsBottomBorderWrapper = exports.StyledTabsBottomBorderWrapper = _s
   position: absolute;
   width: 100%;
   height: auto;
-  bottom: 0;
+  bottom: 0px;
+  ${({
+  validationRedesignOptIn
+}) => (0, _styledComponents.css)`
+    z-index: ${validationRedesignOptIn ? 2 : ""};
+  `}
 `;
 const StyledTabsBottomBorder = exports.StyledTabsBottomBorder = _styledComponents.default.div`
   position: sticky;

package/package.json

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