carbon-react 119.10.2 → 119.12.0

package/README.md

@@ -1,4 +1,4 @@
-# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml)
+# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml) [![Playwright](https://github.com/Sage/carbon/actions/workflows/playwright.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/playwright.yml)
 
 Carbon is a [React](https://facebook.github.io/react/) component library developed by Sage.
 

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

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
 import StyledInput from "./input.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
   inputWidth
@@ -70,11 +74,12 @@ const InputPresentationStyle = styled.div`
       cursor: not-allowed;
     `}
 
-  ${({
-  hasFocus
+    ${({
+  hasFocus,
+  theme
 }) => hasFocus && css`
       & {
-        outline: 3px solid var(--colorsSemanticFocus500);
+        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
         z-index: 2;
       }
     `}

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

@@ -1,5 +1,9 @@
 import styled, { css } from "styled-components";
 import sizes from "../input/input-sizes.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const InputIconToggleStyle = styled.span.attrs(({
   onClick
 }) => ({
@@ -22,8 +26,12 @@ const InputIconToggleStyle = styled.span.attrs(({
     width: ${sizes[size].height};
   `}
 
-  &:focus {
-    outline: solid 3px var(--colorsSemanticFocus500);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+    }  
+  `}
 `;
 export default InputIconToggleStyle;

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

@@ -2,11 +2,15 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import StyledIcon from "../../components/icon/icon.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 const validationIconTypes = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
   warning: "var(--colorsSemanticCaution500)"
 };
+const oldFocusStyling = `
+  outline: solid 2px var(--colorsSemanticFocus500);
+`;
 const ValidationIconStyle = styled.span`
   background: none;
   cursor: default;
@@ -30,7 +34,9 @@ const ValidationIconStyle = styled.span`
   }
 
   ${StyledIcon}:focus {
-    outline: solid 2px var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => !theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
   }
 
   ${margin}

package/esm/components/accordion/accordion.style.js

@@ -3,6 +3,7 @@ import { space, margin } from "styled-system";
 import Icon from "../icon";
 import { baseTheme } from "../../style/themes";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledAccordionGroup = styled.div`
   ${margin}
 `;
@@ -93,13 +94,17 @@ const StyledAccordionHeadingsContainer = styled.div`
       }
     `}
 `;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledAccordionTitleContainer = styled.div`
   ${({
   buttonHeading,
   buttonWidth,
   iconAlign,
   size,
-  hasButtonProps
+  hasButtonProps,
+  theme
 }) => css`
     padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${space}
@@ -116,7 +121,7 @@ const StyledAccordionTitleContainer = styled.div`
     z-index: 1;
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
     }
 
     ${!buttonHeading && css`

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

@@ -4,6 +4,11 @@ import Icon from "../icon";
 import StyledIcon from "../icon/icon.style";
 import StyledButton from "../button/button.style";
 import { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+import baseTheme from "../../style/themes/base";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const Menu = styled.div`
   ${({
   isOpen
@@ -109,7 +114,9 @@ const StyledMenuItem = styled.button`
   font-weight: 700;
 
   &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
     z-index: 1;
     border-radius: var(--borderRadius000);
   }
@@ -138,6 +145,9 @@ const StyledMenuItem = styled.button`
       }
     `}
 `;
+StyledMenuItem.defaultProps = {
+  theme: baseTheme
+};
 const StyledMenuItemWrapper = styled.div`
   position: relative;
 `;
@@ -165,10 +175,14 @@ const ButtonIcon = styled(Icon)`
   }
 `;
 const StyledButtonIcon = styled.div`
-  &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    border-radius: var(--borderRadius050);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+    }    
+  `}
+  border-radius: var(--borderRadius050);
 `;
 const MenuItemIcon = styled(Icon)`
   ${({
@@ -188,6 +202,9 @@ const MenuItemIcon = styled(Icon)`
     color: var(--colorsUtilityYin065);
   `}
 `;
+StyledButtonIcon.defaultProps = {
+  theme: baseTheme
+};
 const SubMenuItemIcon = styled(ButtonIcon)`
   ${({
   type

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

@@ -1,5 +1,10 @@
 import styled, { css } from "styled-components";
+import baseTheme from "../../style/themes/base";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 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 = styled.button.attrs({
   type: "button"
 })`
@@ -26,11 +31,18 @@ const StyledAdvancedColorPickerCell = styled.button.attrs({
   }
 
   &:focus {
-    outline: solid 3px var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+    `}
   }
 
   &::-moz-focus-inner {
     border: none;
   }
 `;
+StyledAdvancedColorPickerCell.defaultProps = {
+  theme: baseTheme
+};
 export default StyledAdvancedColorPickerCell;

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

@@ -1,4 +1,8 @@
 import styled, { css } from "styled-components";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledNavigationItem = styled.li`
   width: 100%;
 
@@ -15,7 +19,10 @@ const StyledNavigationItem = styled.li`
     border-bottom-right-radius: var(--borderRadius100);
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+      position: relative;
     }
 
     &:hover {

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

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledIcon from "../icon/icon.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledBatchSelection = styled.div`
   ${({
   disabled,
@@ -15,6 +19,11 @@ const StyledBatchSelection = styled.div`
 
     ${StyledIcon} {
       color: var(--colorsActionMajorYin065);
+      &:focus {
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+      }
     }
 
     ${colorTheme === "dark" && css`
@@ -52,6 +61,10 @@ const StyledBatchSelection = styled.div`
 
     ${StyledIconButton}:focus {
       border-radius: var(--borderRadius100);
+      z-index: 1;
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
     }
 
     ${disabled && css`

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

@@ -3,6 +3,7 @@ import { space } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import buttonTypes from "./button-types.style";
 import StyledIcon from "../icon/icon.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 function additionalIconStyle(iconType) {
   if (iconType === "services") return "6px";
   return "16px";
@@ -52,11 +53,13 @@ function stylingForType({
     ${iconOnly && stylingForIconOnly(size)}
   `;
 }
+const oldFocusStyling = "outline: solid 3px var(--colorsSemanticFocus500);";
 const StyledButton = styled.button`
   ${space}
   ${({
   disabled,
-  noWrap
+  noWrap,
+  theme
 }) => css`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -72,7 +75,7 @@ const StyledButton = styled.button`
     border-radius: var(--borderRadius400);
 
     &:focus {
-      outline: solid 3px var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
     }
 
     ${stylingForType}

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

@@ -1,5 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../icon/icon.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+import baseTheme from "../../style/themes/base";
 const heightConfig = {
   small: 32,
   medium: 40,
@@ -33,6 +35,9 @@ const StyledButtonToggleContentWrapper = styled.div`
   height: 100%;
   flex-flow: wrap;
 `;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledButtonToggle = styled.button`
   display: inline-flex;
   justify-content: center;
@@ -56,8 +61,10 @@ const StyledButtonToggle = styled.button`
 
   border: 1px solid var(--colorsActionMinor500);
 
-  :focus {
-    outline: 3px solid var(--colorsSemanticFocus500);
+  &:focus {
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
     z-index: 100;
   }
 
@@ -133,6 +140,9 @@ const StyledButtonToggleIcon = styled.div`
       }
     `}
 `;
+StyledButtonToggle.defaultProps = {
+  theme: baseTheme
+};
 const StyledButtonToggleWrapper = styled.div`
   display: inline-block;
   vertical-align: middle;

package/esm/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;

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

@@ -9,16 +9,20 @@ export const CarbonProvider = ({
   children,
   theme = mintTheme,
   validationRedesignOptIn = false,
-  roundedCornersOptOut = false
+  roundedCornersOptOut = false,
+  focusRedesignOptOut = false
 }) => {
   const {
-    roundedCornersOptOut: existingRoundedCornersOptOut
+    roundedCornersOptOut: existingRoundedCornersOptOut,
+    focusRedesignOptOut: existingFocusRedesignOptOut
   } = useContext(NewValidationContext);
   const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
+  const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: {
       ...theme,
-      roundedCornersOptOut: roundedCornersOptOutValue
+      roundedCornersOptOut: roundedCornersOptOutValue,
+      focusRedesignOptOut: focusRedesignOptOutValue
     }
   }, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
     value: {

package/esm/components/carousel/carousel.style.js

@@ -2,6 +2,8 @@ import styled, { css } from "styled-components";
 import Icon from "../icon";
 import { slideAnimation, fadeAnimation } from "./slide.config";
 import { SlideStyle } from "./slide/slide.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+import baseTheme from "../../style/themes/base";
 const CarouselNavigationStyle = styled.div`
   margin-top: -32.5px;
   position: absolute;
@@ -9,11 +11,11 @@ const CarouselNavigationStyle = styled.div`
   z-index: 20;
 `;
 const CarouselPreviousButtonWrapperStyle = styled(CarouselNavigationStyle)`
-  margin-left: 2px;
+  margin-left: 8px;
 `;
 const CarouselNextButtonWrapperStyle = styled(CarouselNavigationStyle)`
   right: 0;
-  margin-right: 2px;
+  margin-right: 8px;
 `;
 const CarouselStyledIcon = styled(Icon)`
   cursor: pointer;
@@ -28,6 +30,9 @@ const CarouselStyledIconLeft = styled(CarouselStyledIcon)`
 const CarouselStyledIconRight = styled(CarouselStyledIcon)`
   transform: rotate(-90deg);
 `;
+const oldFocusStyling = `
+  outline: solid 2px var(--colorsSemanticFocus500);
+`;
 const CarouselButtonStyle = styled.button.attrs({
   type: "button"
 })`
@@ -67,7 +72,9 @@ const CarouselButtonStyle = styled.button.attrs({
     }
 
     &:focus {
-      outline: 2px solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
 
       ::-moz-focus-inner {
         border: 0;
@@ -79,6 +86,9 @@ const CarouselButtonStyle = styled.button.attrs({
     }
   `}
 `;
+CarouselButtonStyle.defaultProps = {
+  theme: baseTheme
+};
 const CarouselSelectorInputStyle = styled.input`
   display: none;
 `;

package/esm/components/checkbox/checkbox.style.js

@@ -7,6 +7,10 @@ import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/c
 import StyledLabel, { StyledLabelContainer } from "../../__internal__/label/label.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import baseTheme from "../../style/themes/base";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
+`;
 const StyledCheckbox = styled.div`
   ${margin}
   ${({
@@ -65,10 +69,14 @@ const StyledCheckbox = styled.div`
 
     // prettier-ignore
     ${StyledHiddenCheckableInput}:not([disabled]) {
-      &:focus + ${StyledCheckableInputSvgWrapper},
-      &:hover + ${StyledCheckableInputSvgWrapper} {
-        box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
-      }
+      ${({
+  theme
+}) => `
+        &:focus + ${StyledCheckableInputSvgWrapper} ,
+        &:hover + ${StyledCheckableInputSvgWrapper} {
+          ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+        }
+      `}
     }
 
     ${StyledLabelContainer} {

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

@@ -1,5 +1,9 @@
 import styled from "styled-components";
 import baseTheme from "../../../../style/themes/base";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+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 = () => `
@@ -215,7 +219,9 @@ const StyledDayPicker = styled.div`
   .DayPicker-wrapper {
     padding: 0;
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => !theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
       border-radius: var(--borderRadius050);
     }
   }
@@ -262,9 +268,13 @@ const StyledDayPicker = styled.div`
       color: var(--colorsActionMajorYin090);
     }
 
-    &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    }
+    ${({
+  theme
+}) => `
+      &:focus {
+        ${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
+      }
+    `}
 
     + * {
       border-left: 1px;

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

@@ -1,4 +1,9 @@
 import styled from "styled-components";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+import { baseTheme } from "../../../../style/themes";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledButton = styled.button.attrs({
   type: "button"
 })`
@@ -15,8 +20,15 @@ const StyledButton = styled.button.attrs({
   box-sizing: border-box;
   border-radius: var(--borderRadius050);
 
-  &:focus {
-    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-  }
+  ${({
+  theme
+}) => `
+    &:focus {
+      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+    }
+  `}
 `;
+StyledButton.defaultProps = {
+  theme: baseTheme
+};
 export default StyledButton;

package/esm/components/drawer/drawer.style.js

@@ -2,6 +2,8 @@ import styled, { css, keyframes } from "styled-components";
 import StyledTabs from "../tabs/tabs.style";
 import Box from "../box";
 import StyledStickyFooter from "../../__internal__/sticky-footer/sticky-footer.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
+import baseTheme from "../../style/themes/base";
 const defaultExpandedWidth = "var(--sizing500)";
 const StyledSidebarHeader = styled.div`
   ${({
@@ -158,6 +160,9 @@ const StyledDrawerContent = styled.div`
     }
   }
 `;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledSidebarToggleButton = styled.button.attrs({
   type: "button"
 })`
@@ -181,9 +186,13 @@ const StyledSidebarToggleButton = styled.button.attrs({
     animation: ${buttonClose} ${animationDuration} ease-in-out;
     border-radius: var(--borderRadius050);
 
-    &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
-    }
+    ${({
+  theme
+}) => `
+      &:focus {
+        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+      }
+    `}
 
     &:hover {
       cursor: pointer;
@@ -195,6 +204,9 @@ const StyledSidebarToggleButton = styled.button.attrs({
     `}
   `}
 `;
+StyledSidebarToggleButton.defaultProps = {
+  theme: baseTheme
+};
 const StyledDrawerWrapper = styled.div`
   display: flex;
   height: ${({

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

@@ -6,7 +6,7 @@ const StyledPicklist = styled(Box).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/esm/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -68,5 +68,12 @@ const StyledLockIcon = styled(Icon)`
   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);
+  }
 `;
 export { StyledPicklistItem, StyledButton, StyledLockIcon };