carbon-react 119.10.2 → 119.11.0

package/lib/components/link-preview/link-preview.style.js

@@ -7,8 +7,15 @@ exports.StyledUrl = exports.StyledTitle = exports.StyledPreviewWrapper = exports
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _preview = require("../preview/preview.style");
 var _previewPlaceholder = require("../preview/__internal__/preview-placeholder.style");
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+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; }
+const oldFocusStyling = `
+  outline: solid 2px var(--colorsSemanticFocus500);
+  outline-offset: -1px;
+`;
 const StyledLinkPreview = _styledComponents.default.a`
   display: flex;
   margin: 8px;
@@ -25,8 +32,9 @@ const StyledLinkPreview = _styledComponents.default.a`
 
     ${as !== "div" && (0, _styledComponents.css)`
       :focus {
-        outline: 2px solid var(--colorsSemanticFocus500);
-        outline-offset: -1px;
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
       }
 
       :hover {
@@ -37,6 +45,9 @@ const StyledLinkPreview = _styledComponents.default.a`
   `}
 `;
 exports.StyledLinkPreview = StyledLinkPreview;
+StyledLinkPreview.defaultProps = {
+  theme: _base.default
+};
 const StyledCloseIconWrapper = _styledComponents.default.div`
   padding: 16px;
 `;

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -12,9 +12,14 @@ var _search = _interopRequireDefault(require("../../search/search.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _button = _interopRequireDefault(require("../../button/button.style"));
 var _menu = _interopRequireDefault(require("../menu.config"));
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 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; }
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+  box-shadow: none;
+`;
 const StyledMenuFullscreen = _styledComponents.default.div`
   position: fixed;
   top: 0;
@@ -72,8 +77,10 @@ const StyledMenuFullscreen = _styledComponents.default.div`
           padding-bottom: 0;
 
           &:focus {
-            outline: solid 3px var(--colorsSemanticFocus500);
-            box-shadow: none;
+            border-bottom-right-radius: var(--borderRadius050);
+            border-top-right-radius: var(--borderRadius050);
+
+            ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
           }
         }
       }

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

@@ -11,10 +11,22 @@ var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
 var _menu = _interopRequireDefault(require("../menu.config"));
 var _link2 = _interopRequireDefault(require("../../link"));
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 var _themes = require("../../../style/themes");
 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; }
+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 = _styledComponents.default.a.attrs({
   as: _link2.default
 })`
@@ -41,65 +53,80 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     font-weight: 700;
     height: 40px;
     position: relative;
+
+    && {
+      :focus-within > a, > button {
+        background-color: transparent;
+      }
+    }
+
     a,
     button {
       cursor: pointer;
     }
-    ${!overrideColor && (0, _styledComponents.css)`
-      background-color: ${_menu.default[menuType].background};
-    `}
 
-    ${overrideColor && (0, _styledComponents.css)`
-      &&&& {
-        background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
+      ${overrideLinkFocusStyling(inFullscreenView)}
+      a:focus,
+      button:focus {
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}`}
       }
-    `}
+    }
 
-    ${!inFullscreenView && (0, _styledComponents.css)`
-      max-width: inherit;
+    ${!overrideColor && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].background};
+      `}
 
-      && {
-        a:focus,
-        button:focus {
-          box-shadow: inset 0 0 0 var(--borderWidth300)
-            var(--colorsSemanticFocus500);
-          background-color: ${_menu.default[menuType].background};
-          color: ${_menu.default[menuType].color};
-          z-index: 1;
-          position: relative;
+    ${overrideColor && (0, _styledComponents.css)`
+        &&&& {
+          background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
         }
-      }
+      `}
 
-      &&& {
-        a,
-        button {
-          ${maxWidth && (0, _styledComponents.css)`
-            box-sizing: border-box;
-            max-width: inherit;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: bottom;
-          `}
+    ${!inFullscreenView && (0, _styledComponents.css)`
+        max-width: inherit;
+
+        && {
+          a:focus,
+          button:focus {
+            background-color: ${_menu.default[menuType].background};
+            color: ${_menu.default[menuType].color};
+            z-index: 1;
+            position: relative;
+          }
         }
 
-        a:hover,
-        button:hover {
-          ${!asDiv && (0, _styledComponents.css)`
-            background-color: var(--colorsComponentsMenuAutumnStandard600);
-            color: var(--colorsComponentsMenuYang100);
+        &&& {
+          a,
+          button {
+            ${maxWidth && (0, _styledComponents.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 && (0, _styledComponents.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 ? `
         ${_iconButton.default} {
@@ -150,120 +177,120 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     }
 
     ${selected && (0, _styledComponents.css)`
-      background-color: ${_menu.default[menuType].selected};
-
-      a:focus,
-      button:focus {
         background-color: ${_menu.default[menuType].selected};
-      }
-
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-      }
-    `}
 
-    ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
-      &&& {
-        background-color: ${_menu.default[menuType].alternate};
-      }
-
-      &&& a:focus,
-      &&& button:focus {
-        background-color: ${_menu.default[menuType].alternate};
-      }
+        a:focus,
+        button:focus {
+          background-color: ${_menu.default[menuType].selected};
+        }
 
-      ${!hasInput && (0, _styledComponents.css)`
-        &&& a:hover,
-        &&& button:hover {
-          background-color: ${_menu.default[menuType].alternateHover};
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
         }
       `}
-    `}
-
-    ${isOpen && (0, _styledComponents.css)`
-      a,
-      button {
-        background-color: ${_menu.default[menuType].submenuItemBackground};
-        color: ${_menu.default[menuType].color};
-      }
-    `}
-
-    ${hasSubmenu && (0, _styledComponents.css)`
-      background-color: ${_menu.default[menuType].submenuBackground};
 
-      a:focus,
-      button:focus {
-        background-color: ${_menu.default[menuType].submenuBackground};
-        color: ${_menu.default[menuType].color};
+    ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
+        &&& {
+          background-color: ${_menu.default[menuType].alternate};
+        }
 
-        [data-component="icon"] {
-          color: ${_menu.default[menuType].color};
+        &&& a:focus,
+        &&& button:focus {
+          background-color: ${_menu.default[menuType].alternate};
         }
 
-        ${clickToOpen && isOpen && (0, _styledComponents.css)`
-          background-color: ${_menu.default[menuType].submenuOpenedBackground};
+        ${!hasInput && (0, _styledComponents.css)`
+          &&& a:hover,
+          &&& button:hover {
+            background-color: ${_menu.default[menuType].alternateHover};
+          }
         `}
-      }
-
-      a:hover,
-      button:hover {
-        background-color: ${_menu.default[menuType].submenuOpenedBackground};
-        color: var(--colorsComponentsMenuYang100);
+      `}
 
-        ${!(href || clickToOpen) && (0, _styledComponents.css)`
-          cursor: default;
+    ${isOpen && (0, _styledComponents.css)`
+        a,
+        button {
           background-color: ${_menu.default[menuType].submenuItemBackground};
           color: ${_menu.default[menuType].color};
-        `}
-
-        [data-component="icon"] {
-          color: ${_menu.default[menuType].color};
         }
-      }
+      `}
 
-      ${selected && (0, _styledComponents.css)`
-        background-color: ${_menu.default[menuType].submenuSelected};
+    ${hasSubmenu && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].submenuBackground};
 
         a:focus,
         button:focus {
-          background-color: ${_menu.default[menuType].submenuSelected};
+          background-color: ${_menu.default[menuType].submenuBackground};
+          color: ${_menu.default[menuType].color};
+
+          [data-component="icon"] {
+            color: ${_menu.default[menuType].color};
+          }
+
+          ${clickToOpen && isOpen && (0, _styledComponents.css)`
+            background-color: ${_menu.default[menuType].submenuOpenedBackground};
+          `}
         }
 
         a:hover,
         button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          background-color: ${_menu.default[menuType].submenuOpenedBackground};
           color: var(--colorsComponentsMenuYang100);
-        }
-      `}
 
-      ${showDropdownArrow && (0, _styledComponents.css)`
-        > a,
-        > button:not(${_iconButton.default}) {
-          padding-right: 32px;
-        }
+          ${!(href || clickToOpen) && (0, _styledComponents.css)`
+            cursor: default;
+            background-color: ${_menu.default[menuType].submenuItemBackground};
+            color: ${_menu.default[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: ${_menu.default[menuType].color};
+          }
         }
+
+        ${selected && (0, _styledComponents.css)`
+          background-color: ${_menu.default[menuType].submenuSelected};
+
+          a:focus,
+          button:focus {
+            background-color: ${_menu.default[menuType].submenuSelected};
+          }
+
+          a:hover,
+          button:hover {
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
+            color: var(--colorsComponentsMenuYang100);
+          }
+        `}
+
+        ${showDropdownArrow && (0, _styledComponents.css)`
+          > a,
+          > button:not(${_iconButton.default}) {
+            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 && (0, _styledComponents.css)`
       ${asDiv && (0, _styledComponents.css)`
@@ -303,8 +330,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
       a:focus,
       button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
         z-index: 1;
         position: relative;
       }

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

@@ -42,7 +42,10 @@ const StyledMultiActionButton = _styledComponents.default.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;
 
@@ -64,7 +67,12 @@ const StyledMultiActionButton = _styledComponents.default.div`
         }
 
         &:focus {
-          border-color: var(--colorsSemanticFocus500);
+          ${({
+  theme
+}) => /* istanbul ignore next */
+theme.focusRedesignOptOut && (0, _styledComponents.css)`
+              border-color: var(--colorsSemanticFocus500);
+            `}
           margin: 0 -1px;
         }
       `}

package/lib/components/pager/pager.style.js

@@ -119,9 +119,8 @@ const StyledPagerNavLabel = _styledComponents.default.label`
 `;
 exports.StyledPagerNavLabel = StyledPagerNavLabel;
 const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
-  padding: 0 10px;
-  margin-left: 7px;
-  margin-right: 7px;
+  margin-left: 17px;
+  margin-right: 17px;
 
   ${({
   hideDisabledButtons

package/lib/components/pill/pill.style.js

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

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

@@ -9,6 +9,7 @@ var _input = require("../../../__internal__/input");
 var _checkerBoard = _interopRequireDefault(require("./checker-board.svg"));
 var _icon = _interopRequireDefault(require("../../icon"));
 var _getRgbValues = _interopRequireDefault(require("../../../style/utils/get-rgb-values"));
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 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; }
@@ -23,6 +24,10 @@ const StyledSimpleColor = _styledComponents.default.div`
   }
 `;
 exports.StyledSimpleColor = StyledSimpleColor;
+const oldFocusStyling = `
+  box-shadow: inset 0px 0px 0px var(--borderWidth200) var(--colorsUtilityYang100);
+  border: 2px solid var(--colorsSemanticFocus500);
+`;
 const StyledColorSampleBox = _styledComponents.default.div`
   height: 100%;
   width: 100%;
@@ -30,7 +35,10 @@ const StyledColorSampleBox = _styledComponents.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid transparent;
+  ${({
+  theme
+}) => /* istanbul ignore next */
+theme.focusRedesignOptOut && "border: 2px solid transparent;"}
 
   ${({
   color
@@ -64,9 +72,18 @@ const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   }
 
   &:focus + ${StyledColorSampleBox} {
-    box-shadow: inset 0px 0px 0px var(--borderWidth200)
-      var(--colorsUtilityYang100);
-    border: 2px solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => (0, _styledComponents.css)`
+      ${theme.focusRedesignOptOut && /* istanbul ignore next */
+`
+        ${oldFocusStyling}
+      `}
+
+      ${!theme.focusRedesignOptOut && `
+        ${(0, _addFocusStyling.default)(true)}
+      `}
+    `}
   }
 `;
 exports.StyledSimpleColorInput = StyledSimpleColorInput;

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

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _button = _interopRequireDefault(require("../button/button.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 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; }
@@ -20,7 +21,8 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  theme
 }) => (0, _styledComponents.css)`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
@@ -57,7 +59,9 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
     ${_button.default} + & {
       margin-left: 0;
 
-      ${buttonType === "secondary" && (0, _styledComponents.css)`
+      ${buttonType === "secondary" && /* istanbul ignore next */
+theme.focusRedesignOptOut && /* istanbul ignore next */
+(0, _styledComponents.css)`
         &:focus {
           margin-left: -3px;
         }
@@ -78,5 +82,8 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
     }
   `}
 `;
+StyledSplitButtonToggle.defaultProps = {
+  theme: _base.default
+};
 var _default = StyledSplitButtonToggle;
 exports.default = _default;

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

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _button = _interopRequireDefault(require("../button/button.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 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; }
 const StyledSplitButton = _styledComponents.default.div`
   ${_styledSystem.margin}
   display: inline-block;
@@ -22,9 +24,21 @@ const StyledSplitButton = _styledComponents.default.div`
   & > ${_button.default} {
     margin: 0;
     &:focus {
-      border: 3px solid var(--colorsSemanticFocus500);
-      outline: none;
-      margin: -1px;
+      ${({
+  theme
+}) => (0, _styledComponents.css)`
+        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+`
+          border: 3px solid var(--colorsSemanticFocus500);
+          margin: -1px;
+          outline: none;
+        `}
+
+        ${!theme.focusRedesignOptOut && `
+          position: relative;
+          z-index: 1;
+        `}
+      `}
     }
   }
 `;

package/lib/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/lib/components/switch/switch.style.js

@@ -14,9 +14,13 @@ var _checkableInput = require("../../__internal__/checkable-input/checkable-inpu
 var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.style"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 var _formField = require("../../__internal__/form-field/form-field.style");
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 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; }
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const ErrorBorder = _styledComponents.default.span`
   ${({
   warning
@@ -44,7 +48,8 @@ const StyledSwitch = _styledComponents.default.div`
   fieldHelpInline,
   labelInline,
   reverse,
-  size
+  size,
+  theme
 }) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {
@@ -64,7 +69,7 @@ const StyledSwitch = _styledComponents.default.div`
 
     ${_hiddenCheckableInput.default}:not([disabled]) {
       &:focus + ${_switchSlider.default} {
-        outline: solid 3px var(--colorsSemanticFocus500);
+        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
       }
     }