carbon-react 144.22.1 → 146.0.0

package/esm/components/heading/heading.style.js

@@ -19,7 +19,6 @@ const StyledHeaderContent = styled.div`
   display: inline-flex;
   align-items: flex-end;
 `;
-const oldFocusStyling = "outline: 3px solid var(--colorsSemanticFocus500);";
 const StyledHeader = styled.div`
   ${({
   divider,
@@ -56,9 +55,7 @@ const StyledHeadingBackButton = styled(Link)`
 
     &:focus {
       background-color: transparent;
-      ${({
-  theme
-}) => !theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling}
+      ${addFocusStyling()}
     }
 
     &:hover {

package/esm/components/help/help.style.js

@@ -3,9 +3,6 @@ import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
 const StyledHelp = styled.div`
   background: none;
   cursor: default;
@@ -37,9 +34,7 @@ const StyledHelp = styled.div`
 
   &:focus ${StyledIcon} {
     border-radius: var(--borderRadius050);
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+    ${addFocusStyling()}
   }
 
   ${margin}

package/esm/components/icon/icon.style.js

@@ -32,7 +32,6 @@ function adjustIconBgSize(fontSize, bgSize) {
   /* istanbul ignore next */
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
 }
-const oldFocusStyling = "outline: 2px solid var(--colorsSemanticFocus500);";
 const StyledIcon = styled.span`
   ${({
   theme,
@@ -132,7 +131,7 @@ const StyledIcon = styled.span`
 
       ${hasTooltip && `
         :focus {
-          ${!theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling}
+        ${addFocusStyling()}
         }
       `}
 

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

@@ -3,11 +3,6 @@ import { space } from "styled-system";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  background-color: transparent;
-  outline: solid 3px var(--colorsSemanticFocus500);
-  z-index: 1;
-`;
 const StyledIconButton = styled.button.attrs({
   type: "button"
 })`
@@ -22,9 +17,7 @@ const StyledIconButton = styled.button.attrs({
     border-radius: var(--borderRadius050);
 
     &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+      ${addFocusStyling()}
     }
 
     &:hover {

package/esm/components/link/link.style.js

@@ -168,7 +168,7 @@ const StyledLink = styled.span`
         `}
       }
 
-      ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && css`
+      ${!isSkipLink && !disabled && hasFocus && css`
         > a,
         > button {
           outline: none;

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

@@ -2,10 +2,6 @@ import styled, { css } from "styled-components";
 import { StyledPreview, StyledPreviewPlaceholder } from "../preview/preview.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-  outline-offset: -1px;
-`;
 const StyledLinkPreview = styled.a`
   display: flex;
   margin: 8px;
@@ -22,9 +18,7 @@ const StyledLinkPreview = styled.a`
 
     ${as !== "div" && css`
       :focus {
-        ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+        ${addFocusStyling()}
       }
 
       :hover {

package/esm/components/loader/loader-square.style.js

@@ -10,7 +10,7 @@ const loaderAnimation = keyframes`
     transform: scale(1);
   }
 `;
-const getDimensions = (size, roundedCornersOptOut) => {
+const getDimensions = size => {
   let width;
   let marginRight;
   switch (size) {
@@ -30,7 +30,6 @@ const getDimensions = (size, roundedCornersOptOut) => {
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 const StyledLoaderSquare = styled.div`
@@ -38,13 +37,13 @@ const StyledLoaderSquare = styled.div`
   size,
   isInsideButton,
   isActive,
-  theme,
   backgroundColor
 }) => css`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimensions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size)}
+    border-radius: var(--borderRadiusCircle);
 
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

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

@@ -8,10 +8,6 @@ import StyledButton from "../../button/button.style";
 import menuConfigVariants from "../menu.config";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import { StyledLink } from "../../link/link.style";
-const oldFocusStyling = `
-outline: solid 3px var(--colorsSemanticFocus500);
-box-shadow: none;
-`;
 const StyledMenuFullscreen = styled.div`
   position: fixed;
   top: 0;
@@ -68,8 +64,7 @@ const StyledMenuModal = styled.div`
   }
 
   ${({
-  menuType,
-  theme
+  menuType
 }) => css`
     background-color: ${menuConfigVariants[menuType].background};
 
@@ -89,7 +84,7 @@ const StyledMenuModal = styled.div`
             border-bottom-right-radius: var(--borderRadius050);
             border-top-right-radius: var(--borderRadius050);
 
-            ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+            ${addFocusStyling()}
           }
         }
       }

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

@@ -74,9 +74,6 @@ const parsePadding = props => {
       };
   }
 };
-const oldFocusStyling = `
-  box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
-`;
 const StyledMenuItemWrapper = styled.a.attrs({
   as: Link
 })`
@@ -115,10 +112,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     a:focus,
     button:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
-      `}
+      ${addFocusStyling(true)}
     }
 
     :has([data-element="input"]) ${StyledContent} {

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

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

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

@@ -58,9 +58,7 @@ const StyledPill = styled.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
-      ${!theme.roundedCornersOptOut && css`
-        border-radius: var(--borderRadius025);
-      `}
+      border-radius: var(--borderRadius025);
       height: auto;
 
       ${!wrapText && css`
@@ -87,10 +85,6 @@ const StyledPill = styled.span`
         line-height: 16px;
         font-size: 12px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "M" && css`
@@ -98,10 +92,6 @@ const StyledPill = styled.span`
         line-height: 20px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 12px;
-        `}
       `}
 
       ${size === "L" && css`
@@ -109,10 +99,6 @@ const StyledPill = styled.span`
         line-height: 24px;
         font-size: 14px;
         padding: 0 8px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 13px;
-        `}
       `}
 
       ${size === "XL" && css`
@@ -120,18 +106,12 @@ const StyledPill = styled.span`
         line-height: 28px;
         font-size: 16px;
         padding: 0 12px;
-
-        ${theme.roundedCornersOptOut && css`
-          border-radius: 15px;
-        `}
       `}
 
       ${isDeletable && css`
         ${StyledIconButton} {
           -webkit-appearance: none;
-          ${!theme.roundedCornersOptOut && css`
-            border-radius: var(--borderRadius000);
-          `}
+          border-radius: var(--borderRadius000);
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -143,18 +123,9 @@ const StyledPill = styled.span`
           line-height: 16px;
 
           &:focus {
-            ${theme.focusRedesignOptOut && /* istanbul ignore next */
-  css`
-              outline: none;
-              box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
-            `}
-
             background-color: ${buttonFocusColor};
-            ${!theme.roundedCornersOptOut && css`
-              border-radius: var(--borderRadius000) var(--borderRadius025)
-                var(--borderRadius025) var(--borderRadius000);
-            `}
-
+            border-radius: var(--borderRadius000) var(--borderRadius025)
+              var(--borderRadius025) var(--borderRadius000);
             ::-moz-focus-inner {
               border: 0;
             }
@@ -198,10 +169,6 @@ const StyledPill = styled.span`
                 font-size: 16px;
               }
             }
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -212,10 +179,6 @@ const StyledPill = styled.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 10px 10px 0;
-            `}
           }
         `}
 
@@ -226,10 +189,6 @@ const StyledPill = styled.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 11px 11px 0;
-            `}
           }
         `}
 
@@ -240,10 +199,6 @@ const StyledPill = styled.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-
-            ${theme.roundedCornersOptOut && css`
-              border-radius: 0 12px 12px 0;
-            `}
           }
         `}
       `}

package/esm/components/portrait/portrait.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
 import invariant from "invariant";
@@ -9,7 +9,6 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials, StyledPortraitGravatar } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import RoundedCornersOptOutContext from "../carbon-provider/__internal__/new-validation.context";
 let deprecatedGravatarWarnTriggered = false;
 const Portrait = ({
   alt,
@@ -18,7 +17,7 @@ const Portrait = ({
   gravatar = "",
   iconType = "individual",
   initials,
-  shape,
+  shape = "circle",
   size = "M",
   src,
   onClick,
@@ -33,10 +32,6 @@ const Portrait = ({
   ...rest
 }) => {
   const [externalError, setExternalError] = useState(false);
-  const {
-    roundedCornersOptOut
-  } = useContext(RoundedCornersOptOutContext);
-  const defaultShape = roundedCornersOptOut ? "square" : "circle";
   !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? invariant(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : invariant(false) : void 0;
   const logGravatarDeprecationWarning = () => {
     deprecatedGravatarWarnTriggered = true;
@@ -99,7 +94,7 @@ const Portrait = ({
       }, tagProps, {
         darkBackground: darkBackground,
         size: size,
-        shape: shape || defaultShape
+        shape: shape
       }), portrait));
     }
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
@@ -107,7 +102,7 @@ const Portrait = ({
     }, tagProps, {
       darkBackground: darkBackground,
       size: size,
-      shape: shape || defaultShape
+      shape: shape
     }), portrait);
   };
   return renderComponent();

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -47,8 +47,7 @@ const StyledProgressTracker = styled.div`
 const StyledProgressBar = styled.span`
   ${({
   progress,
-  error,
-  theme
+  error
 }) => css`
     display: flex;
     position: relative;
@@ -57,7 +56,7 @@ const StyledProgressBar = styled.span`
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     width: 100%
     min-height: fit-content;
@@ -108,8 +107,7 @@ const InnerBar = styled.span`
   ${({
   progress,
   size,
-  error,
-  theme
+  error
 }) => css`
     position: relative;
     left: 0;
@@ -117,7 +115,7 @@ const InnerBar = styled.span`
   progress,
   error
 })};
-    border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};

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

@@ -14,10 +14,6 @@ export const StyledSimpleColor = styled.div`
     cursor: pointer;
   }
 `;
-const oldFocusStyling = `
-  box-shadow: inset 0px 0px 0px var(--borderWidth200) var(--colorsUtilityYang100);
-  border: 2px solid var(--colorsSemanticFocus500);
-`;
 export const StyledColorSampleBox = styled.div`
   height: 100%;
   width: 100%;
@@ -25,10 +21,6 @@ export const StyledColorSampleBox = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  ${({
-  theme
-}) => /* istanbul ignore next */
-theme.focusRedesignOptOut && "border: 2px solid transparent;"}
 
   ${({
   color
@@ -61,18 +53,7 @@ export const StyledSimpleColorInput = styled(Input)`
   }
 
   &:focus + ${StyledColorSampleBox} {
-    ${({
-  theme
-}) => css`
-      ${theme.focusRedesignOptOut && /* istanbul ignore next */
-`
-        ${oldFocusStyling}
-      `}
-
-      ${!theme.focusRedesignOptOut && `
-        ${addFocusStyling(true)}
-      `}
-    `}
+    ${addFocusStyling(true)}
   }
 `;
 const getIconColor = color => {

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

@@ -12,8 +12,7 @@ const StyledSplitButtonToggle = styled(StyledButton)`
   buttonType,
   disabled,
   displayed,
-  size,
-  theme
+  size
 }) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
@@ -49,14 +48,6 @@ const StyledSplitButtonToggle = styled(StyledButton)`
 
     ${StyledButton} + & {
       margin-left: 0;
-
-      ${buttonType === "secondary" && /* istanbul ignore next */
-theme.focusRedesignOptOut && /* istanbul ignore next */
-css`
-        &:focus {
-          margin-left: -3px;
-        }
-      `}
     }
 
     ${StyledButton} + & ${StyledIcon} {

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

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

package/esm/components/switch/__internal__/switch-slider.style.d.ts

@@ -1,11 +1,9 @@
-import { ThemeObject } from "../../../style/themes/base";
 import { SwitchSliderProps } from "./switch-slider.component";
 interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
     isLoading?: boolean;
-    theme?: Partial<ThemeObject>;
     isDarkBackground?: boolean;
 }
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, StyledSwitchSliderProps, never>;
 declare const HiddenContent: import("styled-components").StyledComponent<"div", any, Pick<StyledSwitchSliderProps, "size">, never>;
 export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-import baseTheme from "../../../style/themes/base";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 const StyledSwitchSlider = styled.div`
   ${({
@@ -10,7 +9,6 @@ const StyledSwitchSlider = styled.div`
   size,
   error,
   warning,
-  theme,
   isDarkBackground
 }) => css`
     display: flex;
@@ -24,7 +22,7 @@ const StyledSwitchSlider = styled.div`
     top: 0;
     width: 100%
     z-index: 2;
-    border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
     border-width: var(--borderWidth200);
@@ -83,10 +81,6 @@ const StyledSwitchSlider = styled.div`
         `}
       `}
 
-    ${size === "large" && css`
-        ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""}
-      `}
-
     ${isLoading && css`
         &::before {
           display: none;
@@ -117,8 +111,5 @@ const HiddenContent = styled.div`
     padding-left: ${size === "large" ? "var(--spacing700)" : "var(--spacing500)"};
   `}
 `;
-StyledSwitchSlider.defaultProps = {
-  theme: baseTheme
-};
 export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

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

@@ -9,9 +9,6 @@ import StyledValidationIcon from "../../__internal__/validations/validation-icon
 import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import StyledSwitchSlider from "./__internal__/switch-slider.style";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 export const ErrorBorder = styled.span`
   ${({
   reverse,
@@ -47,8 +44,7 @@ const StyledSwitch = styled.div`
   fieldHelpInline,
   labelInline,
   reverse,
-  size,
-  theme
+  size
 }) => css`
     ${margin}
     ${FieldLineStyle} {
@@ -82,7 +78,7 @@ const StyledSwitch = styled.div`
 
     ${HiddenCheckableInputStyle}:not([disabled]) {
       &:focus ~ ${StyledSwitchSlider} {
-        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+        ${addFocusStyling()}
       }
     }
 

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

@@ -326,12 +326,8 @@ const tabTitleStyles = css`
           cursor: default;
         }
       `}
-
-    ${({
-  theme
-}) => `
       &:focus {
-        outline: 4px solid ${!theme.focusRedesignOptOut ? "black" : /* istanbul ignore next */"var(--colorsSemanticFocus500)"};
+        outline: 4px solid black;
         top: -2px;
         z-index: 6;
 
@@ -347,7 +343,7 @@ const tabTitleStyles = css`
                 border-bottom-left-radius: var(--borderRadius100);
               `}
 
-        ${!theme.focusRedesignOptOut ? `::before {
+        ::before {
           content: "";
           position: absolute;
           top: 0;
@@ -376,10 +372,10 @@ const tabTitleStyles = css`
                  bottom: 2px;
                  right: 1px;
                `}
-        }` : /* istanbul ignore next */""}
+        }
+        }
       }
-    `}
-
+    
     ${position === "left" && css`
         background-color: transparent;
         border-bottom: 0px;