carbon-react 119.10.2 → 119.12.0

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,

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/pod/pod.component.d.ts

@@ -18,10 +18,10 @@ export interface PodProps extends MarginProps {
     size?: PodSize;
     /** Prop to apply a theme to the Pod */
     variant?: PodVariant;
-    /** Title for the pod h4 element always shown */
-    title?: string | React.ReactNode;
+    /** Title for the pod */
+    title?: React.ReactNode;
     /** Optional subtitle for the pod */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */

package/lib/components/pod/pod.component.js

@@ -102,11 +102,11 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     alignTitle: alignTitle,
     internalEditButton: internalEditButton,
     size: size
-  }, /*#__PURE__*/_react.default.createElement(_pod.StyledTitle, {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_pod.StyledTitle, {
     "data-element": "title"
-  }, title), subtitle && /*#__PURE__*/_react.default.createElement(_pod.StyledSubtitle, {
+  }, title) : title, typeof subtitle === "string" ? /*#__PURE__*/_react.default.createElement(_pod.StyledSubtitle, {
     "data-element": "subtitle"
-  }, subtitle)), children), footer && /*#__PURE__*/_react.default.createElement(_pod.StyledFooter, {
+  }, subtitle) : subtitle), children), footer && /*#__PURE__*/_react.default.createElement(_pod.StyledFooter, {
     "data-element": "footer",
     size: size,
     variant: variant,
@@ -333,7 +333,7 @@ Pod.propTypes = {
   "onUndo": _propTypes.default.func,
   "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": _propTypes.default.bool,
-  "subtitle": _propTypes.default.string,
+  "subtitle": _propTypes.default.node,
   "title": _propTypes.default.node,
   "triggerEditOnContent": _propTypes.default.bool,
   "variant": _propTypes.default.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"])

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;