carbon-react 119.10.1 → 119.11.0

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -19,16 +19,20 @@ const CarbonProvider = ({
   children,
   theme = _themes.mintTheme,
   validationRedesignOptIn = false,
-  roundedCornersOptOut = false
+  roundedCornersOptOut = false,
+  focusRedesignOptOut = false
 }) => {
   const {
-    roundedCornersOptOut: existingRoundedCornersOptOut
+    roundedCornersOptOut: existingRoundedCornersOptOut,
+    focusRedesignOptOut: existingFocusRedesignOptOut
   } = (0, _react.useContext)(NewValidationContext);
   const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
+  const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
       ...theme,
-      roundedCornersOptOut: roundedCornersOptOutValue
+      roundedCornersOptOut: roundedCornersOptOutValue,
+      focusRedesignOptOut: focusRedesignOptOutValue
     }
   }, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(NewValidationContext.Provider, {
     value: {

package/lib/components/carousel/carousel.style.js

@@ -8,6 +8,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _slide = require("./slide.config");
 var _slide2 = require("./slide/slide.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; }
@@ -19,12 +21,12 @@ const CarouselNavigationStyle = _styledComponents.default.div`
 `;
 exports.CarouselNavigationStyle = CarouselNavigationStyle;
 const CarouselPreviousButtonWrapperStyle = (0, _styledComponents.default)(CarouselNavigationStyle)`
-  margin-left: 2px;
+  margin-left: 8px;
 `;
 exports.CarouselPreviousButtonWrapperStyle = CarouselPreviousButtonWrapperStyle;
 const CarouselNextButtonWrapperStyle = (0, _styledComponents.default)(CarouselNavigationStyle)`
   right: 0;
-  margin-right: 2px;
+  margin-right: 8px;
 `;
 exports.CarouselNextButtonWrapperStyle = CarouselNextButtonWrapperStyle;
 const CarouselStyledIcon = (0, _styledComponents.default)(_icon.default)`
@@ -43,6 +45,9 @@ const CarouselStyledIconRight = (0, _styledComponents.default)(CarouselStyledIco
   transform: rotate(-90deg);
 `;
 exports.CarouselStyledIconRight = CarouselStyledIconRight;
+const oldFocusStyling = `
+  outline: solid 2px var(--colorsSemanticFocus500);
+`;
 const CarouselButtonStyle = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -82,7 +87,9 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
     }
 
     &:focus {
-      outline: 2px solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
 
       ::-moz-focus-inner {
         border: 0;
@@ -95,6 +102,9 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
   `}
 `;
 exports.CarouselButtonStyle = CarouselButtonStyle;
+CarouselButtonStyle.defaultProps = {
+  theme: _base.default
+};
 const CarouselSelectorInputStyle = _styledComponents.default.input`
   display: none;
 `;

package/lib/components/checkbox/checkbox.style.js

@@ -13,9 +13,13 @@ var _checkableInputSvgWrapper = _interopRequireDefault(require("../../__internal
 var _label = _interopRequireWildcard(require("../../__internal__/label/label.style"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 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 oldFocusStyling = `
+box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
+`;
 const StyledCheckbox = _styledComponents.default.div`
   ${_styledSystem.margin}
   ${({
@@ -74,10 +78,14 @@ const StyledCheckbox = _styledComponents.default.div`
 
     // prettier-ignore
     ${_hiddenCheckableInput.default}:not([disabled]) {
-      &:focus + ${_checkableInputSvgWrapper.default},
-      &:hover + ${_checkableInputSvgWrapper.default} {
-        box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
-      }
+      ${({
+  theme
+}) => `
+        &:focus + ${_checkableInputSvgWrapper.default} ,
+        &:hover + ${_checkableInputSvgWrapper.default} {
+          ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+        }
+      `}
     }
 
     ${_label.StyledLabelContainer} {

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(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 }; }
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
+
 // Styles copied from https://github.com/gpbl/react-day-picker/blob/v6.1.1/src/style.css
 const addReactDayPickerStyles = () => `
   .DayPicker {
@@ -221,7 +226,9 @@ const StyledDayPicker = _styledComponents.default.div`
   .DayPicker-wrapper {
     padding: 0;
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => !theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
       border-radius: var(--borderRadius050);
     }
   }
@@ -268,9 +275,13 @@ const StyledDayPicker = _styledComponents.default.div`
       color: var(--colorsActionMajorYin090);
     }
 
-    &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    }
+    ${({
+  theme
+}) => `
+      &:focus {
+        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
+      }
+    `}
 
     + * {
       border-left: 1px;

package/lib/components/date/__internal__/navbar/button.style.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _addFocusStyling = _interopRequireDefault(require("../../../../style/utils/add-focus-styling"));
+var _themes = require("../../../../style/themes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -22,9 +27,16 @@ const StyledButton = _styledComponents.default.button.attrs({
   box-sizing: border-box;
   border-radius: var(--borderRadius050);
 
-  &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+    }
+  `}
 `;
+StyledButton.defaultProps = {
+  theme: _themes.baseTheme
+};
 var _default = StyledButton;
 exports.default = _default;

package/lib/components/drawer/drawer.style.js

@@ -8,6 +8,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _tabs = _interopRequireDefault(require("../tabs/tabs.style"));
 var _box = _interopRequireDefault(require("../box"));
 var _stickyFooter = _interopRequireDefault(require("../../__internal__/sticky-footer/sticky-footer.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; }
@@ -172,6 +174,9 @@ const StyledDrawerContent = _styledComponents.default.div`
   }
 `;
 exports.StyledDrawerContent = StyledDrawerContent;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -195,9 +200,13 @@ const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
     animation: ${buttonClose} ${animationDuration} ease-in-out;
     border-radius: var(--borderRadius050);
 
-    &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    }
+    ${({
+  theme
+}) => `
+      &:focus {
+        ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
+      }
+    `}
 
     &:hover {
       cursor: pointer;
@@ -210,6 +219,9 @@ const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
   `}
 `;
 exports.StyledSidebarToggleButton = StyledSidebarToggleButton;
+StyledSidebarToggleButton.defaultProps = {
+  theme: _base.default
+};
 const StyledDrawerWrapper = _styledComponents.default.div`
   display: flex;
   height: ${({

package/lib/components/duelling-picklist/picklist/picklist.style.js

@@ -13,7 +13,7 @@ const StyledPicklist = (0, _styledComponents.default)(_box.default).attrs({
   position: relative;
   list-style: none;
   margin: 0;
-  padding: 4px 8px 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: 100%;
   box-sizing: border-box;
   overflow-y: auto;

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -79,5 +79,12 @@ const StyledLockIcon = (0, _styledComponents.default)(_icon.default)`
   margin-right: 0;
   height: 40px;
   min-width: 40px;
+
+  :focus {
+    border-bottom-right-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+  }
 `;
 exports.StyledLockIcon = StyledLockIcon;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -12,6 +12,9 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox/
 var _flatTableHeader = _interopRequireDefault(require("../flat-table-header/flat-table-header.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _color = require("../../../style/utils/color");
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _browserTypeCheck = require("../../../__internal__/utils/helpers/browser-type-check");
+var _cellSizes = _interopRequireDefault(require("../cell-sizes.style"));
 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; }
@@ -19,17 +22,35 @@ const horizontalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
-const getLeftStickyStyling = index => index === 0 && (0, _styledComponents.css)`
+const oldFocusStyling = `
+  border: 2px solid var(--colorsSemanticFocus500);
+`;
+const firstColumnOldFocusStyling = `
+  outline: 2px solid var(--colorsSemanticFocus500);
+  outline-offset: -1px;
+`;
+const newFocusStyling = `
+  ${(0, _addFocusStyling.default)(true)}
+  z-index: 1000;
+`;
+const getLeftStickyStyling = (index, themeOptOut) => index === 0 && /* istanbul ignore next */
+themeOptOut && /* istanbul ignore next */
+(0, _styledComponents.css)`
     &:first-of-type::before {
       border-left: 3px solid var(--colorsSemanticFocus500);
     }
   `;
-const getRightStickyStyling = (index, totalChildren) => index === totalChildren - 1 && (0, _styledComponents.css)`
+const getRightStickyStyling = (index, totalChildren, themeOptOut) => index === totalChildren - 1 && /* istanbul ignore next */
+themeOptOut && /* istanbul ignore next */
+(0, _styledComponents.css)`
     &:last-of-type {
       border-right: 2px solid var(--colorsSemanticFocus500);
     }
   `;
 const stickyColumnFocusStyling = theme => {
+  /* istanbul ignore else */
+  if (!theme.focusRedesignOptOut) return ``;
+  /* istanbul ignore next */
   return `
       width: calc(100% + 1px);
       z-index: ${theme.zIndex.overlay};
@@ -74,6 +95,13 @@ const verticalBorderColor = colorTheme => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getFocusHeight = size => {
+  if (!size) return "40px";
+  const {
+    height
+  } = _cellSizes.default[size];
+  return height;
+};
 const StyledFlatTableRow = _styledComponents.default.tr`
   ${({
   bgColor,
@@ -189,7 +217,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             right: 0px;
             top: 0;
             bottom: 0px;
-            border: 2px solid var(--colorsSemanticFocus500);
+            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */oldFocusStyling}
             pointer-events: none;
           }
 
@@ -206,29 +234,43 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             }
           }
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
-          @media not all and (min-resolution: 0.001dpcm) {
-            @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+          ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
+            ${theme.focusRedesignOptOut && /* istanbul ignore next */
+  (0, _styledComponents.css)`
               outline: 2px solid var(--colorsSemanticFocus500);
               outline-offset: -2px;
               position: static;
+
               :after {
                 content: none;
                 border: none;
               }
-            }
-          }
+            `}
+            ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+              position: -webkit-sticky;
+              :after {
+                content: none;
+                border: none;
+                content: "";
+                height: ${getFocusHeight(size)} ${newFocusStyling};
+              }
+            `}
+          `}
 
-          td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before {
-            border-left: 3px solid var(--colorsSemanticFocus500);
-          }
+          ${theme.focusRedesignOptOut && /* istanbul ignore next */
+  (0, _styledComponents.css)`
+            td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before {
+              border-left: 3px solid var(--colorsSemanticFocus500);
+            }
 
-          td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) {
-            border-right: 2px solid var(--colorsSemanticFocus500);
-          }
+            td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) {
+              border-right: 2px solid var(--colorsSemanticFocus500);
+            }
+          `}
 
           ${_flatTableRowHeader.StyledFlatTableRowHeader} {
-            ${getLeftStickyStyling(lhsRowHeaderIndex)}
-            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren)}
+            ${getLeftStickyStyling(lhsRowHeaderIndex, theme)}
+            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren, theme)}
             ${stickyColumnFocusStyling(theme)}
           }
 
@@ -258,8 +300,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
           cursor: pointer;
 
           :focus {
-            outline: 2px solid var(--colorsSemanticFocus500);
-            outline-offset: -1px;
+            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */firstColumnOldFocusStyling}
           }
 
           :hover {

package/lib/components/flat-table/flat-table.style.js

@@ -15,12 +15,16 @@ var _flatTableCell = require("./flat-table-cell/flat-table-cell.style");
 var _cellSizes = _interopRequireDefault(require("./cell-sizes.style"));
 var _box = _interopRequireDefault(require("../box"));
 var _pager = require("../pager/pager.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 HEADER_OVERLAY_INCREMENT = 3;
 const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
 const ROW_HEADER_OVERLAY_INCREMENT = 5;
+const oldFocusStyling = `
+  outline: 2px solid var(--colorsSemanticFocus500);
+`;
 const StyledTableContainer = _styledComponents.default.div`
   ${({
   width,
@@ -112,20 +116,33 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
     `}
 
   ${({
-  isInSidebar
+  isInSidebar,
+  theme
 }) => (0, _styledComponents.css)`
       box-sizing: border-box;
 
       :focus {
-        outline: 2px solid var(--colorsSemanticFocus500);
+        /* istanbul ignore next */
+        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+(0, _styledComponents.css)`
+          ${oldFocusStyling}
 
-        :not(:focus-visible) {
-          outline: none;
-        }
+          :not(:focus-visible) {
+            outline: none;
+          }
 
-        :focus-visible {
-          outline: 2px solid var(--colorsSemanticFocus500);
-        }
+          :focus-visible {
+            ${oldFocusStyling}
+          }
+        `}
+
+        ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+          ${(0, _addFocusStyling.default)()}
+          :not(:focus-visible) {
+            outline: none;
+            box-shadow: none;
+          }
+        `}
       }
 
       ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};

package/lib/components/flat-table/sort/sort.style.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSpaceHolder = exports.StyledSort = void 0;
 var _styledComponents = _interopRequireDefault(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 }; }
+const oldFocusStyling = `
+  outline: solid 1px var(--colorsSemanticFocus500);
+`;
 const StyledSort = _styledComponents.default.div`
   display: inline-flex;
   align-items: center;
@@ -27,11 +32,16 @@ const StyledSort = _styledComponents.default.div`
   }
 
   :focus {
-    outline: 1px solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
     border-radius: var(--borderRadius025);
   }
 `;
 exports.StyledSort = StyledSort;
+StyledSort.defaultProps = {
+  theme: _base.default
+};
 const StyledSpaceHolder = _styledComponents.default.div`
   display: inline-block;
   width: 22px;

package/lib/components/heading/heading.style.js

@@ -13,6 +13,7 @@ var _help = _interopRequireDefault(require("../help"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _hr = _interopRequireDefault(require("../hr"));
 var _link = _interopRequireDefault(require("../link"));
+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; }
@@ -29,6 +30,7 @@ const StyledHeaderContent = _styledComponents.default.div`
   align-items: flex-end;
 `;
 exports.StyledHeaderContent = StyledHeaderContent;
+const oldFocusStyling = "outline: 3px solid var(--colorsSemanticFocus500);";
 const StyledHeader = _styledComponents.default.div`
   ${({
   divider,
@@ -65,7 +67,9 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
 
     &:focus {
       background-color: transparent;
-      outline: 3px solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => !theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : oldFocusStyling}
     }
 
     &:hover {
@@ -82,6 +86,9 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
   }
 `;
 exports.StyledHeadingBackButton = StyledHeadingBackButton;
+StyledHeadingBackButton.defaultProps = {
+  theme: _base.default
+};
 const StyledHeadingTitle = (0, _styledComponents.default)(_typography.default)`
   line-height: 32px;
   ${({

package/lib/components/help/help.style.js

@@ -8,9 +8,13 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 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 2px var(--colorsSemanticFocus500);
+`;
 const StyledHelp = _styledComponents.default.div`
   background: none;
   cursor: default;
@@ -41,7 +45,10 @@ const StyledHelp = _styledComponents.default.div`
   }
 
   &:focus ${_icon.default} {
-    outline: 2px solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius050);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
   }
 
   ${_styledSystem.margin}

package/lib/components/icon/icon.style.js

@@ -13,6 +13,7 @@ var _iconConfig = _interopRequireDefault(require("./icon-config"));
 var _browserTypeCheck = _interopRequireWildcard(require("../../__internal__/utils/helpers/browser-type-check"));
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+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; }
@@ -22,6 +23,7 @@ function adjustIconBgSize(fontSize, bgSize) {
   }
   return bgSize ? _iconConfig.default.backgroundSize[bgSize] : undefined;
 }
+const oldFocusStyling = "outline: 2px solid var(--colorsSemanticFocus500);";
 const StyledIcon = _styledComponents.default.span`
   ${({
   theme,
@@ -120,7 +122,7 @@ const StyledIcon = _styledComponents.default.span`
 
       ${hasTooltip && `
         :focus {
-          outline: 2px solid var(--colorsSemanticFocus500);
+          ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : oldFocusStyling}
         }
       `}
 

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

@@ -8,9 +8,15 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _themes = require("../../style/themes");
+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 = `
+  background-color: transparent;
+  outline: solid 3px var(--colorsSemanticFocus500);
+  z-index: 1;
+`;
 const StyledIconButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
@@ -25,9 +31,9 @@ const StyledIconButton = _styledComponents.default.button.attrs({
     border-radius: var(--borderRadius050);
 
     &:focus {
-      background-color: transparent;
-      outline: solid 3px var(--colorsSemanticFocus500);
-      z-index: 1;
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
     }
 
     &:hover {

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

@@ -114,7 +114,7 @@ const StyledLink = _styledComponents.default.span`
 
             &:focus {
               background-color: var(--colorsSemanticFocus250);
-              border-radius: var(--borderRadius050);
+              border-radius: var(--borderRadius025);
             }
           `}
 
@@ -126,6 +126,21 @@ const StyledLink = _styledComponents.default.span`
             }
           `}
         }
+
+        ${!disabled && !theme.focusRedesignOptOut && (0, _styledComponents.css)`
+          a,
+          button {
+            outline: none;
+            text-decoration: none;
+            border-bottom-left-radius: var(--borderRadius000);
+            border-bottom-right-radius: var(--borderRadius000);
+          }
+          &:focus-within {
+            box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
+            border-bottom-left-radius: var(--borderRadius025);
+            border-bottom-right-radius: var(--borderRadius025);
+          }
+        `}
       `}
 
       a,