carbon-react 118.1.0 → 118.2.0

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 {

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

@@ -54,6 +54,7 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
   position: relative;
   box-sizing: border-box;
   max-width: 100%;
+
   ${({
   size
 }) => (0, _styledComponents.css)`
@@ -63,19 +64,15 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
   `}
   font-weight: 700;
   cursor: pointer;
-
   border: 1px solid var(--colorsActionMinor500);
-
   ${_icon.default} {
     color: var(--colorsActionMinor500);
   }
-
   input:checked ~ && {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
     cursor: auto;
   }
-
   input:focus ~ & {
     outline: 3px solid var(--colorsSemanticFocus500);
     z-index: 100;
@@ -85,12 +82,10 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     background-color: var(--colorsActionMinor200);
     border-color: var(--colorsActionMinor500);
     color: var(--colorsActionMinor500);
-
     ${_icon.default} {
       color: var(--colorsActionMinor500);
     }
   }
-
   ${({
   buttonIcon,
   buttonIconSize,
@@ -98,19 +93,16 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
 }) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
-
       ${StyledButtonToggleContentWrapper} {
         flex-direction: column;
       }
     `}
-
   ${({
   disabled
 }) => disabled && (0, _styledComponents.css)`
       & {
         border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
-
         ${_icon.default} {
           color: var(--colorsActionMinorYin030);
         }
@@ -127,24 +119,20 @@ const StyledButtonToggleIcon = _styledComponents.default.div`
   ${({
   hasContent
 }) => hasContent && `margin-right: 8px;`}
-
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && (0, _styledComponents.css)`
       margin-right: 0;
-
       ${_icon.default} {
         margin-right: 0;
         margin-bottom: 8px;
         height: ${`${iconFontSizes.largeIcon}px`};
         width: ${`${iconFontSizes.largeIcon}px`};
       }
-
       ${_icon.default}::before {
         font-size: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
         line-height: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
       }
-
       .carbon-icon__svg--credit-card-slash {
         margin-left: 6px;
       }
@@ -155,6 +143,36 @@ const StyledButtonToggle = _styledComponents.default.div`
   display: inline-block;
   vertical-align: middle;
 
+  ${({
+  grouped
+}) => (0, _styledComponents.css)`
+      ${!grouped && (0, _styledComponents.css)`
+        &&&& {
+          ${StyledButtonToggleLabel} {
+            border-radius: var(--borderRadius400);
+          }
+        }
+      `}
+
+      ${grouped && (0, _styledComponents.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/lib/components/button-toggle-group/button-toggle-group.style.js

@@ -20,6 +20,24 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledButtonToggleGroup = _styledComponents.default.div`
   display: flex;
 
+  ${_buttonToggle.StyledButtonToggleLabel}:not(:first-of-type):not(:last-of-type) {
+    border-radius: var(--borderRadius000);
+  }
+
+  ${_buttonToggle.StyledButtonToggle}:first-of-type ${_buttonToggle.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);
+  }
+
+  ${_buttonToggle.StyledButtonToggle}:last-of-type ${_buttonToggle.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 && (0, _styledComponents.css)`
@@ -29,20 +47,20 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       ${_buttonToggle.StyledButtonToggle} {
         flex: auto;
       }
-    `};
+    `}
 
   ${({
   inputWidth
 }) => inputWidth && (0, _styledComponents.css)`
       width: ${`${inputWidth}%`};
-    `};
+    `}
 
   ${_buttonToggle.StyledButtonToggleLabel} {
     ${({
   info
 }) => info && (0, _styledComponents.css)`
         border-color: var(--colorsSemanticInfo500);
-      `};
+      `}
     ${({
   warning
 }) => warning && (0, _styledComponents.css)`

package/lib/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/lib/components/card/__internal__/card-context/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = /*#__PURE__*/_react.default.createContext({});
+
+exports.default = _default;

package/lib/components/card/__internal__/card-context/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/card/__internal__/card-context/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,8 +13,14 @@ var _utils = require("../../../style/utils");
 
 var _cardFooter = _interopRequireDefault(require("./card-footer.style"));
 
+var _cardContext = _interopRequireDefault(require("../__internal__/card-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
 
 const CardFooter = ({
@@ -23,12 +29,17 @@ const CardFooter = ({
   variant = "default",
   ...rest
 }) => {
+  const {
+    roundness
+  } = (0, _react.useContext)(_cardContext.default);
   return /*#__PURE__*/_react.default.createElement(_cardFooter.default, _extends({
     key: "card-footer",
     "data-element": "card-footer",
     spacing: spacing,
     variant: variant
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), {
+    roundness: roundness
+  }), children);
 };
 
 CardFooter.propTypes = {
@@ -341,6 +352,7 @@ CardFooter.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "roundness": _propTypes.default.oneOf(["default", "large"]),
   "spacing": _propTypes.default.oneOf(["large", "medium", "small"]),
   "variant": _propTypes.default.oneOf(["default", "transparent"])
 };

package/lib/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/lib/components/card/card-footer/card-footer.style.js

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