carbon-react 119.10.1 → 119.11.0

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

@@ -6,7 +6,6 @@ const StyledTabsHeaderWrapper = styled.div`
   position,
   isInSidebar
 }) => position === "left" && css`
-      overflow-y: auto;
       box-sizing: border-box;
       padding: 3px;
 
@@ -17,6 +16,7 @@ const StyledTabsHeaderWrapper = styled.div`
 
       ${!isInSidebar && css`
         min-width: 20%;
+        overflow-y: auto;
       `}
 
       ${isInSidebar && css`
@@ -128,11 +128,23 @@ StyledTabsHeaderList.defaultProps = {
   theme: BaseTheme
 };
 const StyledTabsWrapper = styled.div`
+  margin: 3px;
   position: relative;
   min-width: max-content;
   width: 100%;
   height: 100%;
 `;
+const StyledVerticalTabsWrapper = styled.div`
+  margin: 3px;
+  ${({
+  isInSidebar
+}) => isInSidebar && css`
+      margin-left: 6px;
+      margin-top: 6px;
+    `}
+  display: flex;
+  flex-direction: column;
+`;
 const StyledTabsBottomBorderWrapper = styled.div`
   position: absolute;
   width: 100%;
@@ -147,4 +159,4 @@ const StyledTabsBottomBorder = styled.div`
   height: 2px;
   background-color: var(--colorsActionMinor100);
 `;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder };
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper };

package/esm/components/tabs/tabs.style.js

@@ -24,9 +24,12 @@ const StyledTabs = styled.div`
 
       ${!isInSidebar && css`
         display: flex;
+        width: 100%;
       `}
 
-      width: 100%;
+      ${isInSidebar && css`
+        width: 99%;
+      `}
     `}
   `}
 

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -1,5 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../../../icon/icon.style";
+import { baseTheme } from "../../../../../style/themes";
+import addFocusStyling from "../../../../../style/utils/add-focus-styling";
 const StyledToolbarButton = styled.button.attrs({
   type: "button"
 })`
@@ -16,12 +18,22 @@ const StyledToolbarButton = styled.button.attrs({
   }
 
   ${({
-  isActive
+  isActive,
+  theme
 }) => css`
     :focus,
     :active {
-      outline: 2px solid var(--colorsSemanticFocus500);
-      outline-offset: -2px;
+      z-index: 1;
+      postion: relative;
+      ${theme.focusRedesignOptOut && /* istanbul ignore next */
+css`
+        outline: 2px solid var(--colorsSemanticFocus500);
+        outline-offset: -2px;
+      `}
+
+      ${!theme.focusRedesignOptOut && css`
+        ${addFocusStyling()}
+      `}
       border-radius: var(--borderRadius050);
     }
 
@@ -35,4 +47,7 @@ const StyledToolbarButton = styled.button.attrs({
     `}
   `}
 `;
+StyledToolbarButton.defaultProps = {
+  theme: baseTheme
+};
 export default StyledToolbarButton;

package/esm/components/text-editor/text-editor.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 const lineHeight = 21;
 const StyledEditorWrapper = styled.div`
   ${margin}
@@ -59,15 +60,18 @@ const StyledEditorContainer = styled.div`
 const StyledEditorOutline = styled.div`
   ${({
   isFocused,
-  hasError
+  hasError,
+  theme
 }) => css`
     border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 
     ${isFocused && css`
-      outline: 3px solid var(--colorsSemanticFocus500);
-      outline-offset: ${hasError ? "2px;" : "1px;"};
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : `
+        outline: 3px solid var(--colorsSemanticFocus500);
+        outline-offset: ${hasError ? "2px" : "1px"};
+      `}
     `}
   `}
 `;

package/esm/components/tile-select/tile-select.style.js

@@ -5,6 +5,7 @@ import { Input } from "../../__internal__/input";
 import { LegendContainerStyle } from "../fieldset/fieldset.style";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledTitle = styled.h3`
   font-size: 16px;
   font-weight: 900;
@@ -54,10 +55,14 @@ const StyledTileSelect = styled.div`
       }
     `}
 `;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledFocusWrapper = styled.div`
   ${({
   checked,
-  hasFocus
+  hasFocus,
+  theme
 }) => css`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
@@ -70,7 +75,7 @@ const StyledFocusWrapper = styled.div`
     `}
 
     ${hasFocus && css`
-      outline: 3px solid var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
       z-index: 15;
     `}
   `}

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

@@ -1,5 +1,7 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 import Icon from "../icon";
 import Box from "../box";
@@ -8,6 +10,10 @@ export const StyledList = styled.ul`
   margin: 0;
   padding: 0;
 `;
+const oldFocusStyling = `
+  outline: 3px solid var(--colorsSemanticFocus500);
+  outline-offset: -3px;
+`;
 export const StyledVerticalMenuItem = styled.div`
   min-height: ${({
   height
@@ -32,8 +38,9 @@ export const StyledVerticalMenuItem = styled.div`
   }
 
   &:focus {
-    outline: 3px solid var(--colorsSemanticFocus500);
-    outline-offset: -3px;
+    ${({
+  theme
+}) => !theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
   }
 
   ${({
@@ -62,6 +69,9 @@ export const StyledVerticalMenuItem = styled.div`
     width: 20px;
   }
 `;
+StyledVerticalMenuItem.defaultProps = {
+  theme: baseTheme
+};
 export const StyledTitle = styled.h3`
   font-weight: 600;
   font-size: 14px;

package/esm/{src/style → style}/design-tokens/generate-css-variables.util.d.ts

@@ -7,5 +7,5 @@ import { ThemeObject } from "../themes/base";
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOupt?: boolean) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOut?: boolean) => string;
 export default _default;

package/esm/style/design-tokens/generate-css-variables.util.js

@@ -7,8 +7,8 @@
  *
  */
 
-export default ((theme, roundedCornersOptOupt) => Object.entries(theme).map(([key, value]) => {
-  if (roundedCornersOptOupt && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
+export default ((theme, roundedCornersOptOut) => Object.entries(theme).map(([key, value]) => {
+  if (roundedCornersOptOut && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
     return `--${key}: 0px;`;
   }
   return `--${key}: ${value};`;

package/esm/style/utils/add-focus-styling.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (inset?: boolean) => string;
+export default _default;

package/esm/style/utils/add-focus-styling.js

@@ -0,0 +1,13 @@
+export default ((inset = false) => {
+  let focusStyling = "0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)";
+  if (inset) {
+    focusStyling = "inset 0px 0px 0px var(--borderWidth300) var(--colorsUtilityYin090), inset 0px 0px 0px var(--borderWidth600) var(--colorsSemanticFocus500)";
+  }
+  return `
+    -webkit-appearance: none;
+    -webkit-box-shadow: ${focusStyling};
+    box-shadow: ${focusStyling};
+
+    outline: transparent 3px solid;
+  `;
+});

package/lib/__internal__/input/input-presentation.style.js

@@ -7,9 +7,13 @@ exports.default = exports.StyledInputPresentationContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _inputSizes = _interopRequireDefault(require("./input-sizes.style"));
 var _input = _interopRequireDefault(require("./input.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 StyledInputPresentationContainer = _styledComponents.default.div`
   flex: 0 0 ${({
   inputWidth
@@ -80,11 +84,12 @@ const InputPresentationStyle = _styledComponents.default.div`
       cursor: not-allowed;
     `}
 
-  ${({
-  hasFocus
+    ${({
+  hasFocus,
+  theme
 }) => hasFocus && (0, _styledComponents.css)`
       & {
-        outline: 3px solid var(--colorsSemanticFocus500);
+        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
         z-index: 2;
       }
     `}

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -6,9 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _inputSizes = _interopRequireDefault(require("../input/input-sizes.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 InputIconToggleStyle = _styledComponents.default.span.attrs(({
   onClick
 }) => ({
@@ -31,9 +35,13 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
     width: ${_inputSizes.default[size].height};
   `}
 
-  &:focus {
-    outline: solid 3px var(--colorsSemanticFocus500);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+    }  
+  `}
 `;
 var _default = InputIconToggleStyle;
 exports.default = _default;

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

@@ -8,6 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../../components/icon/icon.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; }
@@ -16,6 +17,9 @@ const validationIconTypes = {
   info: "var(--colorsSemanticInfo500)",
   warning: "var(--colorsSemanticCaution500)"
 };
+const oldFocusStyling = `
+  outline: solid 2px var(--colorsSemanticFocus500);
+`;
 const ValidationIconStyle = _styledComponents.default.span`
   background: none;
   cursor: default;
@@ -39,7 +43,9 @@ const ValidationIconStyle = _styledComponents.default.span`
   }
 
   ${_icon.default}:focus {
-    outline: solid 2px var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => !theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
   }
 
   ${_styledSystem.margin}

package/lib/components/accordion/accordion.style.js

@@ -9,6 +9,7 @@ var _styledSystem = require("styled-system");
 var _icon = _interopRequireDefault(require("../icon"));
 var _themes = require("../../style/themes");
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.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; }
@@ -108,13 +109,17 @@ const StyledAccordionHeadingsContainer = _styledComponents.default.div`
     `}
 `;
 exports.StyledAccordionHeadingsContainer = StyledAccordionHeadingsContainer;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledAccordionTitleContainer = _styledComponents.default.div`
   ${({
   buttonHeading,
   buttonWidth,
   iconAlign,
   size,
-  hasButtonProps
+  hasButtonProps,
+  theme
 }) => (0, _styledComponents.css)`
     padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${_styledSystem.space}
@@ -131,7 +136,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
     z-index: 1;
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
     }
 
     ${!buttonHeading && (0, _styledComponents.css)`

package/lib/components/action-popover/action-popover.style.js

@@ -10,9 +10,14 @@ var _icon = _interopRequireDefault(require("../icon"));
 var _icon2 = _interopRequireDefault(require("../icon/icon.style"));
 var _button = _interopRequireDefault(require("../button/button.style"));
 var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
+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 3px var(--colorsSemanticFocus500);
+`;
 const Menu = _styledComponents.default.div`
   ${({
   isOpen
@@ -121,7 +126,9 @@ const StyledMenuItem = _styledComponents.default.button`
   font-weight: 700;
 
   &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
     z-index: 1;
     border-radius: var(--borderRadius000);
   }
@@ -151,6 +158,9 @@ const StyledMenuItem = _styledComponents.default.button`
     `}
 `;
 exports.StyledMenuItem = StyledMenuItem;
+StyledMenuItem.defaultProps = {
+  theme: _base.default
+};
 const StyledMenuItemWrapper = _styledComponents.default.div`
   position: relative;
 `;
@@ -182,10 +192,14 @@ const ButtonIcon = (0, _styledComponents.default)(_icon.default)`
 `;
 exports.ButtonIcon = ButtonIcon;
 const StyledButtonIcon = _styledComponents.default.div`
-  &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    border-radius: var(--borderRadius050);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+    }    
+  `}
+  border-radius: var(--borderRadius050);
 `;
 exports.StyledButtonIcon = StyledButtonIcon;
 const MenuItemIcon = (0, _styledComponents.default)(_icon.default)`
@@ -207,6 +221,9 @@ const MenuItemIcon = (0, _styledComponents.default)(_icon.default)`
   `}
 `;
 exports.MenuItemIcon = MenuItemIcon;
+StyledButtonIcon.defaultProps = {
+  theme: _base.default
+};
 const SubMenuItemIcon = (0, _styledComponents.default)(ButtonIcon)`
   ${({
   type

package/lib/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -5,9 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+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 transparentSvg = "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%" + "2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill-opacity%3D%22." + "45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2" + "F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -34,12 +40,19 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   }
 
   &:focus {
-    outline: solid 3px var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+    `}
   }
 
   &::-moz-focus-inner {
     border: none;
   }
 `;
+StyledAdvancedColorPickerCell.defaultProps = {
+  theme: _base.default
+};
 var _default = StyledAdvancedColorPickerCell;
 exports.default = _default;

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -23,7 +28,10 @@ const StyledNavigationItem = _styledComponents.default.li`
     border-bottom-right-radius: var(--borderRadius100);
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+      position: relative;
     }
 
     &:hover {

package/lib/components/batch-selection/batch-selection.style.js

@@ -7,9 +7,13 @@ exports.StyledSelectionCount = exports.StyledBatchSelection = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.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 StyledBatchSelection = _styledComponents.default.div`
   ${({
   disabled,
@@ -24,6 +28,11 @@ const StyledBatchSelection = _styledComponents.default.div`
 
     ${_icon.default} {
       color: var(--colorsActionMajorYin065);
+      &:focus {
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
+      }
     }
 
     ${colorTheme === "dark" && (0, _styledComponents.css)`
@@ -61,6 +70,10 @@ const StyledBatchSelection = _styledComponents.default.div`
 
     ${_iconButton.default}:focus {
       border-radius: var(--borderRadius100);
+      z-index: 1;
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
     }
 
     ${disabled && (0, _styledComponents.css)`

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

@@ -9,6 +9,7 @@ var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _buttonTypes = _interopRequireDefault(require("./button-types.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.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; }
@@ -61,11 +62,13 @@ function stylingForType({
     ${iconOnly && stylingForIconOnly(size)}
   `;
 }
+const oldFocusStyling = "outline: solid 3px var(--colorsSemanticFocus500);";
 const StyledButton = _styledComponents.default.button`
   ${_styledSystem.space}
   ${({
   disabled,
-  noWrap
+  noWrap,
+  theme
 }) => (0, _styledComponents.css)`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -81,7 +84,7 @@ const StyledButton = _styledComponents.default.button`
     border-radius: var(--borderRadius400);
 
     &:focus {
-      outline: solid 3px var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
     }
 
     ${stylingForType}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledButtonToggleWrapper = exports.StyledButtonToggleIcon = exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggle = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon/icon.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; }
@@ -43,6 +45,9 @@ const StyledButtonToggleContentWrapper = _styledComponents.default.div`
   flex-flow: wrap;
 `;
 exports.StyledButtonToggleContentWrapper = StyledButtonToggleContentWrapper;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledButtonToggle = _styledComponents.default.button`
   display: inline-flex;
   justify-content: center;
@@ -66,8 +71,10 @@ const StyledButtonToggle = _styledComponents.default.button`
 
   border: 1px solid var(--colorsActionMinor500);
 
-  :focus {
-    outline: 3px solid var(--colorsSemanticFocus500);
+  &:focus {
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
     z-index: 100;
   }
 
@@ -145,6 +152,9 @@ const StyledButtonToggleIcon = _styledComponents.default.div`
     `}
 `;
 exports.StyledButtonToggleIcon = StyledButtonToggleIcon;
+StyledButtonToggle.defaultProps = {
+  theme: _base.default
+};
 const StyledButtonToggleWrapper = _styledComponents.default.div`
   display: inline-block;
   vertical-align: middle;

package/lib/{src/components → components}/carbon-provider/carbon-provider.component.d.ts

@@ -12,7 +12,8 @@ export interface CarbonProviderProps {
      *
      * NOTE - Will eventually be set to `false` by default in the future. */
     roundedCornersOptOut?: boolean;
+    focusRedesignOptOut?: boolean;
 }
-export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut">>;
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, }: CarbonProviderProps) => React.JSX.Element;
+export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut" | "focusRedesignOptOut">>;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;