carbon-react 118.1.1 → 118.2.0

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

@@ -46,6 +46,7 @@ const InputPresentationStyle = styled.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/esm/__internal__/input/input.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 const StyledInput = styled.input`
   background: transparent;
   border: none;
+  border-radius: var(--borderRadius050);
   color: var(--colorsUtilityYin090);
   flex-grow: 1;
   font-size: var(--fontSizes100);

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

@@ -12,6 +12,7 @@ const Menu = styled.div`
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
+  border-radius: var(--borderRadius100);
   background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
@@ -41,6 +42,7 @@ const StyledMenuItem = styled.button`
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     z-index: 1;
+    border-radius: var(--borderRadius000);
   }
 
   ${({
@@ -93,6 +95,7 @@ const ButtonIcon = styled(Icon)`
 const StyledButtonIcon = styled.div`
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius050);
   }
 `;
 const MenuItemIcon = styled(Icon)`

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

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

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

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

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

@@ -11,15 +11,19 @@ const StyledNavigationItem = styled.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 && css`
+          background-color: var(--colorsActionMinor100);
+        `};
     }
 
     ${({

package/esm/components/badge/badge.style.js

@@ -4,7 +4,7 @@ import Button from "../button";
 import Icon from "../icon";
 const commonStyles = `
   overflow: hidden;
-  border-radius: 50%;
+  border-radius: var(--borderRadiusCircle);
   position: absolute;
   top: -11px;
   right: -11px;

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

@@ -9,6 +9,7 @@ const StyledBatchSelection = styled.div`
 }) => css`
     align-items: center;
     display: inline-flex;
+    border-radius: var(--borderRadius100);
 
     ${hidden && "opacity: 0;"}
 
@@ -42,12 +43,17 @@ const StyledBatchSelection = styled.div`
 
     ${StyledIconButton}:hover {
       background-color: var(--colorsActionMajor500);
+      border-radius: var(--borderRadius100);
 
       ${StyledIcon} {
         color: var(--colorsActionMajorYang100);
       }
     }
 
+    ${StyledIconButton}:focus {
+      border-radius: var(--borderRadius100);
+    }
+
     ${disabled && css`
       background: transparent;
       color: var(--colorsUtilityYin030);

package/esm/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/esm/components/box/box.component.js

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

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

@@ -39,14 +39,6 @@ function stylingForType({
   destructive
 }) {
   return css`
-    border: 2px solid transparent;
-    box-sizing: border-box;
-    font-weight: 600;
-    text-decoration: none;
-    &:focus {
-      outline: solid 3px var(--colorsSemanticFocus500);
-    }
-
     ${buttonTypes(disabled, destructive)[buttonType]};
 
     ${size === "small" && css`
@@ -77,11 +69,20 @@ const StyledButton = styled.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/esm/components/button-bar/button-bar.style.js

@@ -26,20 +26,38 @@ const StyledButtonBar = styled.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);
         }
@@ -47,6 +65,7 @@ const StyledButtonBar = styled.div`
           color: white;
         }
       }
+
       & ${StyledIcon} {
         color: var(--colorsActionMajor500);
       }

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

@@ -5,17 +5,19 @@ import StyledLoaderSquare from "../loader/loader-square.style";
 
 function makeColors(color) {
   return `
-  color: ${color};
-  ${StyledIcon} {
     color: ${color};
-  }
-  ${StyledLoaderSquare} {
-    background-color: ${color};
-  }
+    ${StyledIcon} {
+      color: ${color};
+    }
+    ${StyledLoaderSquare} {
+      background-color: ${color};
+    }
   `;
 }
 
 const StyledButtonMinor = styled(Button)`
+  border-radius: var(--borderRadius050);
+
   ${({
   children
 }) => !children && css`
@@ -30,54 +32,54 @@ const StyledButtonMinor = styled(Button)`
   disabled
 }) => !destructive && !disabled && 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
 }) => 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);
+    `}
   `}
 `;
 export default StyledButtonMinor;

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

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

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

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

@@ -38,6 +38,7 @@ const StyledButtonToggleLabel = styled.label`
   position: relative;
   box-sizing: border-box;
   max-width: 100%;
+
   ${({
   size
 }) => css`
@@ -47,19 +48,15 @@ const StyledButtonToggleLabel = styled.label`
   `}
   font-weight: 700;
   cursor: pointer;
-
   border: 1px solid var(--colorsActionMinor500);
-
   ${StyledIcon} {
     color: var(--colorsActionMinor500);
   }
-
   input:checked ~ && {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
     cursor: auto;
   }
-
   input:focus ~ & {
     outline: 3px solid var(--colorsSemanticFocus500);
     z-index: 100;
@@ -69,12 +66,10 @@ const StyledButtonToggleLabel = styled.label`
     background-color: var(--colorsActionMinor200);
     border-color: var(--colorsActionMinor500);
     color: var(--colorsActionMinor500);
-
     ${StyledIcon} {
       color: var(--colorsActionMinor500);
     }
   }
-
   ${({
   buttonIcon,
   buttonIconSize,
@@ -82,19 +77,16 @@ const StyledButtonToggleLabel = styled.label`
 }) => buttonIcon && buttonIconSize === "large" && css`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
-
       ${StyledButtonToggleContentWrapper} {
         flex-direction: column;
       }
     `}
-
   ${({
   disabled
 }) => disabled && css`
       & {
         border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
-
         ${StyledIcon} {
           color: var(--colorsActionMinorYin030);
         }
@@ -110,24 +102,20 @@ const StyledButtonToggleIcon = styled.div`
   ${({
   hasContent
 }) => hasContent && `margin-right: 8px;`}
-
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && css`
       margin-right: 0;
-
       ${StyledIcon} {
         margin-right: 0;
         margin-bottom: 8px;
         height: ${`${iconFontSizes.largeIcon}px`};
         width: ${`${iconFontSizes.largeIcon}px`};
       }
-
       ${StyledIcon}::before {
         font-size: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
         line-height: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
       }
-
       .carbon-icon__svg--credit-card-slash {
         margin-left: 6px;
       }
@@ -137,6 +125,36 @@ const StyledButtonToggle = styled.div`
   display: inline-block;
   vertical-align: middle;
 
+  ${({
+  grouped
+}) => css`
+      ${!grouped && css`
+        &&&& {
+          ${StyledButtonToggleLabel} {
+            border-radius: var(--borderRadius400);
+          }
+        }
+      `}
+
+      ${grouped && css`
+        &&&& {
+          :first-of-type {
+            ${StyledButtonToggleLabel} {
+              border-top-left-radius: var(--borderRadius400);
+              border-bottom-left-radius: var(--borderRadius400);
+            }
+          }
+
+          :last-of-type {
+            ${StyledButtonToggleLabel} {
+              border-top-right-radius: var(--borderRadius400);
+              border-bottom-right-radius: var(--borderRadius400);
+            }
+          }
+        }
+      `}
+    `}
+
   &:not(:first-of-type) {
     margin-left: 8px;
   }

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

@@ -4,6 +4,24 @@ import ValidationIconStyle from "../../__internal__/validations/validation-icon.
 const StyledButtonToggleGroup = styled.div`
   display: flex;
 
+  ${StyledButtonToggleLabel}:not(:first-of-type):not(:last-of-type) {
+    border-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:first-of-type ${StyledButtonToggleLabel} {
+    border-top-left-radius: var(--borderRadius400);
+    border-bottom-left-radius: var(--borderRadius400);
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:last-of-type ${StyledButtonToggleLabel} {
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-right-radius: var(--borderRadius400);
+    border-bottom-right-radius: var(--borderRadius400);
+  }
+
   ${({
   fullWidth
 }) => fullWidth && css`
@@ -13,20 +31,20 @@ const StyledButtonToggleGroup = styled.div`
       ${StyledButtonToggle} {
         flex: auto;
       }
-    `};
+    `}
 
   ${({
   inputWidth
 }) => inputWidth && css`
       width: ${`${inputWidth}%`};
-    `};
+    `}
 
   ${StyledButtonToggleLabel} {
     ${({
   info
 }) => info && css`
         border-color: var(--colorsSemanticInfo500);
-      `};
+      `}
     ${({
   warning
 }) => warning && css`

package/esm/components/card/__internal__/card-context/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface CardContextProps {
+    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
+    roundness?: "default" | "large";
+}
+declare const _default: React.Context<CardContextProps>;
+export default _default;

package/esm/components/card/__internal__/card-context/index.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

package/esm/components/card/card-footer/card-footer.component.js

@@ -1,9 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
+import CardContext from "../__internal__/card-context";
 
 const CardFooter = ({
   spacing = "medium",
@@ -11,12 +12,17 @@ const CardFooter = ({
   variant = "default",
   ...rest
 }) => {
+  const {
+    roundness
+  } = useContext(CardContext);
   return /*#__PURE__*/React.createElement(StyledCardFooter, _extends({
     key: "card-footer",
     "data-element": "card-footer",
     spacing: spacing,
     variant: variant
-  }, filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
+  }, filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest), {
+    roundness: roundness
+  }), children);
 };
 
 CardFooter.propTypes = {
@@ -329,6 +335,7 @@ CardFooter.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "roundness": PropTypes.oneOf(["default", "large"]),
   "spacing": PropTypes.oneOf(["large", "medium", "small"]),
   "variant": PropTypes.oneOf(["default", "transparent"])
 };

package/esm/components/card/card-footer/card-footer.style.d.ts

@@ -1,6 +1,7 @@
 import { SpaceProps } from "styled-system";
 import { CardSpacing } from "../card.config";
-export interface StyledCardFooterProps extends SpaceProps {
+import { CardContextProps } from "../__internal__/card-context";
+export interface StyledCardFooterProps extends SpaceProps, CardContextProps {
     /** Predefined size of CardFooter for applying padding. For more granular control, this prop can be over-ridden by the spacing props from styled-system */
     spacing: CardSpacing;
     /** Specify styling variant to render */

package/esm/components/card/card-footer/card-footer.style.js

@@ -16,7 +16,8 @@ const StyledCardFooter = styled.div`
 
   ${({
   spacing,
-  variant
+  variant,
+  roundness = "default"
 }) => css`
     background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
     border-top: var(--colorsUtilityMajor100);
@@ -26,6 +27,14 @@ const StyledCardFooter = styled.div`
     font-weight: 700;
     margin: ${marginSizes[spacing]};
     display: flex;
+    ${roundness === "default" && css`
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    `}
+    ${roundness === "large" && css`
+      border-bottom-left-radius: var(--borderRadius200);
+      border-bottom-right-radius: var(--borderRadius200);
+    `}
 
     ${StyledCardColumn} {
       margin: 0;

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

@@ -1,10 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { CardContextProps } from "./__internal__/card-context";
 import { CardSpacing } from "./card.config";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface CardProps extends MarginProps {
+export interface CardProps extends MarginProps, CardContextProps {
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -34,7 +35,7 @@ export interface CardProps extends MarginProps {
     hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, roundness, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;