carbon-react 118.1.1 → 118.2.0

package/lib/components/portrait/portrait.component.js

@@ -35,7 +35,7 @@ const Portrait = ({
   gravatar,
   iconType = "individual",
   initials,
-  shape = "square",
+  shape = "circle",
   size = "M",
   src,
   onClick,

package/lib/components/portrait/portrait.style.js

@@ -47,7 +47,7 @@ function stylingForShape({
 }) {
   let cssString = "overflow: hidden;";
   if (shape === "square") cssString += "border-radius: 0px;";
-  if (shape === "circle") cssString += "border-radius: 50%;";
+  if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
   return (0, _styledComponents.css)`
     ${cssString}
   `;
@@ -69,7 +69,6 @@ function stylingForIcon({
   return (0, _styledComponents.css)`
     background-color: ${backgroundColor};
     color: ${color};
-
     ::before {
       font-size: ${params === null || params === void 0 ? void 0 : params.iconDimensions}px;
     }
@@ -90,7 +89,6 @@ const StyledPortraitInitials = _styledComponents.default.div`
   ${stylingForSize}
   ${stylingForShape}
   outline: 1px solid var(--colorsUtilityMajor200);
-
   /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
      to achieve the same styling as Chrome and Firefox */
   @media not all and (min-resolution: 0.001dpcm) {

package/lib/components/profile/profile.component.js

@@ -47,7 +47,7 @@ const Profile = ({
         alt: getInitials(),
         initials: getInitials(),
         size: size,
-        shape: "square",
+        shape: "circle",
         "data-element": "user-image"
       });
     }

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -73,7 +73,7 @@ const StyledProgressBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
@@ -124,7 +124,7 @@ const InnerBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};

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

@@ -54,7 +54,7 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
     }
 
     ${_checkableInputSvgWrapper.default}, svg {
-      border-radius: 50%;
+      border-radius: var(--borderRadiusCircle);
     }
 
     ${_checkableInput.StyledCheckableInput},

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

@@ -29,6 +29,11 @@ const StyledSearchButton = _styledComponents.default.div`
   & ${_button.default} {
     background-color: var(--colorsActionMajor500);
     border-color: var(--colorsActionMajorTransparent);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius050);
+    border-top-right-radius: var(--borderRadius050);
+
     :hover {
       background: var(--colorsActionMajor600);
       border-color: var(--colorsActionMajorTransparent);

package/lib/components/search/search.style.js

@@ -73,6 +73,7 @@ const StyledSearch = _styledComponents.default.div`
         }
       `}
 
+
       ${_input.default} {
         ::-moz-placeholder {
           color: var(--colorsUtilityYin055);
@@ -99,6 +100,12 @@ const StyledSearch = _styledComponents.default.div`
 
       ${_inputPresentation.default} {
         background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
+
+        ${showSearchButton && (0, _styledComponents.css)`
+          border-top-right-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+        `}
+
         flex: 1;
         font-size: 14px;
         font-weight: 700;

package/lib/components/select/select-list/select-list-container.style.js

@@ -26,6 +26,7 @@ const StyledSelectListContainer = _styledComponents.default.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  border-radius: var(--borderRadius050);
 
   ${({
   isLoading

package/lib/components/split-button/split-button-children.style.d.ts

@@ -1,4 +1,5 @@
 import { ThemeObject } from "../../style/themes/base";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";

package/lib/components/split-button/split-button-children.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.borderRadiusStyling = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,7 +17,34 @@ 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 borderRadiusStyling = `
+  > {
+    &:first-child:last-child {
+      border-radius: var(--borderRadius100);
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: var(--borderRadius000);
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-right-radius: var(--borderRadius000);
+      border-top-left-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    }
+  }
+`;
+exports.borderRadiusStyling = borderRadiusStyling;
 const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
+  border-radius: var(--borderRadius100);
   ${({
   theme,
   align,
@@ -29,6 +56,8 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
 
+    ${borderRadiusStyling}
+
     ${_button.default} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: block;

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

@@ -29,6 +29,9 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   displayed,
   size
 }) => (0, _styledComponents.css)`
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+
     ${!disabled && displayed ? (0, _styledComponents.css)`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
@@ -42,7 +45,8 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `position: relative;
+    ${!disabled && buttonType === "primary" && `
+      position: relative;
       &::before {
         content: '';
         width: 2px;
@@ -53,6 +57,7 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
         z-index: 2;
       }  
     `}
+
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

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

@@ -17,13 +17,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const StyledSplitButton = _styledComponents.default.div`
   ${_styledSystem.margin}
-
   display: inline-block;
   position: relative;
 
+  ${_button.default}:first-of-type {
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
   & > ${_button.default} {
     margin: 0;
-
     &:focus {
       border: 3px solid var(--colorsSemanticFocus500);
       outline: none;

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -38,7 +38,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     width: 64px;
     min-width: fit-content;
     z-index: 2;
-    border-radius: 90px;
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
@@ -92,7 +92,6 @@ const StyledSwitchSlider = _styledComponents.default.span`
     `}
 
     ${size === "large" && (0, _styledComponents.css)`
-      border-radius: 30px;
       &::before {
         height: 32px;
         width: 32px;

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

@@ -45,6 +45,17 @@ const StyledTitleContent = _styledComponents.default.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" && (0, _styledComponents.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 && (0, _styledComponents.css)`
@@ -105,8 +116,7 @@ const StyledTitleContent = _styledComponents.default.span`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-    `}
- 
+    `} 
 
     ${(warning || info) && (0, _styledComponents.css)`
       outline: 1px solid;
@@ -225,6 +235,8 @@ exports.StyledTitleContent = StyledTitleContent;
 const tabTitleStyles = (0, _styledComponents.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;
@@ -238,6 +250,14 @@ const tabTitleStyles = (0, _styledComponents.css)`
   position
 }) => position === "top" && "white-space: nowrap"};
 
+  ${({
+  position
+}) => (0, _styledComponents.css)`
+    ${position === "left" && (0, _styledComponents.css)`
+      border-top-right-radius: var(--borderRadius000);
+    `}
+  `}
+
   a:visited {
     color: inherit;
   }

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

@@ -25,6 +25,11 @@ const StyledTabsHeaderWrapper = _styledComponents.default.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 && (0, _styledComponents.css)`
         min-width: 20%;
       `}

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

@@ -19,6 +19,7 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
   background-color: inherit;
+  border-radius: var(--borderRadius050);
   border: none;
   cursor: pointer;
   width: 32px;
@@ -36,10 +37,12 @@ const StyledToolbarButton = _styledComponents.default.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 && (0, _styledComponents.css)`

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

@@ -28,6 +28,8 @@ StyledEditorWrapper.defaultProps = {
   theme: _base.default
 };
 const StyledEditorContainer = _styledComponents.default.div`
+  border-radius: var(--borderRadius050);
+
   ${({
   hasError,
   rows,
@@ -79,6 +81,7 @@ const StyledEditorOutline = _styledComponents.default.div`
   isFocused,
   hasError
 }) => (0, _styledComponents.css)`
+    border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 

package/lib/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/lib/components/tile/tile.component.js

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

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

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

package/lib/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/lib/components/tile-select/tile-select.style.js

@@ -59,6 +59,7 @@ exports.StyledDescription = StyledDescription;
 const StyledTileSelect = _styledComponents.default.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
+
   ${({
   checked
 }) => checked && (0, _styledComponents.css)`
@@ -85,6 +86,9 @@ const StyledFocusWrapper = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
+    border-radius: var(--borderRadius100);
+    overflow: hidden;
+
     ${checked && (0, _styledComponents.css)`
       border-color: var(--colorsActionMajor500);
       z-index: 10;
@@ -102,6 +106,7 @@ const StyledTileSelectContainer = _styledComponents.default.div`
 
   width: 100%;
   position: relative;
+
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
@@ -127,6 +132,9 @@ const StyledAccordionFooterWrapper = _styledComponents.default.div`
   z-index: 200;
   left: -12px;
 
+  border-bottom-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius100);
+
   ${({
   accordionExpanded
 }) => `

package/lib/components/tooltip/tooltip.style.js

@@ -44,6 +44,7 @@ const StyledTooltip = _styledComponents.default.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/lib/components/vertical-menu/vertical-menu.style.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "118.1.1",
+  "version": "118.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",