carbon-react 119.10.1 → 119.11.0

package/esm/components/menu/menu-item/menu-item.style.js

@@ -5,7 +5,19 @@ import StyledIcon from "../../icon/icon.style";
 import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
 import Link from "../../link";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
 import { baseTheme } from "../../../style/themes";
+const overrideLinkFocusStyling = fullScreenView => `
+  &:focus-within {
+    box-shadow: none;
+    a {
+      background-color: ${fullScreenView ? "var(--colorsComponentsMenuAutumnStandard600)" : "transparent"};
+    }
+  }
+`;
+const oldFocusStyling = `
+  box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
+`;
 const StyledMenuItemWrapper = styled.a.attrs({
   as: Link
 })`
@@ -32,65 +44,80 @@ const StyledMenuItemWrapper = styled.a.attrs({
     font-weight: 700;
     height: 40px;
     position: relative;
+
+    && {
+      :focus-within > a, > button {
+        background-color: transparent;
+      }
+    }
+
     a,
     button {
       cursor: pointer;
     }
-    ${!overrideColor && css`
-      background-color: ${menuConfigVariants[menuType].background};
-    `}
 
-    ${overrideColor && css`
-      &&&& {
-        background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
+      ${overrideLinkFocusStyling(inFullscreenView)}
+      a:focus,
+      button:focus {
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}`}
       }
-    `}
+    }
 
-    ${!inFullscreenView && css`
-      max-width: inherit;
+    ${!overrideColor && css`
+        background-color: ${menuConfigVariants[menuType].background};
+      `}
 
-      && {
-        a:focus,
-        button:focus {
-          box-shadow: inset 0 0 0 var(--borderWidth300)
-            var(--colorsSemanticFocus500);
-          background-color: ${menuConfigVariants[menuType].background};
-          color: ${menuConfigVariants[menuType].color};
-          z-index: 1;
-          position: relative;
+    ${overrideColor && css`
+        &&&& {
+          background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
         }
-      }
+      `}
 
-      &&& {
-        a,
-        button {
-          ${maxWidth && css`
-            box-sizing: border-box;
-            max-width: inherit;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: bottom;
-          `}
+    ${!inFullscreenView && css`
+        max-width: inherit;
+
+        && {
+          a:focus,
+          button:focus {
+            background-color: ${menuConfigVariants[menuType].background};
+            color: ${menuConfigVariants[menuType].color};
+            z-index: 1;
+            position: relative;
+          }
         }
 
-        a:hover,
-        button:hover {
-          ${!asDiv && css`
-            background-color: var(--colorsComponentsMenuAutumnStandard600);
-            color: var(--colorsComponentsMenuYang100);
+        &&& {
+          a,
+          button {
+            ${maxWidth && css`
+              box-sizing: border-box;
+              max-width: inherit;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              vertical-align: bottom;
+            `}
+          }
 
-            [data-component="icon"] {
+          a:hover,
+          button:hover {
+            ${!asDiv && css`
+              background-color: var(--colorsComponentsMenuAutumnStandard600);
               color: var(--colorsComponentsMenuYang100);
-            }
-          `}
 
-          ::before {
-            border-top-color: var(--colorsComponentsMenuYang100);
+              [data-component="icon"] {
+                color: var(--colorsComponentsMenuYang100);
+              }
+            `}
+
+            ::before {
+              border-top-color: var(--colorsComponentsMenuYang100);
+            }
           }
         }
-      }
-    `}
+      `}
 
     ${asPassiveItem ? `
         ${StyledIconButton} {
@@ -141,120 +168,120 @@ const StyledMenuItemWrapper = styled.a.attrs({
     }
 
     ${selected && css`
-      background-color: ${menuConfigVariants[menuType].selected};
-
-      a:focus,
-      button:focus {
         background-color: ${menuConfigVariants[menuType].selected};
-      }
-
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-      }
-    `}
 
-    ${variant === "alternate" && !inFullscreenView && css`
-      &&& {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
-
-      &&& a:focus,
-      &&& button:focus {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].selected};
+        }
 
-      ${!hasInput && css`
-        &&& a:hover,
-        &&& button:hover {
-          background-color: ${menuConfigVariants[menuType].alternateHover};
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
         }
       `}
-    `}
-
-    ${isOpen && css`
-      a,
-      button {
-        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-        color: ${menuConfigVariants[menuType].color};
-      }
-    `}
-
-    ${hasSubmenu && css`
-      background-color: ${menuConfigVariants[menuType].submenuBackground};
 
-      a:focus,
-      button:focus {
-        background-color: ${menuConfigVariants[menuType].submenuBackground};
-        color: ${menuConfigVariants[menuType].color};
+    ${variant === "alternate" && !inFullscreenView && css`
+        &&& {
+          background-color: ${menuConfigVariants[menuType].alternate};
+        }
 
-        [data-component="icon"] {
-          color: ${menuConfigVariants[menuType].color};
+        &&& a:focus,
+        &&& button:focus {
+          background-color: ${menuConfigVariants[menuType].alternate};
         }
 
-        ${clickToOpen && isOpen && css`
-          background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
+        ${!hasInput && css`
+          &&& a:hover,
+          &&& button:hover {
+            background-color: ${menuConfigVariants[menuType].alternateHover};
+          }
         `}
-      }
-
-      a:hover,
-      button:hover {
-        background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-        color: var(--colorsComponentsMenuYang100);
+      `}
 
-        ${!(href || clickToOpen) && css`
-          cursor: default;
+    ${isOpen && css`
+        a,
+        button {
           background-color: ${menuConfigVariants[menuType].submenuItemBackground};
           color: ${menuConfigVariants[menuType].color};
-        `}
-
-        [data-component="icon"] {
-          color: ${menuConfigVariants[menuType].color};
         }
-      }
+      `}
 
-      ${selected && css`
-        background-color: ${menuConfigVariants[menuType].submenuSelected};
+    ${hasSubmenu && css`
+        background-color: ${menuConfigVariants[menuType].submenuBackground};
 
         a:focus,
         button:focus {
-          background-color: ${menuConfigVariants[menuType].submenuSelected};
+          background-color: ${menuConfigVariants[menuType].submenuBackground};
+          color: ${menuConfigVariants[menuType].color};
+
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
+
+          ${clickToOpen && isOpen && css`
+            background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
+          `}
         }
 
         a:hover,
         button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
           color: var(--colorsComponentsMenuYang100);
-        }
-      `}
 
-      ${showDropdownArrow && css`
-        > a,
-        > button:not(${StyledIconButton}) {
-          padding-right: 32px;
-        }
+          ${!(href || clickToOpen) && css`
+            cursor: default;
+            background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+            color: ${menuConfigVariants[menuType].color};
+          `}
 
-        a::before,
-        button::before {
-          display: block;
-          margin-top: -2px;
-          pointer-events: none;
-          position: absolute;
-          right: 16px;
-          top: 50%;
-          z-index: 2;
-          content: "";
-          width: 0;
-          height: 0;
-          border-width: 5px 4px 4px;
-          border-style: solid;
-          border-top-color: initial;
-          border-right-color: transparent;
-          border-bottom-color: transparent;
-          border-left-color: transparent;
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
         }
+
+        ${selected && css`
+          background-color: ${menuConfigVariants[menuType].submenuSelected};
+
+          a:focus,
+          button:focus {
+            background-color: ${menuConfigVariants[menuType].submenuSelected};
+          }
+
+          a:hover,
+          button:hover {
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
+            color: var(--colorsComponentsMenuYang100);
+          }
+        `}
+
+        ${showDropdownArrow && css`
+          > a,
+          > button:not(${StyledIconButton}) {
+            padding-right: 32px;
+          }
+
+          a::before,
+          button::before {
+            display: block;
+            margin-top: -2px;
+            pointer-events: none;
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            z-index: 2;
+            content: "";
+            width: 0;
+            height: 0;
+            border-width: 5px 4px 4px;
+            border-style: solid;
+            border-top-color: initial;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+          }
+        `}
       `}
-    `}
 
     ${inFullscreenView && css`
       ${asDiv && css`
@@ -294,8 +321,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
       a:focus,
       button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
         z-index: 1;
         position: relative;
       }

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -33,7 +33,10 @@ const StyledMultiActionButton = styled.div`
 
     &:focus {
       background-color: var(--colorsActionMajor700);
-      border: 3px solid var(--colorsSemanticFocus500);
+      border: 3px solid
+        ${({
+  theme
+}) => !theme.focusRedesignOptOut ? "var(--colorsActionMajor700)" : /* istanbul ignore next */"var(--colorsSemanticFocus500)"};
       outline: none;
       margin: 0 -1px;
 
@@ -55,7 +58,12 @@ const StyledMultiActionButton = styled.div`
         }
 
         &:focus {
-          border-color: var(--colorsSemanticFocus500);
+          ${({
+  theme
+}) => /* istanbul ignore next */
+theme.focusRedesignOptOut && css`
+              border-color: var(--colorsSemanticFocus500);
+            `}
           margin: 0 -1px;
         }
       `}

package/esm/components/pager/pager.style.js

@@ -103,9 +103,8 @@ const StyledPagerNavLabel = styled.label`
   margin: 4px 0;
 `;
 const StyledPagerLink = styled(Link)`
-  padding: 0 10px;
-  margin-left: 7px;
-  margin-right: 7px;
+  margin-left: 17px;
+  margin-right: 17px;
 
   ${({
   hideDisabledButtons

package/esm/components/pill/pill.style.js

@@ -159,8 +159,12 @@ const StyledPill = styled.span`
           line-height: 16px;
 
           &:focus {
-            outline: none;
-            box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
+            ${theme.focusRedesignOptOut && /* istanbul ignore next */
+  css`
+              outline: none;
+              box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
+            `}
+
             background-color: ${buttonFocusColor};
             ${!theme.roundedCornersOptOut && css`
               border-radius: var(--borderRadius000) var(--borderRadius025)

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -3,6 +3,7 @@ import { Input } from "../../../__internal__/input";
 import checkerBoardSvg from "./checker-board.svg";
 import Icon from "../../icon";
 import getRgbValues from "../../../style/utils/get-rgb-values";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
 export const StyledSimpleColor = styled.div`
   width: var(--sizing700);
   height: var(--sizing700);
@@ -13,6 +14,10 @@ export const StyledSimpleColor = styled.div`
     cursor: pointer;
   }
 `;
+const oldFocusStyling = `
+  box-shadow: inset 0px 0px 0px var(--borderWidth200) var(--colorsUtilityYang100);
+  border: 2px solid var(--colorsSemanticFocus500);
+`;
 export const StyledColorSampleBox = styled.div`
   height: 100%;
   width: 100%;
@@ -20,7 +25,10 @@ export const StyledColorSampleBox = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid transparent;
+  ${({
+  theme
+}) => /* istanbul ignore next */
+theme.focusRedesignOptOut && "border: 2px solid transparent;"}
 
   ${({
   color
@@ -53,9 +61,18 @@ export const StyledSimpleColorInput = styled(Input)`
   }
 
   &:focus + ${StyledColorSampleBox} {
-    box-shadow: inset 0px 0px 0px var(--borderWidth200)
-      var(--colorsUtilityYang100);
-    border: 2px solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => css`
+      ${theme.focusRedesignOptOut && /* istanbul ignore next */
+`
+        ${oldFocusStyling}
+      `}
+
+      ${!theme.focusRedesignOptOut && `
+        ${addFocusStyling(true)}
+      `}
+    `}
   }
 `;
 const getIconColor = color => {

package/esm/components/split-button/split-button-toggle.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledButton from "../button/button.style";
 import StyledIcon from "../icon/icon.style";
+import baseTheme from "../../style/themes/base";
 const horizontalPaddingSizes = {
   small: 5,
   medium: 10,
@@ -11,7 +12,8 @@ const StyledSplitButtonToggle = styled(StyledButton)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  theme
 }) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
@@ -48,7 +50,9 @@ const StyledSplitButtonToggle = styled(StyledButton)`
     ${StyledButton} + & {
       margin-left: 0;
 
-      ${buttonType === "secondary" && css`
+      ${buttonType === "secondary" && /* istanbul ignore next */
+theme.focusRedesignOptOut && /* istanbul ignore next */
+css`
         &:focus {
           margin-left: -3px;
         }
@@ -69,4 +73,7 @@ const StyledSplitButtonToggle = styled(StyledButton)`
     }
   `}
 `;
+StyledSplitButtonToggle.defaultProps = {
+  theme: baseTheme
+};
 export default StyledSplitButtonToggle;

package/esm/components/split-button/split-button.style.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
@@ -15,9 +15,21 @@ const StyledSplitButton = styled.div`
   & > ${StyledButton} {
     margin: 0;
     &:focus {
-      border: 3px solid var(--colorsSemanticFocus500);
-      outline: none;
-      margin: -1px;
+      ${({
+  theme
+}) => css`
+        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+`
+          border: 3px solid var(--colorsSemanticFocus500);
+          margin: -1px;
+          outline: none;
+        `}
+
+        ${!theme.focusRedesignOptOut && `
+          position: relative;
+          z-index: 1;
+        `}
+      `}
     }
   }
 `;

package/{lib/src → esm}/components/switch/switch.style.d.ts

@@ -1,8 +1,6 @@
-import { SwitchProps } from "./switch.component";
-declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
 export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
 }, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
+declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledSwitch;

package/esm/components/switch/switch.style.js

@@ -8,6 +8,10 @@ import { StyledCheckableInput } from "../../__internal__/checkable-input/checkab
 import StyledSwitchSlider from "./__internal__/switch-slider.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 export const ErrorBorder = styled.span`
   ${({
   warning
@@ -33,7 +37,8 @@ const StyledSwitch = styled.div`
   fieldHelpInline,
   labelInline,
   reverse,
-  size
+  size,
+  theme
 }) => css`
     ${margin}
     ${FieldLineStyle} {
@@ -53,7 +58,7 @@ const StyledSwitch = styled.div`
 
     ${HiddenCheckableInputStyle}:not([disabled]) {
       &:focus + ${StyledSwitchSlider} {
-        outline: solid 3px var(--colorsSemanticFocus500);
+        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
       }
     }
 

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

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../../icon/icon.style";
 import StyledValidationIcon from "../../../../__internal__/validations/validation-icon.style";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledTitleContent = styled.span`
   outline: none;
   display: inline-block;
@@ -262,7 +266,7 @@ const tabTitleStyles = css`
 
     ${position === "top" && css`
       ${borders && !(noRightBorder || noLeftBorder) && css`
-        &:nth-of-type(n + 1) {
+        &:nth-of-type(n + 1):not(:first-of-type) {
           margin-left: -1px;
         }
         &:first-child {
@@ -272,7 +276,7 @@ const tabTitleStyles = css`
     `}
     ${position === "left" && css`
       ${borders && css`
-        &:nth-of-type(n + 1) {
+        &:nth-of-type(n + 1):not(:first-of-type) {
           margin-top: -1px;
         }
         &:first-child {
@@ -312,7 +316,9 @@ const tabTitleStyles = css`
     `}
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
       z-index: 2;
 
       ${isInSidebar && css`
@@ -450,18 +456,18 @@ const StyledSelectedIndicator = styled.div`
     ${position === "top" && css`
       bottom: 0px;
       left: 0px;
+      right: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing025)) 0px
         var(--colorsActionMajor500);
-      width: 100%;
       height: var(--sizing025);
     `}
 
     ${position === "left" && css`
       top: 0px;
+      bottom: 0px;
       right: 0px;
       box-shadow: inset calc(-1 * var(--sizing025)) 0px 0px 0px
         var(--colorsActionMajor500);
-      height: 100%;
       width: var(--sizing025);
     `}
   `}

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

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsBottomBorder, StyledTabsWrapper, StyledTabsBottomBorderWrapper } from "./tabs-header.style";
+import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsBottomBorder, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledVerticalTabsWrapper } from "./tabs-header.style";
 import useThrottle from "../../../../hooks/__internal__/useThrottle";
 
 /*  In the original prototype the tabs have shadows that fade out as you scroll horizontally.
@@ -56,6 +56,8 @@ 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) : children));
+  }, position === "top" ? /*#__PURE__*/React.createElement(StyledTabsWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorderWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorder, null)), children) : /*#__PURE__*/React.createElement(StyledVerticalTabsWrapper, {
+    isInSidebar: isInSidebar
+  }, children)));
 };
 export default TabsHeader;

package/esm/{src/components → components}/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -8,6 +8,8 @@ export interface StyledTabsHeaderListProps extends Pick<TabHeaderProps, "align"
 }
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
 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 StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, };
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper, };