carbon-react 118.1.1 → 118.2.1

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

@@ -29,6 +29,17 @@ const StyledTitleContent = styled.span`
       display: flex;
       width: 100%;
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+      border-top-left-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-top-right-radius: var(--borderRadius000);
+    `}
+
+    ${position === "top" && css`
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
     `}
 
     ${hasHref && css`
@@ -89,8 +100,7 @@ const StyledTitleContent = styled.span`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-    `}
- 
+    `} 
 
     ${(warning || info) && css`
       outline: 1px solid;
@@ -208,6 +218,8 @@ const StyledTitleContent = styled.span`
 const tabTitleStyles = css`
   background-color: transparent;
   display: inline-block;
+  border-top-left-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
   font-weight: bold;
   position: relative;
   border: none;
@@ -221,6 +233,14 @@ const tabTitleStyles = css`
   position
 }) => position === "top" && "white-space: nowrap"};
 
+  ${({
+  position
+}) => css`
+    ${position === "left" && css`
+      border-top-right-radius: var(--borderRadius000);
+    `}
+  `}
+
   a:visited {
     color: inherit;
   }

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -10,6 +10,11 @@ const StyledTabsHeaderWrapper = styled.div`
       box-sizing: border-box;
       padding: 3px;
 
+      button[data-element="select-tab"] {
+        border-top-left-radius: var(--borderRadius100);
+        border-bottom-left-radius: var(--borderRadius100);
+      }
+
       ${!isInSidebar && css`
         min-width: 20%;
       `}

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -4,6 +4,7 @@ const StyledToolbarButton = styled.button.attrs({
   type: "button"
 })`
   background-color: inherit;
+  border-radius: var(--borderRadius050);
   border: none;
   cursor: pointer;
   width: 32px;
@@ -21,10 +22,12 @@ const StyledToolbarButton = styled.button.attrs({
     :active {
       outline: 2px solid var(--colorsSemanticFocus500);
       outline-offset: -2px;
+      border-radius: var(--borderRadius050);
     }
 
     :hover {
       background-color: var(--colorsActionMinor200);
+      border-radius: var(--borderRadius050);
     }
 
     ${isActive && css`

package/esm/components/text-editor/text-editor.style.js

@@ -10,6 +10,8 @@ StyledEditorWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledEditorContainer = styled.div`
+  border-radius: var(--borderRadius050);
+
   ${({
   hasError,
   rows,
@@ -60,6 +62,7 @@ const StyledEditorOutline = styled.div`
   isFocused,
   hasError
 }) => css`
+    border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 

package/esm/components/tile/tile.component.d.ts

@@ -24,6 +24,8 @@ export interface TileProps extends SpaceProps, WidthProps {
     borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
     /** Sets the border variant that should be used */
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
+    roundness?: "default" | "large";
 }
-export declare const Tile: ({ variant, p, children, orientation, width, ...props }: TileProps) => JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, ...props }: TileProps) => JSX.Element;
 export default Tile;

package/esm/components/tile/tile.component.js

@@ -10,6 +10,7 @@ const Tile = ({
   children,
   orientation = "horizontal",
   width,
+  roundness = "default",
   ...props
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -47,7 +48,8 @@ const Tile = ({
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal,
-    p: p
+    p: p,
+    roundness: roundness
   }, props), wrappedChildren);
 };
 

package/esm/components/tile/tile.style.d.ts

@@ -6,7 +6,7 @@ interface TileContentProps {
     width?: string | number;
 }
 declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export { StyledTile, TileContent };

package/esm/components/tile/tile.style.js

@@ -85,12 +85,15 @@ const StyledTile = styled.div`
   borderWidth = "borderWidth100",
   isHorizontal,
   variant,
-  width
+  width,
+  roundness
 }) => css`
     ${space}
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
+    overflow: hidden;
 
     ${variant === "tile" && css`
       background-color: var(--colorsUtilityYang100);

package/esm/components/tile-select/tile-select.style.d.ts

@@ -8,6 +8,7 @@ declare const StyledDescription: import("styled-components").StyledComponent<"p"
 declare const StyledTileSelect: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    hasAccordion?: boolean | undefined;
 }, never>;
 declare const StyledFocusWrapper: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;

package/esm/components/tile-select/tile-select.style.js

@@ -35,6 +35,7 @@ const StyledDescription = styled.p`
 const StyledTileSelect = styled.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
+
   ${({
   checked
 }) => checked && css`
@@ -60,6 +61,9 @@ const StyledFocusWrapper = styled.div`
 }) => css`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
+    border-radius: var(--borderRadius100);
+    overflow: hidden;
+
     ${checked && css`
       border-color: var(--colorsActionMajor500);
       z-index: 10;
@@ -76,6 +80,7 @@ const StyledTileSelectContainer = styled.div`
 
   width: 100%;
   position: relative;
+
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
@@ -99,6 +104,9 @@ const StyledAccordionFooterWrapper = styled.div`
   z-index: 200;
   left: -12px;
 
+  border-bottom-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius100);
+
   ${({
   accordionExpanded
 }) => `

package/esm/components/tooltip/tooltip.style.js

@@ -28,6 +28,7 @@ const StyledTooltip = styled.div`
     right: auto;
     max-width: 300px;
     width: max-content;
+    border-radius: var(--borderRadius050);
     position: absolute;
     animation: ${fadeIn} 0.2s linear;
     z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437

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

@@ -41,6 +41,7 @@ export const StyledVerticalMenuItem = styled.div`
 }) => active && css`
       &:before {
         background: var(--colorsComponentsLeftnavWinterStandardSelected);
+        border-radius: var(--borderRadius100);
         content: "";
         height: calc(100% - 16px);
         left: 24px;

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

@@ -63,6 +63,7 @@ const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
+  border-radius: var(--borderRadius050);
   box-sizing: border-box;
   cursor: text;
   display: flex;

package/lib/__internal__/input/input.style.js

@@ -14,6 +14,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledInput = _styledComponents.default.input`
   background: transparent;
   border: none;
+  border-radius: var(--borderRadius050);
   color: var(--colorsUtilityYin090);
   flex-grow: 1;
   font-size: var(--fontSizes100);

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

@@ -31,6 +31,7 @@ const Menu = _styledComponents.default.div`
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
+  border-radius: var(--borderRadius100);
   background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
@@ -61,6 +62,7 @@ const StyledMenuItem = _styledComponents.default.button`
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     z-index: 1;
+    border-radius: var(--borderRadius000);
   }
 
   ${({
@@ -117,6 +119,7 @@ exports.ButtonIcon = ButtonIcon;
 const StyledButtonIcon = _styledComponents.default.div`
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius050);
   }
 `;
 exports.StyledButtonIcon = StyledButtonIcon;

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

@@ -23,6 +23,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   color
 }) => color && (0, _styledComponents.css)`
       background-color: ${color};
+      border-radius: var(--borderRadius050);
     `}
 
   ${({

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -60,6 +60,7 @@ const StyledAdvancedColorPickerPreview = _styledComponents.default.div`
   height: 25px;
   margin-bottom: 15px;
   border: 1px solid var(--colorsUtilityYin090);
+  border-radius: var(--borderRadius050);
 
   ${({
   color

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

@@ -23,15 +23,19 @@ const StyledNavigationItem = _styledComponents.default.li`
     border-left: var(--sizing050) solid var(--colorsActionMinor100);
     font-weight: 700;
     padding: 12px 24px;
+    border-top-right-radius: var(--borderRadius100);
+    border-bottom-right-radius: var(--borderRadius100);
 
     &:focus {
       outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
-      background-color: ${({
+      ${({
   isSelected
-}) => !isSelected && "var(--colorsActionMinor100)"};
+}) => !isSelected && (0, _styledComponents.css)`
+          background-color: var(--colorsActionMinor100);
+        `};
     }
 
     ${({

package/lib/components/badge/badge.style.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const commonStyles = `
   overflow: hidden;
-  border-radius: 50%;
+  border-radius: var(--borderRadiusCircle);
   position: absolute;
   top: -11px;
   right: -11px;

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

@@ -25,6 +25,7 @@ const StyledBatchSelection = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     align-items: center;
     display: inline-flex;
+    border-radius: var(--borderRadius100);
 
     ${hidden && "opacity: 0;"}
 
@@ -58,12 +59,17 @@ const StyledBatchSelection = _styledComponents.default.div`
 
     ${_iconButton.default}:hover {
       background-color: var(--colorsActionMajor500);
+      border-radius: var(--borderRadius100);
 
       ${_icon.default} {
         color: var(--colorsActionMajorYang100);
       }
     }
 
+    ${_iconButton.default}:focus {
+      border-radius: var(--borderRadius100);
+    }
+
     ${disabled && (0, _styledComponents.css)`
       background: transparent;
       color: var(--colorsUtilityYin030);

package/lib/components/box/box.component.d.ts

@@ -9,6 +9,7 @@ export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
 export declare type Gap = AllowedNumericalValues | string;
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
+declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -27,6 +28,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     rowGap?: Gap;
     /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
     boxShadow?: BoxShadowsType;
+    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */
+    borderRadius?: BorderRadiusType;
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/lib/components/box/box.component.js

@@ -54,6 +54,10 @@ const Box = _styledComponents.default.div`
   ${_styledSystem.flexbox}
   ${calculatePosition}
 
+  ${({
+  borderRadius = "borderRadius000"
+}) => `border-radius: var(--${borderRadius});`}
+
   ${({
   color,
   bg,

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

@@ -56,14 +56,6 @@ function stylingForType({
   destructive
 }) {
   return (0, _styledComponents.css)`
-    border: 2px solid transparent;
-    box-sizing: border-box;
-    font-weight: 600;
-    text-decoration: none;
-    &:focus {
-      outline: solid 3px var(--colorsSemanticFocus500);
-    }
-
     ${(0, _buttonTypes.default)(disabled, destructive)[buttonType]};
 
     ${size === "small" && (0, _styledComponents.css)`
@@ -94,11 +86,20 @@ const StyledButton = _styledComponents.default.button`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
     display: inline-flex;
-    border-radius: 0;
     ${noWrap ? "white-space: nowrap;" : "flex-flow: wrap;"}
     justify-content: center;
     vertical-align: middle;
     outline-offset: 0;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--borderRadius400);
+
+    &:focus {
+      outline: solid 3px var(--colorsSemanticFocus500);
+    }
+
     ${stylingForType}
   `}
 

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

@@ -43,20 +43,38 @@ const StyledButtonBar = _styledComponents.default.div`
       margin: 0;
       border: 2px solid var(--colorsActionMajor500);
 
+      :not(:first-child):not(:last-child) {
+        border-radius: var(--borderRadius000);
+      }
+
+      :first-child:not(:last-child) {
+        border-top-right-radius: var(--borderRadius000);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+
+      :last-child:not(:first-child) {
+        border-top-left-radius: var(--borderRadius000);
+        border-bottom-left-radius: var(--borderRadius000);
+      }
+
       &:not(:last-of-type) {
         border-right-color: transparent;
       }
+
       &:not(:first-of-type) {
         margin-left: -2px;
       }
+
       &:focus {
         position: relative;
         z-index: 2;
         border-right-color: var(--colorsActionMajor500);
       }
+
       &:hover {
         background-color: var(--colorsActionMajor600);
         border-color: var(--colorsActionMajor600);
+
         & + button {
           border-left-color: var(--colorsActionMajor600);
         }
@@ -64,6 +82,7 @@ const StyledButtonBar = _styledComponents.default.div`
           color: white;
         }
       }
+
       & ${_icon.default} {
         color: var(--colorsActionMajor500);
       }

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

@@ -21,17 +21,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function makeColors(color) {
   return `
-  color: ${color};
-  ${_icon.default} {
     color: ${color};
-  }
-  ${_loaderSquare.default} {
-    background-color: ${color};
-  }
+    ${_icon.default} {
+      color: ${color};
+    }
+    ${_loaderSquare.default} {
+      background-color: ${color};
+    }
   `;
 }
 
 const StyledButtonMinor = (0, _styledComponents.default)(_button.default)`
+  border-radius: var(--borderRadius050);
+
   ${({
   children
 }) => !children && (0, _styledComponents.css)`
@@ -46,54 +48,54 @@ const StyledButtonMinor = (0, _styledComponents.default)(_button.default)`
   disabled
 }) => !destructive && !disabled && (0, _styledComponents.css)`
       ${buttonType === "primary" && `
-      background: var(--colorsActionMinor500);
-      border-color: var(--colorsActionMinorTransparent);
-      ${makeColors("var(--colorsActionMinorYang100)")}
-      &:hover {
-        background: var(--colorsActionMinor600);
-      }
-    `}
+        background: var(--colorsActionMinor500);
+        border-color: var(--colorsActionMinorTransparent);
+        ${makeColors("var(--colorsActionMinorYang100)")}
+        &:hover {
+          background: var(--colorsActionMinor600);
+        }
+      `}
 
       ${buttonType === "secondary" && `
-      background: transparent;
-      padding: var(--spacing100);
-      border-color: var(--colorsActionMinor500);
-      ${makeColors("var(--colorsActionMinor500)")}
-      &:hover {
-        color: var(--colorsActionMinorYang100);
-        background: var(--colorsActionMinor600);
-      }
-    `}
+        background: transparent;
+        padding: var(--spacing100);
+        border-color: var(--colorsActionMinor500);
+        ${makeColors("var(--colorsActionMinor500)")}
+        &:hover {
+          color: var(--colorsActionMinorYang100);
+          background: var(--colorsActionMinor600);
+        }
+      `}
 
       ${buttonType === "tertiary" && `
-      background: transparent;
-      padding: var(--spacing100);
-      ${makeColors("var(--colorsActionMinor500)")}
-      &:hover {
-        color: var(--colorsActionMinorYang100);
-        background: var(--colorsActionMinor600);
-      }
-    `}
+        background: transparent;
+        padding: var(--spacing100);
+        ${makeColors("var(--colorsActionMinor500)")}
+        &:hover {
+          color: var(--colorsActionMinorYang100);
+          background: var(--colorsActionMinor600);
+        }
+      `}
     `}
 
   ${({
   size
 }) => (0, _styledComponents.css)`
     ${size === "small" && `
-        min-height: 32px;
-        padding: var(--spacing000) var(--spacing100) var(--spacing000)
-          var(--spacing100);
-      `}
+      min-height: 32px;
+      padding: var(--spacing000) var(--spacing100) var(--spacing000)
+        var(--spacing100);
+    `}
 
     ${size === "medium" && `
-        padding-left: var(--spacing150);
-        padding-right: var(--spacing150);
-      `}
+      padding-left: var(--spacing150);
+      padding-right: var(--spacing150);
+    `}
 
     ${size === "large" && `
-        padding-left: var(--spacing200);
-        padding-right: var(--spacing200);
-      `}
+      padding-left: var(--spacing200);
+      padding-right: var(--spacing200);
+    `}
   `}
 `;
 var _default = StyledButtonMinor;

package/lib/components/button-toggle/button-toggle.component.js

@@ -106,7 +106,8 @@ const ButtonToggle = ({
     htmlFor: inputGuid,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    size: size
+    size: size,
+    grouped: grouped
   }, /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleContentWrapper, null, icon, children)));
 };
 

package/lib/components/button-toggle/button-toggle.style.d.ts

@@ -10,6 +10,7 @@ export interface StyledButtonToggleLabelProps {
     disabled?: boolean;
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
+    grouped?: boolean;
 }
 declare const StyledButtonToggleLabel: import("styled-components").StyledComponent<"label", any, StyledButtonToggleLabelProps, never>;
 export interface StyledButtonToggleIconProps {