carbon-react 118.1.1 → 118.2.1

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;

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

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

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../../style/utils");
 
+var _cardContext = _interopRequireDefault(require("./__internal__/card-context"));
+
 var _card = _interopRequireDefault(require("./card.style"));
 
 var _icon = _interopRequireDefault(require("../icon"));
@@ -46,6 +48,7 @@ const Card = ({
   spacing = "medium",
   boxShadow,
   hoverBoxShadow,
+  roundness = "default",
   ...rest
 }) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -86,9 +89,15 @@ const Card = ({
   }, interactive && {
     tabIndex: 0,
     type: "button"
+  }, {
+    roundness: roundness
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), draggable && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "drag"
-  }), renderChildren());
+  }), /*#__PURE__*/_react.default.createElement(_cardContext.default.Provider, {
+    value: {
+      roundness
+    }
+  }, renderChildren()));
 };
 
 Card.propTypes = {
@@ -257,6 +266,7 @@ Card.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"])
 };
 Card.displayName = "Card";

package/lib/components/card/card.style.d.ts

@@ -1,9 +1,10 @@
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+import { CardContextProps } from "./__internal__/card-context";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface StyledCardProps extends MarginProps {
+export interface StyledCardProps extends MarginProps, CardContextProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;

package/lib/components/card/card.style.js

@@ -30,10 +30,12 @@ const StyledCard = _styledComponents.default.div`
   height,
   spacing,
   boxShadow = "boxShadow050",
-  hoverBoxShadow = "boxShadow100"
+  hoverBoxShadow = "boxShadow100",
+  roundness
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: none;
+    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
     box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
     display: flex;

package/lib/components/carousel/carousel.component.js

@@ -57,7 +57,7 @@ const Carousel = ({
     const isTheSameIndex = newIndex === lastSlideIndexProp.current || newIndex === selectedSlideIndex;
     if (isNewIndexUndefined || isTheSameIndex) return;
 
-    if (newIndex > selectedSlideIndex) {
+    if (Number(newIndex) > Number(selectedSlideIndex)) {
       transitionDirection.current = NEXT;
     } else {
       transitionDirection.current = PREVIOUS;

package/lib/components/carousel/carousel.style.js

@@ -22,7 +22,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const CarouselNavigationStyle = _styledComponents.default.div`
   margin-top: -32.5px;
   position: absolute;
-  top: 50%;
+  top: 52%;
   z-index: 20;
 `;
 exports.CarouselNavigationStyle = CarouselNavigationStyle;
@@ -58,8 +58,9 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
   disabled
 }) => (0, _styledComponents.css)`
     border: none;
+    border-radius: var(--borderRadius400);
     width: 40px;
-    height: 64px;
+    height: 40px;
     border-width: var(--borderWidth200);
     border-color: var(--colorsActionMajorTransparent);
     background-color: ${disabled ? "var(--colorsActionDisabled500)" : "var(--colorsActionMajor500)"};
@@ -108,6 +109,7 @@ const CarouselSelectorInputStyle = _styledComponents.default.input`
 exports.CarouselSelectorInputStyle = CarouselSelectorInputStyle;
 const CarouselSelectorLabelStyle = _styledComponents.default.label`
   display: inline-block;
+  border-radius: var(--borderRadius100);
   width: 10px;
   height: 10px;
   background: var(--colorsActionMinor200);

package/lib/components/carousel/slide/slide.style.js

@@ -19,6 +19,8 @@ const SlideStyle = _styledComponents.default.div`
     display: inline-block;
     width: 100%;
     z-index: 10;
+    border-radius: var(--borderRadius200);
+    overflow: hidden;
 
     transition: 0.5s;
     min-width: 80%;

package/lib/components/checkbox/checkbox.style.js

@@ -78,6 +78,8 @@ const StyledCheckbox = _styledComponents.default.div`
       box-sizing: border-box;
       min-width: 16px;
       width: 16px;
+      border-radius: var(--borderRadius025);
+      ${size === "large" && `border-radius: var(--borderRadius050)`};
     }
 
     // prettier-ignore

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

@@ -207,6 +207,7 @@ const StyledDayPicker = _styledComponents.default.div`
     padding: var(--spacing300);
     text-align: center;
     user-select: none;
+    border-radius: var(--borderRadius050);
   }
 
   .DayPicker * {
@@ -226,6 +227,7 @@ const StyledDayPicker = _styledComponents.default.div`
     padding: 0;
     &:focus {
       outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      border-radius: var(--borderRadius050);
     }
   }
 
@@ -264,6 +266,7 @@ const StyledDayPicker = _styledComponents.default.div`
     font-weight: var(--fontWeights700);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);
+    border-radius: var(--borderRadius400);
 
     &:hover {
       background-color: var(--colorsActionMinor050);
@@ -308,6 +311,7 @@ const StyledDayPicker = _styledComponents.default.div`
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
+    border-radius: var(--borderRadius400);
   }
 
   .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {

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

@@ -23,6 +23,8 @@ const StyledButton = _styledComponents.default.button.attrs({
   width: var(--sizing500);
   padding: var(--spacing150);
   box-sizing: border-box;
+  border-radius: var(--borderRadius050);
+
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }

package/lib/components/dialog/dialog.style.js

@@ -48,6 +48,7 @@ const StyledDialog = _styledComponents.default.div`
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
+  border-radius: var(--borderRadius200);
   position: fixed;
   top: 50%;
   z-index: ${({
@@ -85,6 +86,8 @@ const StyledDialog = _styledComponents.default.div`
   ${_form.StyledFormFooter}.sticky {
     ${_formStyleUtils.calculateWidthValue}
     ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, false)}
+    border-bottom-right-radius: var(--borderRadius200);
+    border-bottom-left-radius: var(--borderRadius200);
   }
 
   > ${_iconButton.default} {
@@ -104,6 +107,8 @@ const StyledDialogTitle = _styledComponents.default.div`
   background-color: var(--colorsUtilityYang100);
   padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
+  border-top-right-radius: var(--borderRadius200);
+  border-top-left-radius: var(--borderRadius200);
   ${({
   showCloseIcon
 }) => showCloseIcon && "padding-right: 85px"};

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

@@ -13,5 +13,5 @@ export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxPro
      * Please note this component has a minWidth of 600px */
     width?: number | string;
 }
-export declare const DismissibleBox: ({ children, onClose, ...rest }: DismissibleBoxProps) => JSX.Element;
+export declare const DismissibleBox: ({ children, onClose, borderRadius, ...rest }: DismissibleBoxProps) => JSX.Element;
 export default DismissibleBox;

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

@@ -22,10 +22,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const DismissibleBox = ({
   children,
   onClose,
+  borderRadius = "borderRadius100",
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_dismissibleBox.StyledDismissibleBox, _extends({
   p: "20px 24px 20px 20px",
-  "data-component": "dismissible-box"
+  "data-component": "dismissible-box",
+  borderRadius: borderRadius
 }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
   "data-element": "close-button-wrapper"
 }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -378,6 +380,7 @@ DismissibleBox.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "borderRadius": _propTypes.default.any,
   "bottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,

package/lib/components/drawer/drawer.style.js

@@ -208,6 +208,7 @@ const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
     border: none;
     z-index: 1;
     animation: ${buttonClose} ${animationDuration} ease-in-out;
+    border-radius: var(--borderRadius050);
 
     &:focus {
       outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -20,6 +20,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 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; }
 
 const StyledPicklistItem = _styledComponents.default.li`
+  border-radius: var(--borderRadius100);
   ${({
   locked
 }) => (0, _styledComponents.css)`
@@ -49,6 +50,25 @@ const StyledPicklistItem = _styledComponents.default.li`
 `;
 exports.StyledPicklistItem = StyledPicklistItem;
 const StyledButton = (0, _styledComponents.default)(_button.default)`
+  border-bottom-right-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius000);
+  border-top-left-radius: var(--borderRadius000);
+
+  :hover {
+    border-bottom-right-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+  }
+
+  :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);
+  }
+
   ${({
   iconType
 }) => (0, _styledComponents.css)`

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

@@ -210,6 +210,13 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             pointer-events: none;
           }
 
+          :last-child {
+            :after {
+              border-bottom-left-radius: var(--borderRadius100);
+              border-bottom-right-radius: var(--borderRadius100);
+            }
+          }
+
           :first-child {
             :after {
               top: 0px;