carbon-react 119.10.1 → 119.11.0

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

@@ -6,21 +6,42 @@ import StyledFlatTableCheckbox from "../flat-table-checkbox/flat-table-checkbox.
 import StyledFlatTableHeader from "../flat-table-header/flat-table-header.style";
 import StyledIcon from "../../icon/icon.style";
 import { toColor } from "../../../style/utils/color";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
+import { isSafari } from "../../../__internal__/utils/helpers/browser-type-check";
+import cellSizes from "../cell-sizes.style";
 const horizontalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
-const getLeftStickyStyling = index => index === 0 && css`
+const oldFocusStyling = `
+  border: 2px solid var(--colorsSemanticFocus500);
+`;
+const firstColumnOldFocusStyling = `
+  outline: 2px solid var(--colorsSemanticFocus500);
+  outline-offset: -1px;
+`;
+const newFocusStyling = `
+  ${addFocusStyling(true)}
+  z-index: 1000;
+`;
+const getLeftStickyStyling = (index, themeOptOut) => index === 0 && /* istanbul ignore next */
+themeOptOut && /* istanbul ignore next */
+css`
     &:first-of-type::before {
       border-left: 3px solid var(--colorsSemanticFocus500);
     }
   `;
-const getRightStickyStyling = (index, totalChildren) => index === totalChildren - 1 && css`
+const getRightStickyStyling = (index, totalChildren, themeOptOut) => index === totalChildren - 1 && /* istanbul ignore next */
+themeOptOut && /* istanbul ignore next */
+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};
@@ -65,6 +86,13 @@ const verticalBorderColor = colorTheme => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getFocusHeight = size => {
+  if (!size) return "40px";
+  const {
+    height
+  } = cellSizes[size];
+  return height;
+};
 const StyledFlatTableRow = styled.tr`
   ${({
   bgColor,
@@ -180,7 +208,7 @@ const StyledFlatTableRow = styled.tr`
             right: 0px;
             top: 0;
             bottom: 0px;
-            border: 2px solid var(--colorsSemanticFocus500);
+            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */oldFocusStyling}
             pointer-events: none;
           }
 
@@ -197,29 +225,43 @@ const StyledFlatTableRow = styled.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) {
+          ${isSafari(navigator) && css`
+            ${theme.focusRedesignOptOut && /* istanbul ignore next */
+  css`
               outline: 2px solid var(--colorsSemanticFocus500);
               outline-offset: -2px;
               position: static;
+
               :after {
                 content: none;
                 border: none;
               }
-            }
-          }
+            `}
+            ${!theme.focusRedesignOptOut && 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 */
+  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);
+            }
+          `}
 
           ${StyledFlatTableRowHeader} {
-            ${getLeftStickyStyling(lhsRowHeaderIndex)}
-            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren)}
+            ${getLeftStickyStyling(lhsRowHeaderIndex, theme)}
+            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren, theme)}
             ${stickyColumnFocusStyling(theme)}
           }
 
@@ -249,8 +291,7 @@ const StyledFlatTableRow = styled.tr`
           cursor: pointer;
 
           :focus {
-            outline: 2px solid var(--colorsSemanticFocus500);
-            outline-offset: -1px;
+            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */firstColumnOldFocusStyling}
           }
 
           :hover {

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

@@ -9,9 +9,13 @@ import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
 import cellSizes from "./cell-sizes.style";
 import Box from "../box";
 import { StyledPagerContainer } from "../pager/pager.style";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 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 = styled.div`
   ${({
   width,
@@ -101,20 +105,33 @@ const StyledFlatTableWrapper = styled(Box)`
     `}
 
   ${({
-  isInSidebar
+  isInSidebar,
+  theme
 }) => css`
       box-sizing: border-box;
 
       :focus {
-        outline: 2px solid var(--colorsSemanticFocus500);
+        /* istanbul ignore next */
+        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+css`
+          ${oldFocusStyling}
 
-        :not(:focus-visible) {
-          outline: none;
-        }
+          :not(:focus-visible) {
+            outline: none;
+          }
 
-        :focus-visible {
-          outline: 2px solid var(--colorsSemanticFocus500);
-        }
+          :focus-visible {
+            ${oldFocusStyling}
+          }
+        `}
+
+        ${!theme.focusRedesignOptOut && css`
+          ${addFocusStyling()}
+          :not(:focus-visible) {
+            outline: none;
+            box-shadow: none;
+          }
+        `}
       }
 
       ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};

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

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 import StyledIcon from "../../icon/icon.style";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
+import baseTheme from "../../../style/themes/base";
+const oldFocusStyling = `
+  outline: solid 1px var(--colorsSemanticFocus500);
+`;
 const StyledSort = styled.div`
   display: inline-flex;
   align-items: center;
@@ -20,10 +25,15 @@ const StyledSort = styled.div`
   }
 
   :focus {
-    outline: 1px solid var(--colorsSemanticFocus500);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
     border-radius: var(--borderRadius025);
   }
 `;
+StyledSort.defaultProps = {
+  theme: baseTheme
+};
 const StyledSpaceHolder = styled.div`
   display: inline-block;
   width: 22px;

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

@@ -7,6 +7,7 @@ import Help from "../help";
 import Typography from "../typography";
 import Hr from "../hr";
 import Link from "../link";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledHeading = styled.div`
   width: 100%;
   ${margin}
@@ -18,6 +19,7 @@ const StyledHeaderContent = styled.div`
   display: inline-flex;
   align-items: flex-end;
 `;
+const oldFocusStyling = "outline: 3px solid var(--colorsSemanticFocus500);";
 const StyledHeader = styled.div`
   ${({
   divider,
@@ -53,7 +55,9 @@ const StyledHeadingBackButton = styled(Link)`
 
     &:focus {
       background-color: transparent;
-      outline: 3px solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => !theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling}
     }
 
     &:hover {
@@ -69,6 +73,9 @@ const StyledHeadingBackButton = styled(Link)`
     }
   }
 `;
+StyledHeadingBackButton.defaultProps = {
+  theme: baseTheme
+};
 const StyledHeadingTitle = styled(Typography)`
   line-height: 32px;
   ${({

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

@@ -2,6 +2,10 @@ import styled, { css } from "styled-components";
 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;
@@ -32,7 +36,10 @@ const StyledHelp = styled.div`
   }
 
   &:focus ${StyledIcon} {
-    outline: 2px solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius050);
+    ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
   }
 
   ${margin}

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

@@ -7,12 +7,14 @@ import iconConfig from "./icon-config";
 import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import styledColor from "../../style/utils/color";
 import getColorValue from "../../style/utils/get-color-value";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 function adjustIconBgSize(fontSize, bgSize) {
   if (fontSize && fontSize !== "small") {
     return iconConfig.backgroundSize[fontSize];
   }
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
 }
+const oldFocusStyling = "outline: 2px solid var(--colorsSemanticFocus500);";
 const StyledIcon = styled.span`
   ${({
   theme,
@@ -111,7 +113,7 @@ const StyledIcon = styled.span`
 
       ${hasTooltip && `
         :focus {
-          outline: 2px solid var(--colorsSemanticFocus500);
+          ${!theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling}
         }
       `}
 

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

@@ -2,6 +2,12 @@ import styled, { css } from "styled-components";
 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"
 })`
@@ -16,9 +22,9 @@ const StyledIconButton = styled.button.attrs({
     border-radius: var(--borderRadius050);
 
     &:focus {
-      background-color: transparent;
-      outline: solid 3px var(--colorsSemanticFocus500);
-      z-index: 1;
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
     }
 
     &:hover {

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

@@ -105,7 +105,7 @@ const StyledLink = styled.span`
 
             &:focus {
               background-color: var(--colorsSemanticFocus250);
-              border-radius: var(--borderRadius050);
+              border-radius: var(--borderRadius025);
             }
           `}
 
@@ -117,6 +117,21 @@ const StyledLink = styled.span`
             }
           `}
         }
+
+        ${!disabled && !theme.focusRedesignOptOut && 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/esm/components/link-preview/link-preview.style.js

@@ -1,6 +1,12 @@
 import styled, { css } from "styled-components";
 import { StyledPreview } from "../preview/preview.style";
 import { StyledPreviewPlaceholder } from "../preview/__internal__/preview-placeholder.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;
@@ -17,8 +23,9 @@ const StyledLinkPreview = styled.a`
 
     ${as !== "div" && css`
       :focus {
-        outline: 2px solid var(--colorsSemanticFocus500);
-        outline-offset: -1px;
+        ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
       }
 
       :hover {
@@ -28,6 +35,9 @@ const StyledLinkPreview = styled.a`
     `}
   `}
 `;
+StyledLinkPreview.defaultProps = {
+  theme: baseTheme
+};
 const StyledCloseIconWrapper = styled.div`
   padding: 16px;
 `;

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

@@ -6,6 +6,11 @@ import StyledSearch from "../../search/search.style";
 import StyledIcon from "../../icon/icon.style";
 import StyledButton from "../../button/button.style";
 import menuConfigVariants from "../menu.config";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+  box-shadow: none;
+`;
 const StyledMenuFullscreen = styled.div`
   position: fixed;
   top: 0;
@@ -63,8 +68,10 @@ const StyledMenuFullscreen = styled.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 ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
           }
         }
       }